Changes

2024-11-07 16:11:35 +05:00
parent f01fecf1e6
commit fbea6ecd48
29 changed files with 578 additions and 89 deletions
@@ -0,0 +1,50 @@
+<template>
+	<div class="">
+		<img @click="toggler = !toggler" class="shrink-0 w-full md:w-[200px] md:h-[300px] rounded-xl object-cover" :src="'/storage/' + photo" alt="Avatar">
+	</div>
+
+	<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + photo]"/>
+
+</template>
+
+<script>
+import slugify from "slugify";
+import FsLightbox from "fslightbox-vue/v3";
+
+
+export default {
+	name: "PersonAvatarBlock",
+	components: { FsLightbox },
+	data() {
+		return {
+			toggler: false,
+			domainPath: null,
+		}
+	},
+	methods: {
+		generateSlug: function (text) {
+			return slugify(text, {
+				lower: true,
+				strict: true,
+				locale: 'ru'
+			});
+		},
+	},
+	mounted() {
+		this.domainPath = window.location.origin;
+	},
+	props: {
+		photo: {
+			type: String,
+		},
+	},
+}
+</script>
+
+<style>
+
+.fslightbox-container {
+	margin: 0 !important;
+}
+
+</style>
@@ -0,0 +1,194 @@
+<template>
+	<div class="flex justify-between pb-4 items-center">
+		<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
+			<div class="grow">
+				<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
+					<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
+							aria-label="Breadcrumb">
+						<li class="text-sm">
+							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
+								<BaseIcon class="size-5" name="home" />
+							</Link>
+						</li>
+						<li v-if="breadcrumbs.mainSection" class="text-sm">
+							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(breadcrumbs.mainSection)">
+								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
+																	 width="16" height="16"
+																	 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+								<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
+											stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+							</svg>
+								{{ textLimit(breadcrumbs.mainSection.data.title, 25) }}
+							</span>
+						</li>
+						<li v-if="breadcrumbs.subSection" class="text-sm">
+							<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(breadcrumbs.mainSection, breadcrumbs.subSection)">
+								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
+																		 width="16" height="16"
+																		 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
+												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+								</svg>
+								{{ textLimit(breadcrumbs.subSection.data.title, 25) }}
+							</span>
+						</li>
+
+						<li class="text-sm">
+							<Link :href="$page.props.ziggy.location" class="flex items-center text-gray-500 hover:text-blue-600">
+								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
+												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+								</svg>
+								{{ personName }}
+							</Link>
+						</li>
+					</ol>
+					<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
+							aria-label="Breadcrumb">
+						<li class="text-sm">
+							<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
+								<BaseIcon class="size-5" name="home" />
+								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
+													 width="16" height="16"
+													 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+												<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
+															stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+											</svg>
+							</Link>
+						</li>
+						<li class="text-sm">
+							<Link :href="$page.props.ziggy.location" class="flex items-center text-gray-500 hover:text-blue-600">
+								<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
+										 width="16" height="16"
+										 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
+												stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+								</svg>
+								{{ personName }}
+							</Link>
+						</li>
+					</ol>
+				</div>
+			</div>
+		</div>
+	</div>
+
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import slugify from "slugify";
+import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
+
+export default {
+	name: "PersonBreadcrumbs",
+	components: {BaseIcon, Link},
+	data() {
+		return {
+		}
+	},
+	methods: {
+		textLimit(text, symbols) {
+			if (text.length > symbols) {
+				let LimitedText
+				LimitedText = text.substring(0, symbols)
+				return LimitedText + "..."
+			}
+			return text
+		},
+		isMobileDevice() {
+			if (typeof window !== 'undefined') {
+				return window.innerWidth < 1024; // Проверка на мобильные устройства
+			}
+			return false; // По умолчанию возвращаем false, когда не в браузере
+		},
+		handleSectionClick(breadcrumb) {
+			if (this.isMobileDevice()) {
+				this.toggleMobileNavSection(breadcrumb)
+			} else {
+				this.toggleDesktopNavSection(breadcrumb)
+			}
+		},
+		handleSubSectionClick(mainSectionBreadcrumb, breadcrumb) {
+			if (this.isMobileDevice()) {
+				this.toggleMobileNavSubSection(mainSectionBreadcrumb, breadcrumb)
+			} else {
+				this.toggleDesktopNavSubSection(mainSectionBreadcrumb, breadcrumb)
+			}
+		},
+		highlightNavItem(item) {
+			item.classList.add('animate-pulse');
+
+			setTimeout(() => {
+				item.classList.remove('animate-pulse');
+			}, 4000);
+		},
+		openMobileNavMenu() {
+			const openMobileNavBtn = document.getElementById('open-mobile-btn');
+			openMobileNavBtn.click();
+		},
+		toggleMobileNavSubSection(mainSectionBreadcrumb, breadcrumb) {
+			this.openMobileNavMenu()
+			const mobileNavElement = document.getElementById('open-mobile-nav');
+			const sectionNavBlock = mobileNavElement.querySelector('#nav-section-accordion-' + mainSectionBreadcrumb.data.slug);
+			const sectionNavBlockBtn = mobileNavElement.querySelector('#nav-section-accordion-btn-' + mainSectionBreadcrumb.data.slug);
+			if (!sectionNavBlock.classList.contains('active')) {
+				sectionNavBlockBtn.click()
+			}
+			const subSectionNavBlock = mobileNavElement.querySelector('#nav-sub-section-accordion-' + breadcrumb.data.slug);
+			const subSectionNavBlockBtn = mobileNavElement.querySelector('#nav-sub-section-accordion-btn-' + breadcrumb.data.slug);
+			if (subSectionNavBlock.classList.contains('active')) {
+				subSectionNavBlockBtn.click()
+			}
+
+			this.highlightNavItem(subSectionNavBlock)
+		},
+		toggleMobileNavSection(breadcrumb) {
+			const mobileNavElement = document.getElementById('open-mobile-nav');
+			const sectionNavBlock = mobileNavElement.querySelector('#nav-section-accordion-' + breadcrumb.data.slug);
+			const sectionNavBlockBtn = mobileNavElement.querySelector('#nav-section-accordion-btn-' + breadcrumb.data.slug);
+			if (sectionNavBlock.classList.contains('active')) {
+				sectionNavBlockBtn.click()
+			}
+			this.openMobileNavMenu()
+
+			this.highlightNavItem(sectionNavBlock)
+
+		},
+		toggleDesktopNavSubSection(mainSectionBreadcrumb, breadcrumb) {
+			const desktopNavElement = document.getElementById('desktop-nav');
+			const sectionNavTitle = desktopNavElement.querySelector('#nav-sub-section-title-' + breadcrumb.data.slug);
+			const sectionNavBlockBtn = desktopNavElement.querySelector('#nav-section-btn-' + mainSectionBreadcrumb.data.slug);
+			sectionNavBlockBtn.click()
+			this.highlightNavItem(sectionNavTitle)
+		},
+		toggleDesktopNavSection(breadcrumb) {
+			const desktopNavElement = document.getElementById('desktop-nav');
+			const sectionNavBlock = desktopNavElement.querySelector('#nav-section-menu-' + breadcrumb.data.slug);
+			const sectionNavBlockBtn = desktopNavElement.querySelector('#nav-section-btn-' + breadcrumb.data.slug);
+			sectionNavBlockBtn.click()
+			// this.highlightNavItem(sectionNavBlock)
+		},
+
+
+	},
+
+	props: {
+		breadcrumbs: {
+			type: Object,
+			default: () => ({}), // Default to an empty object
+		},
+		personName: {
+			type: String,
+		},
+	},
+}
+
+</script>
+
+
+<style scoped>
+
+</style>
@@ -4,7 +4,7 @@
 		<div class="flex items-center gap-y-4 gap-x-4 flex-wrap">
 			<img @click="toggler = !toggler" loading="lazy" class="rounded-xl md:w-[150px]" :src="'/storage/' + teacher.photo" alt="Image Description">
 			<div class="grow">
