Rework frontend

resources/js/Pages/Client/Programs/Index.vue

@@ -1,54 +1,31 @@
 <script>
-import MainNavbar from "@/Navbars/MainNavbar.vue";
 import {Head, Link} from "@inertiajs/vue3";
-import FsLightbox from "fslightbox-vue/v3";
-import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
-import ClientFooterDown from "@/Components/ClientFooterDown.vue";
-import AdminIndexSearch from "@/Components/AdminIndexSearch.vue";
-import AdminIndexFilter from "@/Components/AdminIndexFilter.vue";
-import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
-import AdminIndexHeaderTitle from "@/Components/AdminIndexHeaderTitle.vue";
-import ClientPostFilter from '@/Components/ClientPostFilter.vue';
-import ClientPost from '@/Components/ClientPost.vue';
-import ClientPostSearch from '@/Components/ClientPostSearch.vue';
-import LevelEduFilter from "@/Components/BuilderUi/Programs/Filters/LevelEduFilter.vue";
-import ClientProgramFilter from "@/Components/ClientProgramFilter.vue";
-import PostAuthorsList from "@/Components/BuilderUi/Posts/PostAuthorsList.vue";
-import PostTimeRead from "@/Components/BuilderUi/Posts/PostTimeRead.vue";
-import PostBackButton from "@/Components/BuilderUi/Posts/PostBackButton.vue";
-import PostTitle from "@/Components/BuilderUi/Posts/PostTitle.vue";
-import PostBuilder from "@/Components/BuilderUi/Posts/PostBuilder.vue";
-import PostGallery from "@/Components/BuilderUi/Posts/PostGallery.vue";
 import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
