From 81064932165bb39a03d4271d9032e1fd83e8b222 Mon Sep 17 00:00:00 2001
From: f4ilji <F4ilji@yandex.ru>
Date: Fri, 10 Jan 2025 15:45:31 +0500
Subject: [PATCH] Changes

---
 .../Controllers/ClientScheduleController.php  |   1 +
 .../ClientEducationalGroupResource.php        |   1 +
 resources/js/Components/other/icons.js        |  12 +-
 resources/js/Pages/Client/Schedules/Index.vue | 242 ++++++++++++++----
 4 files changed, 203 insertions(+), 53 deletions(-)

diff --git a/app/Http/Controllers/ClientScheduleController.php b/app/Http/Controllers/ClientScheduleController.php
index 274103a..8e262dc 100644
--- a/app/Http/Controllers/ClientScheduleController.php
+++ b/app/Http/Controllers/ClientScheduleController.php
@@ -23,6 +23,7 @@ class ClientScheduleController extends Controller
                     $query->whereRaw('LOWER(title) like ?', ["%".strtolower($search)."%"]);
                 })
                 ->with('schedules')
+                ->with('faculty')
                 ->orderBy('title')
                 ->get());
         }
diff --git a/app/Http/Resources/ClientEducationalGroupResource.php b/app/Http/Resources/ClientEducationalGroupResource.php
index a761753..fcee93b 100644
--- a/app/Http/Resources/ClientEducationalGroupResource.php
+++ b/app/Http/Resources/ClientEducationalGroupResource.php
@@ -18,6 +18,7 @@ class ClientEducationalGroupResource extends JsonResource
             'id' => $this->id,
             'title' => $this->title,
             'schedules' => ClientScheduleSearchResource::collection($this->schedules),
+            'faculty' => $this->faculty->title,
         ];
     }
 }
diff --git a/resources/js/Components/other/icons.js b/resources/js/Components/other/icons.js
index ca1e386..3effc79 100644
--- a/resources/js/Components/other/icons.js
+++ b/resources/js/Components/other/icons.js
@@ -62,7 +62,17 @@ export default {
         stroke_width: 1.5,
         stroke: 'currentColor',
     },
-    home: {
+    heart_filled: {
+        path: '<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"/>',
+        viewBox: '0 0 24 24',
+        fill: 'red', // Заливка красным цветом
+        // stroke_width: 1.5,
+        // stroke: 'currentColor',
+    },
+
+
+
+home: {
         path: '<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>',
         viewBox: '0 0 24 24',
         fill: 'none',
diff --git a/resources/js/Pages/Client/Schedules/Index.vue b/resources/js/Pages/Client/Schedules/Index.vue
index c74d0a8..c03bb99 100644
--- a/resources/js/Pages/Client/Schedules/Index.vue
+++ b/resources/js/Pages/Client/Schedules/Index.vue
@@ -1,18 +1,19 @@
 <script>
 import MainNavbar from "@/Navbars/MainNavbar.vue";
 import ClientFooterDown from "@/Components/ClientFooterDown.vue";
-import {debounce} from "lodash";
-import {Link} from "@inertiajs/vue3";
+import { debounce } from "lodash";
+import { Link } from "@inertiajs/vue3";
 import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
 import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
 
-
 export default {
 	name: "Index",
 	data() {
 		return {
 			searchInput: this.searchRequest,
-		}
+			favoriteGroups: JSON.parse(localStorage.getItem('favoriteGroups')) || [],
+			showFavorites: false,
+		};
 	},
 	components: {BaseIcon, MainPageNavBar, ClientFooterDown, MainNavbar, Link},
 	props: [
@@ -32,9 +33,31 @@ export default {
 				replace: true,
 			});
 		}, 300),
+		toggleFavorite(group) {
+			const index = this.favoriteGroups.findIndex(g => g.id === group.id);
+			if (index === -1) {
+				this.favoriteGroups.push(group);
+			} else {
+				this.favoriteGroups.splice(index, 1);
+			}
+			localStorage.setItem('favoriteGroups', JSON.stringify(this.favoriteGroups));
+		},
+		isFavorite(group) {
+			return this.favoriteGroups.some(g => g.id === group.id);
+		},
+		toggleShowFavorites() {
+			this.showFavorites = !this.showFavorites;
+		},
 	},
-
-}
+	computed: {
+		filteredGroups() {
+			if (this.showFavorites) {
+				return this.educationalGroups.data.filter(group => this.favoriteGroups.some(g => g.id === group.id));
+			}
+			return this.educationalGroups.data;
+		},
+	},
+};
 </script>
 
 <template>