-				<Link :href="route('client.person.show', teacher.id)" class="font-medium text-gray-800 hover:text-gray-500 underline">
+				<Link :href="route('client.person.show', teacher.slug)" class="font-medium text-gray-800 hover:text-gray-500 underline">
 					{{ teacher.position }}: {{ teacher.name }}
 				</Link>
 				<p v-if="teacher.academicTitle !== null" class="text-xs text-gray-500 mt-2">
@@ -4,7 +4,7 @@
 		<div class="flex items-center gap-y-4 gap-x-4 flex-wrap">
 			<img @click="toggler = !toggler" loading="lazy" class="rounded-xl md:w-[150px]" :src="'/storage/' + worker.photo" alt="Image Description">
 			<div class="grow">
-				<Link :href="route('client.person.show', worker.id)" class="font-medium text-gray-800 hover:text-gray-500 underline">
+				<Link :href="route('client.person.show', worker.slug)" class="font-medium text-gray-800 hover:text-gray-500 underline">
 					{{ worker.position }}: {{ worker.name }}
 				</Link>
 				<p v-if="worker.academicTitle !== null" class="text-xs text-gray-500 mt-2">
@@ -4,7 +4,7 @@
 		<div class="flex items-center gap-y-4 gap-x-4 flex-wrap">
 			<img @click="toggler = !toggler" loading="lazy" class="rounded-xl md:w-[150px]" :src="'/storage/' + worker.photo" alt="Image Description">
 			<div class="grow">
-				<Link :href="route('client.person.show', worker.id)" class="font-medium text-gray-800 hover:text-gray-500 underline">
+				<Link :href="route('client.person.show', worker.slug)" class="font-medium text-gray-800 hover:text-gray-500 underline">
 					{{ worker.position }}: {{ worker.name }}
 				</Link>
 				<p v-if="worker.academicTitle !== null" class="text-xs text-gray-500 mt-2">