-import ProgramListBreadcrumbs from "@/Components/BuilderUi/Programs/ProgramListBreadcrumbs.vue";
-import ClientAdditionalProgramFilter
-	from "@/Components/BuilderUi/AdditionalEducationPrograms/ClientAdditionalProgramFilter.vue";
-import ProgramBadge from "@/Components/BuilderUi/AdditionalEducationPrograms/ProgramBadge.vue";
-import AdditionalEducationProgramListBreadcrumbs
-	from "@/Components/BuilderUi/AdditionalEducationPrograms/AdditionalEducationProgramListBreadcrumbs.vue";
-import AppHead from "@/Components/AppHead.vue";
+import FormEducationalFilter from "@/componentss/shared/filter/filters/FormEducationalFilter.vue";
+import DirectionFilter from "@/componentss/shared/filter/filters/DirectionFilter.vue";
+import BudgetFilter from "@/componentss/shared/filter/filters/BudgetFilter.vue";
+import BasicListFilter from "@/componentss/shared/filter/BasicListFilter.vue";
+import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
+import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
+import ProgramListBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramListBreadcrumbs.vue";
+import BasicFooter from "@/footers/BasicFooter.vue";
+import ProgramLevelEduFilter from "@/componentss/features/educationalPrograms/components/ProgramLevelEduFilter.vue";
 
 export default {
   name: "Index",
   components: {
-		AppHead,
-		AdditionalEducationProgramListBreadcrumbs, ProgramBadge, ClientAdditionalProgramFilter,
+    ProgramLevelEduFilter,
+    FormEducationalFilter,
+    DirectionFilter,
+    BudgetFilter,
+    BasicListFilter,
+    ProgramTitle,
+    MetaTags,
+    BasicFooter,
 		ProgramListBreadcrumbs,
 		MainPageNavBar,
-		PostGallery, PostBuilder, PostTitle, PostBackButton, PostTimeRead, PostAuthorsList,
-		ClientProgramFilter,
-		LevelEduFilter,
-    AdminIndexHeaderTitle, AdminIndexHeader,
-    AdminIndexFilter, AdminIndexSearch,
-    ClientFooterDown,
-    ClientScrollTimeline,
-    ClientPostFilter,
     Link,
-    MainNavbar,
-    FsLightbox,
     Head,
-    ClientPost,
-    ClientPostSearch
   },
   data() {
     return {
@@ -101,15 +78,13 @@ export default {
 		},
 
   },
-  mounted() {
-  }
 };
 </script>
 
 <template>
-	<AppHead :seo="seo" />
+	<MetaTags :seo="seo" />
 
-	<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
+	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
 
 	<div class="flex flex-col h-screen">
@@ -118,23 +93,19 @@ export default {
 				<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">
-								{{ this.campaignName }}
-							</h1>
-							<div class="space-y-5 md:space-y-4 mx-auto max-w-3xl">
+							<ProgramTitle class="text-center" :header="this.campaignName" />
+							<div class="space-y-5 md:space-y-4 mx-auto max-w-3xl w-full">
 								<div>
 									<div class="">
 										<div class="my-10 w-full">
-											<ProgramListBreadcrumbs :breadcrumbs="breadcrumbs" />
+											<ProgramListBreadcrumbs />
 											<div class="flex items-center gap-x-2">
-												<LevelEduFilter :levels="levelsEducational" :level_filter="filters.level_filter" />
-												<ClientProgramFilter
-														:budget_filter="filters.budget_filter"
-														:direction_filter="filters.direction_filter"
-														:formEdu_filter="filters.formEdu_filter"
-														:types_budget="budgetEdu"
-														:direction_studies="direction_studies"
-														:forms_educational="formsEdu" />
+												<ProgramLevelEduFilter :levels="levelsEducational" :level_filter="filters.level_filter" />
+                        <BasicListFilter>
+                          <BudgetFilter :budget_filter="filters.budget_filter" :types_budget="budgetEdu" />
+                          <DirectionFilter :direction_studies="direction_studies" :direction_filter="filters.direction_filter" />
+                          <FormEducationalFilter :formEdu_filter="filters.formEdu_filter" :forms_educational="formsEdu" />
+                        </BasicListFilter>
 											</div>
 										</div>
 									</div>
@@ -166,12 +137,10 @@ export default {
 				</div>
 			</div>
 		</main>
-		<ClientFooterDown/>
+
+		<BasicFooter />
 	</div>
 
-
-
-
 </template>
 
 <style scoped></style>

resources/js/Pages/Client/Programs/Show.vue

@@ -1,54 +1,34 @@
 <script>
-import MainNavbar from "@/Navbars/MainNavbar.vue";
-import {Head, Link} from "@inertiajs/vue3";
-import FsLightbox from "fslightbox-vue/v3";
-import ClientScrollTimeline from "@/Components/ClientScrollTimeline.vue";
-import ClientFooterDown from "@/Components/ClientFooterDown.vue";
-import ClientPostFilter from "@/Components/ClientPostFilter.vue";
-import ClientPost from "@/Components/ClientPost.vue";
-import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
-import ClientPostSearch from "@/Components/ClientPostSearch.vue";
-import ClientProgramFilter from "@/Components/ClientProgramFilter.vue";
-import LevelEduFilter from "@/Components/BuilderUi/Programs/Filters/LevelEduFilter.vue";
+import {Link} from "@inertiajs/vue3";
 import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
-import FormBlock from "@/Components/BuilderUi/Pages/Blocks/FormBlock.vue";
-import ProgramItemBreadcrumbs from "@/Components/BuilderUi/Programs/ProgramItemBreadcrumbs.vue";
-import AdditionalEducationProgramItemBreadcrumbs
-	from "@/Components/BuilderUi/AdditionalEducationPrograms/AdditionalEducationProgramItemBreadcrumbs.vue";
-import ProgramTitle from "@/Components/BuilderUi/AdditionalEducationPrograms/ProgramTitle.vue";
-import ProgramBuilder from "@/Components/BuilderUi/AdditionalEducationPrograms/ProgramBuilder.vue";
-import ProgramBackButton from "@/Components/BuilderUi/Programs/ProgramBackButton.vue";
-import BaseBuilder from "@/Components/BaseComponents/BaseBuilderUi/BaseBuilder.vue";
-import AppHead from "@/Components/AppHead.vue";
+import EducationForm from "../../../Enum/EducationForm.js";
+import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
+import BasicFooter from "@/footers/BasicFooter.vue";
+import BackButton from "@/componentss/ui/buttons/BackButton.vue";
+import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
+import BasicTitle from "@/componentss/ui/titles/BasicTitle.vue";
+import ProgramItemBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramItemBreadcrumbs.vue";
+import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
 
 
 export default {
   name: "Show",
-  components: {
-		AppHead,
-		BaseBuilder,
-		ProgramBackButton, ProgramBuilder, ProgramTitle, AdditionalEducationProgramItemBreadcrumbs,
-		ProgramItemBreadcrumbs,
-		FormBlock,
-		MainPageNavBar,
-		LevelEduFilter, ClientProgramFilter,
-		ClientPostSearch,
-		AdminIndexHeader,
-		ClientPost,
-		ClientPostFilter,
-		ClientFooterDown, ClientScrollTimeline, Link, MainNavbar, FsLightbox, Head},
-  data() {
-    return {
-      blocks: this.blocksWithSlideNumber,
-      userData: this.$page.props.auth.user,
-      toggler: false,
-      togglerGallery: false,
-      editorImages: [],
-      galleryImages: [],
-      slide: 1,
-      gallerySlide: 1,
+  computed: {
+    EducationForm() {
+      return EducationForm
     }
   },
+  components: {
+    ProgramTitle,
+    BasicTitle,
+    MetaTags,
+    BackButton,
+    BasicFooter,
+    Builder,
+		ProgramItemBreadcrumbs,
+		MainPageNavBar,
+		Link
+  },
   props: {
     program: {
       type: Array,
@@ -59,33 +39,19 @@ export default {
 		seo: {
 			type: Object,
 		}
-
-  },
-  methods: {
-		getFormOfStudy(contests) {
-			const formOfStudyArray = Array.from(new Set(contests.map(item => item.form_edu)));
-
-			return formOfStudyArray;
-		},
-		getYearOfStudy(contests) {
-			const YearOfStudyArray = Array.from(new Set(contests.map(item => item.period_data)));
-
-			return YearOfStudyArray;
-		}
-
   },
 }
 </script>
 
 <template>
-	<AppHead :seo="seo" />
+	<MetaTags :seo="seo" />
 
-	<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
+	<MainPageNavBar class="border-b" :sections="$page.props.navigation" />
 
 	<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:flex md:flex-row md:py-10">
-				<div class="px-0 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
+				<div class="px-0 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-md">
 					<div>
 
 						<div class="space-y-5 md:space-y-4">
@@ -94,7 +60,7 @@ export default {
 								<div>
 									<div class="container mx-auto xl:px-5 max-w-screen-lg py-5 lg:py-8">
 										<div class="space-y-3">
-											<ProgramBackButton link="client.program.index" title="Все программы" />
+											<BackButton link="client.program.index" title="Все программы" />
 											<ProgramItemBreadcrumbs :program-title="program.data.name" />
 											<ProgramTitle :header="program.data.name" />
 
@@ -134,22 +100,6 @@ export default {
 												</div>
 												<!-- End Icon Block -->
 
-												<!-- Icon Block -->
-												<!--										<div class="text-center">-->
-												<!--											<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">-->
-												<!--												<svg class="flex-shrink-0 size-5 text-gray-600" 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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>-->
-												<!--											</div>-->
-												<!--											<div class="mt-3">-->
-												<!--												<h3 class="text-lg font-semibold text-gray-800">Форма обучения</h3>-->
-												<!--												<template v-for="form in getFormOfStudy(program.data.learning_forms)">-->
-												<!--													<p class="mt-1 text-gray-600">{{ form }}</p>-->
-												<!--												</template>-->
-												<!--											</div>-->
-												<!--										</div>-->
-												<!-- End Icon Block -->
-
-
-
 												<!-- Icon Block -->
 												<div class="text-center">
 													<div class="flex justify-center items-center size-12 bg-gray-50 border border-gray-200 rounded-full mx-auto">
@@ -162,8 +112,8 @@ export default {
 														<template v-for="admissionPlan in program.data.admissionPlans">
 															<template v-for="contest in admissionPlan.contests">
 																<div class="border rounded my-2 py-1">
-																	<span class="text-gray-500 text-[14px]">{{ (contest.form_education === '1') ? 'Очная форма обучения' : 'Заочная форма обучения' }}</span>
-																	<p v-for="place in contest.places" class="mt-1 text-gray-600">{{ place.count }} мест <span class="text-gray-400 text-[12px]">{{ formsEdu[place.form_budget] }}</span></p>
+																	<span class="text-gray-500 text-[14px]">{{ EducationForm.fromValue(parseInt(contest.form_education)).label }}</span>
+																	<p class="mt-1 text-gray-600">{{ contest.position_count }} мест <span class="text-gray-400 text-[12px]">{{ formsEdu[contest.financing_source] }}</span></p>
 																</div>
 															</template>
 														</template>
@@ -212,7 +162,7 @@ export default {
 													</button>
 													<div id="hs-basic-bordered-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-bordered-heading-two">
 														<div class="pb-4 px-5">
-															<BaseBuilder :blocks="program.data.about_program" />
+															<Builder :blocks="program.data.about_program" />
 														</div>
 													</div>
 												</div>
@@ -230,7 +180,7 @@ export default {
 													</button>
 													<div id="hs-basic-bordered-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-bordered-heading-three">
 														<div class="pb-4 px-5">
-															<BaseBuilder :blocks="program.data.program_features" />
+															<Builder :blocks="program.data.program_features" />
 														</div>
 													</div>
 												</div>
@@ -247,21 +197,12 @@ export default {
 				</div>
 			</div>
 		</main>
-		<ClientFooterDown/>
+
+		<BasicFooter />
 	</div>
 
 </template>
 
 <style>
 
-.paragraph-container a {
-	@apply text-[#1E57A3];
-	@apply underline;
-}
-
-.paragraph-container p {
-	@apply mb-2
-}
-
-
 </style>