@@ -51,13 +74,13 @@ export default {
 									Расписание занятий
 								</h1>
 
+
 								<div class="text-center">
 									<p class="mt-3 text-gray-600 dark:text-gray-400">
 										Просто введите название группы
 									</p>
 								</div>
 
-
 								<div class="mt-7 sm:mt-12 mx-auto max-w-xl relative space-y-4">
 									<!-- Form -->
 									<form>
@@ -68,82 +91,197 @@ export default {
 																 class="block text-sm text-gray-700 font-medium dark:text-white">
 														<span class="sr-only">Поиск</span>
 													</label>
-													<input @keydown.enter.prevent autocomplete="off" v-model="searchInput" @input="search" type="search"
-																 id="hs-search-article-1"
-																 class="py-2.5 px-4 block w-full border-transparent rounded-lg"
-																 placeholder="Поиск">
+													<input
+															@keydown.enter.prevent
+															autocomplete="off"
+															v-model="searchInput"
+															@input="search"
+															type="search"
+															id="hs-search-article-1"
+															class="py-2.5 px-4 block w-full border-transparent rounded-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-100"
+															placeholder="Поиск"
+															:disabled="showFavorites"
+													>
 												</div>
 											</div>
 										</div>
 									</form>
 									<div class="">
 										<div class="grid grid-cols-2 gap-3">
-											<button type="button" class="flex w-full py-2 px-4 items-center gap-x-2 text-xs font-medium rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
-												<BaseIcon name="heart" class="shrink-0 size-4" />
+											<button @click="toggleShowFavorites" type="button"
+															:class="showFavorites ? 'bg-primaryBlue text-white hover:bg-secondDarkBlue' : 'text-gray-700 hover:bg-gray-100'"
+															class="flex w-full py-2 px-4 items-center gap-x-2 text-xs font-medium rounded-lg border border-gray-200 focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
+												<BaseIcon name="heart" class="shrink-0 size-4"/>
 												<span>Избранные расписания</span>
 											</button>
-											<button type="button" class="flex w-full py-2 px-4 items-center gap-x-2 text-xs font-medium rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
-												<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
+											<button type="button"
+															class="flex w-full py-2 px-4 items-center gap-x-2 text-xs font-medium rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-primaryBlue focus:text-white disabled:opacity-50 disabled:pointer-events-none">
+												<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+														 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+														 stroke-linecap="round" stroke-linejoin="round">
+													<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+													<circle cx="9" cy="7" r="4"/>
+													<line x1="19" x2="19" y1="8" y2="14"/>
+													<line x1="22" x2="16" y1="11" y2="11"/>
+												</svg>
 												<span>Follow</span>
 											</button>
 										</div>
 									</div>
 								</div>
-
 							</div>
 						</div>
 					</div>
 
 					<div class="mx-auto max-w-2xl hs-accordion-group grid grid-cols-1 lg:grid-cols-2 gap-3">
-						<transition-group name="fade">
-							<template v-for="educationalGroup in educationalGroups.data" :key="educationalGroup.id">
-								<div class="hs-accordion hs-accordion-active:border-gray-200 bg-white border-b dark:hs-accordion-active:border-gray-700 dark:bg-gray-800 dark:border-transparent"
-										 id="hs-active-bordered-heading-one">
-									<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-5 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:text-gray-400"
+						<div v-if="!showFavorites">
+							<transition-group name="fade">
+								<template v-for="educationalGroup in filteredGroups" :key="educationalGroup.id">
+									<div
+											class="hs-accordion hs-accordion-active:border-gray-200 bg-white border-b dark:hs-accordion-active:border-gray-700 dark:bg-gray-800 dark:border-transparent"
+											id="hs-active-bordered-heading-one">
+										<div class="flex">
+											<button @click="toggleFavorite(educationalGroup)">
+												<transition name="heart" mode="out-in">
+													<BaseIcon
+															v-if="isFavorite(educationalGroup)"
+															name="heart_filled"
+															class="shrink-0 size-4 text-red-500"
+															key="filled"
+													/>
+													<BaseIcon
+															v-else
+															name="heart"
+															class="shrink-0 size-4"
+															key="outline"
+													/>
+												</transition>
+
+											</button>
+
+											<button
+													class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-5 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:text-gray-400"
 													aria-controls="hs-basic-active-bordered-collapse-one">
-										{{ educationalGroup.title }}
-										<svg class="hs-accordion-active:hidden block w-3.5 h-3.5"
-												 xmlns="http://www.w3.org/2000/svg"
-												 width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-												 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-											<path d="M5 12h14"/>
-											<path d="M12 5v14"/>
-										</svg>
-										<svg class="hs-accordion-active:block hidden w-3.5 h-3.5"
-												 xmlns="http://www.w3.org/2000/svg"
-												 width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-												 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-											<path d="M5 12h14"/>
-										</svg>
-									</button>
-									<div id="hs-basic-active-bordered-collapse-one"
-											 class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
-											 aria-labelledby="hs-active-bordered-heading-one">
-										<div class="pb-4 px-5 grid gap-3 grid-cols-1">
-											<template v-for="schedule in educationalGroup.schedules" :key="schedule.id">
-												<template v-for="file in schedule.file">
-													<a :href="'storage/' + file.path" target="_blank" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
-														{{ file.title }}
-													</a>
+
+												<div class="flex items-center gap-x-2"><span>{{ educationalGroup.title }}</span> <span
+														class="font-light text-sm uppercase text-gray-500">{{ educationalGroup.faculty }}</span></div>
+												<svg class="hs-accordion-active:hidden block w-3.5 h-3.5"
+														 xmlns="http://www.w3.org/2000/svg"
+														 width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+														 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+													<path d="M5 12h14"/>
+													<path d="M12 5v14"/>
+												</svg>
+												<svg class="hs-accordion-active:block hidden w-3.5 h-3.5"
+														 xmlns="http://www.w3.org/2000/svg"
+														 width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+														 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+													<path d="M5 12h14"/>
+												</svg>
+											</button>
+										</div>
+										<div id="hs-basic-active-bordered-collapse-one"
+												 class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
+												 aria-labelledby="hs-active-bordered-heading-one">
+											<div class="pb-4 px-5 grid gap-3 grid-cols-1">
+												<template v-for="schedule in educationalGroup.schedules" :key="schedule.id">
+													<template v-for="file in schedule.file">
+														<a :href="'storage/' + file.path" target="_blank"
+															 class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
+															{{ file.title }}
+														</a>
+													</template>
 												</template>
-											</template>
-
-
+											</div>
 										</div>
 									</div>
-								</div>
-							</template>
-						</transition-group>
+								</template>
+							</transition-group>
+						</div>
+						<div v-else>
+							<transition-group name="fade">
+								<template v-for="educationalGroup in favoriteGroups" :key="educationalGroup.id">
+									<div
+											class="hs-accordion hs-accordion-active:border-gray-200 bg-white border-b dark:hs-accordion-active:border-gray-700 dark:bg-gray-800 dark:border-transparent"
+											id="hs-active-bordered-heading-one">
+										<div class="flex">
+											<button @click="toggleFavorite(educationalGroup)">
+												<transition name="heart" mode="out-in">
+													<BaseIcon
+															v-if="isFavorite(educationalGroup)"
+															name="heart_filled"
+															class="shrink-0 size-4 text-red-500"
+															key="filled"
+													/>
+													<BaseIcon
+															v-else
+															name="heart"
+															class="shrink-0 size-4"
+															key="outline"
+													/>
+												</transition>
+
+											</button>
+
+											<button
+													class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-5 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:text-gray-400"
+													aria-controls="hs-basic-active-bordered-collapse-one">
+
+												<div class="flex items-center gap-x-2"><span>{{ educationalGroup.title }}</span> <span
+														class="font-light text-sm uppercase text-gray-500">{{ educationalGroup.faculty }}</span></div>
+												<svg class="hs-accordion-active:hidden block w-3.5 h-3.5"
+														 xmlns="http://www.w3.org/2000/svg"
+														 width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+														 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+													<path d="M5 12h14"/>
+													<path d="M12 5v14"/>
+												</svg>
+												<svg class="hs-accordion-active:block hidden w-3.5 h-3.5"
+														 xmlns="http://www.w3.org/2000/svg"
+														 width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+														 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+													<path d="M5 12h14"/>
+												</svg>
+											</button>
+										</div>
+										<div id="hs-basic-active-bordered-collapse-one"
+												 class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
+												 aria-labelledby="hs-active-bordered-heading-one">
+											<div class="pb-4 px-5 grid gap-3 grid-cols-1">
+												<template v-for="schedule in educationalGroup.schedules" :key="schedule.id">
+													<template v-for="file in schedule.file">
+														<a :href="'storage/' + file.path" target="_blank"
+															 class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
+															{{ file.title }}
+														</a>
+													</template>
+												</template>
+											</div>
+										</div>
+									</div>
+								</template>
+							</transition-group>
+						</div>
 					</div>
 				</article>
 			</div>
 		</main>
 		<ClientFooterDown/>
 	</div>
-
 </template>
 
 <style scoped>
+
+
+.heart-enter-active,
+.heart-leave-active {
+	transition: opacity 0.1s ease;
+}
+
+.heart-enter-from,
+.heart-leave-to {
+	opacity: 0;
+}
 .fade-enter-active,
 .fade-leave-active {
 	transition: all 0.5s ease;