Changes

resources/js/Pages/Client/Additional-educations/Index.vue

@@ -12,10 +12,19 @@ import ClientPost from '@/Components/ClientPost.vue';
 import ClientPostSearch from '@/Components/ClientPostSearch.vue';
 import ClientImageSlider from "@/Components/ClientImageSlider.vue";
 import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
+import LevelEduFilter from "@/Components/BuilderUi/AdditionalEducationPrograms/Filters/LevelEduFilter.vue";
+import ClientAdditionalProgramFilter
+	from "@/Components/BuilderUi/AdditionalEducationPrograms/ClientAdditionalProgramFilter.vue";
+import PostBadge from "@/Components/BuilderUi/Events/EventBadgeBuilder.vue";
+import ProgramBadge from "@/Components/BuilderUi/AdditionalEducationPrograms/ProgramBadge.vue";
 
 export default {
   name: "Index",
   components: {
+		ProgramBadge,
+		PostBadge,
+		ClientAdditionalProgramFilter,
+		LevelEduFilter,
 		MainPageNavBar,
 		ClientImageSlider,
     AdminIndexHeaderTitle, AdminIndexHeader,
@@ -44,6 +53,12 @@ export default {
 		filters: {
 			type: Object
 		},
+		forms_education: {
+			type: Object
+		},
+		categories: {
+			type: Object
+		}
   },
   methods: {
 		transformToColumns(originalArray) {
@@ -82,36 +97,33 @@ export default {
 	<div class="flex flex-col h-screen">
 		<main class="flex-grow">
 			<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:py-10">
-				<div class="w-100">
-					<div>
-						<!-- Avatar Media -->
-						<!-- End Avatar Media -->
-						<!-- Content -->
+				<div class="">
+					<div class="">
 						<div class="space-y-5 md:space-y-4">
 							<h1 class="text-brand-primary text-center mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
 								Дополнительное образование
 
 							</h1>
-							<div class="space-y-5 md:space-y-4">
+							<div class="space-y-5 md:space-y-4 mx-auto max-w-3xl">
 								<div>
 									<div class="">
-										<nav class="-mb-0.5 flex justify-center space-x-6 flex-wrap">
-											<Link :class="{ 'border-blue-500 text-blue-600': this.direction_id === null, 'text-gray-500 border-transparent': this.direction_id !== null }"
-														:href="route('client.additionalEducation.index')"
-														class="py-2 px-1 inline-flex items-center gap-2 border-b text-sm whitespace-nowrap hover:text-blue-600 focus:outline-none focus:text-blue-600">
-												Все программы
-											</Link>
-											<template v-for="direction in directionAdditionalEducations.data">
-												<Link :class="{ 'border-blue-500 text-blue-600': direction.id == this.filters.dir_id, 'text-gray-500 border-transparent': direction.id != this.direction_id }"
-															:href="route('client.additionalEducation.index', { dir_id: direction.id })"
-															class="py-2 px-1 inline-flex items-center gap-2 border-b text-sm whitespace-nowrap hover:text-blue-600 focus:outline-none focus:text-blue-600">
-													{{ direction.title }}
-												</Link>
-											</template>
-										</nav>
+										<div class="my-10 flex items-center w-full gap-x-2">
+											<LevelEduFilter :directions="directionAdditionalEducations" :direction_filter="filters.direction_filter" />
+											<ClientAdditionalProgramFilter
+													:forms_educational="forms_education"
+													:form_education_filter="filters.form_education_filter"
+													:category_filter="filters.category_filter"
+													:categories="categories"
+											/>
+										</div>
+										<div class="px-2 mx-auto">
+											<div class="flex-wrap flex gap-3 md:items-center">
+												<ProgramBadge :filters="this.filters" />
+											</div>
+										</div>
 									</div>
-									<div class="container mx-auto xl:px-5 py-5 lg:py-4">
-										<div class="w-full mx-auto gap-x3 flex flex-wrap lg:justify-center">
+									<div class="container py-5 lg:py-4">
+										<div class="w-full mx-auto flex flex-wrap lg:justify-between">
 											<template v-for="educations in transformToColumns(this.additionalEducations.data)">
 												<div class="flex flex-col">
 													<template v-for="education in educations">
@@ -120,7 +132,7 @@ export default {
 																{{ education.title }}
 															</h1>
 															<template v-for="program in education.additionalEducations" :key="program.id">
-																<Link class="block text-[#1E57A3] hover:text-blue-600 duration-200 text-sm underline underline-offset-2 py-1" :href="route('client.additionalEducation.show', program)">{{ program.title }}</Link>
+																<Link class="block text-[#1E57A3] hover:text-blue-600 duration-200 text-sm underline underline-offset-2 py-1" :href="route('client.additionalEducation.show', program.slug)">{{ program.title }}</Link>
 															</template>
 														</div>
 													</template>
@@ -131,10 +143,6 @@ export default {
 								</div>
 							</div>
 						</div>
-
-
-
-						<!-- End Content -->
 					</div>
 				</div>
 			</div>