Rework admin panel and other
This commit is contained in:
F4ilji
@@ -60,7 +60,7 @@
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<a @click="this.removeCookieBvi()" href="#" class="hover:opacity-70 py-3 open-bvi ">
|
||||
<a @click="this.toggleBvi" href="#" class="hover:opacity-70 py-3 open-bvi ">
|
||||
<svg :class="!underSliderHeader ? 'text-white' : 'text-black'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-6 h-6 duration-300 md:block hidden">
|
||||
@@ -72,7 +72,7 @@
|
||||
</a>
|
||||
|
||||
|
||||
<Link :href="route('client.schedule')" class="hover:opacity-70 py-3">
|
||||
<Link :href="route('client.schedule.index')" class="hover:opacity-70 py-3">
|
||||
<svg :class="!underSliderHeader ? 'text-white' : 'text-black'" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6 duration-300 md:block hidden">
|
||||
@@ -92,8 +92,22 @@
|
||||
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Поиск</span>
|
||||
</a>
|
||||
|
||||
<a class="hover:opacity-70 py-3 cursor-pointer" data-hs-overlay="#open-search-sveden-modal">
|
||||
|
||||
</div>
|
||||
|
||||
<svg :class="!underSliderHeader ? 'text-white' : 'text-black'" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6 duration-300 md:block hidden">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
||||
</svg>
|
||||
|
||||
|
||||
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Поиск</span>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -103,6 +117,7 @@
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
|
||||
import {helpers} from "@/mixins/Helpers.js";
|
||||
import {mapActions} from "vuex";
|
||||
|
||||
|
||||
export default {
|
||||
@@ -122,11 +137,7 @@ export default {
|
||||
Link,
|
||||
},
|
||||
methods: {
|
||||
removeCookieBvi() {
|
||||
if (this.getCookie('bvi_panelActive') === 'true') {
|
||||
this.deleteCookiesWithPrefix('bvi')
|
||||
}
|
||||
}
|
||||
...mapActions(['toggleBvi'])
|
||||
},
|
||||
|
||||
|
||||
|
||||
@@ -1,184 +1,157 @@
|
||||
<template>
|
||||
<header :class="[
|
||||
{ 'header-filter': headerFilter },
|
||||
{ 'under-slider-bg': underSliderHeader },
|
||||
isBviActive ? 'static' : 'fixed top-0 left-0 right-0'
|
||||
]"
|
||||
class="flex duration-500 flex-wrap md:justify-start md:flex-nowrap z-50 w-full text-sm py-3 md:py-0">
|
||||
<nav class="max-w-screen-xl w-full mx-auto px-4 py-3" aria-label="Global">
|
||||
<div class="relative lg:flex md:items-center md:justify-between">
|
||||
<div class="flex items-center justify-between">
|
||||
<Link class="flex-none text-xl font-semibold"
|
||||
:href="route('index')" aria-label="NTSPI">
|
||||
<img :key="currentLogo" class="max-w-[300px] transition-all duration-300" :src="currentLogo" alt="Логотип">
|
||||
|
||||
|
||||
<header :class="[{ 'header-filter': headerFilter }, { 'under-slider-bg': underSliderHeader }]"
|
||||
class="flex duration-500 fixed top-0 left-0 right-0 flex-wrap md:justify-start md:flex-nowrap z-50 w-full text-sm py-3 md:py-0">
|
||||
<nav class="max-w-screen-xl w-full mx-auto px-4 py-3" aria-label="Global">
|
||||
<div class="relative lg:flex md:items-center md:justify-between">
|
||||
<div class="flex items-center justify-between">
|
||||
<Link class="flex-none text-xl font-semibold"
|
||||
:href="route('index')" aria-label="NTSPI">
|
||||
<transition name="logo" mode="out-in">
|
||||
<img :key="currentLogo" class="max-w-[300px] logo-transition" :src="currentLogo" alt="Логотип">
|
||||
</transition>
|
||||
</Link>
|
||||
<div class="lg:hidden">
|
||||
<button :class="{ 'text-black': underSliderHeader, 'text-white': !underSliderHeader }"
|
||||
type="button"
|
||||
id="open-mobile-btn"
|
||||
class="flex justify-center items-center w-9 h-9 text-sm font-semibold rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none"
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded="false"
|
||||
aria-controls="open-mobile-nav"
|
||||
data-hs-overlay="#open-mobile-nav"
|
||||
>
|
||||
<svg class="hs-collapse-open:hidden flex-shrink-0 w-4 h-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">
|
||||
<line x1="3" x2="21" y1="6" y2="6"/>
|
||||
<line x1="3" x2="21" y1="12" y2="12"/>
|
||||
<line x1="3" x2="21" y1="18" y2="18"/>
|
||||
</svg>
|
||||
<svg class="hs-collapse-open:block hidden flex-shrink-0 w-4 h-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="M18 6 6 18"/>
|
||||
<path d="m6 6 12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="lg:hidden">
|
||||
<button :class="{ 'text-black border-gray-500': underSliderHeader, 'text-white border-gray-200': !underSliderHeader }"
|
||||
type="button"
|
||||
id="open-mobile-btn"
|
||||
class="flex justify-center items-center w-9 h-9 text-sm font-semibold rounded-lg border hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none"
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded="false"
|
||||
aria-controls="open-mobile-nav"
|
||||
data-hs-overlay="#open-mobile-nav">
|
||||
<svg class="hs-collapse-open:hidden flex-shrink-0 w-4 h-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">
|
||||
<line x1="3" x2="21" y1="6" y2="6"/>
|
||||
<line x1="3" x2="21" y1="12" y2="12"/>
|
||||
<line x1="3" x2="21" y1="18" y2="18"/>
|
||||
</svg>
|
||||
<svg class="hs-collapse-open:block hidden flex-shrink-0 w-4 h-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="M18 6 6 18"/>
|
||||
<path d="m6 6 12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<DesktopNavBar v-if="sections" :sections="sections" :under-slider-header="underSliderHeader" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<DesktopNavBar v-if="sections" :sections="sections" :under-slider-header="underSliderHeader" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<MobileNavbar v-if="sections" :sections="sections" />
|
||||
|
||||
<SearchModal open_id="open-search-modal" />
|
||||
<MobileNavbar v-if="sections" :sections="sections" />
|
||||
<SearchModal open_id="open-search-modal">
|
||||
<ClientGlobalSearch :open_id="open_id" />
|
||||
</SearchModal>
|
||||
<SearchModal open_id="open-search-sveden-modal">
|
||||
<ClientStaticSearch :open_id="open_id" />
|
||||
</SearchModal>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import * as isvek from "bvi"
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
|
||||
import MobileNavbar from "@/Navbars/MobileNavbar.vue";
|
||||
import DesktopNavBar from "@/Navbars/DesktopNavBar.vue";
|
||||
import {mapGetters} from "vuex";
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
import SearchModal from "@/componentss/shared/modals/SearchModal.vue";
|
||||
import {helpers} from "@/mixins/Helpers.js";
|
||||
|
||||
import { helpers } from "@/mixins/Helpers.js";
|
||||
import {defineAsyncComponent} from "vue";
|
||||
|
||||
export default {
|
||||
mixins: [helpers],
|
||||
name: 'MainPageNavBar',
|
||||
components: {
|
||||
DesktopNavBar,
|
||||
SearchModal,
|
||||
MobileNavbar,
|
||||
BasicIcon,
|
||||
Link,
|
||||
},
|
||||
props: {
|
||||
sections: {
|
||||
type: Object,
|
||||
},
|
||||
sliderRef: {
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollPosition: 0,
|
||||
headerFilter: false,
|
||||
underSliderHeader: true,
|
||||
bvi: null,
|
||||
isActiveBvi: null,
|
||||
logos: {
|
||||
default: '/logos/white_ntspi_logo.svg',
|
||||
alternate: '/logos/ntspi-logo.svg',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
iniBvi() {
|
||||
if (this.getCookie('bvi_panelActive') === null) {
|
||||
this.bvi = new isvek.Bvi({
|
||||
target: '.open-bvi',
|
||||
fontSize: 24,
|
||||
theme: 'black',
|
||||
speech: false,
|
||||
reload: true,
|
||||
panelHide: true
|
||||
});
|
||||
}
|
||||
},
|
||||
components: {
|
||||
DesktopNavBar,
|
||||
SearchModal,
|
||||
MobileNavbar,
|
||||
BasicIcon,
|
||||
Link,
|
||||
ClientGlobalSearch: defineAsyncComponent(() =>
|
||||
import('@/componentss/features/search/components/GlobalSearch.vue')
|
||||
),
|
||||
ClientStaticSearch: defineAsyncComponent(() =>
|
||||
import('@/componentss/features/search/components/StaticSearch.vue')
|
||||
),
|
||||
},
|
||||
props: {
|
||||
sections: {
|
||||
type: Object,
|
||||
},
|
||||
sliderRef: {
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollPosition: 0,
|
||||
headerFilter: false,
|
||||
underSliderHeader: true,
|
||||
logos: {
|
||||
default: '/logos/white_ntspi_logo.svg',
|
||||
alternate: '/logos/ntspi-logo.svg',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScroll() {
|
||||
// Сохраняем текущую позицию прокрутки
|
||||
this.scrollPosition = window.pageYOffset;
|
||||
|
||||
// Проверяем, существует ли слайдер
|
||||
if (this.lastSlider) {
|
||||
const slider = this.lastSlider;
|
||||
|
||||
// Проверяем, совпадает ли текущий маршрут с маршрутом слайдера
|
||||
if (this.IS_SAME_ROUTE(slider.url)) {
|
||||
// Определяем, находится ли слайдер в области видимости
|
||||
const isSliderVisible = slider.top <= this.scrollPosition && slider.bottom >= this.scrollPosition;
|
||||
|
||||
// Если слайдер виден, underSliderHeader будет false, иначе true
|
||||
this.underSliderHeader = !isSliderVisible;
|
||||
}
|
||||
}
|
||||
|
||||
// Активируем фильтр заголовка, если прокрутка превышает 90 пикселей
|
||||
this.headerFilter = this.scrollPosition > 50;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
lastSlider(newVal) {
|
||||
if (this.IS_SAME_ROUTE(newVal?.url)) {
|
||||
this.underSliderHeader = newVal.bottom < 0; // Пример логики
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
|
||||
if (this.getCookie('bvi_panelActive') === null) {
|
||||
this.iniBvi();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['lastSlider']),
|
||||
currentLogo() {
|
||||
return this.underSliderHeader ? this.logos.alternate : this.logos.default;
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
lastSlider(newVal) {
|
||||
if (this.IS_SAME_ROUTE(newVal?.url)) {
|
||||
this.underSliderHeader = newVal.bottom < 0;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
this.initializeBvi();
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['lastSlider', 'isBviActive']),
|
||||
currentLogo() {
|
||||
if (this.isBviActive) {
|
||||
return this.logos.default
|
||||
}
|
||||
return this.underSliderHeader ? this.logos.alternate : this.logos.default;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initializeBvi = mapActions(['initializeBvi']).initializeBvi;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
.header-filter {
|
||||
transition: all 0.3s;
|
||||
backdrop-filter: saturate(180%) blur(7px);
|
||||
transition: all 0.3s;
|
||||
backdrop-filter: saturate(180%) blur(7px);
|
||||
}
|
||||
|
||||
.under-slider-bg {
|
||||
background: hsla(0,0%,100%,.6)
|
||||
background: hsla(0,0%,100%,.6);
|
||||
}
|
||||
|
||||
.logo-transition {
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.logo-enter, .logo-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.logo-enter-to, .logo-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
@@ -59,7 +59,7 @@
|
||||
class="flex items-center gap-x-3 py-2 px-2.5 text-sm rounded-lg hover:bg-gray-[#EFEFEF] focus:outline-none focus:bg-gray-100"
|
||||
:class="(IS_SAME_ROUTE(page.path) ? 'text-blue-600 bg-white border border-[#E4E4E7]' : 'text-gray-700')"
|
||||
>
|
||||
<BasicIcon class="w-4" :name="page.icon" />
|
||||
<BasicIcon v-if="page.icon" class="w-4" :name="page.icon" />
|
||||
{{ page.title }}
|
||||
</a>
|
||||
</li>
|
||||
@@ -72,8 +72,8 @@
|
||||
|
||||
|
||||
<li class="">
|
||||
<Link :href="route('client.schedule')"
|
||||
:class="(IS_SAME_ROUTE(route('client.schedule')) ? 'text-blue-600 bg-white border border-[#E4E4E7]' : 'text-gray-700')"
|
||||
<Link :href="route('client.schedule.index')"
|
||||
:class="(IS_SAME_ROUTE(route('client.schedule.index')) ? 'text-blue-600 bg-white border border-[#E4E4E7]' : 'text-gray-700')"
|
||||
class="flex items-center gap-x-3 py-2 px-2.5 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300" href="#">
|
||||
<BasicIcon class="w-4" name="schedule" />
|
||||
Расписание
|
||||
|
||||
@@ -3,15 +3,16 @@ import {Head, Link} from "@inertiajs/vue3";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
|
||||
import BasicFooter from "@/footers/BasicFooter.vue";
|
||||
import AcademicJournalsListBreadcrumbs
|
||||
from "@/componentss/features/academicJournals/components/AcademicJournalsListBreadcrumbs.vue.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
AcademicJournalsListBreadcrumbs,
|
||||
BasicFooter,
|
||||
MetaTags,
|
||||
MainPageNavBar,
|
||||
ClientFooterDown,
|
||||
ClientScrollTimeline,
|
||||
Link,
|
||||
Head,
|
||||
},
|
||||
@@ -44,8 +45,8 @@ export default {
|
||||
<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-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-5 md:flex md:flex-row">
|
||||
<div class="px-4 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
@@ -54,6 +55,7 @@ export default {
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<!-- Card Section -->
|
||||
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<AcademicJournalsListBreadcrumbs />
|
||||
|
||||
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Научные периодические издания НТГСПИ</h2>
|
||||
|
||||
@@ -5,10 +5,15 @@ import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
|
||||
import BasicFooter from "@/footers/BasicFooter.vue";
|
||||
import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
|
||||
import AcademicJournalsTitle from "@/componentss/features/academicJournals/components/AcademicJournalsTitle.vue";
|
||||
import BasicPagination from "@/componentss/shared/paginate/BasicPagination.vue";
|
||||
import AcademicJournalsItemBreadcrumbs
|
||||
from "@/componentss/features/academicJournals/components/AcademicJournalsItemBreadcrumbs.vue";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
AcademicJournalsItemBreadcrumbs,
|
||||
BasicPagination,
|
||||
MetaTags,
|
||||
BasicFooter,
|
||||
Builder,
|
||||
@@ -66,6 +71,7 @@ export default {
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-5 md:space-y-8">
|
||||
<AcademicJournalsItemBreadcrumbs class="max-w-4xl px-2 xl:px-5 md:w-4/5 mx-auto" :title="journal.data.title" />
|
||||
<AcademicJournalsTitle class="text-center" :header="journal.data.title" />
|
||||
<div>
|
||||
<nav class="flex flex-col md:flex-row justify-center gap-x-6" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
|
||||
@@ -149,10 +155,9 @@ export default {
|
||||
<div id="horizontal-alignment-4" class="hidden" role="tabpanel" aria-labelledby="horizontal-alignment-item-4">
|
||||
<!-- List -->
|
||||
<!-- Card Section -->
|
||||
<div class="px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<div class="px-0 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Grid -->
|
||||
<div class="">
|
||||
<template v-for="journalByYear in journals">
|
||||
<template v-for="journalByYear in journals">
|
||||
<h2 class="font-bold text-xl text-center">{{ journalByYear.year_publication }}</h2>
|
||||
<hr class="mb-4 mt-2">
|
||||
<div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6 mb-4">
|
||||
@@ -177,8 +182,6 @@ export default {
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
<!-- End Card Section --> <!-- End List -->
|
||||
|
||||
@@ -104,26 +104,23 @@ export default {
|
||||
</div>
|
||||
<div class="grid gap-y-10 mt-5 w-full"> <!-- Добавлен w-full -->
|
||||
<template v-for="event in events.data">
|
||||
<Link class="group sm:flex rounded-xl w-full" :href="route('client.event.show', event.slug)"> <!-- Добавлен w-full -->
|
||||
<div class="sm:flex rounded-xl w-full"> <!-- Добавлен w-full -->
|
||||
<div class="grow">
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="mb-3">
|
||||
<p class="inline-flex mr-2 items-center gap-1.5 py-1.5 rounded-md text-[12px] text-gray-600">
|
||||
{{ event.event_date_start }}
|
||||
</p>
|
||||
<p v-if="event.category" class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ event.category }}
|
||||
</p>
|
||||
<a :href="route('client.event.archive', { 'category[]': event.category.slug })" v-if="event.category" class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600 hover:underline">
|
||||
{{ event.category.title }}
|
||||
</a>
|
||||
</div>
|
||||
<h3 class="text-lg sm:text-2xl font-semibold text-gray-800 group-hover:text-blue-600">
|
||||
<Link :href="route('client.event.show', event.slug)" class="text-lg sm:text-2xl font-semibold text-gray-800 hover:text-blue-600">
|
||||
{{ event.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-gray-600">
|
||||
Great news we're eager to share.
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<BasicPagination :links="events.links" />
|
||||
|
||||
@@ -98,7 +98,7 @@ export default {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-if="hasActiveFilters" class="px-6">
|
||||
<div v-if="hasActiveFilters">
|
||||
<h3 class="text-sm text-gray-500 mb-4">Найдено мероприятий: {{ events.data.length }}</h3>
|
||||
<div class="flex-wrap flex gap-3 md:items-center">
|
||||
<BasicListBadge :filters="filters" />
|
||||
@@ -107,26 +107,24 @@ export default {
|
||||
</div>
|
||||
<div class="grid gap-y-10 mt-10">
|
||||
<template v-for="event in events.data">
|
||||
<Link class="group sm:flex rounded-xl" :href="route('client.event.show', event.slug)">
|
||||
<div class="sm:flex rounded-xl">
|
||||
<div class="grow">
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="mb-3">
|
||||
<p class="inline-flex mr-2 items-center gap-1.5 py-1.5 rounded-md text-[12px] text-gray-600">
|
||||
{{ event.event_time_start }}
|
||||
</p>
|
||||
<p v-if="event.category" class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ event.category }}
|
||||
</p>
|
||||
|
||||
<a :href="route('client.event.index', { 'category[]': event.category.slug })" v-if="event.category" class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600 hover:underline">
|
||||
{{ event.category.title }}
|
||||
</a>
|
||||
</div>
|
||||
<h3 class="text-lg sm:text-2xl font-semibold text-gray-800 group-hover:text-blue-600">
|
||||
<Link :href="route('client.event.show', event.slug)" class="text-lg sm:text-2xl font-semibold text-gray-800 hover:text-blue-600">
|
||||
{{ event.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-gray-600">
|
||||
Great news we're eager to share.
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -70,28 +70,32 @@ export default {
|
||||
<BasicTitle :header="event.data.title" />
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3 text-gray-500 ">
|
||||
<div class="flex gap-x-3 text-gray-500 ">
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
<div class="md:flex md:items-center space-y-3 md:space-y-0 space-x-2 text-sm">
|
||||
<p v-if="event.data.is_online === 1" class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
Онлайн
|
||||
</p>
|
||||
<p v-if="event.data.category" class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
{{ event.data.category }}
|
||||
</p>
|
||||
<div class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
<span>Дата начала: {{ event.data.event_date_start }}, {{ event.data.event_time_start }}</span>
|
||||
</div>
|
||||
<div class="col-start-2 text-center">
|
||||
<span>Адрес: {{ event.data.address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center flex-wrap gap-2 text-sm">
|
||||
<a :href="route('client.event.index', { 'is_online': 'online' })"
|
||||
v-if="event.data.is_online === 1"
|
||||
class="inline-flex items-center py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] hover:underline text-blue-600">
|
||||
Онлайн
|
||||
</a>
|
||||
<a :href="route('client.event.index', { 'category[]': event.data.category.slug })"
|
||||
v-if="event.data.category"
|
||||
class="inline-flex items-center py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] hover:underline text-blue-600">
|
||||
{{ event.data.category.title }}
|
||||
</a>
|
||||
<div class="inline-flex items-center py-1.5 px-3 rounded-md text-xs font-medium bg-[#E9F2FE] text-blue-600">
|
||||
<span>Дата начала: {{ event.data.event_date_start }}, {{ event.data.event_time_start }}</span>
|
||||
</div>
|
||||
<div class="md:flex md:items-center md:justify-center w-full md:w-auto">
|
||||
<span>Адрес: {{ event.data.address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 md:space-y-4">
|
||||
<div class="gap-y-3 md:gap-y-4">
|
||||
<Builder :blocks="event.data.content"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -76,12 +76,12 @@ export default {
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl py-10 md:flex md:flex-row md:py-10">
|
||||
<div class="pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-lg">
|
||||
<div class="pt-6 px-4 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-lg">
|
||||
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Новости НТГСПИ</h2>
|
||||
<p class="mt-1 text-gray-600 dark:text-neutral-400">Узнайте последние новости любимого вуза</p>
|
||||
</div>
|
||||
<PostListBreadcrumbs :breadcrumbs="breadcrumbs" class="px-5" />
|
||||
<PostListBreadcrumbs :breadcrumbs="breadcrumbs" />
|
||||
<div>
|
||||
<HeadItemsWrapper>
|
||||
<PostListSearch :search_filter="filters.search_filter" />
|
||||
@@ -93,9 +93,9 @@ export default {
|
||||
</HeadItemsWrapper>
|
||||
|
||||
|
||||
<div v-if="hasActiveFilters" class="px-6">
|
||||
<div>
|
||||
<h3 class="text-sm text-gray-500 mb-4">Найдено новостей: {{ posts.meta.total }}</h3>
|
||||
<div class="flex-wrap flex gap-3 md:items-center">
|
||||
<div v-if="hasActiveFilters" class="flex-wrap flex gap-3 md:items-center">
|
||||
<BasicListBadge :filters="filters" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,8 +103,8 @@ export default {
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div>
|
||||
<div class="container px-4 mx-auto xl:px-5 max-w-screen-lg py-5 lg:py-8">
|
||||
<div class="mt-10 grid gap-10 md:grid-cols-2 lg:gap-10 xl:grid-cols-3">
|
||||
<div class="container mx-auto max-w-screen-lg py-5 lg:py-8">
|
||||
<div class="grid gap-10 md:grid-cols-2 lg:gap-10 xl:grid-cols-3">
|
||||
<template v-for="post in posts.data" :key="post.id">
|
||||
<PostListItem :post="post" />
|
||||
</template>
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<!-- ========== MAIN CONTENT ========== -->
|
||||
<!-- Sidebar -->
|
||||
<div id="sidebar-mini" class="transform fixed top-0 start-0 bottom-0 z-[60] w-20 bg-white border-e border-gray-200 lg:block lg:translate-x-0 lg:end-auto lg:bottom-0 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-800 dark:border-neutral-700" role="dialog" tabindex="-1" aria-label="Mini Sidebar">
|
||||
<div class="flex flex-col justify-center items-center gap-y-2 py-4">
|
||||
<div class="mb-4">
|
||||
<Link
|
||||
class="flex-none text-xl font-semibold"
|
||||
href="/" aria-label="Brand">
|
||||
<img class="max-w-[40px]" src="/logos/only_logo.svg" alt="">
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div class="hs-tooltip [--placement:right] inline-block">
|
||||
<button type="button" class="hs-tooltip-toggle size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
|
||||
<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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
||||
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-gray-900 text-xs text-white rounded-lg whitespace-nowrap dark:bg-neutral-700" role="tooltip">
|
||||
Home
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hs-tooltip [--placement:right] inline-block">
|
||||
<button type="button" class="hs-tooltip-toggle size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
|
||||
<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"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-gray-900 text-xs text-white rounded-lg whitespace-nowrap dark:bg-neutral-700" role="tooltip">
|
||||
Users
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hs-tooltip [--placement:right] inline-block">
|
||||
<button type="button" class="hs-tooltip-toggle size-[38px] inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
|
||||
<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="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path></svg>
|
||||
<span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-gray-900 text-xs text-white rounded-lg whitespace-nowrap dark:bg-neutral-700" role="tooltip">
|
||||
Notifications
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- End Sidebar -->
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative h-screen w-full">
|
||||
<div class="py-10 lg:py-14">
|
||||
<!-- Title -->
|
||||
<div class="max-w-4xl px-4 sm:px-6 lg:px-8 mx-auto text-center">
|
||||
<h1 class="text-3xl font-bold text-gray-800 sm:text-4xl dark:text-white">
|
||||
Расписание НТГСПИ
|
||||
</h1>
|
||||
<p class="mt-3 text-gray-600 dark:text-neutral-400">
|
||||
Онлайн веб конструктор
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<Repeater>
|
||||
<template class="" #block="{ block, index }">
|
||||
<!-- Отображение и редактирование содержимого блока -->
|
||||
<div class="w-full py-3 border">{{ weekDays[index] }}</div>
|
||||
</template>
|
||||
</Repeater>
|
||||
<button @click="saveBlocks" type="button" class="hidden py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 text-gray-500 hover:border-blue-600 hover:text-blue-600 focus:outline-none focus:border-blue-600 focus:text-blue-600 disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-blue-500 dark:hover:border-blue-600 dark:focus:text-blue-500 dark:focus:border-blue-600">
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- End Title -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Textarea -->
|
||||
<!-- End Textarea -->
|
||||
</div>
|
||||
<!-- End Content -->
|
||||
<!-- ========== END MAIN CONTENT ========== -->
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import Repeater from "@/Components/Dashboard/Repeater.vue";
|
||||
|
||||
export default {
|
||||
name: "CreateSchedule",
|
||||
data() {
|
||||
return {
|
||||
days: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
weekDays() {
|
||||
return ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
},
|
||||
components: {
|
||||
Repeater,
|
||||
Link
|
||||
},
|
||||
methods: {
|
||||
saveBlocks() {
|
||||
// Сохранение массива blocks в JSON формате
|
||||
const blocksJson = JSON.stringify(this.blocks);
|
||||
// Отправка данных на сервер или сохранение в другом месте
|
||||
console.log(blocksJson);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<MetaTags :seo="seo" />
|
||||
|
||||
<MainPageNavBar :sections="$page.props.navigation" />
|
||||
<Slider class="rounded" slider-id="quos-velit-quisquam" />
|
||||
<Slider class="bvi-hide" slider-id="quos-velit-quisquam" />
|
||||
|
||||
<section class="max-w-screen-xl w-full mx-auto px-4 py-3 pb-10">
|
||||
<h2 class="text-brand-primary my-6 md:mb-[50px] md:mt-[80px] text-2xl font-semibold tracking-tight text-black lg:text-[32px] lg:leading-tight bvi-show">Последние новости</h2>
|
||||
|
||||
+209
@@ -0,0 +1,209 @@
|
||||
<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">
|
||||
<BreadcrumbsWrapper v-if="breadcrumbs">
|
||||
<li class="text-sm">
|
||||
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
|
||||
<BasicIcon 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="route('client.post.index')" 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>
|
||||
{{ textLimit('Новости', 30) }}
|
||||
</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>
|
||||
{{ textLimit(title, 60) }}
|
||||
</Link>
|
||||
</li>
|
||||
</BreadcrumbsWrapper>
|
||||
<BreadcrumbsWrapper v-else>
|
||||
<li class="text-sm">
|
||||
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
|
||||
<BasicIcon 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="route('client.academicJournals.index')" class="flex items-center text-gray-500 hover:text-blue-600">
|
||||
{{ textLimit('Научные журналы', 30) }}
|
||||
<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">
|
||||
{{ textLimit(title, 60) }}
|
||||
</Link>
|
||||
</li>
|
||||
</BreadcrumbsWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
|
||||
import BreadcrumbsWrapper from "@/componentss/ui/wrappers/BreadcrumbsWrapper.vue";
|
||||
export default {
|
||||
name: "AcademicJournalsItemBreadcrumbs",
|
||||
components: {BreadcrumbsWrapper, BasicIcon, 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
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
+180
@@ -0,0 +1,180 @@
|
||||
<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">
|
||||
<BreadcrumbsWrapper v-if="breadcrumbs">
|
||||
<li class="text-sm">
|
||||
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
|
||||
<BasicIcon 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="route('client.post.index')" 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>
|
||||
{{ textLimit('Новости', 30) }}
|
||||
</Link>
|
||||
</li>
|
||||
</BreadcrumbsWrapper>
|
||||
<BreadcrumbsWrapper v-else>
|
||||
<li class="text-sm">
|
||||
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
|
||||
<BasicIcon class="size-5" name="home" />
|
||||
</Link>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<Link :href="route('client.academicJournals.index')" 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>
|
||||
{{ textLimit('Научные журналы', 30) }}
|
||||
</Link>
|
||||
</li>
|
||||
</BreadcrumbsWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
|
||||
import BreadcrumbsWrapper from "@/componentss/ui/wrappers/BreadcrumbsWrapper.vue";
|
||||
export default {
|
||||
name: "AcademicJournalsListBreadcrumbs",
|
||||
components: {BreadcrumbsWrapper, BasicIcon, Link},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
isMobileDevice() {
|
||||
return window.innerWidth < 1024; // Задайте порог для мобильных устройств
|
||||
},
|
||||
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,
|
||||
},
|
||||
postTitle: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -9,7 +9,7 @@
|
||||
<BasicIcon class="size-5" name="home" />
|
||||
</Link>
|
||||
</li>
|
||||
<li v-if="breadcrumbs.mainSection" class="text-sm">
|
||||
<li v-if="breadcrumbs.mainSection.data.title !== null" 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"
|
||||
@@ -20,7 +20,7 @@
|
||||
{{ textLimit(breadcrumbs.mainSection.data.title, 25) }}
|
||||
</span>
|
||||
</li>
|
||||
<li v-if="breadcrumbs.subSection" class="text-sm">
|
||||
<li v-if="breadcrumbs.subSection.data.title !== null" 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"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="group cursor-pointer">
|
||||
<div
|
||||
class="overflow-hidden rounded-md max-h-[250px] bg-gray-100 transition-all hover:scale-105 dark:bg-gray-800"
|
||||
class="overflow-hidden rounded-md max-h-[250px] bg-gray-100 transition-all hover:scale-105 bvi-hide dark:bg-gray-800"
|
||||
>
|
||||
<a
|
||||
class="relative block aspect-square"
|
||||
@@ -16,7 +16,7 @@
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
inset: 0px;
|
||||
inset: 0;
|
||||
color: transparent;
|
||||
"
|
||||
sizes="(max-width: 768px) 30vw, 33vw"
|
||||
@@ -25,7 +25,7 @@
|
||||
</div>
|
||||
<div class="">
|
||||
<div>
|
||||
<div v-if="post.category" class="flex gap-3">
|
||||
<div v-if="post.category" class="flex gap-3 bvi-hide">
|
||||
<a :href="route('client.post.index', { 'category[]': post.category.slug })">
|
||||
<span class="inline-block text-xs font-medium tracking-wider uppercase mt-5 text-blue-600">
|
||||
{{ post.category ? post.category.title : "Новости" }}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
'border-blue-300': selectedCategory === null,
|
||||
'animate-pulse': loading === true
|
||||
}"
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button">Все</button>
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-2 py-0.5 mr-2" type="button">Все</button>
|
||||
<template v-for="category in categories">
|
||||
<button @click="categorySort(category)"
|
||||
:class="{
|
||||
@@ -17,7 +17,7 @@
|
||||
'border-blue-300': selectedCategory === category,
|
||||
'animate-pulse': loading === true
|
||||
}"
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-2" type="button">
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-2 py-0.5 mr-2" type="button">
|
||||
{{ruCategories()[category] }}
|
||||
</button>
|
||||
</template>
|
||||
@@ -28,14 +28,18 @@
|
||||
name="hs-as-table-product-review-search"
|
||||
class="py-1 placeholder-[#8F8F8F] font-light px-2 block flex-1 w-full border-none text-lg focus:z-10 border-transparent focus:border-transparent focus:ring-0"
|
||||
placeholder="Поиск по сайту">
|
||||
<button :data-hs-overlay="'#' + open_id" class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-1 mr-4" type="button">Esc</button>
|
||||
<button v-if='this.searchInput !== ""' @click="clearSearch" class="items-center flex justify-end px-2" type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 hover:text-gray-300 text-gray-500 duration-150 font-bold">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto relative">
|
||||
<ResultList :result="result" :loading="loading" :selected-category="selectedCategory" />
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<ResultList class="h-full" :result="result" :loading="loading" :selected-category="selectedCategory" />
|
||||
</div>
|
||||
<nav v-if="paginate" class="bg-white border border-gray-100 flex items-center gap-x-1 fixed bottom-4 w-[200px] justify-center left-0 right-0 mx-auto py-2 rounded-xl " aria-label="Pagination">
|
||||
<button @click="prev(paginate.prev_page)" :disabled="!paginate.prev_page" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
|
||||
<nav v-if="paginate && result.length !== 0" class="bg-white border border-gray-100 flex items-center gap-x-1 fixed bottom-4 w-[200px] justify-center left-0 right-0 mx-auto py-2 rounded-xl " aria-label="Pagination">
|
||||
<button @click="prev(paginate.prev_page)" :disabled="!paginate.prev_page || loading === true" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
|
||||
<svg class="shrink-0 size-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="m15 18-6-6 6-6"></path>
|
||||
</svg>
|
||||
@@ -46,7 +50,7 @@
|
||||
<span class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm">из</span>
|
||||
<span class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm">{{ paginate.last_page }}</span>
|
||||
</div>
|
||||
<button @click="next(paginate.next_page)" :disabled="!paginate.next_page" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
|
||||
<button @click="next(paginate.next_page)" :disabled="!paginate.next_page || loading === true" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
|
||||
<span class="sr-only">Next</span>
|
||||
<svg class="shrink-0 size-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="m9 18 6-6-6-6"></path>
|
||||
@@ -70,7 +74,10 @@ export default {
|
||||
selectedCategory: null,
|
||||
categories: null,
|
||||
loading: false,
|
||||
}
|
||||
debouncedSearch: debounce(this.executeSearch, 500),
|
||||
debouncedNext: debounce(this.executePagination, 300),
|
||||
debouncedPrev: debounce(this.executePagination, 300),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ResultList,
|
||||
@@ -80,80 +87,83 @@ export default {
|
||||
ruCategories() {
|
||||
return ruCategories
|
||||
},
|
||||
categorySort: debounce(function(category) {
|
||||
this.toggleLoadingState(true);
|
||||
axios({
|
||||
method: "get",
|
||||
url: route('client.search.index'),
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
category: category
|
||||
}
|
||||
}).then((response) => {
|
||||
this.paginate = response.data.paginate;
|
||||
this.result = response.data.searchRes;
|
||||
this.categories = response.data.result_type;
|
||||
this.selectedCategory = response.data.selectedCategory;
|
||||
this.toggleLoadingState(false);
|
||||
}).catch((error) => {
|
||||
console.error("Ошибка при получении данных:", error);
|
||||
this.toggleLoadingState(false);
|
||||
});
|
||||
}, 500),
|
||||
search: debounce(function () {
|
||||
axios({
|
||||
method: "get",
|
||||
url: route('client.search.index'),
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
}
|
||||
}).then((response) => {
|
||||
this.paginate = response.data.paginate
|
||||
this.result = response.data.searchRes;
|
||||
this.categories = response.data.result_type
|
||||
});
|
||||
}, 500),
|
||||
categorySort: function(category) {
|
||||
this.toggleLoadingState(true);
|
||||
debounce(() => {
|
||||
axios({
|
||||
method: "get",
|
||||
url: route('client.search.index'),
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
category: category
|
||||
}
|
||||
}).then((response) => {
|
||||
this.paginate = response.data.paginate;
|
||||
this.result = response.data.searchRes;
|
||||
this.categories = response.data.result_type;
|
||||
this.selectedCategory = response.data.selectedCategory;
|
||||
this.toggleLoadingState(false);
|
||||
}).catch((error) => {
|
||||
console.error("Ошибка при получении данных:", error);
|
||||
this.toggleLoadingState(false);
|
||||
});
|
||||
}, 500)();
|
||||
},
|
||||
|
||||
next: debounce(function (page) {
|
||||
this.toggleLoadingState(true);
|
||||
axios({
|
||||
method: "get",
|
||||
url: route('client.search.index'),
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
page: page,
|
||||
category: this.selectedCategory
|
||||
}
|
||||
}).then((response) => {
|
||||
this.paginate = response.data.paginate
|
||||
this.result = response.data.searchRes;
|
||||
this.toggleLoadingState(false);
|
||||
search() {
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedSearch(this.searchInput.toLowerCase());
|
||||
},
|
||||
|
||||
});
|
||||
}, 500),
|
||||
// Пагинация: следующая страница
|
||||
next(page) {
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedNext({ page, category: this.selectedCategory });
|
||||
},
|
||||
|
||||
prev: debounce(function (page) {
|
||||
this.toggleLoadingState(true);
|
||||
axios({
|
||||
method: "get",
|
||||
url: route('client.search.index'),
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
page: page,
|
||||
category: this.selectedCategory
|
||||
}
|
||||
}).then((response) => {
|
||||
this.paginate = response.data.paginate
|
||||
this.result = response.data.searchRes;
|
||||
this.toggleLoadingState(false);
|
||||
});
|
||||
}, 500),
|
||||
// Пагинация: предыдущая страница
|
||||
prev(page) {
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedPrev({ page, category: this.selectedCategory });
|
||||
},
|
||||
|
||||
async executeSearch(searchValue) {
|
||||
try {
|
||||
const response = await axios.get(route('client.search.index'), {
|
||||
params: { search: searchValue }
|
||||
});
|
||||
this.updateResults(response);
|
||||
} finally {
|
||||
this.toggleLoadingState(false);
|
||||
}
|
||||
},
|
||||
|
||||
// Общая функция для пагинации
|
||||
async executePagination(params) {
|
||||
try {
|
||||
const response = await axios.get(route('client.search.index'), {
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
...params
|
||||
}
|
||||
});
|
||||
this.updateResults(response);
|
||||
} finally {
|
||||
this.toggleLoadingState(false);
|
||||
}
|
||||
},
|
||||
|
||||
// Обновление результатов
|
||||
updateResults(response) {
|
||||
this.paginate = response.data.paginate;
|
||||
this.result = response.data.searchRes;
|
||||
this.categories = response.data.result_type;
|
||||
},
|
||||
|
||||
toggleLoadingState(state) {
|
||||
this.loading = state
|
||||
},
|
||||
|
||||
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
@@ -162,6 +172,11 @@ export default {
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
clearSearch() {
|
||||
this.searchInput = ""
|
||||
this.search()
|
||||
}
|
||||
},
|
||||
props: {
|
||||
open_id: {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<PreSearchLinkList v-if="result === null" class="px-2 font-light" />
|
||||
<div v-else-if="result.length !== 0"
|
||||
:class="{'filter': loading === true}"
|
||||
:class="{'filter pointer-events-none': loading === true}"
|
||||
class="px-2 font-light duration-300">
|
||||
<template v-for="(elements, tag) in result">
|
||||
<component
|
||||
@@ -13,6 +13,14 @@
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="" v-else-if="result.length === 0">
|
||||
<div class="h-full flex flex-col items-center justify-center gap-1">
|
||||
<p class="font-light">Извините, ничего не найдено</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-700">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="border-b">
|
||||
<div v-if="result !== null && result.length !== 0" class="relative px-3 pt-5 gap-2 justify-start items-center flex flex-wrap hide-scrollbar">
|
||||
<button @click="categorySort(null)"
|
||||
:class="{
|
||||
'bg-blue-50': selectedCategory === null,
|
||||
'text-blue-500': selectedCategory === null,
|
||||
'border-blue-300': selectedCategory === null,
|
||||
'animate-pulse': loading === true
|
||||
}"
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-2 py-0.5" type="button">Все</button>
|
||||
<template v-for="category in categories">
|
||||
<button @click="categorySort(category)"
|
||||
:class="{
|
||||
'bg-blue-50': selectedCategory === category,
|
||||
'text-blue-500': selectedCategory === category,
|
||||
'border-blue-300': selectedCategory === category,
|
||||
'animate-pulse': loading === true
|
||||
}"
|
||||
class="hover:bg-gray-50 duration-150 border border-[#EAEAEA] rounded font-light text-[13px] px-2 py-0.5" type="button">
|
||||
{{ category }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="relative px-1 py-2 flex justify-between items-center">
|
||||
<input autofocus="autofocus" autocomplete="off" @input="search" v-model="searchInput" type="text"
|
||||
id="hs-as-table-product-review-search"
|
||||
name="hs-as-table-product-review-search"
|
||||
class="py-1 placeholder-[#8F8F8F] font-light px-2 block flex-1 w-full border-none text-lg focus:z-10 border-transparent focus:border-transparent focus:ring-0"
|
||||
placeholder="Поиск по сведениям об образовательной организации">
|
||||
<button v-if='this.searchInput !== ""' @click="clearSearch" class="items-center flex justify-end px-2" type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 hover:text-gray-300 text-gray-500 duration-150 font-bold">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<div v-for="item in result">
|
||||
|
||||
<a :href="item.file" target="_blank" data-hs-overlay="#hs-basic-modal" class="my-1 flex gap-3 px-2 py-2 items-center hover:bg-[#F2F2F2] rounded-lg">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
||||
</svg>
|
||||
|
||||
<span class="text-sm first-letter:uppercase">{{ item.content }} <span class="text-xs text-gray-600">{{ item.category }}</span> </span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- <ResultList class="h-full" :result="result" :loading="loading" :selected-category="selectedCategory" />-->
|
||||
</div>
|
||||
<nav v-if="paginate && result.length !== 0" class="bg-white border border-gray-100 flex items-center gap-x-1 fixed bottom-4 w-[200px] justify-center left-0 right-0 mx-auto py-2 rounded-xl " aria-label="Pagination">
|
||||
<button @click="prev(paginate.current_page - 1)" :disabled="loading === true || paginate.current_page - 1 <= 0" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
|
||||
<svg class="shrink-0 size-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="m15 18-6-6 6-6"></path>
|
||||
</svg>
|
||||
<span class="sr-only">Previous</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-x-1">
|
||||
<span class="min-h-[38px] min-w-[38px] flex justify-center items-center border border-gray-200 text-gray-800 py-2 px-3 text-sm rounded-lg focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none">{{ paginate.current_page }}</span>
|
||||
<span class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm">из</span>
|
||||
<span class="min-h-[38px] flex justify-center items-center text-gray-500 py-2 px-1.5 text-sm">{{ paginate.last_page }}</span>
|
||||
</div>
|
||||
<button @click="next(paginate.current_page + 1)" :disabled="loading === true" type="button" class="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
|
||||
<span class="sr-only">Next</span>
|
||||
<svg class="shrink-0 size-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="m9 18 6-6-6-6"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {debounce} from "lodash";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import {ruCategories} from "@/assets/data/ruCategories.js";
|
||||
import ResultList from "@/componentss/features/search/components/ResultList.vue";
|
||||
export default {
|
||||
name: "GlobalSearch",
|
||||
data() {
|
||||
return {
|
||||
searchInput: "",
|
||||
result: null,
|
||||
paginate: null,
|
||||
selectedCategory: null,
|
||||
categories: null,
|
||||
loading: false,
|
||||
debouncedSearch: debounce(this.executeSearch, 500),
|
||||
debouncedCategory: debounce(this.executeCategory, 500),
|
||||
debouncedNext: debounce(this.executePagination, 300),
|
||||
debouncedPrev: debounce(this.executePagination, 300),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ResultList,
|
||||
Link,
|
||||
},
|
||||
methods: {
|
||||
ruCategories() {
|
||||
return ruCategories
|
||||
},
|
||||
categorySort: function(category) {
|
||||
this.selectedCategory = category
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedCategory({ page: this.paginate.current_page, category: this.selectedCategory });
|
||||
},
|
||||
|
||||
search() {
|
||||
if (!this.categories) {
|
||||
this.getCategories()
|
||||
}
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedSearch(this.searchInput.toLowerCase());
|
||||
},
|
||||
|
||||
// Пагинация: следующая страница
|
||||
next(page) {
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedNext({ page, category: this.selectedCategory });
|
||||
},
|
||||
|
||||
// Пагинация: предыдущая страница
|
||||
prev(page) {
|
||||
this.toggleLoadingState(true);
|
||||
this.debouncedPrev({ page, category: this.selectedCategory });
|
||||
},
|
||||
|
||||
async executeSearch(searchValue) {
|
||||
|
||||
try {
|
||||
if (searchValue === null) {
|
||||
return null;
|
||||
}
|
||||
const response = await axios.get(route('client.search.static'), {
|
||||
params: { search: searchValue }
|
||||
});
|
||||
this.updateResults(response);
|
||||
} finally {
|
||||
this.toggleLoadingState(false);
|
||||
}
|
||||
},
|
||||
|
||||
async executeCategory(params) {
|
||||
|
||||
try {
|
||||
if (params.category === null) {
|
||||
return null;
|
||||
}
|
||||
const response = await axios.get(route('client.search.static'), {
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
...params
|
||||
}
|
||||
});
|
||||
this.updateResults(response);
|
||||
} finally {
|
||||
this.toggleLoadingState(false);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Общая функция для пагинации
|
||||
async executePagination(params) {
|
||||
try {
|
||||
const response = await axios.get(route('client.search.static'), {
|
||||
params: {
|
||||
search: this.searchInput.toLowerCase(),
|
||||
...params
|
||||
}
|
||||
});
|
||||
this.updateResults(response);
|
||||
} finally {
|
||||
this.toggleLoadingState(false);
|
||||
}
|
||||
},
|
||||
|
||||
// Обновление результатов
|
||||
updateResults(response) {
|
||||
this.paginate = response.data.meta;
|
||||
this.result = response.data.data;
|
||||
// this.categories = response.data.result_type;
|
||||
},
|
||||
|
||||
async getCategories() {
|
||||
try {
|
||||
const response = await axios.get(route('client.categories.static'));
|
||||
this.categories = response.data;
|
||||
} catch (error) {
|
||||
console.error('Ошибка при загрузке категорий:', error);
|
||||
}
|
||||
},
|
||||
|
||||
toggleLoadingState(state) {
|
||||
this.loading = state
|
||||
},
|
||||
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
|
||||
clearSearch() {
|
||||
this.searchInput = ""
|
||||
this.search()
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
open_id: {
|
||||
type: String,
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none; /* Скрыть scrollbar для WebKit-браузеров */
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none; /* Для Internet Explorer и Edge */
|
||||
scrollbar-width: none; /* Для Firefox */
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -13,7 +13,7 @@
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
data-nimg="fill"
|
||||
class="object-cover rounded-md transition-opacity duration-1000 absolute inset-0 h-full w-full"
|
||||
class="object-cover rounded-xl transition-opacity duration-1000 absolute inset-0 h-full w-full"
|
||||
sizes="100vw"
|
||||
:src="'/storage/' + slide.image.url"
|
||||
:class="{ 'opacity-1': currentIndex === index, 'opacity-0': currentIndex !== index }"
|
||||
@@ -118,7 +118,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['updateLastSlider']),
|
||||
next() {
|
||||
if (this.totalSlides > 0) {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
|
||||
@@ -145,11 +144,6 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
// Передаем данные в Vuex после монтирования компонента
|
||||
this.updateLastSlider({
|
||||
url: this.$page.props.ziggy.location,
|
||||
top: this.$refs.sliderRef.getBoundingClientRect().top,
|
||||
bottom: this.$refs.sliderRef.getBoundingClientRect().bottom, // Получаем актуальное значение bottom
|
||||
});
|
||||
this.startTimer();
|
||||
},
|
||||
beforeUnmount() {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<!-- Слайды с изображениями -->
|
||||
<a
|
||||
:href="(!slide.settings.link_text) ? slide.link : '#'"
|
||||
v-for="(slide, index) in slides"
|
||||
v-for="(slide, index) in sortedSlides"
|
||||
:key="index"
|
||||
:style="{ filter: `brightness(${slide.image.shading})` }"
|
||||
class="absolute -z-10 h-full w-full before:absolute before:z-10 before:h-full before:w-full"
|
||||
@@ -25,7 +25,7 @@
|
||||
<div :key="currentIndex">
|
||||
<div
|
||||
v-show="currentIndex === index"
|
||||
v-for="(item, index) in slides"
|
||||
v-for="(item, index) in sortedSlides"
|
||||
:key="index"
|
||||
class="mx-auto max-w-screen-md px-5 pt-[150px] pb-0 bvi-no-styles"
|
||||
>
|
||||
@@ -97,7 +97,7 @@ export default {
|
||||
name: 'SliderBody',
|
||||
props: {
|
||||
slides: {
|
||||
type: Object,
|
||||
type: Array,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -105,6 +105,7 @@ export default {
|
||||
currentIndex: 0,
|
||||
intervalId: null,
|
||||
slideDuration: 5000,
|
||||
sortedSlides: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -144,6 +145,9 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.sortedSlides = this.slides.slice().sort((a, b) => a.sort - b.sort);
|
||||
|
||||
// Передаем данные в Vuex после монтирования компонента
|
||||
this.updateLastSlider({
|
||||
url: this.$page.props.ziggy.location,
|
||||
|
||||
@@ -1,176 +1,249 @@
|
||||
<template>
|
||||
<div v-if="success" class="bg-teal-50 border-t-2 border-teal-500 rounded-lg p-4 dark:bg-teal-800/30" role="alert" tabindex="-1" aria-labelledby="hs-bordered-success-style-label">
|
||||
<div class="flex">
|
||||
<div class="shrink-0">
|
||||
<!-- Icon -->
|
||||
<span class="inline-flex justify-center items-center size-8 rounded-full border-4 border-teal-100 bg-teal-200 text-teal-800 dark:border-teal-900 dark:bg-teal-800 dark:text-teal-400">
|
||||
<div v-if="success" class="bg-teal-50 border-t-2 border-teal-500 rounded-lg p-4 dark:bg-teal-800/30" role="alert" tabindex="-1" aria-labelledby="hs-bordered-success-style-label">
|
||||
<div class="flex">
|
||||
<div class="shrink-0">
|
||||
<span class="inline-flex justify-center items-center size-8 rounded-full border-4 border-teal-100 bg-teal-200 text-teal-800 dark:border-teal-900 dark:bg-teal-800 dark:text-teal-400">
|
||||
<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="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
|
||||
<path d="m9 12 2 2 4-4"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<!-- End Icon -->
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<h3 id="hs-bordered-success-style-label" class="text-gray-800 font-semibold dark:text-white">
|
||||
Успешно отправлено!
|
||||
</h3>
|
||||
<p class="text-sm text-gray-700 dark:text-neutral-400">
|
||||
{{ message }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<h3 id="hs-bordered-success-style-label" class="text-gray-800 font-semibold dark:text-white">
|
||||
Успешно отправлено!
|
||||
</h3>
|
||||
<p class="text-sm text-gray-700 dark:text-neutral-400">
|
||||
{{ message }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="max-w-[85rem] py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div class="text-center">
|
||||
<h2 class="text-xl text-gray-800 font-bold sm:text-3xl">
|
||||
{{ blocks.data.title }}
|
||||
</h2>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="mt-5 p-4 relative z-1000 bg-white border rounded-xl sm:mt-10 md:p-10">
|
||||
<form @submit="submitForm">
|
||||
<component
|
||||
v-for="(block, index) in blocks.data.columns"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
:error="errors && errors[block.data.name_field] ? errors[block.data.name_field] : null"
|
||||
/>
|
||||
|
||||
<div v-else class="max-w-[85rem] py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<PersonalDataBlock v-if="blocks.data.settings.personal_data" />
|
||||
<CaptchaBlock v-if="blocks.data.settings.captcha" />
|
||||
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div class="text-center">
|
||||
<h2 class="text-xl text-gray-800 font-bold sm:text-3xl">
|
||||
{{ blocks.data.title }}
|
||||
</h2>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="mt-5 p-4 relative z-1000 bg-white border rounded-xl sm:mt-10 md:p-10">
|
||||
<form @submit="submitForm">
|
||||
<component
|
||||
v-for="(block, index) in blocks.data.columns"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
:error="errors && errors[block.data.name_field] ? errors[block.data.name_field] : null"
|
||||
/>
|
||||
<SubmitBlock :block="blocks.data.button" />
|
||||
</form>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<SuccessNotification v-if="success" :text="message" />
|
||||
</transition>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
|
||||
:disabled="!isFormAvailable"
|
||||
>
|
||||
{{ blocks.data.button }}
|
||||
</button>
|
||||
<p v-if="!isFormAvailable" class="mt-2 text-sm text-red-600">
|
||||
{{ availabilityMessage }}
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<SuccessNotification v-if="success" :text="message" />
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SubmitBlock from "@/componentss/shared/builder/formBuilder/blocks/SubmitBlock.vue";
|
||||
import axios from "axios";
|
||||
import SuccessNotification from "@/Components/Notifications/SuccessNotification.vue";
|
||||
import SuccessNotification from "@/componentss/shared/notifications/SuccessNotification.vue";
|
||||
import {defineAsyncComponent} from "vue";
|
||||
import PersonalDataBlock from "@/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue";
|
||||
import CaptchaBlock from "@/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue";
|
||||
|
||||
export default {
|
||||
name: "FormBuilder",
|
||||
components: {
|
||||
SuccessNotification,
|
||||
SubmitBlock,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
errors: null,
|
||||
success: false,
|
||||
message: null,
|
||||
};
|
||||
},
|
||||
name: "FormBuilder",
|
||||
components: {
|
||||
CaptchaBlock,
|
||||
PersonalDataBlock,
|
||||
SuccessNotification,
|
||||
SubmitBlock,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
errors: null,
|
||||
success: false,
|
||||
message: null,
|
||||
currentTime: new Date(),
|
||||
timeInterval: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
text: () => import('@/componentss/shared/builder/formBuilder/blocks/TextBlock.vue'),
|
||||
phone: () => import('@/componentss/shared/builder/formBuilder/blocks/PhoneBlock.vue'),
|
||||
email: () => import('@/componentss/shared/builder/formBuilder/blocks/EmailBlock.vue'),
|
||||
textarea: () => import('@/componentss/shared/builder/formBuilder/blocks/TextAreaBlock.vue'),
|
||||
multiple_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/MultipleChoiceBlock.vue'),
|
||||
single_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/SingleChoiceBlock.vue'),
|
||||
date: () => import('@/componentss/shared/builder/formBuilder/blocks/DateBlock.vue'),
|
||||
additional_education_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/AdditionalEducationalChoiceBlock.vue'),
|
||||
educational_program_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/EducationalChoiceBlock.vue'),
|
||||
captcha: () => import('@/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue'),
|
||||
personal_data: () => import('@/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue'),
|
||||
computed: {
|
||||
isFormAvailable() {
|
||||
if (!this.blocks.data.settings.period) return true;
|
||||
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
const startTime = new Date(this.blocks.data.settings.period.start_time);
|
||||
const endTime = new Date(this.blocks.data.settings.period.end_time);
|
||||
|
||||
submitForm(event) {
|
||||
event.preventDefault();
|
||||
this.formData = this.getFormData(event.target.elements);
|
||||
this.sendDataToServer();
|
||||
},
|
||||
return this.currentTime >= startTime && this.currentTime <= endTime;
|
||||
},
|
||||
|
||||
getFormData(formElements) {
|
||||
const formData = {};
|
||||
for (let i = 0; i < formElements.length; i++) {
|
||||
const element = formElements[i];
|
||||
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
|
||||
const fieldName = this.normalizeFieldName(element.name);
|
||||
availabilityMessage() {
|
||||
if (!this.blocks.data.settings.period) return '';
|
||||
|
||||
if (element.tagName === 'INPUT') {
|
||||
if (element.type === 'checkbox') {
|
||||
this.handleCheckbox(formData, fieldName, element);
|
||||
} else if (fieldName && fieldName !== 'choices') {
|
||||
formData[fieldName] = element.value;
|
||||
}
|
||||
} else if (element.tagName === 'TEXTAREA') {
|
||||
formData[fieldName] = element.value;
|
||||
} else if (element.tagName === 'SELECT') {
|
||||
formData[fieldName] = element.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return formData;
|
||||
},
|
||||
normalizeFieldName(name) {
|
||||
return name.endsWith('[]') ? name.slice(0, -2) : name;
|
||||
},
|
||||
const startTime = new Date(this.blocks.data.settings.period.start_time);
|
||||
const endTime = new Date(this.blocks.data.settings.period.end_time);
|
||||
|
||||
handleCheckbox(formData, fieldName, element) {
|
||||
if (!formData[fieldName]) {
|
||||
formData[fieldName] = [];
|
||||
}
|
||||
if (element.checked) {
|
||||
formData[fieldName].push(element.value);
|
||||
}
|
||||
},
|
||||
if (this.currentTime < startTime) {
|
||||
return `Форма будет доступна с ${this.formatDateTime(startTime)}`;
|
||||
} else if (this.currentTime > endTime) {
|
||||
return `Форма была доступна до ${this.formatDateTime(endTime)}`;
|
||||
}
|
||||
|
||||
sendDataToServer() {
|
||||
axios.post(route('client.widget.form.submit', this.blocks.data.id), this.formData)
|
||||
.then(this.handleResponse)
|
||||
.catch(this.handleError);
|
||||
},
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
handleResponse(response) {
|
||||
if (response.data.status === 'ok') {
|
||||
this.success = true;
|
||||
this.message = response.data.message;
|
||||
this.errors = null; // Сбрасываем ошибки при успешной отправке
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateCurrentTime();
|
||||
this.timeInterval = setInterval(this.updateCurrentTime, 60000);
|
||||
},
|
||||
|
||||
handleError(error) {
|
||||
this.errors = error.response.data || ['Неизвестная ошибка']; // Обработка ошибок
|
||||
this.success = false; // Сбрасываем успешное состояние
|
||||
}
|
||||
},
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.timeInterval) {
|
||||
clearInterval(this.timeInterval);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateCurrentTime() {
|
||||
this.currentTime = new Date();
|
||||
},
|
||||
|
||||
formatDateTime(date) {
|
||||
return date.toLocaleString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
},
|
||||
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
text: () => import('@/componentss/shared/builder/formBuilder/blocks/TextBlock.vue'),
|
||||
phone: () => import('@/componentss/shared/builder/formBuilder/blocks/PhoneBlock.vue'),
|
||||
email: () => import('@/componentss/shared/builder/formBuilder/blocks/EmailBlock.vue'),
|
||||
textarea: () => import('@/componentss/shared/builder/formBuilder/blocks/TextAreaBlock.vue'),
|
||||
multiple_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/MultipleChoiceBlock.vue'),
|
||||
single_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/SingleChoiceBlock.vue'),
|
||||
date: () => import('@/componentss/shared/builder/formBuilder/blocks/DateBlock.vue'),
|
||||
additional_education_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/AdditionalEducationalChoiceBlock.vue'),
|
||||
educational_program_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/EducationalChoiceBlock.vue'),
|
||||
captcha: () => import('@/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue'),
|
||||
personal_data: () => import('@/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue'),
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
|
||||
submitForm(event) {
|
||||
if (!this.isFormAvailable) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
this.formData = this.getFormData(event.target.elements);
|
||||
this.sendDataToServer();
|
||||
},
|
||||
|
||||
getFormData(formElements) {
|
||||
const formData = {};
|
||||
for (let i = 0; i < formElements.length; i++) {
|
||||
const element = formElements[i];
|
||||
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
|
||||
const fieldName = this.normalizeFieldName(element.name);
|
||||
|
||||
if (element.tagName === 'INPUT') {
|
||||
if (element.type === 'checkbox') {
|
||||
this.handleCheckbox(formData, fieldName, element);
|
||||
} else if (fieldName && fieldName !== 'choices') {
|
||||
formData[fieldName] = element.value;
|
||||
}
|
||||
} else if (element.tagName === 'TEXTAREA') {
|
||||
formData[fieldName] = element.value;
|
||||
} else if (element.tagName === 'SELECT') {
|
||||
formData[fieldName] = element.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return formData;
|
||||
},
|
||||
|
||||
normalizeFieldName(name) {
|
||||
return name.endsWith('[]') ? name.slice(0, -2) : name;
|
||||
},
|
||||
|
||||
handleCheckbox(formData, fieldName, element) {
|
||||
if (!formData[fieldName]) {
|
||||
formData[fieldName] = [];
|
||||
}
|
||||
if (element.checked) {
|
||||
formData[fieldName].push(element.value);
|
||||
}
|
||||
},
|
||||
|
||||
sendDataToServer() {
|
||||
axios.post(route('client.widget.form.submit', this.blocks.data.id), this.formData)
|
||||
.then(this.handleResponse)
|
||||
.catch(this.handleError);
|
||||
},
|
||||
|
||||
handleResponse(response) {
|
||||
if (response.data.status === 'ok') {
|
||||
this.success = true;
|
||||
this.message = response.data.message;
|
||||
this.errors = null;
|
||||
}
|
||||
},
|
||||
|
||||
handleError(error) {
|
||||
this.errors = error.response.data || ['Неизвестная ошибка'];
|
||||
this.success = false;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
</style>
|
||||
@@ -5,9 +5,9 @@
|
||||
<YSmartCaptcha v-model="token" />
|
||||
<!-- Скрытое поле ввода -->
|
||||
<input
|
||||
name="captcha"
|
||||
v-model="inputValue"
|
||||
:required="block.data.rules.required"
|
||||
:name="block.data.name_field"
|
||||
required="required"
|
||||
type="text"
|
||||
class="hidden"
|
||||
/>
|
||||
|
||||
@@ -1,22 +1,13 @@
|
||||
<template>
|
||||
<div class="mb-4 sm:mb-8">
|
||||
<label class="block mb-3 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<div class="">
|
||||
<input
|
||||
type="checkbox"
|
||||
required="required"
|
||||
class="shrink-0 mb-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
|
||||
:id="block.data.name_field + '-id'">
|
||||
<input
|
||||
:name="block.data.name_field"
|
||||
value="Даю согласие на обработку персональных данных"
|
||||
type="text"
|
||||
class="hidden"
|
||||
/>
|
||||
<label :for="block.data.name_field + '-id'" class="text-sm text-gray-500 ms-2">Даю свое согласие на сбор, обработку, хранение и использование персональных данных в соответствии с <a class="underline text-primaryBlue" target="_blank" href="https://ntspi.ru/upload/824_%D0%9E%D0%B1_%D1%83%D1%82%D0%B2_%D0%9F%D0%BE%D0%BB%D0%B8%D1%82_%D0%BE%D0%B1%D1%80_%D0%B7%D0%B0%D1%89%D0%B8%D1%82_%D0%BF%D0%B5%D1%80%D1%81_%D0%B4%D0%B0%D0%BD.pdf">Пользовательским соглашением</a> </label>
|
||||
id="personal-data-id">
|
||||
<label for="personal-data-id" class="text-sm text-gray-500 ms-2">Даю свое согласие на сбор, обработку, хранение и использование персональных данных в соответствии с <a class="underline text-primaryBlue" target="_blank" href="https://ntspi.ru/upload/824_%D0%9E%D0%B1_%D1%83%D1%82%D0%B2_%D0%9F%D0%BE%D0%BB%D0%B8%D1%82_%D0%BE%D0%B1%D1%80_%D0%B7%D0%B0%D1%89%D0%B8%D1%82_%D0%BF%D0%B5%D1%80%D1%81_%D0%B4%D0%B0%D0%BD.pdf">Пользовательским соглашением</a> </label>
|
||||
</div>
|
||||
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -32,13 +23,6 @@ export default {
|
||||
},
|
||||
methods: {},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -7,17 +7,49 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<FormBuilder :blocks="form" />
|
||||
</div>
|
||||
|
||||
<div v-if="block.data.settings.in_modal">
|
||||
<button type="button" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-vertically-centered-scrollable-modal" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
|
||||
{{ form.data.title }}
|
||||
</button>
|
||||
<div id="hs-vertically-centered-scrollable-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[1000000] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-vertically-centered-scrollable-modal-label">
|
||||
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-3xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
|
||||
<div class="w-full max-h-full overflow-hidden flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl pointer-events-auto dark:bg-neutral-800 dark:border-neutral-700 dark:shadow-neutral-700/70">
|
||||
<div class="flex justify-between items-center py-3 px-4 border-b border-gray-200 dark:border-neutral-700">
|
||||
<h3 id="hs-vertically-centered-scrollable-modal-label" class="font-bold text-gray-800 dark:text-white">
|
||||
</h3>
|
||||
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-hidden focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
|
||||
<span class="sr-only">Close</span>
|
||||
<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="M18 6 6 18"></path>
|
||||
<path d="m6 6 12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FormBuilder :blocks="form" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<FormBuilder :blocks="form" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FormBuilder from "@/componentss/shared/builder/formBuilder/FormBuilder.vue";
|
||||
import SubmitBlock from "@/componentss/shared/builder/formBuilder/blocks/SubmitBlock.vue";
|
||||
export default {
|
||||
name: "FormBlock",
|
||||
components: {axios, Link },
|
||||
components: {SubmitBlock, FormBuilder, axios, Link },
|
||||
data() {
|
||||
return {
|
||||
form: null,
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
<template>
|
||||
<div :id="open_id" class="hs-overlay hidden hs-overlay-backdrop-open:bg-black/70 [--body-scroll:false] [--overlay-backdrop:true] size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-hidden pointer-events-none" role="dialog" tabindex="-1" :aria-labelledby="open_id + '-label'">
|
||||
<div class="hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-10 opacity-0 transition-all max-w-full max-h-full h-full md:mx-auto">
|
||||
<div :data-hs-overlay="'#' + open_id" class="w-full pointer-events-auto cursor-pointer">
|
||||
<button class="md:px-4 px-2 py-2 ml-auto items-center flex justify-end" type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 hover:text-white text-gray-200 duration-150 font-bold">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
|
||||
<div :id="open_id" class="hs-overlay hidden [--overlay-backdrop:false] size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" :aria-labelledby="open_id + '-label'">
|
||||
<div class="hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-10 opacity-0 transition-all max-w-full max-h-full h-full md:mt-0 md:mx-auto">
|
||||
<div class="flex flex-col bg-white pointer-events-auto max-w-full max-h-full h-full md:max-h-full">
|
||||
<ClientGlobalSearch :open_id="open_id" ></ClientGlobalSearch>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col bg-white pointer-events-auto max-w-full md:mx-4 md:px-2 max-h-full h-full md:max-h-full rounded-xl overflow-y-auto">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -31,9 +38,6 @@ export default {
|
||||
},
|
||||
components: {
|
||||
BasicIcon,
|
||||
ClientGlobalSearch: defineAsyncComponent(() =>
|
||||
import('@/componentss/features/search/components/GlobalSearch.vue')
|
||||
),
|
||||
Link,
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="dismiss-alert" class="fixed bottom-10 left-3 right-3 md:w-[500px] md:left-auto md:right-5 z-10000 hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-teal-50 border border-teal-200 text-sm text-teal-800 rounded-lg p-4" role="alert" tabindex="-1" aria-labelledby="hs-dismiss-button-label">
|
||||
<div id="dismiss-alert" class="fixed bottom-10 left-3 right-3 md:w-[500px] md:left-auto md:right-5 z-[1000000] hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-teal-50 border border-teal-200 text-sm text-teal-800 rounded-lg p-4" role="alert" tabindex="-1" aria-labelledby="hs-dismiss-button-label">
|
||||
<div class="flex">
|
||||
<div class="shrink-0">
|
||||
<svg class="shrink-0 size-4 mt-0.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">
|
||||
|
||||
@@ -9,14 +9,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div v-else-if="!loading & resource">
|
||||
|
||||
<!-- Card Blog -->
|
||||
<div class="px-0 py-10 sm:px-2 lg:py-14 mx-auto">
|
||||
<!-- Title -->
|
||||
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
|
||||
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight">Полезные ресурсы</h2>
|
||||
<p class="mt-1 text-gray-600">We've helped some great companies brand, design and get to market.</p>
|
||||
<!-- <p class="mt-1 text-gray-600">We've helped some great companies brand, design and get to market.</p>-->
|
||||
</div>
|
||||
<!-- End Title -->
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="px-4 py-4 gap-3 flex justify-center md:items-center border-gray-200">
|
||||
<div class="py-4 gap-3 flex justify-center md:items-center border-gray-200">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ export default {
|
||||
<!-- End Language Dropdown -->
|
||||
<div>
|
||||
<div class="mt-3 grid space-y-3 text-sm">
|
||||
<p class="inline-flex gap-x-2 text-[12px]">© Нижнетагильский государственный социально-педагогический институт (Филиал РГППУ)</p>
|
||||
<p class="inline-flex gap-x-2 text-[12px]">© Нижнетагильский государственный социально-педагогический институт (Филиал УРГПУ)</p>
|
||||
<p class="inline-flex gap-x-2 text-[12px]">Красногвардейская улица, 57, Нижний Тагил, Свердловская область, 622031</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,8 +42,8 @@ export default {
|
||||
|
||||
<!-- Social Brands -->
|
||||
<div class="space-x-4 flex items-center">
|
||||
<a target="_blank" class="inline-block text-[12px] hover:text-gray-200" href="https://www.rsvpu.ru/">
|
||||
Российский государственный профессионально-педагогический университет
|
||||
<a target="_blank" class="inline-block text-[12px] hover:text-gray-200 underline" href="https://uspu.ru/">
|
||||
Уральский государственный педагогический университет
|
||||
</a>
|
||||
|
||||
<a target="_blank" class="inline-block" href="https://vk.com/ntspi">
|
||||
|
||||
@@ -21,26 +21,57 @@ export const linksReform = {
|
||||
clearBodyStyles() {
|
||||
const body = document.body;
|
||||
if (body.style.overflow === 'hidden') {
|
||||
body.style.overflow = ''; // Сбрасываем overflow до значения по умолчанию
|
||||
body.style.overflow = '';
|
||||
}
|
||||
},
|
||||
async removeBackdropElement() {
|
||||
const backdrop = document.querySelector('div[data-hs-overlay-backdrop-template]');
|
||||
if (backdrop) {
|
||||
// Добавляем анимацию исчезновения
|
||||
backdrop.style.transition = 'opacity 0.5s ease';
|
||||
backdrop.style.opacity = '0';
|
||||
|
||||
// Ждем завершения анимации
|
||||
await new Promise(resolve => {
|
||||
backdrop.addEventListener('transitionend', () => {
|
||||
backdrop.remove();
|
||||
resolve();
|
||||
}, { once: true });
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
|
||||
this.clearBodyStyles();
|
||||
|
||||
const hostname = window.location.hostname;
|
||||
const defaultLinks = Array.from(this.getDefaultLinks());
|
||||
|
||||
const reactiveLinks = this.createReactiveLinks(defaultLinks, hostname);
|
||||
|
||||
reactiveLinks.forEach(link => {
|
||||
link.addEventListener('click', (event) => {
|
||||
link.addEventListener('click', async (event) => {
|
||||
if (this.checkPathname(link.pathname)) return;
|
||||
|
||||
event.preventDefault();
|
||||
const url = link.getAttribute('href');
|
||||
this.$inertia.visit(url, {
|
||||
preserveScroll: false,
|
||||
});
|
||||
|
||||
try {
|
||||
// Удаляем бэкдроп с анимацией перед переходом
|
||||
await this.removeBackdropElement();
|
||||
this.clearBodyStyles();
|
||||
|
||||
this.$inertia.visit(url, {
|
||||
preserveScroll: false,
|
||||
onBefore: () => {
|
||||
// Дополнительная проверка перед переходом
|
||||
this.removeBackdropElement().catch(() => {});
|
||||
this.clearBodyStyles();
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error during navigation:', e);
|
||||
this.$inertia.visit(url); // Fallback на обычный переход
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,20 +1,63 @@
|
||||
import { createStore } from 'vuex';
|
||||
import * as isvek from "bvi";
|
||||
import { getCookie, setCookie, deleteCookie, deleteCookiesWithPrefix } from '@/utils/cookies';
|
||||
|
||||
|
||||
export default createStore({
|
||||
state: {
|
||||
lastSlider: null, // Состояние для отслеживания положения слайдера
|
||||
lastSlider: null,
|
||||
bvi: null, // Экземпляр плагина bvi
|
||||
bviSettings: { // Настройки по умолчанию
|
||||
target: '.open-bvi',
|
||||
fontSize: 24,
|
||||
theme: 'black',
|
||||
speech: false,
|
||||
reload: true,
|
||||
panelHide: true
|
||||
},
|
||||
isBviActive: false // Флаг активности панели
|
||||
},
|
||||
mutations: {
|
||||
setLastSlider(state, value) {
|
||||
state.lastSlider = value; // Мутация для изменения состояния
|
||||
state.lastSlider = value;
|
||||
},
|
||||
setBviInstance(state, instance) {
|
||||
state.bvi = instance;
|
||||
},
|
||||
setBviActive(state, isActive) {
|
||||
state.isBviActive = isActive;
|
||||
},
|
||||
updateBviSettings(state, settings) {
|
||||
state.bviSettings = { ...state.bviSettings, ...settings };
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
updateLastSlider({ commit }, value) {
|
||||
commit('setLastSlider', value); // Действие для обновления состояния
|
||||
commit('setLastSlider', value);
|
||||
},
|
||||
initializeBvi(context) { // Получаем весь context
|
||||
if (!context.state.bvi) {
|
||||
const bviInstance = new isvek.Bvi(context.state.bviSettings);
|
||||
context.commit('setBviInstance', bviInstance);
|
||||
}
|
||||
|
||||
if (getCookie('bvi_panelActive')) {
|
||||
context.dispatch('toggleBvi'); // Вызываем через context.dispatch
|
||||
}
|
||||
},
|
||||
toggleBvi({ commit, state }) {
|
||||
if (state.bvi) {
|
||||
commit('setBviActive', !state.isBviActive);
|
||||
}
|
||||
},
|
||||
updateBviSettings({ commit }, settings) {
|
||||
commit('updateBviSettings', settings);
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
lastSlider: (state) => state.lastSlider, // Геттер для получения состояния
|
||||
},
|
||||
lastSlider: (state) => state.lastSlider,
|
||||
bviInstance: (state) => state.bvi,
|
||||
isBviActive: (state) => state.isBviActive,
|
||||
bviSettings: (state) => state.bviSettings
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
// utils/cookies.js
|
||||
export const setCookie = (name, value, days) => {
|
||||
let expires = "";
|
||||
if (days) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
}
|
||||
document.cookie = name + "=" + (value || "") + expires + "; path=/";
|
||||
};
|
||||
|
||||
export const getCookie = (name) => {
|
||||
const nameEQ = name + "=";
|
||||
const ca = document.cookie.split(';');
|
||||
for (let i = 0; i < ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
|
||||
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
export const deleteCookie = (name) => {
|
||||
const domain = window.location.hostname.includes('.') ? '.' + window.location.hostname : window.location.hostname;
|
||||
document.cookie = name + '=; Max-Age=-99999999; path=/; domain=' + domain;
|
||||
};
|
||||
|
||||
export const deleteCookiesWithPrefix = (prefix) => {
|
||||
const cookies = document.cookie.split(';');
|
||||
for (let cookie of cookies) {
|
||||
const cookieName = cookie.split('=')[0].trim();
|
||||
if (cookieName.startsWith(prefix)) {
|
||||
deleteCookie(cookieName);
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user