failj/ntspi-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
f4ilji
2024-11-07 16:11:35 +05:00
parent f01fecf1e6
commit fbea6ecd48
29 changed files with 578 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/BuilderUi/Persons/PersonAvatarBlock.vue
+50
View File
@@ -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>
resources/js/Components/BuilderUi/Persons/PersonBreadcrumbs.vue
+194
View File
@@ -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>
resources/js/Components/PersonCards/ClientDepartmentTeacherCard.vue
+1 -1
View File
@@ -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">
resources/js/Components/PersonCards/ClientDepartmentWorkerCard.vue
+1 -1
View File
@@ -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">
resources/js/Components/PersonCards/ClientFacultyWorkerCard.vue
+1 -1
View File
@@ -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">
resources/js/Pages/Client/Divisions/Show.vue
+1 -1
View File
@@ -81,7 +81,7 @@
<div class="flex items-center gap-x-4">
<img loading="lazy" class="rounded-xl w-[150px]" :src="'/storage/' + worker.details.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.administrativePosition }}: {{ worker.name }}
</Link>
<p v-if="worker.details.academicTitle" class="text-xs text-gray-500 mt-2">
resources/js/Pages/Client/Persons/Show.vue
+15 -9
View File
@@ -1,8 +1,8 @@
<template>
<Head>
<title>{{ person.data.name }}</title>
<meta name="description" content="Your page description">
</Head>
<AppHead
:title="seo?.title"
:description="seo?.description"
/>
<div class="flex flex-col h-screen">
<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
@@ -89,13 +89,13 @@
</div>
</nav>
<article class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
<section class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
<div class="w-full mx-auto sm:px-6 lg:px-8">
<PersonBreadcrumbs class="mb-4" :person-name="person.data.name" />
<!-- Profile -->
<div class="flex items-center gap-x-10 gap-y-4 flex-wrap">
<div class="">
<img class="shrink-0 w-full md:w-[200px] md:h-[300px] rounded-xl object-cover" :src="'/storage/' + person.data.details.photo" alt="Avatar"> {{ }}
</div>
<PersonAvatarBlock :photo="person.data.details.photo" />
<div class="grow">
<h1 class="text-2xl font-medium text-gray-800 dark:text-neutral-200">
{{ person.data.name }}
@@ -312,7 +312,7 @@
<!-- Subscribe -->
<!-- End Subscribe -->
</div>
</article>
</section>
</div>
</main>
<ClientFooterDown/>
@@ -335,6 +335,9 @@ import { Head } from '@inertiajs/vue3'
import slugify from "slugify";
import axios from "axios";
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
import AppHead from "@/Components/AppHead.vue";
import PersonBreadcrumbs from "@/Components/BuilderUi/Persons/PersonBreadcrumbs.vue";
import PersonAvatarBlock from "@/Components/BuilderUi/Persons/PersonAvatarBlock.vue";
export default {
@@ -353,6 +356,9 @@ export default {
},
components: {
PersonAvatarBlock,
PersonBreadcrumbs,
AppHead,
MainPageNavBar,
ClientFooterDown,
MainNavbar,
resources/js/Pages/Client/Programs/Show.vue
+2 -2
View File
@@ -79,8 +79,8 @@ export default {
<template>
<AppHead
:title="seo.title"
:description="seo.description"
:title="seo?.title"
:description="seo?.description"
/>
<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
resources/js/Pages/Main.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<AppHead
:title="seo.title"
:description="seo.description"
:title="seo?.title"
:description="seo?.description"
/>
<MainPageNavBar :sections="$page.props.navigation" :slider-ref="sliderRef" />
<ClientMainSlider @slider-mounted="setSliderRef" :slidersCarousel="sliders" />