Changes
This commit is contained in:
f4ilji
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
|
||||
<a href="#" @click.prevent="this.back" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</a>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "AcademicJournalsBackButton",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
back() {
|
||||
if (this.$page.props.urlPrev !== 'empty') {
|
||||
this.$inertia.visit(this.$page.props.urlPrev);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defineAsyncComponent} from "vue";
|
||||
|
||||
export default {
|
||||
name: "AcademicJournalsBuilder",
|
||||
components: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: () => import('@/Components/BuilderUi/Divisions/Blocks/HeadingBlock.vue'),
|
||||
paragraph: () => import('@/Components/BuilderUi/Divisions/Blocks/ParagraphBlock.vue'),
|
||||
images: () => import('@/Components/ClientImageSlider.vue'),
|
||||
image: () => import('@/Components/BuilderUi/Divisions/Blocks/ImageBlock.vue'),
|
||||
files: () => import('@/Components/BuilderUi/Divisions/Blocks/FileBlock.vue'),
|
||||
person: () => import('@/Components/BuilderUi/Divisions/Blocks/PersonBlock.vue'),
|
||||
stepper: () => import('@/Components/BuilderUi/Divisions/Blocks/StepperBlock.vue'),
|
||||
video: () => import('@/Components/BuilderUi/Divisions/Blocks/VideoBlock.vue'),
|
||||
tabs: () => import('@/Components/BuilderUi/Divisions/Blocks/TabBlock.vue'),
|
||||
postsList: () => import('@/Components/BuilderUi/Divisions/Blocks/PostListBlock.vue'),
|
||||
postItem: () => import('@/Components/BuilderUi/Divisions/Blocks/PageItemBlock.vue'),
|
||||
pageItem: () => import('@/Components/BuilderUi/Divisions/Blocks/PostItemBlock.vue'),
|
||||
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue')
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
|
||||
<h1 class="text-brand-primary text-2xl mb-3 mt-2 md:text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ header }}
|
||||
</h1>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "AcademicJournalsTitle",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<template v-for="file in block.data.file">
|
||||
<div class="">
|
||||
<a class="" :href="'/storage/'+ file.path" download type="button">
|
||||
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between duration-300 hover:bg-gray-100">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[30px] h-[30px] bg-black flex justify-center items-center rounded-md mr-2">
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.9375 12.2188H12.75C12.4682 12.2188 12.198 12.1068 11.9987 11.9076C11.7994 11.7083 11.6875 11.438 11.6875 11.1562V5.84375C11.6875 5.56196 11.7994 5.29171 11.9987 5.09245C12.198 4.89319 12.4682 4.78125 12.75 4.78125H15.9375V5.84375H12.75V11.1562H15.9375V12.2188ZM9.5625 12.2188H7.4375C7.15571 12.2188 6.88546 12.1068 6.6862 11.9076C6.48694 11.7083 6.375 11.438 6.375 11.1562V5.84375C6.375 5.56196 6.48694 5.29171 6.6862 5.09245C6.88546 4.89319 7.15571 4.78125 7.4375 4.78125H9.5625C9.84429 4.78125 10.1145 4.89319 10.3138 5.09245C10.5131 5.29171 10.625 5.56196 10.625 5.84375V11.1562C10.625 11.438 10.5131 11.7083 10.3138 11.9076C10.1145 12.1068 9.84429 12.2188 9.5625 12.2188ZM7.4375 5.84375V11.1562H9.5625V5.84375H7.4375ZM3.1875 12.2188H1.0625V4.78125H3.1875C3.75087 4.78195 4.29096 5.00606 4.68933 5.40442C5.08769 5.80279 5.3118 6.34288 5.3125 6.90625V10.0938C5.3118 10.6571 5.08769 11.1972 4.68933 11.5956C4.29096 11.9939 3.75087 12.218 3.1875 12.2188ZM2.125 11.1562H3.1875C3.46929 11.1562 3.73954 11.0443 3.9388 10.8451C4.13806 10.6458 4.25 10.3755 4.25 10.0938V6.90625C4.25 6.62446 4.13806 6.35421 3.9388 6.15495C3.73954 5.95569 3.46929 5.84375 3.1875 5.84375H2.125V11.1562Z" fill="#F8F8F8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ file.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "FileBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="md:font-bold md:text-xl text-lg font-medium text-gray-800">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "HeadingBlock",
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<img @click="toggler = !toggler" loading="lazy" class="mx-auto object-cover rounded-md hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + block.data.url" alt="">
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.url]"/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "ImageBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="ms-4 mt-2 w-full border px-4 py-4 rounded-xl shadow-sm">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-full px-2 sm:px-3 lg:px-4mx-auto">
|
||||
<!-- Grid -->
|
||||
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition"
|
||||
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex items-center gap-x-5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-1 shrink-0 size-7 text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
<div class="grow">
|
||||
<ol v-if="breadcrumbs" class="flex items-center whitespace-nowrap">
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.mainSection }}
|
||||
</span>
|
||||
<svg class="shrink-0 mx-2 size-4 text-gray-400" 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>
|
||||
</li>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.mainSection }}
|
||||
</span>
|
||||
<svg class="shrink-0 mx-2 size-4 text-gray-400" 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>
|
||||
</li>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.page }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
<h3 class="mt-1 group-hover:text-blue-600 font-semibold text-gray-700">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PageItemBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
breadcrumbs: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPage(id) {
|
||||
axios.get(route('client.widget.page.single', id))
|
||||
.then(response => {
|
||||
this.page = response.data.data.page;
|
||||
this.breadcrumbs = response.data.data.breadcrumbs;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPage(this.block.data.page)
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="text-sm text-gray-600 leading-6 md:text-[16px] md:text-[#374151] md:leading-8 md:font-light paragraph-container" v-html="wrapTables(block).data.content" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "ParagraphBlock",
|
||||
methods: {
|
||||
wrapTables(data) {
|
||||
if (data.type === 'paragraph' && data.data && data.data.content) {
|
||||
// Используем регулярное выражение для поиска всех таблиц
|
||||
const wrappedContent = data.data.content.replace(/<table([^>]*)>([\s\S]*?)<\/table>/g, (match, attrs, content) => {
|
||||
return `<div class="div-table"><table${attrs}>${content}</table></div>`;
|
||||
});
|
||||
|
||||
// Возвращаем новый объект с обновленным контентом
|
||||
return {
|
||||
...data,
|
||||
data: {
|
||||
...data.data,
|
||||
content: wrappedContent
|
||||
}
|
||||
};
|
||||
}
|
||||
return data; // Если тип не 'paragraph', возвращаем объект без изменений
|
||||
}
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-secondAzure;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container a:hover {
|
||||
@apply text-secondDarkBlue;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.paragraph-container ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.paragraph-container ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.paragraph-container li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
|
||||
.paragraph-container ul {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.paragraph-container hr {
|
||||
@apply my-4
|
||||
}
|
||||
|
||||
.paragraph-container strong {
|
||||
@apply text-xl
|
||||
}
|
||||
|
||||
.div-table {
|
||||
@apply overflow-x-auto
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container table {
|
||||
@apply w-full border-collapse mt-4 mb-4 overflow-hidden; /* Ширина 100%, стыковка границ, отступы, закругленные края */
|
||||
}
|
||||
|
||||
.paragraph-container th, .paragraph-container td {
|
||||
@apply border border-gray-300 p-3 text-left; /* Границы, отступы, выравнивание текста */
|
||||
}
|
||||
|
||||
.paragraph-container th {
|
||||
@apply bg-gray-100 text-gray-800 font-semibold; /* Фон заголовка, цвет текста, жирный шрифт */
|
||||
}
|
||||
|
||||
.paragraph-container tr {
|
||||
@apply transition-colors duration-200; /* Плавный переход цветов */
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container tr:hover {
|
||||
@apply bg-gray-200; /* Фон строки при наведении */
|
||||
}
|
||||
|
||||
.paragraph-container td {
|
||||
@apply text-gray-600; /* Цвет текста ячеек */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.paragraph-container tr:hover {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="w-full rounded-xl mb-4 p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img @click="toggler = !toggler" loading="lazy" class="rounded-xl w-[150px]" :src="'/storage/' + block.data.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<p class="font-medium text-gray-800 hover:text-gray-500">
|
||||
{{ block.data.name }}
|
||||
</p>
|
||||
<template v-for="item in block.data.info">
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ item.column }}: {{ item.content }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.photo]"/>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "PersonBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="w-full px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Проверка на загрузку данных -->
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
|
||||
<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.data.slug)">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img class="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
:src="post.data.preview ? 'storage/images/' + post.data.preview : '/img/thumbnail-1.png'" />
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
|
||||
{{ post.data.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-gray-600">
|
||||
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
|
||||
</p>
|
||||
<p class="mt-4 inline-flex items-center gap-x-1 text-sm text-primaryBlue decoration-2 group-hover:underline group-focus:underline font-medium">
|
||||
Читать далее
|
||||
<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="m9 18 6-6-6-6"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PostListBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
post: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPost(id) {
|
||||
axios.get(route('client.widget.post.single', id), {
|
||||
params: {
|
||||
count: this.block.data.count,
|
||||
category: this.block.data.category // Исправлено с count.category на category
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.post = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPost(this.block.data.post);
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="w-full px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Проверка на загрузку данных -->
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
|
||||
<template v-for="post in posts.data" :key="post.id">
|
||||
<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.slug)">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img class="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
:src="post.preview ? 'storage/images/' + post.preview : '/img/thumbnail-1.png'" />
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-gray-600">
|
||||
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
|
||||
</p>
|
||||
<p class="mt-4 inline-flex items-center gap-x-1 text-sm text-primaryBlue decoration-2 group-hover:underline group-focus:underline font-medium">
|
||||
Читать далее
|
||||
<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="m9 18 6-6-6-6"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
<div class="flex justify-center">
|
||||
<a :href="route('client.post.index', { category: block.data.category })" class="group inline-flex items-center gap-x-1 text-sm font-semibold text-[#1A5AAF]">
|
||||
Все новости
|
||||
<svg class="flex-shrink-0 size-4 transition ease-in-out group-hover:translate-x-1" 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"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PostListBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
posts: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPosts() {
|
||||
axios.get(route('client.widget.post.index'), {
|
||||
params: {
|
||||
count: this.block.data.count,
|
||||
category: this.block.data.category // Исправлено с count.category на category
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.posts = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPosts();
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(step, index) in block.data.steps">
|
||||
<div class="flex gap-x-3">
|
||||
<div class="w-16 text-end min-w-[4rem]">
|
||||
<span class="text-xs text-gray-500">{{ block.data.step_name }} {{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
|
||||
<div class="relative z-10 size-7 flex justify-center items-center">
|
||||
<div class="size-2 rounded-full bg-primaryBlue"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow max-w-[70%] pt-0.5 pb-8 overflow-wrap break-words">
|
||||
<h3 class="flex gap-x-1.5 font-semibold text-gray-800">
|
||||
{{ step.title }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600 step-content" v-html="step.content" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "StepperBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.step-content a {
|
||||
@apply text-secondAzure;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.step-content a:hover {
|
||||
@apply text-secondDarkBlue;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
|
||||
.step-content ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.step-content ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.step-content li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
|
||||
<div class="">
|
||||
<nav class="-mb-0.5 flex justify-center gap-x-2" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
|
||||
<button
|
||||
v-for="(tab, index) in block.data.tab" type="button"
|
||||
class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
:class="(activeTab === index) ? 'active' : ''"
|
||||
@click="activeTab = index"
|
||||
:id="generateSlug(tab.title) + '-item'"
|
||||
:data-hs-tab="'#' + generateSlug(tab.title)"
|
||||
aria-selected="false"
|
||||
:aria-controls="generateSlug(tab.title)" role="tab">
|
||||
{{ tab.title }}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<template v-for="(tab, index) in block.data.tab">
|
||||
|
||||
<div :id="generateSlug(tab.title)" :class="(activeTab === index) ? '' : 'hidden'"
|
||||
role="tabpanel" :aria-labelledby="generateSlug(tab.title) + '-item'">
|
||||
<PageTabBuilder :blocks="tab.content" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import PageTabBuilder from "@/Components/BuilderUi/Pages/PageTabBuilder.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "TabBlock",
|
||||
components: {
|
||||
PageTabBuilder
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<video class="h-full w-full rounded-lg" controls>
|
||||
<source
|
||||
:src="domainPath + '/storage/' + block.data.path"
|
||||
:type="block.data.mime"
|
||||
/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<figcaption class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
|
||||
{{ block.data.title }}
|
||||
</figcaption>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "VideoBlock",
|
||||
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<span v-if="this.filter.value !== null" class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
|
||||
{{ (filter.value.length > 1) ? filter.value.length + ' категории' : filter.content[filter.value[0]].data.title }}
|
||||
<button @click.prevent="clearFilter" type="button" class="shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-blue-200 focus:outline-none focus:bg-blue-200 focus:text-blue-500">
|
||||
<span class="sr-only">Remove badge</span>
|
||||
<svg class="shrink-0 size-3" 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>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "CategoryBadge",
|
||||
components: { Link },
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
|
||||
// Создаем массив для хранения всех ключей, которые нужно удалить
|
||||
const keysToDelete = [];
|
||||
|
||||
// Перебираем все параметры и добавляем ключи, начинающиеся с 'category', в массив
|
||||
for (const [key] of url.searchParams) {
|
||||
if (key.startsWith(this.filter.param)) {
|
||||
keysToDelete.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
// Удаляем все ключи из массива
|
||||
keysToDelete.forEach(key => url.searchParams.delete(key));
|
||||
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<span v-if="this.filter.value !== null" class="inline-flex items-center gap-x-1.5 py-1.5 ps-3 pe-2 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
{{ filter.value }}
|
||||
<button @click.prevent="clearFilter" type="button" class="shrink-0 size-4 inline-flex items-center justify-center rounded-full hover:bg-blue-200 focus:outline-none focus:bg-blue-200 focus:text-blue-500">
|
||||
<span class="sr-only">Remove badge</span>
|
||||
<svg class="shrink-0 size-3" 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>
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
export default {
|
||||
name: "FormBadge",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
|
||||
// Создаем массив для хранения всех ключей, которые нужно удалить
|
||||
const keysToDelete = [];
|
||||
|
||||
// Перебираем все параметры и добавляем ключи, начинающиеся с 'category', в массив
|
||||
for (const [key] of url.searchParams) {
|
||||
if (key.startsWith(this.filter.param)) {
|
||||
keysToDelete.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
// Удаляем все ключи из массива
|
||||
keysToDelete.forEach(key => url.searchParams.delete(key));
|
||||
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<template v-for="file in block.data.file">
|
||||
<div class="">
|
||||
<a class="" :href="'/storage/'+ file.path" download type="button">
|
||||
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between duration-300 hover:bg-gray-100">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[30px] h-[30px] bg-black flex justify-center items-center rounded-md mr-2">
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.9375 12.2188H12.75C12.4682 12.2188 12.198 12.1068 11.9987 11.9076C11.7994 11.7083 11.6875 11.438 11.6875 11.1562V5.84375C11.6875 5.56196 11.7994 5.29171 11.9987 5.09245C12.198 4.89319 12.4682 4.78125 12.75 4.78125H15.9375V5.84375H12.75V11.1562H15.9375V12.2188ZM9.5625 12.2188H7.4375C7.15571 12.2188 6.88546 12.1068 6.6862 11.9076C6.48694 11.7083 6.375 11.438 6.375 11.1562V5.84375C6.375 5.56196 6.48694 5.29171 6.6862 5.09245C6.88546 4.89319 7.15571 4.78125 7.4375 4.78125H9.5625C9.84429 4.78125 10.1145 4.89319 10.3138 5.09245C10.5131 5.29171 10.625 5.56196 10.625 5.84375V11.1562C10.625 11.438 10.5131 11.7083 10.3138 11.9076C10.1145 12.1068 9.84429 12.2188 9.5625 12.2188ZM7.4375 5.84375V11.1562H9.5625V5.84375H7.4375ZM3.1875 12.2188H1.0625V4.78125H3.1875C3.75087 4.78195 4.29096 5.00606 4.68933 5.40442C5.08769 5.80279 5.3118 6.34288 5.3125 6.90625V10.0938C5.3118 10.6571 5.08769 11.1972 4.68933 11.5956C4.29096 11.9939 3.75087 12.218 3.1875 12.2188ZM2.125 11.1562H3.1875C3.46929 11.1562 3.73954 11.0443 3.9388 10.8451C4.13806 10.6458 4.25 10.3755 4.25 10.0938V6.90625C4.25 6.62446 4.13806 6.35421 3.9388 6.15495C3.73954 5.95569 3.46929 5.84375 3.1875 5.84375H2.125V11.1562Z" fill="#F8F8F8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ file.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "FileBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="md:font-bold md:text-xl text-lg font-medium text-gray-800">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "HeadingBlock",
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<img @click="toggler = !toggler" loading="lazy" class="mx-auto object-cover rounded-md hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + block.data.url" alt="">
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.url]"/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "ImageBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="ms-4 mt-2 w-full border px-4 py-4 rounded-xl shadow-sm">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-full px-2 sm:px-3 lg:px-4mx-auto">
|
||||
<!-- Grid -->
|
||||
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition"
|
||||
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex items-center gap-x-5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-1 shrink-0 size-7 text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
<div class="grow">
|
||||
<ol v-if="breadcrumbs" class="flex items-center whitespace-nowrap">
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.mainSection }}
|
||||
</span>
|
||||
<svg class="shrink-0 mx-2 size-4 text-gray-400" 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>
|
||||
</li>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.mainSection }}
|
||||
</span>
|
||||
<svg class="shrink-0 mx-2 size-4 text-gray-400" 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>
|
||||
</li>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.page }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
<h3 class="mt-1 group-hover:text-blue-600 font-semibold text-gray-700">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PageItemBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
breadcrumbs: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPage(id) {
|
||||
axios.get(route('client.widget.page.single', id))
|
||||
.then(response => {
|
||||
this.page = response.data.data.page;
|
||||
this.breadcrumbs = response.data.data.breadcrumbs;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPage(this.block.data.page)
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
+122
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="text-sm text-gray-600 leading-6 md:text-[16px] md:text-[#374151] md:leading-8 md:font-light paragraph-container" v-html="wrapTables(block).data.content" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "ParagraphBlock",
|
||||
methods: {
|
||||
wrapTables(data) {
|
||||
if (data.type === 'paragraph' && data.data && data.data.content) {
|
||||
// Используем регулярное выражение для поиска всех таблиц
|
||||
const wrappedContent = data.data.content.replace(/<table([^>]*)>([\s\S]*?)<\/table>/g, (match, attrs, content) => {
|
||||
return `<div class="div-table"><table${attrs}>${content}</table></div>`;
|
||||
});
|
||||
|
||||
// Возвращаем новый объект с обновленным контентом
|
||||
return {
|
||||
...data,
|
||||
data: {
|
||||
...data.data,
|
||||
content: wrappedContent
|
||||
}
|
||||
};
|
||||
}
|
||||
return data; // Если тип не 'paragraph', возвращаем объект без изменений
|
||||
}
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-secondAzure;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container a:hover {
|
||||
@apply text-secondDarkBlue;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.paragraph-container ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.paragraph-container ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.paragraph-container li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
|
||||
.paragraph-container ul {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.paragraph-container hr {
|
||||
@apply my-4
|
||||
}
|
||||
|
||||
.paragraph-container strong {
|
||||
@apply text-xl
|
||||
}
|
||||
|
||||
.div-table {
|
||||
@apply overflow-x-auto
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container table {
|
||||
@apply w-full border-collapse mt-4 mb-4 overflow-hidden; /* Ширина 100%, стыковка границ, отступы, закругленные края */
|
||||
}
|
||||
|
||||
.paragraph-container th, .paragraph-container td {
|
||||
@apply border border-gray-300 p-3 text-left; /* Границы, отступы, выравнивание текста */
|
||||
}
|
||||
|
||||
.paragraph-container th {
|
||||
@apply bg-gray-100 text-gray-800 font-semibold; /* Фон заголовка, цвет текста, жирный шрифт */
|
||||
}
|
||||
|
||||
.paragraph-container tr {
|
||||
@apply transition-colors duration-200; /* Плавный переход цветов */
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container tr:hover {
|
||||
@apply bg-gray-200; /* Фон строки при наведении */
|
||||
}
|
||||
|
||||
.paragraph-container td {
|
||||
@apply text-gray-600; /* Цвет текста ячеек */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.paragraph-container tr:hover {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="w-full rounded-xl mb-4 p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img @click="toggler = !toggler" loading="lazy" class="rounded-xl w-[150px]" :src="'/storage/' + block.data.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<p class="font-medium text-gray-800 hover:text-gray-500">
|
||||
{{ block.data.name }}
|
||||
</p>
|
||||
<template v-for="item in block.data.info">
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ item.column }}: {{ item.content }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.photo]"/>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "PersonBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="w-full px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Проверка на загрузку данных -->
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
|
||||
<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.data.slug)">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img class="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
:src="post.data.preview ? 'storage/images/' + post.data.preview : '/img/thumbnail-1.png'" />
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
|
||||
{{ post.data.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-gray-600">
|
||||
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
|
||||
</p>
|
||||
<p class="mt-4 inline-flex items-center gap-x-1 text-sm text-primaryBlue decoration-2 group-hover:underline group-focus:underline font-medium">
|
||||
Читать далее
|
||||
<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="m9 18 6-6-6-6"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PostListBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
post: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPost(id) {
|
||||
axios.get(route('client.widget.post.single', id), {
|
||||
params: {
|
||||
count: this.block.data.count,
|
||||
category: this.block.data.category // Исправлено с count.category на category
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.post = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPost(this.block.data.post);
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
+149
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="w-full px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Проверка на загрузку данных -->
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
|
||||
<template v-for="post in posts.data" :key="post.id">
|
||||
<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.slug)">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img class="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
:src="post.preview ? 'storage/images/' + post.preview : '/img/thumbnail-1.png'" />
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-gray-600">
|
||||
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
|
||||
</p>
|
||||
<p class="mt-4 inline-flex items-center gap-x-1 text-sm text-primaryBlue decoration-2 group-hover:underline group-focus:underline font-medium">
|
||||
Читать далее
|
||||
<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="m9 18 6-6-6-6"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
<div class="flex justify-center">
|
||||
<a :href="route('client.post.index', { category: block.data.category })" class="group inline-flex items-center gap-x-1 text-sm font-semibold text-[#1A5AAF]">
|
||||
Все новости
|
||||
<svg class="flex-shrink-0 size-4 transition ease-in-out group-hover:translate-x-1" 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"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PostListBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
posts: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPosts() {
|
||||
axios.get(route('client.widget.post.index'), {
|
||||
params: {
|
||||
count: this.block.data.count,
|
||||
category: this.block.data.category // Исправлено с count.category на category
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.posts = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPosts();
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(step, index) in block.data.steps">
|
||||
<div class="flex gap-x-3">
|
||||
<div class="w-16 text-end min-w-[4rem]">
|
||||
<span class="text-xs text-gray-500">{{ block.data.step_name }} {{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
|
||||
<div class="relative z-10 size-7 flex justify-center items-center">
|
||||
<div class="size-2 rounded-full bg-primaryBlue"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow max-w-[70%] pt-0.5 pb-8 overflow-wrap break-words">
|
||||
<h3 class="flex gap-x-1.5 font-semibold text-gray-800">
|
||||
{{ step.title }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600 step-content" v-html="step.content" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "StepperBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.step-content a {
|
||||
@apply text-secondAzure;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.step-content a:hover {
|
||||
@apply text-secondDarkBlue;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
|
||||
.step-content ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.step-content ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.step-content li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
|
||||
<div class="">
|
||||
<nav class="-mb-0.5 flex justify-center gap-x-2" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
|
||||
<button
|
||||
v-for="(tab, index) in block.data.tab" type="button"
|
||||
class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
:class="(activeTab === index) ? 'active' : ''"
|
||||
@click="activeTab = index"
|
||||
:id="generateSlug(tab.title) + '-item'"
|
||||
:data-hs-tab="'#' + generateSlug(tab.title)"
|
||||
aria-selected="false"
|
||||
:aria-controls="generateSlug(tab.title)" role="tab">
|
||||
{{ tab.title }}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<template v-for="(tab, index) in block.data.tab">
|
||||
|
||||
<div :id="generateSlug(tab.title)" :class="(activeTab === index) ? '' : 'hidden'"
|
||||
role="tabpanel" :aria-labelledby="generateSlug(tab.title) + '-item'">
|
||||
<PageTabBuilder :blocks="tab.content" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import PageTabBuilder from "@/Components/BuilderUi/Pages/PageTabBuilder.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "TabBlock",
|
||||
components: {
|
||||
PageTabBuilder
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<video class="h-full w-full rounded-lg" controls>
|
||||
<source
|
||||
:src="domainPath + '/storage/' + block.data.path"
|
||||
:type="block.data.mime"
|
||||
/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<figcaption class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
|
||||
{{ block.data.title }}
|
||||
</figcaption>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "VideoBlock",
|
||||
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
|
||||
<div class="">
|
||||
<!--Фильтр-->
|
||||
|
||||
<button type="button" class="py-3 px-4 inline-flex 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-offcanvas-example" data-hs-overlay="#hs-offcanvas-example">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
<!--Конец Фильтра-->
|
||||
</div>
|
||||
<div id="hs-offcanvas-example" class="hs-overlay hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-e overflow-auto" role="dialog" tabindex="-1" aria-labelledby="hs-offcanvas-example-label">
|
||||
<div class="flex justify-between items-center py-3 px-4 border-b">
|
||||
<h3 id="hs-offcanvas-example-label" class="font-bold text-gray-800">
|
||||
Фильтры
|
||||
</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-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-offcanvas-example">
|
||||
<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">
|
||||
<div class="hs-accordion-group">
|
||||
<div class="hs-accordion" :id="'id' + form_education_filter.type">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-basic-with-arrow-collapse-two">
|
||||
<svg class="hs-accordion-active:hidden block 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 9 6 6 6-6"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden 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 15-6-6-6 6"></path>
|
||||
</svg>
|
||||
Формат обучения
|
||||
</button>
|
||||
<div id="hs-basic-with-arrow-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" :aria-labelledby="'id' + form_education_filter.type">
|
||||
<FormEducationalFilter :forms="forms_educational" :formEdu_filter="form_education_filter" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hs-accordion" :id="'id' + category_filter.type">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-basic-with-arrow-collapse-two">
|
||||
<svg class="hs-accordion-active:hidden block 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 9 6 6 6-6"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden 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 15-6-6-6 6"></path>
|
||||
</svg>
|
||||
Категория
|
||||
</button>
|
||||
<div id="hs-basic-with-arrow-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" :aria-labelledby="'id' + category_filter.type">
|
||||
<CategoryFilter :categories="categories" :category_filter="category_filter" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {debounce} from "lodash/function.js";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import CategoryFilter from "@/Components/BuilderUi/Events/Filters/CategoryFilter.vue";
|
||||
import TagFilter from "@/Components/BuilderUi/Events/Filters/TagFilter.vue";
|
||||
import SortingByFilter from "@/Components/BuilderUi/Events/Filters/SortingByFilter.vue";
|
||||
import FormEducationalFilter from "@/Components/BuilderUi/Programs/Filters/FormEducationalFilter.vue";
|
||||
import BudgetFilter from "@/Components/BuilderUi/Programs/Filters/BudgetFilter.vue";
|
||||
import DirectionFilter from "@/Components/BuilderUi/Programs/Filters/DirectionFilter.vue";
|
||||
|
||||
export default {
|
||||
name: "ClientAdditionalProgramFilter",
|
||||
components: {
|
||||
DirectionFilter,
|
||||
FormEducationalFilter, BudgetFilter, SortingByFilter, TagFilter, CategoryFilter, BaseIcon},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
forms_educational: {
|
||||
type: Object,
|
||||
},
|
||||
categories: {
|
||||
type: Object,
|
||||
},
|
||||
form_education_filter: {
|
||||
type: Object,
|
||||
},
|
||||
category_filter: {
|
||||
type: Object,
|
||||
},
|
||||
qualification_filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="min-w-[12rem] py-1 space-y-3">
|
||||
<button @click.prevent="clearFilter" class="text-gray-500 text-sm flex gap-x-1 items-center hover:text-gray-700">
|
||||
<BaseIcon class="w-4 h-4" name="delete" />
|
||||
<span>Очистить</span>
|
||||
</button>
|
||||
|
||||
<div class="divide-y divide-gray-200 dark:divide-gray-700 max-h-[30vh] overflow-y-auto">
|
||||
<div>
|
||||
<div class="flex flex-col ml-3">
|
||||
<div v-for="(budget, index) in budgets">
|
||||
<input v-model="budgetEdu" :value="index" @change="filter"
|
||||
type="radio" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
|
||||
:id="'inp-tag' + index">
|
||||
<label :for="'inp-tag' + index" class="text-sm text-gray-500 ms-3 dark:text-neutral-400">{{ budget }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import SearchBadge from "@/Components/BuilderUi/Events/Badges/SearchBadge.vue";
|
||||
import CategoryBadge from "@/Components/BuilderUi/Events/Badges/CategoryBadge.vue";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import {debounce} from "lodash/function.js";
|
||||
export default {
|
||||
name: "BudgetFilter",
|
||||
components: {
|
||||
BaseIcon,
|
||||
Link,
|
||||
SearchBadge,
|
||||
CategoryBadge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
budgetEdu: this.budget_filter.value || [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter: debounce(function () {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('page');
|
||||
url.searchParams.delete('budget');
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
data: {
|
||||
budget: this.budgetEdu,
|
||||
},
|
||||
});
|
||||
}, 500),
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('budget');
|
||||
this.budgetEdu = [];
|
||||
this.searchTerm = ''; // Сбросить поле поиска
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
props: {
|
||||
budgets: {
|
||||
type: Object,
|
||||
},
|
||||
budget_filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="min-w-[12rem] py-1 space-y-3">
|
||||
<button @click.prevent="clearFilter" class="text-gray-500 text-sm flex gap-x-1 items-center hover:text-gray-700">
|
||||
<BaseIcon class="w-4 h-4" name="delete" />
|
||||
<span>Очистить</span>
|
||||
</button>
|
||||
|
||||
<div class="divide-y divide-gray-200 dark:divide-gray-700 max-h-[30vh] overflow-y-auto">
|
||||
<div>
|
||||
<div class="flex flex-col ml-3">
|
||||
<div v-for="item in categories" :key="item.id">
|
||||
<input v-model="category" :value="item.slug" @change="filter"
|
||||
type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
|
||||
:id="'inp' + item.id">
|
||||
<label :for="'inp' + item.id" class="text-sm text-gray-500 ms-3 dark:text-neutral-400">{{ item.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import SearchBadge from "@/Components/BuilderUi/Events/Badges/SearchBadge.vue";
|
||||
import CategoryBadge from "@/Components/BuilderUi/Events/Badges/CategoryBadge.vue";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import {debounce} from "lodash/function.js";
|
||||
export default {
|
||||
name: "CategoryFilter",
|
||||
components: {
|
||||
BaseIcon,
|
||||
Link,
|
||||
SearchBadge,
|
||||
CategoryBadge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
category: this.category_filter.value || [],
|
||||
searchTerm: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter: debounce(function () {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('page');
|
||||
url.searchParams.delete('category[]');
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
data: {
|
||||
category: this.category,
|
||||
},
|
||||
});
|
||||
}, 500),
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('category[]');
|
||||
this.category = [];
|
||||
this.searchTerm = ''; // Сбросить поле поиска
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
props: {
|
||||
categories: {
|
||||
type: Object,
|
||||
},
|
||||
category_filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="min-w-[12rem] py-1 space-y-3">
|
||||
<button @click.prevent="clearFilter" class="text-gray-500 text-sm flex gap-x-1 items-center hover:text-gray-700">
|
||||
<BaseIcon class="w-4 h-4" name="delete" />
|
||||
<span>Очистить</span>
|
||||
</button>
|
||||
|
||||
<div class="divide-y divide-gray-200 dark:divide-gray-700 max-h-[30vh] overflow-y-auto">
|
||||
<div>
|
||||
<div class="flex flex-col ml-3">
|
||||
<div v-for="(form, index) in forms">
|
||||
<input v-model="formEdu" :value="index" @change="filter"
|
||||
type="radio" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
|
||||
:id="'inp-tag' + index">
|
||||
<label :for="'inp-tag' + index" class="text-sm text-gray-500 ms-3 dark:text-neutral-400">{{ form }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import SearchBadge from "@/Components/BuilderUi/Events/Badges/SearchBadge.vue";
|
||||
import CategoryBadge from "@/Components/BuilderUi/Events/Badges/CategoryBadge.vue";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import {debounce} from "lodash/function.js";
|
||||
export default {
|
||||
name: "FormEducationalFilter",
|
||||
components: {
|
||||
BaseIcon,
|
||||
Link,
|
||||
SearchBadge,
|
||||
CategoryBadge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formEdu: this.formEdu_filter.value || [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter: debounce(function () {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('page');
|
||||
url.searchParams.delete('form');
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
data: {
|
||||
form: this.formEdu,
|
||||
},
|
||||
});
|
||||
}, 500),
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('form');
|
||||
this.formEdu = [];
|
||||
this.searchTerm = ''; // Сбросить поле поиска
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
props: {
|
||||
forms: {
|
||||
type: Object,
|
||||
},
|
||||
formEdu_filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<select @change="handleChange" v-model="directionEdu" class="py-3 px-4 pe-9 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">
|
||||
<option selected value="">Все</option>
|
||||
<option v-for="direction in directions.data" :value="direction.slug">{{ direction.title }}</option>
|
||||
</select>
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import SearchBadge from "@/Components/BuilderUi/Events/Badges/SearchBadge.vue";
|
||||
import CategoryBadge from "@/Components/BuilderUi/Events/Badges/CategoryBadge.vue";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import {debounce} from "lodash/function.js";
|
||||
export default {
|
||||
name: "LevelEduFilter",
|
||||
components: {
|
||||
BaseIcon,
|
||||
Link,
|
||||
SearchBadge,
|
||||
CategoryBadge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
directionEdu: this.direction_filter?.value || '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
if (this.directionEdu === "") {
|
||||
this.clearFilter();
|
||||
} else {
|
||||
this.filter();
|
||||
}
|
||||
},
|
||||
filter: debounce(function () {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('page');
|
||||
url.searchParams.delete('direction');
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
data: {
|
||||
direction: this.directionEdu,
|
||||
},
|
||||
});
|
||||
}, 200),
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('direction');
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
directions: {
|
||||
type: Object,
|
||||
},
|
||||
direction_filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="min-w-[12rem] py-1 space-y-3">
|
||||
<h3 class="font-medium text-gray-900 text-sm mb-2">Сортировать по</h3>
|
||||
<div>
|
||||
<select @change="filter" v-model="sortOrder" class="py-2 px-3 pe-9 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600">
|
||||
<option value="desc">Дате (Сначала новые)</option>
|
||||
<option value="asc">Дате (Сначала старые)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import SearchBadge from "@/Components/BuilderUi/Events/Badges/SearchBadge.vue";
|
||||
import CategoryBadge from "@/Components/BuilderUi/Events/Badges/CategoryBadge.vue";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import {debounce} from "lodash/function.js";
|
||||
export default {
|
||||
name: "SortingByFilter",
|
||||
components: {
|
||||
BaseIcon,
|
||||
Link,
|
||||
SearchBadge,
|
||||
CategoryBadge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sortOrder: this.sortingBy_filter.value || 'desc',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filter: debounce(function () {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('page');
|
||||
url.searchParams.delete('sort');
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
data: {
|
||||
sort: this.sortOrder,
|
||||
},
|
||||
});
|
||||
}, 500),
|
||||
clearFilter() {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete('sort');
|
||||
this.tag_slug = [];
|
||||
this.searchTerm = ''; // Сбросить поле поиска
|
||||
let newUrl = url.toString();
|
||||
this.$inertia.visit(newUrl, {
|
||||
method: 'get',
|
||||
preserveState: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
sortingBy_filter: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
|
||||
<a href="#" @click.prevent="this.back" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</a>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "AdditionalProgramBackButton",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
back() {
|
||||
if (this.$page.props.urlPrev !== 'empty') {
|
||||
this.$inertia.visit(this.$page.props.urlPrev);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(filter, index) in filters"
|
||||
:key="index"
|
||||
:is="getComponent(filter.type)"
|
||||
:filter="filter"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import CategoryBadge from "@/Components/BuilderUi/AdditionalEducationPrograms/Badges/CategoryBadge.vue";
|
||||
import FormBadge from "@/Components/BuilderUi/AdditionalEducationPrograms/Badges/FormBadge.vue";
|
||||
export default {
|
||||
name: "ProgramBadge",
|
||||
components: {
|
||||
Link,
|
||||
CategoryBadge,
|
||||
FormBadge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
category: 'CategoryBadge',
|
||||
form: 'FormBadge',
|
||||
};
|
||||
return componentMap[type] || null;
|
||||
},
|
||||
},
|
||||
props: {
|
||||
filters: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defineAsyncComponent} from "vue";
|
||||
|
||||
export default {
|
||||
name: "ProgramBuilder",
|
||||
components: {
|
||||
},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
|
||||
paragraph: () => import('@/Components/BuilderUi/Pages/Blocks/ParagraphBlock.vue'),
|
||||
images: () => import('@/Components/ClientImageSlider.vue'),
|
||||
image: () => import('@/Components/BuilderUi/Pages/Blocks/ImageBlock.vue'),
|
||||
files: () => import('@/Components/BuilderUi/Pages/Blocks/FileBlock.vue'),
|
||||
person: () => import('@/Components/BuilderUi/Pages/Blocks/PersonBlock.vue'),
|
||||
stepper: () => import('@/Components/BuilderUi/Pages/Blocks/StepperBlock.vue'),
|
||||
video: () => import('@/Components/BuilderUi/Pages/Blocks/VideoBlock.vue'),
|
||||
tabs: () => import('@/Components/BuilderUi/Pages/Blocks/TabBlock.vue'),
|
||||
postsList: () => import('@/Components/BuilderUi/Pages/Blocks/PostListBlock.vue'),
|
||||
postItem: () => import('@/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue'),
|
||||
pageItem: () => import('@/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue'),
|
||||
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue')
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
|
||||
<h1 class="text-brand-primary text-2xl mb-3 mt-2 md:text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ header }}
|
||||
</h1>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "ProgramTitle",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<template v-for="file in block.data.file">
|
||||
<div class="">
|
||||
<a class="" :href="'/storage/'+ file.path" download type="button">
|
||||
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between duration-300 hover:bg-gray-100">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[30px] h-[30px] bg-black flex justify-center items-center rounded-md mr-2">
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.9375 12.2188H12.75C12.4682 12.2188 12.198 12.1068 11.9987 11.9076C11.7994 11.7083 11.6875 11.438 11.6875 11.1562V5.84375C11.6875 5.56196 11.7994 5.29171 11.9987 5.09245C12.198 4.89319 12.4682 4.78125 12.75 4.78125H15.9375V5.84375H12.75V11.1562H15.9375V12.2188ZM9.5625 12.2188H7.4375C7.15571 12.2188 6.88546 12.1068 6.6862 11.9076C6.48694 11.7083 6.375 11.438 6.375 11.1562V5.84375C6.375 5.56196 6.48694 5.29171 6.6862 5.09245C6.88546 4.89319 7.15571 4.78125 7.4375 4.78125H9.5625C9.84429 4.78125 10.1145 4.89319 10.3138 5.09245C10.5131 5.29171 10.625 5.56196 10.625 5.84375V11.1562C10.625 11.438 10.5131 11.7083 10.3138 11.9076C10.1145 12.1068 9.84429 12.2188 9.5625 12.2188ZM7.4375 5.84375V11.1562H9.5625V5.84375H7.4375ZM3.1875 12.2188H1.0625V4.78125H3.1875C3.75087 4.78195 4.29096 5.00606 4.68933 5.40442C5.08769 5.80279 5.3118 6.34288 5.3125 6.90625V10.0938C5.3118 10.6571 5.08769 11.1972 4.68933 11.5956C4.29096 11.9939 3.75087 12.218 3.1875 12.2188ZM2.125 11.1562H3.1875C3.46929 11.1562 3.73954 11.0443 3.9388 10.8451C4.13806 10.6458 4.25 10.3755 4.25 10.0938V6.90625C4.25 6.62446 4.13806 6.35421 3.9388 6.15495C3.73954 5.95569 3.46929 5.84375 3.1875 5.84375H2.125V11.1562Z" fill="#F8F8F8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ file.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "FileBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="md:font-bold md:text-xl text-lg font-medium text-gray-800">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "HeadingBlock",
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<img @click="toggler = !toggler" loading="lazy" class="mx-auto object-cover rounded-md hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + block.data.url" alt="">
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.url]"/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "ImageBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="ms-4 mt-2 w-full border px-4 py-4 rounded-xl shadow-sm">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-full px-2 sm:px-3 lg:px-4mx-auto">
|
||||
<!-- Grid -->
|
||||
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition"
|
||||
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex items-center gap-x-5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-1 shrink-0 size-7 text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
<div class="grow">
|
||||
<ol v-if="breadcrumbs" class="flex items-center whitespace-nowrap">
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.mainSection }}
|
||||
</span>
|
||||
<svg class="shrink-0 mx-2 size-4 text-gray-400" 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>
|
||||
</li>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.mainSection }}
|
||||
</span>
|
||||
<svg class="shrink-0 mx-2 size-4 text-gray-400" 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>
|
||||
</li>
|
||||
<li class="inline-flex items-center">
|
||||
<span class="flex items-center text-sm text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-600" href="#">
|
||||
{{ breadcrumbs.page }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
<h3 class="mt-1 group-hover:text-blue-600 font-semibold text-gray-700">
|
||||
{{ page.title }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- End Grid -->
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PageItemBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
page: null,
|
||||
breadcrumbs: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPage(id) {
|
||||
axios.get(route('client.widget.page.single', id))
|
||||
.then(response => {
|
||||
this.page = response.data.data.page;
|
||||
this.breadcrumbs = response.data.data.breadcrumbs;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPage(this.block.data.page)
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="text-sm text-gray-600 leading-6 md:text-[16px] md:text-[#374151] md:leading-8 md:font-light paragraph-container" v-html="wrapTables(block).data.content" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "ParagraphBlock",
|
||||
methods: {
|
||||
wrapTables(data) {
|
||||
if (data.type === 'paragraph' && data.data && data.data.content) {
|
||||
// Используем регулярное выражение для поиска всех таблиц
|
||||
const wrappedContent = data.data.content.replace(/<table([^>]*)>([\s\S]*?)<\/table>/g, (match, attrs, content) => {
|
||||
return `<div class="div-table"><table${attrs}>${content}</table></div>`;
|
||||
});
|
||||
|
||||
// Возвращаем новый объект с обновленным контентом
|
||||
return {
|
||||
...data,
|
||||
data: {
|
||||
...data.data,
|
||||
content: wrappedContent
|
||||
}
|
||||
};
|
||||
}
|
||||
return data; // Если тип не 'paragraph', возвращаем объект без изменений
|
||||
}
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-secondAzure;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container a:hover {
|
||||
@apply text-secondDarkBlue;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.paragraph-container p {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.paragraph-container ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.paragraph-container ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.paragraph-container li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
|
||||
.paragraph-container ul {
|
||||
@apply mb-4
|
||||
}
|
||||
|
||||
.paragraph-container hr {
|
||||
@apply my-4
|
||||
}
|
||||
|
||||
.paragraph-container strong {
|
||||
@apply text-xl
|
||||
}
|
||||
|
||||
.div-table {
|
||||
@apply overflow-x-auto
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container table {
|
||||
@apply w-full border-collapse mt-4 mb-4 overflow-hidden; /* Ширина 100%, стыковка границ, отступы, закругленные края */
|
||||
}
|
||||
|
||||
.paragraph-container th, .paragraph-container td {
|
||||
@apply border border-gray-300 p-3 text-left; /* Границы, отступы, выравнивание текста */
|
||||
}
|
||||
|
||||
.paragraph-container th {
|
||||
@apply bg-gray-100 text-gray-800 font-semibold; /* Фон заголовка, цвет текста, жирный шрифт */
|
||||
}
|
||||
|
||||
.paragraph-container tr {
|
||||
@apply transition-colors duration-200; /* Плавный переход цветов */
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container tr:hover {
|
||||
@apply bg-gray-200; /* Фон строки при наведении */
|
||||
}
|
||||
|
||||
.paragraph-container td {
|
||||
@apply text-gray-600; /* Цвет текста ячеек */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.paragraph-container tr:hover {
|
||||
@apply bg-gray-100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="w-full rounded-xl mb-4 p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img @click="toggler = !toggler" loading="lazy" class="rounded-xl w-[150px]" :src="'/storage/' + block.data.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<p class="font-medium text-gray-800 hover:text-gray-500">
|
||||
{{ block.data.name }}
|
||||
</p>
|
||||
<template v-for="item in block.data.info">
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ item.column }}: {{ item.content }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
|
||||
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.photo]"/>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "PersonBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="w-full px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Проверка на загрузку данных -->
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
|
||||
<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.data.slug)">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img class="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
:src="post.data.preview ? 'storage/images/' + post.data.preview : '/img/thumbnail-1.png'" />
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
|
||||
{{ post.data.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-gray-600">
|
||||
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
|
||||
</p>
|
||||
<p class="mt-4 inline-flex items-center gap-x-1 text-sm text-primaryBlue decoration-2 group-hover:underline group-focus:underline font-medium">
|
||||
Читать далее
|
||||
<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="m9 18 6-6-6-6"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PostListBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
post: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPost(id) {
|
||||
axios.get(route('client.widget.post.single', id), {
|
||||
params: {
|
||||
count: this.block.data.count,
|
||||
category: this.block.data.category // Исправлено с count.category на category
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.post = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPost(this.block.data.post);
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="w-full px-4 py-5 sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<!-- Проверка на загрузку данных -->
|
||||
|
||||
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="grid lg:grid-cols-1 lg:gap-y-16 gap-10">
|
||||
<template v-for="post in posts.data" :key="post.id">
|
||||
<Link class="group block rounded-xl overflow-hidden focus:outline-none" :href="route('client.post.show', post.slug)">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-5">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<img class="group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl"
|
||||
:src="post.preview ? 'storage/images/' + post.preview : '/img/thumbnail-1.png'" />
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
<p class="mt-3 text-gray-600">
|
||||
Produce professional, reliable streams easily leveraging Preline's innovative broadcast studio
|
||||
</p>
|
||||
<p class="mt-4 inline-flex items-center gap-x-1 text-sm text-primaryBlue decoration-2 group-hover:underline group-focus:underline font-medium">
|
||||
Читать далее
|
||||
<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="m9 18 6-6-6-6"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</template>
|
||||
<div class="flex justify-center">
|
||||
<a :href="route('client.post.index', { category: block.data.category })" class="group inline-flex items-center gap-x-1 text-sm font-semibold text-[#1A5AAF]">
|
||||
Все новости
|
||||
<svg class="flex-shrink-0 size-4 transition ease-in-out group-hover:translate-x-1" 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"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
|
||||
export default {
|
||||
name: "PostListBlock",
|
||||
components: { axios, Link },
|
||||
data() {
|
||||
return {
|
||||
posts: null,
|
||||
loading: true, // Состояние загрузки
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPosts() {
|
||||
axios.get(route('client.widget.post.index'), {
|
||||
params: {
|
||||
count: this.block.data.count,
|
||||
category: this.block.data.category // Исправлено с count.category на category
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
this.posts = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPosts();
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fslightbox-container {
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(step, index) in block.data.steps">
|
||||
<div class="flex gap-x-3">
|
||||
<div class="w-16 text-end min-w-[4rem]">
|
||||
<span class="text-xs text-gray-500">{{ block.data.step_name }} {{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
|
||||
<div class="relative z-10 size-7 flex justify-center items-center">
|
||||
<div class="size-2 rounded-full bg-primaryBlue"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grow max-w-[70%] pt-0.5 pb-8 overflow-wrap break-words">
|
||||
<h3 class="flex gap-x-1.5 font-semibold text-gray-800">
|
||||
{{ step.title }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600 step-content" v-html="step.content" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "StepperBlock",
|
||||
components: { FsLightbox },
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.step-content a {
|
||||
@apply text-secondAzure;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
.step-content a:hover {
|
||||
@apply text-secondDarkBlue;
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
|
||||
.step-content ol li {
|
||||
@apply list-decimal list-inside
|
||||
}
|
||||
|
||||
.step-content ul li {
|
||||
@apply list-disc list-inside
|
||||
}
|
||||
|
||||
.step-content li ol {
|
||||
@apply ml-10
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
|
||||
<div class="">
|
||||
<nav class="-mb-0.5 flex justify-center gap-x-2" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
|
||||
<button
|
||||
v-for="(tab, index) in block.data.tab" type="button"
|
||||
class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
:class="(activeTab === index) ? 'active' : ''"
|
||||
@click="activeTab = index"
|
||||
:id="generateSlug(tab.title) + '-item'"
|
||||
:data-hs-tab="'#' + generateSlug(tab.title)"
|
||||
aria-selected="false"
|
||||
:aria-controls="generateSlug(tab.title)" role="tab">
|
||||
{{ tab.title }}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<template v-for="(tab, index) in block.data.tab">
|
||||
|
||||
<div :id="generateSlug(tab.title)" :class="(activeTab === index) ? '' : 'hidden'"
|
||||
role="tabpanel" :aria-labelledby="generateSlug(tab.title) + '-item'">
|
||||
<PageTabBuilder :blocks="tab.content" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import PageTabBuilder from "@/Components/BuilderUi/Pages/PageTabBuilder.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "TabBlock",
|
||||
components: {
|
||||
PageTabBuilder
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSlug: function (text) {
|
||||
return slugify(text, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
locale: 'ru'
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<video class="h-full w-full rounded-lg" controls>
|
||||
<source
|
||||
:src="domainPath + '/storage/' + block.data.path"
|
||||
:type="block.data.mime"
|
||||
/>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<figcaption class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
|
||||
{{ block.data.title }}
|
||||
</figcaption>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import slugify from "slugify";
|
||||
import FsLightbox from "fslightbox-vue/v3";
|
||||
|
||||
|
||||
export default {
|
||||
name: "VideoBlock",
|
||||
|
||||
data() {
|
||||
return {
|
||||
toggler: false,
|
||||
domainPath: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
mounted() {
|
||||
this.domainPath = window.location.origin;
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
|
||||
<a href="#" @click.prevent="this.back" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/></svg>
|
||||
{{ title }}
|
||||
</a>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "DivisionBackButton",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
back() {
|
||||
if (this.$page.props.urlPrev !== 'empty') {
|
||||
this.$inertia.visit(this.$page.props.urlPrev);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defineAsyncComponent} from "vue";
|
||||
|
||||
export default {
|
||||
name: "DivisionBuilder",
|
||||
components: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: () => import('@/Components/BuilderUi/Divisions/Blocks/HeadingBlock.vue'),
|
||||
paragraph: () => import('@/Components/BuilderUi/Divisions/Blocks/ParagraphBlock.vue'),
|
||||
images: () => import('@/Components/ClientImageSlider.vue'),
|
||||
image: () => import('@/Components/BuilderUi/Divisions/Blocks/ImageBlock.vue'),
|
||||
files: () => import('@/Components/BuilderUi/Divisions/Blocks/FileBlock.vue'),
|
||||
person: () => import('@/Components/BuilderUi/Divisions/Blocks/PersonBlock.vue'),
|
||||
stepper: () => import('@/Components/BuilderUi/Divisions/Blocks/StepperBlock.vue'),
|
||||
video: () => import('@/Components/BuilderUi/Divisions/Blocks/VideoBlock.vue'),
|
||||
tabs: () => import('@/Components/BuilderUi/Divisions/Blocks/TabBlock.vue'),
|
||||
postsList: () => import('@/Components/BuilderUi/Divisions/Blocks/PostListBlock.vue'),
|
||||
postItem: () => import('@/Components/BuilderUi/Divisions/Blocks/PageItemBlock.vue'),
|
||||
pageItem: () => import('@/Components/BuilderUi/Divisions/Blocks/PostItemBlock.vue'),
|
||||
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue')
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<component
|
||||
v-for="(block, index) in blocks"
|
||||
:key="index"
|
||||
:is="getComponent(block.type)"
|
||||
:block="block"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
import HeadingBlock from "@/Components/BuilderUi/Departments/Blocks/HeadingBlock.vue";
|
||||
import ParagraphBlock from "@/Components/BuilderUi/Departments/Blocks/ParagraphBlock.vue";
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import ImageBlock from "@/Components/BuilderUi/Departments/Blocks/ImageBlock.vue";
|
||||
import FileBlock from "@/Components/BuilderUi/Departments/Blocks/FileBlock.vue";
|
||||
import PersonBlock from "@/Components/BuilderUi/Departments/Blocks/PersonBlock.vue";
|
||||
import StepperBlock from "@/Components/BuilderUi/Departments/Blocks/StepperBlock.vue";
|
||||
import VideoBlock from "@/Components/BuilderUi/Departments/Blocks/VideoBlock.vue";
|
||||
import PostListBlock from "@/Components/BuilderUi/Departments/Blocks/PostListBlock.vue";
|
||||
|
||||
export default {
|
||||
name: "DivisionTabBuilder",
|
||||
components: {FileBlock, ImageBlock, ClientImageSlider, ParagraphBlock, HeadingBlock, Link, PersonBlock, StepperBlock, VideoBlock, PostListBlock},
|
||||
methods: {
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
heading: 'HeadingBlock',
|
||||
paragraph: 'ParagraphBlock',
|
||||
images: 'ClientImageSlider',
|
||||
image: 'ImageBlock',
|
||||
files: 'FileBlock',
|
||||
person: 'PersonBlock',
|
||||
stepper: 'StepperBlock',
|
||||
video: 'VideoBlock',
|
||||
postsList: 'PostListBlock',
|
||||
|
||||
};
|
||||
return componentMap[type] || null;
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
|
||||
<h1 class="text-brand-primary text-2xl mb-3 mt-2 md:text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ header }}
|
||||
</h1>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import slugify from "slugify";
|
||||
|
||||
export default {
|
||||
name: "DivisionTitle",
|
||||
components: {Link},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
textLimit(text, symbols) {
|
||||
if (text.length > symbols) {
|
||||
let LimitedText
|
||||
LimitedText = text.substring(0, symbols)
|
||||
return LimitedText + "..."
|
||||
}
|
||||
return text
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
header: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,18 +1,8 @@
|
||||
<template>
|
||||
<div v-if="loading" class="flex flex-col space-y-4">
|
||||
<div class="flex animate-pulse">
|
||||
<div class="shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
|
||||
<div class="bg-gray-200 group-focus:scale-105 transition-transform duration-500 ease-in-out size-full absolute top-0 start-0 object-cover rounded-xl" />
|
||||
</div>
|
||||
<div class="ms-4 mt-2 w-full">
|
||||
<p class="h-4 bg-gray-200 rounded-full" style="width: 40%;"></p>
|
||||
<ul class="mt-5 space-y-3 flex flex-col">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-20 h-4 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
<div class="flex-col animate-pulse mt-10">
|
||||
<div class="w-[25rem] mx-auto h-8 bg-gray-200 rounded-full"></div>
|
||||
<div class="mt-5 mx-auto w-[40rem] h-60 relative z-1000 border rounded-xl sm:mt-10 md:p-10 bg-gray-200">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,12 +40,17 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getForm(this.block.data.form);
|
||||
const id = this.block?.data.form || this.formId
|
||||
this.getForm(id);
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
formId: {
|
||||
type: String,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<ul v-if="loading" class="mt-5 space-y-3 flex flex-col animate-pulse">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-8 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
|
||||
<div v-else class="mb-4 sm:mb-8">
|
||||
<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<div class="relative">
|
||||
<select :name="block.data.name_field" :disabled="isActiveProgramPage" v-model="activeProgramPage" class="py-3 px-4 pe-9 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option :value="additionalProgram.title" v-for="additionalProgram in additionalEducationalPrograms.data">{{ additionalProgram.title }}</option>
|
||||
</select>
|
||||
<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
|
||||
<svg class="shrink-0 size-4 text-red-500" 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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" x2="12" y1="8" y2="12"></line>
|
||||
<line x1="12" x2="12.01" y1="16" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 justify-between flex-wrap">
|
||||
<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
|
||||
{{ block.data.description }}
|
||||
</p>
|
||||
<!-- <p class="text-sm text-primaryBlue">{{ text.length }} / {{ block.data.rules.max }}</p>-->
|
||||
</div>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "AdditionalEducationalChoiceBlock",
|
||||
data() {
|
||||
return {
|
||||
additionalEducationalPrograms: null,
|
||||
loading: true, // Состояние загрузки
|
||||
activeProgramPage: null,
|
||||
isActiveProgramPage: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPrograms() {
|
||||
return axios.get(route('client.widget.additional.program.index'))
|
||||
.then(response => {
|
||||
this.additionalEducationalPrograms = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
},
|
||||
isAdditionalEducationalRoute() {
|
||||
const slug = this.getSlugFromUrl(this.$page.props.ziggy.location);
|
||||
return this.$page.props.ziggy.location === route('client.additionalEducation.show', slug);
|
||||
},
|
||||
getSlugFromUrl(url) {
|
||||
const segments = url.split('/');
|
||||
return segments[segments.length - 1];
|
||||
},
|
||||
findItemBySlug() {
|
||||
const slug = this.getSlugFromUrl(this.$page.props.ziggy.location)
|
||||
return this.additionalEducationalPrograms.data.find(item => item.slug === slug) || null;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPrograms().then(() => {
|
||||
if (this.isAdditionalEducationalRoute()) {
|
||||
this.isActiveProgramPage = true;
|
||||
this.activeProgramPage = this.findItemBySlug().title;
|
||||
}
|
||||
});
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<ul v-if="loading" class="mt-5 space-y-3 flex flex-col animate-pulse">
|
||||
<li class="w-full h-4 bg-gray-200 rounded-full"></li>
|
||||
<li class="w-full h-8 bg-gray-200 rounded-full"></li>
|
||||
</ul>
|
||||
|
||||
<div v-else class="mb-4 sm:mb-8">
|
||||
<label :for="block.data.name_field + '-id'" class="block mb-2 text-sm font-medium">{{ block.data.title_field }}</label>
|
||||
<div class="relative">
|
||||
<select :name="block.data.name_field" :disabled="isActiveProgramPage" v-model="activeProgramPage" class="py-3 px-4 pe-9 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none">
|
||||
<option selected="">Open this select menu</option>
|
||||
<option :value="additionalProgram.name" v-for="additionalProgram in additionalEducationalPrograms.data">{{ additionalProgram.name }}</option>
|
||||
</select>
|
||||
<div v-if="error" class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
|
||||
<svg class="shrink-0 size-4 text-red-500" 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">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" x2="12" y1="8" y2="12"></line>
|
||||
<line x1="12" x2="12.01" y1="16" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 justify-between flex-wrap">
|
||||
<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
|
||||
{{ block.data.description }}
|
||||
</p>
|
||||
<!-- <p class="text-sm text-primaryBlue">{{ text.length }} / {{ block.data.rules.max }}</p>-->
|
||||
</div>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "EducationalChoiceBlock",
|
||||
data() {
|
||||
return {
|
||||
additionalEducationalPrograms: null,
|
||||
loading: true, // Состояние загрузки
|
||||
activeProgramPage: null,
|
||||
isActiveProgramPage: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPrograms() {
|
||||
return axios.get(route('client.widget.educational.program.index'))
|
||||
.then(response => {
|
||||
this.additionalEducationalPrograms = response.data;
|
||||
this.loading = false; // Установить состояние загрузки в false
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error);
|
||||
this.loading = false; // Установить состояние загрузки в false даже при ошибке
|
||||
});
|
||||
},
|
||||
isAdditionalEducationalRoute() {
|
||||
const slug = this.getSlugFromUrl(this.$page.props.ziggy.location);
|
||||
return this.$page.props.ziggy.location === route('client.program.show', slug);
|
||||
},
|
||||
getSlugFromUrl(url) {
|
||||
const segments = url.split('/');
|
||||
return segments[segments.length - 1];
|
||||
},
|
||||
findItemBySlug() {
|
||||
const slug = this.getSlugFromUrl(this.$page.props.ziggy.location)
|
||||
return this.additionalEducationalPrograms.data.find(item => item.slug === slug) || null;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getPrograms().then(() => {
|
||||
if (this.isAdditionalEducationalRoute()) {
|
||||
this.isActiveProgramPage = true;
|
||||
this.activeProgramPage = this.findItemBySlug().name;
|
||||
}
|
||||
});
|
||||
},
|
||||
props: {
|
||||
block: {
|
||||
type: Object,
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<p v-if="!error" class="text-sm text-gray-500" id="hs-input-helper-text">
|
||||
{{ block.data.description }}
|
||||
</p>
|
||||
<p class="text-sm text-primaryBlue">{{ text.length }} / {{ block.data.rules.max }}</p>
|
||||
<p v-if="block.data.rules.show_length" class="text-sm text-primaryBlue">{{ text.length }} / {{ block.data.rules.max }}</p>
|
||||
</div>
|
||||
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
|
||||
|
||||
|
||||
@@ -84,10 +84,13 @@ export default {
|
||||
textarea: () => import('@/Components/BuilderUi/Pages/FormBlocks/TextAreaBlock.vue'),
|
||||
multiple_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/MultipleChoiceBlock.vue'),
|
||||
single_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/SingleChoiceBlock.vue'),
|
||||
date: () => import('@/Components/BuilderUi/Pages/FormBlocks/DateBlock.vue')
|
||||
date: () => import('@/Components/BuilderUi/Pages/FormBlocks/DateBlock.vue'),
|
||||
additional_education_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/AdditionalEducationalChoiceBlock.vue'),
|
||||
educational_program_choice: () => import('@/Components/BuilderUi/Pages/FormBlocks/EducationalChoiceBlock.vue')
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
|
||||
submitForm(event) {
|
||||
event.preventDefault();
|
||||
this.formData = this.getFormData(event.target.elements);
|
||||
@@ -98,7 +101,7 @@ export default {
|
||||
const formData = {};
|
||||
for (let i = 0; i < formElements.length; i++) {
|
||||
const element = formElements[i];
|
||||
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
|
||||
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
|
||||
const fieldName = this.normalizeFieldName(element.name);
|
||||
|
||||
if (element.tagName === 'INPUT') {
|
||||
@@ -109,12 +112,13 @@ export default {
|
||||
}
|
||||
} 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;
|
||||
},
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
|
||||
aria-label="Breadcrumb">
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-primaryBlue">
|
||||
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-primaryBlue">
|
||||
Главная
|
||||
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400"
|
||||
width="16" height="16"
|
||||
@@ -14,11 +14,11 @@
|
||||
<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>
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-primaryBlue" @click.prevent>
|
||||
{{ textLimit(this.breadcrumbs.mainSection, 25) }}
|
||||
<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
|
||||
{{ textLimit(this.breadcrumbs.mainSection.data.title, 25) }}
|
||||
<svg class="flex-shrink-0 mx-3 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">
|
||||
@@ -28,8 +28,8 @@
|
||||
</span>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-primaryBlue" @click.prevent>
|
||||
{{ textLimit(this.breadcrumbs.subSection, 25) }}
|
||||
<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
|
||||
{{ textLimit(this.breadcrumbs.subSection.data.title, 25) }}
|
||||
<svg class="flex-shrink-0 mx-3 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">
|
||||
@@ -39,9 +39,9 @@
|
||||
</span>
|
||||
</li>
|
||||
<li class="text-sm">
|
||||
<span class="flex items-center text-gray-500 hover:text-primaryBlue" @click.prevent>
|
||||
{{ textLimit(this.breadcrumbs.page, 25) }}
|
||||
</span>
|
||||
<Link :href="route('page.view', this.breadcrumbs.page.data.path)" class="flex items-center text-gray-500 hover:text-primaryBlue">
|
||||
{{ textLimit(this.breadcrumbs.page.data.title, 25) }}
|
||||
</Link>
|
||||
</li>
|
||||
</ol>
|
||||
<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
|
||||
@@ -92,6 +92,78 @@ export default {
|
||||
}
|
||||
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: {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="w-full h-[67px] fixed" id="visor"></div>
|
||||
<div class="w-full h-[67px] fixed pointer-events-none" id="visor"></div>
|
||||
|
||||
<nav class="order-last hidden w-56 shrink-0 lg:block">
|
||||
<div v-if="headerNavs.length > 0" class="sticky top-[100px] h-[calc(100vh-121px)]">
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
class="relative duration-300 flex gap-x-1 w-full rounded-md cursor-pointer items-center px-2 py-1 text-left text-sm">
|
||||
{{
|
||||
page.title
|
||||
}}</a>
|
||||
}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -29,6 +29,7 @@ export default {
|
||||
postsList: () => import('@/Components/BuilderUi/Posts/Blocks/PostListBlock.vue'),
|
||||
postItem: () => import('@/Components/BuilderUi/Posts/Blocks/PageItemBlock.vue'),
|
||||
pageItem: () => import('@/Components/BuilderUi/Posts/Blocks/PostItemBlock.vue'),
|
||||
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue')
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
|
||||
<div class="">
|
||||
<!--Фильтр-->
|
||||
|
||||
<button type="button" class="py-3 px-4 inline-flex 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-offcanvas-example" data-hs-overlay="#hs-offcanvas-example">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
|
||||
<!--Конец Фильтра-->
|
||||
</div>
|
||||
<div id="hs-offcanvas-example" class="hs-overlay hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-e overflow-auto" role="dialog" tabindex="-1" aria-labelledby="hs-offcanvas-example-label">
|
||||
<div class="flex justify-between items-center py-3 px-4 border-b">
|
||||
<h3 id="hs-offcanvas-example-label" class="font-bold text-gray-800">
|
||||
Фильтры
|
||||
</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-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-offcanvas-example">
|
||||
<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">
|
||||
<div class="hs-accordion-group">
|
||||
<div class="hs-accordion" :id="'id' + formEdu_filter.type">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-basic-with-arrow-collapse-two">
|
||||
<svg class="hs-accordion-active:hidden block 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 9 6 6 6-6"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden 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 15-6-6-6 6"></path>
|
||||
</svg>
|
||||
Формат обучения
|
||||
</button>
|
||||
<div id="hs-basic-with-arrow-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" :aria-labelledby="'id' + formEdu_filter.type">
|
||||
<FormEducationalFilter :forms="forms_educational" :formEdu_filter="formEdu_filter" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hs-accordion" :id="'id' + budget_filter.type">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-basic-with-arrow-collapse-two">
|
||||
<svg class="hs-accordion-active:hidden block 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 9 6 6 6-6"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden 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 15-6-6-6 6"></path>
|
||||
</svg>
|
||||
Места
|
||||
</button>
|
||||
<div id="hs-basic-with-arrow-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" :aria-labelledby="'id' + formEdu_filter.type">
|
||||
<BudgetFilter :budgets="types_budget" :budget_filter="budget_filter" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hs-accordion" :id="'id' + direction_filter.type">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-basic-with-arrow-collapse-two">
|
||||
<svg class="hs-accordion-active:hidden block 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 9 6 6 6-6"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden 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 15-6-6-6 6"></path>
|
||||
</svg>
|
||||
Направление подготовки
|
||||
</button>
|
||||
<div id="hs-basic-with-arrow-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" :aria-labelledby="'id' + direction_filter.type">
|
||||
<DirectionFilter :direction_filter="direction_filter" :direction_studies="direction_studies" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {debounce} from "lodash/function.js";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import CategoryFilter from "@/Components/BuilderUi/Events/Filters/CategoryFilter.vue";
|
||||
import TagFilter from "@/Components/BuilderUi/Events/Filters/TagFilter.vue";
|
||||
import SortingByFilter from "@/Components/BuilderUi/Events/Filters/SortingByFilter.vue";
|
||||
import FormEducationalFilter from "@/Components/BuilderUi/Programs/Filters/FormEducationalFilter.vue";
|
||||
import BudgetFilter from "@/Components/BuilderUi/Programs/Filters/BudgetFilter.vue";
|
||||
import DirectionFilter from "@/Components/BuilderUi/Programs/Filters/DirectionFilter.vue";
|
||||
|
||||
export default {
|
||||
name: "ClientProgramFilter",
|
||||
components: {
|
||||
DirectionFilter,
|
||||
FormEducationalFilter, BudgetFilter, SortingByFilter, TagFilter, CategoryFilter, BaseIcon},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
forms_educational: {
|
||||
type: Object,
|
||||
},
|
||||
budget_filter: {
|
||||
type: Object,
|
||||
},
|
||||
direction_filter: {
|
||||
type: Object,
|
||||
},
|
||||
formEdu_filter: {
|
||||
type: Object,
|
||||
},
|
||||
types_budget: {
|
||||
type: Object,
|
||||
},
|
||||
direction_studies: {
|
||||
type: Object,
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div id="desktop-nav"
|
||||
class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow lg:block">
|
||||
<div
|
||||
class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300">
|
||||
<div
|
||||
class="flex flex-col gap-x-0 mt-5 md:flex-row md:items-center md:justify-end md:gap-x-7 md:mt-0 md:ps-7 md:divide-y-0 md:divide-solid">
|
||||
<template v-for="section in this.sections.data" :key="section.id">
|
||||
<div
|
||||
:id="'nav-section-' + section.slug"
|
||||
class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] py-3 md:py-6">
|
||||
<button
|
||||
:id="'nav-section-btn-' + section.slug"
|
||||
type="button" :class="!underSliderHeader ? 'text-white' : 'text-black'"
|
||||
class="duration-300 flex items-center w-full hover:text-primaryBlue font-medium hs-dropdown-open:mb-4 md:hs-dropdown-open:mb-0">
|
||||
{{ section.title }}
|
||||
<svg class="flex-shrink-0 ms-2 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="m6 9 6 6 6-6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
:id="'nav-section-menu-' + section.slug"
|
||||
class="hs-dropdown-menu transition-opacity duration-150 md:duration-500 hs-dropdown-open:opacity-100 opacity-0 w-full hidden z-10 top-full start-0 min-w-[15rem] bg-white md:shadow-2xl rounded-lg py-2 md:p-4 before:absolute before:-top-5 before:start-0 before:w-full before:h-5">
|
||||
<div class="grid px-5 grid-cols-1 md:grid-cols-10">
|
||||
|
||||
<template v-for="subsection in section.subSections" :key="subsection.id">
|
||||
<div :id="'nav-sub-section-block-' + subsection.slug" class="md:col-span-3">
|
||||
<div class="flex flex-col py-4 px-3 md:px-6">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center mb-2 gap-x-2">
|
||||
<span
|
||||
:id="'nav-sub-section-title-' + subsection.slug"
|
||||
class="text-xs font-bold uppercase text-gray-800 dark:text-gray-200">
|
||||
{{ subsection.title }}
|
||||
</span>
|
||||
</div>
|
||||
<template v-for="page in subsection.pages" :key="page.id">
|
||||
<a :class="{'text-[#135aae] hover:text-gray-800 font-semibold ' : isSameRoute(page.path), 'text-gray-800 hover:text-[#2C6288]' : !isSameRoute(page.path) }"
|
||||
class="flex items-center gap-x-2"
|
||||
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'">
|
||||
<div class="grow">
|
||||
<p>{{ page.title }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="#" class="hover:opacity-70 py-3 className">
|
||||
<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="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
|
||||
</svg>
|
||||
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Режим для слабовидящих</span>
|
||||
</a>
|
||||
|
||||
|
||||
<Link :href="route('client.schedule')" 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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"/>
|
||||
</svg>
|
||||
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Расписание</span>
|
||||
</Link>
|
||||
|
||||
<a class="hover:opacity-70 py-3 cursor-pointer" data-hs-overlay="#open-search-modal">
|
||||
<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="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
|
||||
</svg>
|
||||
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Поиск</span>
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import jsonIcons from "@/Components/other/icons.json";
|
||||
import {defineAsyncComponent} from "vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: 'DesktopNavBar',
|
||||
props: {
|
||||
sections: {
|
||||
type: Object,
|
||||
},
|
||||
underSliderHeader: {
|
||||
type: HTMLDivElement,
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: jsonIcons,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
BaseIcon,
|
||||
ClientGlobalSearch: defineAsyncComponent(() =>
|
||||
import('@/Components/ClientGlobalSearch.vue')
|
||||
),
|
||||
Link,
|
||||
},
|
||||
methods: {
|
||||
isSameRoute(route) {
|
||||
if (route === this.$page.props.ziggy.location) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const currentLocation = this.$page.props.ziggy.location;
|
||||
const currentUrl = this.$page.props.ziggy.url + '/' + route;
|
||||
|
||||
if (currentLocation === currentUrl) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
hasActivePage(section) {
|
||||
// Проверяем, есть ли активная страница в секции или подсекции
|
||||
// if (!section || !section.pages) return false; // Проверка на наличие section и pages
|
||||
|
||||
if (section.pages) {
|
||||
return section.pages.some(page => this.isSameRoute(page.path));
|
||||
}
|
||||
|
||||
if (section.subSections) {
|
||||
return section.subSections.some(subSection => this.hasActivePage(subSection));
|
||||
}
|
||||
|
||||
|
||||
|
||||
// // Проверяем наличие активной страницы в подсекциях
|
||||
// const hasActiveInSubSections = section.subSections && section.subSections.some(subSection => this.hasActivePage(subSection));
|
||||
//
|
||||
// console.log(hasActiveInSubSections)
|
||||
//
|
||||
//
|
||||
// return hasActiveInPages || hasActiveInSubSections;
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.header-filter {
|
||||
transition: all 0.3s;
|
||||
backdrop-filter: saturate(180%) blur(7px);
|
||||
background: hsla(0, 0%, 100%, .6);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
|
||||
<header :style=" underSliderHeader ? 'background: hsla(0,0%,100%,.6)' : '' "
|
||||
:class="{ 'header-filter': headerFilter }"
|
||||
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">
|
||||
@@ -7,17 +8,18 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<a class="flex-none text-xl font-semibold dark:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
|
||||
href="/" aria-label="Brand">
|
||||
<img class="max-w-[300px]"
|
||||
:src="!underSliderHeader ? '/logos/white_ntspi_logo.svg' : '/logos/ntspi-logo.svg'" alt="">
|
||||
<img class="max-w-[300px] duration-300" :src="currentLogo" alt="Логотип">
|
||||
</a>
|
||||
<div class="lg:hidden">
|
||||
<button :class="underSliderHeader ? 'text-black' : 'text-white'"
|
||||
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">
|
||||
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">
|
||||
@@ -34,106 +36,15 @@
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="navbar-collapse-with-animation"
|
||||
class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow lg:block">
|
||||
<div
|
||||
class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-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-slate-700 dark:[&::-webkit-scrollbar-thumb]:bg-slate-500">
|
||||
<div
|
||||
class="flex flex-col gap-x-0 mt-5 md:flex-row md:items-center md:justify-end md:gap-x-7 md:mt-0 md:ps-7 md:divide-y-0 md:divide-solid dark:divide-gray-700">
|
||||
<template v-for="section in this.sections.data" :key="section.id">
|
||||
<div
|
||||
class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] py-3 md:py-6">
|
||||
<button type="button" :class="!underSliderHeader ? 'text-white' : 'text-black'"
|
||||
class="duration-300 flex items-center w-full hover:text-primaryBlue font-medium hs-dropdown-open:mb-4 md:hs-dropdown-open:mb-0">
|
||||
{{ section.title }}
|
||||
<svg class="flex-shrink-0 ms-2 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="m6 9 6 6 6-6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="hs-dropdown-menu transition-opacity duration-150 md:duration-500 hs-dropdown-open:opacity-100 opacity-0 w-full hidden z-10 top-full start-0 min-w-[15rem] bg-white md:shadow-2xl rounded-lg py-2 md:p-4 before:absolute before:-top-5 before:start-0 before:w-full before:h-5">
|
||||
<div class="grid px-5 grid-cols-1 md:grid-cols-10">
|
||||
|
||||
<template v-for="subsection in section.subSections" :key="subsection.id">
|
||||
<div class="md:col-span-3">
|
||||
<div class="flex flex-col py-4 px-3 md:px-6">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center mb-2 gap-x-2">
|
||||
<span class="text-xs font-bold uppercase text-gray-800 dark:text-gray-200">{{
|
||||
subsection.title
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<template v-for="page in subsection.pages" :key="page.id">
|
||||
<a :class="{'text-[#135aae] hover:text-gray-800 font-semibold ' : isSameRoute(page.path), 'text-gray-800 hover:text-[#2C6288]' : !isSameRoute(page.path) }"
|
||||
class="flex items-center gap-x-2"
|
||||
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'">
|
||||
<div class="grow">
|
||||
<p>{{ page.title }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<a href="#" class="hover:opacity-70 py-3 className">
|
||||
<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="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
|
||||
</svg>
|
||||
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Режим для слабовидящих</span>
|
||||
</a>
|
||||
|
||||
|
||||
<Link :href="route('client.schedule')" 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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"/>
|
||||
</svg>
|
||||
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Расписание</span>
|
||||
</Link>
|
||||
|
||||
<a class="hover:opacity-70 py-3 cursor-pointer" data-hs-overlay="#open-search-modal">
|
||||
<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="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
|
||||
</svg>
|
||||
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Поиск</span>
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<DesktopNavBar :sections="sections" :under-slider-header="underSliderHeader" />
|
||||
<MobileNavbar :sections="sections" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<MobileNavbar :sections="sections" />
|
||||
|
||||
<SearchModal open_id="open-search-modal" />
|
||||
|
||||
@@ -148,11 +59,13 @@ import * as isvek from "bvi"
|
||||
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
|
||||
import MobileNavbar from "@/Navbars/MobileNavbar.vue";
|
||||
import SearchModal from "@/Components/Modals/SearchModal.vue";
|
||||
import DesktopNavBar from "@/Navbars/DesktopNavBar.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: 'MainPageNavBar',
|
||||
components: {
|
||||
DesktopNavBar,
|
||||
SearchModal,
|
||||
MobileNavbar,
|
||||
BaseIcon,
|
||||
@@ -173,7 +86,11 @@ export default {
|
||||
scrollPosition: 0,
|
||||
headerFilter: false,
|
||||
underSliderHeader: this.sliderRef,
|
||||
bvi: null
|
||||
bvi: null,
|
||||
logos: {
|
||||
default: '/logos/white_ntspi_logo.svg',
|
||||
alternate: '/logos/ntspi-logo.svg',
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
@@ -239,6 +156,7 @@ export default {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
console.log()
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
window.addEventListener('scroll', this.checkSlider)
|
||||
if (this.getCookie('bvi_panelActive') === null) {
|
||||
@@ -256,6 +174,11 @@ export default {
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
window.removeEventListener('scroll', this.checkSlider)
|
||||
},
|
||||
computed: {
|
||||
currentLogo() {
|
||||
return this.underSliderHeader ? this.logos.alternate : this.logos.default;
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -25,24 +25,25 @@
|
||||
</li>
|
||||
|
||||
|
||||
<li v-for="section in sections.data" class="hs-accordion" id="users-accordion">
|
||||
<li v-for="section in sections.data" class="hs-accordion" :id="'nav-section-accordion-' + section.slug">
|
||||
<button
|
||||
:id="'nav-section-accordion-btn-' + section.slug"
|
||||
:class="(hasActivePage(section) ? 'text-blue-600 bg-gray-100' : 'text-gray-700')"
|
||||
type="button"
|
||||
class="hs-accordion-toggle hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg hover:bg-gray-100 focus:outline-none" aria-expanded="true" aria-controls="users-accordion">
|
||||
class="hs-accordion-toggle hs-accordion-active:text-blue-600 w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none" aria-expanded="true" aria-controls="users-accordion">
|
||||
<BaseIcon class="w-4" name="line" />
|
||||
{{ section.title }}
|
||||
<svg class="flex-shrink-0 hs-accordion-active:block ms-auto hidden size-4 text-gray-600 group-hover:text-gray-500" 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 15-6-6-6 6"/></svg>
|
||||
<svg class="flex-shrink-0 hs-accordion-active:hidden ms-auto block size-4 text-gray-600 group-hover:text-gray-500" 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 9 6 6 6-6"/></svg>
|
||||
</button>
|
||||
|
||||
<div id="users-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden" role="region" aria-labelledby="users-accordion">
|
||||
<ul class="hs-accordion-group ps-3 pt-2" data-hs-accordion-always-open>
|
||||
<li v-for="subSection in section.subSections" class="hs-accordion" id="users-accordion-sub-1">
|
||||
<li v-for="subSection in section.subSections" class="hs-accordion" :id="'nav-sub-section-accordion-' + subSection.slug">
|
||||
<button
|
||||
:id="'nav-sub-section-accordion-btn-' + subSection.slug"
|
||||
:class="(hasActivePage(subSection) ? 'text-blue-600 bg-gray-100' : 'text-gray-700')"
|
||||
type="button"
|
||||
class="hs-accordion-toggle hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg hover:bg-gray-100 focus:outline-none " aria-expanded="true" aria-controls="users-accordion-sub-1">
|
||||
class="hs-accordion-toggle hs-accordion-active:text-blue-600 w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none " aria-expanded="true" :aria-controls="'nav-accordion-' + subSection.slug">
|
||||
{{ subSection.title }}
|
||||
|
||||
<svg class="flex-shrink-0 hs-accordion-active:block ms-auto hidden size-4 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" 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 15-6-6-6 6"/></svg>
|
||||
@@ -50,7 +51,7 @@
|
||||
<svg class="flex-shrink-0 hs-accordion-active:hidden ms-auto block size-4 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" 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 9 6 6 6-6"/></svg>
|
||||
</button>
|
||||
|
||||
<div id="users-accordion-sub-1" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden" role="region" aria-labelledby="users-accordion-sub-1">
|
||||
<div class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden" role="region" :aria-labelledby="'nav-accordion-' + subSection.slug">
|
||||
<ul class="pt-2 ps-2">
|
||||
<li v-for="page in subSection.pages">
|
||||
<a
|
||||
|
||||
@@ -72,7 +72,7 @@ export default {
|
||||
<!-- Grid -->
|
||||
<div class="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-3 gap-3 sm:gap-6">
|
||||
<template v-for="journal in journals.data">
|
||||
<Link :href="route('client.academicJournals.show', 'aliqua-dolor-vel')" class="group flex items-center bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" >
|
||||
<Link :href="route('client.academicJournals.show', journal.slug)" class="group flex items-center bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" >
|
||||
<div class="p-4 md:p-5 w-full">
|
||||
<div class="flex justify-between items-center gap-x-3">
|
||||
<div class="grow">
|
||||
|
||||
@@ -12,10 +12,14 @@ import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import AcademicJournalsBuilder from "@/Components/BuilderUi/AcademicJournals/AcademicJournalsBuilder.vue";
|
||||
import AcademicJournalsTitle from "@/Components/BuilderUi/AcademicJournals/AcademicJournalsTitle.vue";
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
AcademicJournalsTitle,
|
||||
AcademicJournalsBuilder,
|
||||
MainPageNavBar,
|
||||
ClientImageSlider,
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
@@ -76,13 +80,11 @@ export default {
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="space-y-10 md:space-y-8">
|
||||
<h1 class="text-brand-primary text-center mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
{{ journal.data.title }}
|
||||
</h1>
|
||||
<div class="space-y-5 md:space-y-8">
|
||||
<AcademicJournalsTitle class="text-center" :header="journal.data.title" />
|
||||
<div>
|
||||
<nav class="-mb-0.5 flex justify-center gap-x-6" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
|
||||
<button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none active"
|
||||
<nav class="flex flex-col md:flex-row justify-center gap-x-6" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
|
||||
<button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none active"
|
||||
id="horizontal-alignment-item-1" aria-selected="true" data-hs-tab="#horizontal-alignment-1" aria-controls="horizontal-alignment-1" role="tab">
|
||||
Основная информация журнала
|
||||
</button>
|
||||
@@ -90,52 +92,20 @@ export default {
|
||||
id="horizontal-alignment-item-2" aria-selected="false" data-hs-tab="#horizontal-alignment-2" aria-controls="horizontal-alignment-2" role="tab">
|
||||
Редакция
|
||||
</button>
|
||||
<button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
<button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
id="horizontal-alignment-item-3" aria-selected="false" data-hs-tab="#horizontal-alignment-3" aria-controls="horizontal-alignment-3" role="tab">
|
||||
Информация для авторов
|
||||
</button>
|
||||
<button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
<button type="button" class="hs-tab-active:bg-gray-100 rounded-md hs-tab-active:text-gray-700 py-1.5 px-3 inline-flex items-center gap-x-2 border-b-2 border-transparent text-sm whitespace-nowrap text-gray-500 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
|
||||
id="horizontal-alignment-item-3" aria-selected="false" data-hs-tab="#horizontal-alignment-4" aria-controls="horizontal-alignment-4" role="tab">
|
||||
Архив
|
||||
</button>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
<div class="container px-8 xl:px-5 py-3 lg:py-4 w-4/5 mx-auto">
|
||||
<div class="container max-w-4xl px-2 xl:px-5 lg:py-4 md:w-4/5 mx-auto">
|
||||
<div id="horizontal-alignment-1" role="tabpanel" aria-labelledby="horizontal-alignment-item-1">
|
||||
<template v-for="block in journal.data.main_info" :key="block.id">
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div class="text-[15px] text-[#374151] paragraph-container leading-8 font-light" v-html="block.data.content" v-if="block.type === 'paragraph'"></div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<ClientImageSlider :images="block.data.url" />
|
||||
</div>
|
||||
<div v-if="block.type === 'files'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg 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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="'/storage/'+ block.data.path" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg 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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<AcademicJournalsBuilder :blocks="journal.data.main_info" />
|
||||
</div>
|
||||
<div id="horizontal-alignment-2" class="hidden w-full" role="tabpanel" aria-labelledby="horizontal-alignment-item-2">
|
||||
<template v-for="block in journal.data.chief_editor" :key="block.id">
|
||||
@@ -186,45 +156,10 @@ export default {
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
</div>
|
||||
<div id="horizontal-alignment-3" class="hidden" role="tabpanel" aria-labelledby="horizontal-alignment-item-3">
|
||||
<template v-for="block in journal.data.for_authors" :key="block.id">
|
||||
<div v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div class="text-[16px] text-[#374151] paragraph-container leading-8 font-light" v-html="block.data.content" v-if="block.type === 'paragraph'"></div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<ClientImageSlider :images="block.data.url" />
|
||||
</div>
|
||||
<div v-if="block.type === 'files'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg 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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="'/storage/'+ block.data.path" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg 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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<AcademicJournalsBuilder :blocks="journal.data.for_authors" />
|
||||
</div>
|
||||
<div id="horizontal-alignment-4" class="hidden" role="tabpanel" aria-labelledby="horizontal-alignment-item-4">
|
||||
<!-- List -->
|
||||
|
||||
@@ -12,10 +12,19 @@ import ClientPost from '@/Components/ClientPost.vue';
|
||||
import ClientPostSearch from '@/Components/ClientPostSearch.vue';
|
||||
import ClientImageSlider from "@/Components/ClientImageSlider.vue";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import LevelEduFilter from "@/Components/BuilderUi/AdditionalEducationPrograms/Filters/LevelEduFilter.vue";
|
||||
import ClientAdditionalProgramFilter
|
||||
from "@/Components/BuilderUi/AdditionalEducationPrograms/ClientAdditionalProgramFilter.vue";
|
||||
import PostBadge from "@/Components/BuilderUi/Events/EventBadgeBuilder.vue";
|
||||
import ProgramBadge from "@/Components/BuilderUi/AdditionalEducationPrograms/ProgramBadge.vue";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
components: {
|
||||
ProgramBadge,
|
||||
PostBadge,
|
||||
ClientAdditionalProgramFilter,
|
||||
LevelEduFilter,
|
||||
MainPageNavBar,
|
||||
ClientImageSlider,
|
||||
AdminIndexHeaderTitle, AdminIndexHeader,
|
||||
@@ -44,6 +53,12 @@ export default {
|
||||
filters: {
|
||||
type: Object
|
||||
},
|
||||
forms_education: {
|
||||
type: Object
|
||||
},
|
||||
categories: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
transformToColumns(originalArray) {
|
||||
@@ -82,36 +97,33 @@ export default {
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:py-10">
|
||||
<div class="w-100">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
<!-- Content -->
|
||||
<div class="">
|
||||
<div class="">
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<h1 class="text-brand-primary text-center mb-3 mt-2 text-3xl font-semibold tracking-tight dark:text-white lg:text-[40px] lg:leading-tight">
|
||||
Дополнительное образование
|
||||
|
||||
</h1>
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
<div class="space-y-5 md:space-y-4 mx-auto max-w-3xl">
|
||||
<div>
|
||||
<div class="">
|
||||
<nav class="-mb-0.5 flex justify-center space-x-6 flex-wrap">
|
||||
<Link :class="{ 'border-blue-500 text-blue-600': this.direction_id === null, 'text-gray-500 border-transparent': this.direction_id !== null }"
|
||||
:href="route('client.additionalEducation.index')"
|
||||
class="py-2 px-1 inline-flex items-center gap-2 border-b text-sm whitespace-nowrap hover:text-blue-600 focus:outline-none focus:text-blue-600">
|
||||
Все программы
|
||||
</Link>
|
||||
<template v-for="direction in directionAdditionalEducations.data">
|
||||
<Link :class="{ 'border-blue-500 text-blue-600': direction.id == this.filters.dir_id, 'text-gray-500 border-transparent': direction.id != this.direction_id }"
|
||||
:href="route('client.additionalEducation.index', { dir_id: direction.id })"
|
||||
class="py-2 px-1 inline-flex items-center gap-2 border-b text-sm whitespace-nowrap hover:text-blue-600 focus:outline-none focus:text-blue-600">
|
||||
{{ direction.title }}
|
||||
</Link>
|
||||
</template>
|
||||
</nav>
|
||||
<div class="my-10 flex items-center w-full gap-x-2">
|
||||
<LevelEduFilter :directions="directionAdditionalEducations" :direction_filter="filters.direction_filter" />
|
||||
<ClientAdditionalProgramFilter
|
||||
:forms_educational="forms_education"
|
||||
:form_education_filter="filters.form_education_filter"
|
||||
:category_filter="filters.category_filter"
|
||||
:categories="categories"
|
||||
/>
|
||||
</div>
|
||||
<div class="px-2 mx-auto">
|
||||
<div class="flex-wrap flex gap-3 md:items-center">
|
||||
<ProgramBadge :filters="this.filters" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mx-auto xl:px-5 py-5 lg:py-4">
|
||||
<div class="w-full mx-auto gap-x3 flex flex-wrap lg:justify-center">
|
||||
<div class="container py-5 lg:py-4">
|
||||
<div class="w-full mx-auto flex flex-wrap lg:justify-between">
|
||||
<template v-for="educations in transformToColumns(this.additionalEducations.data)">
|
||||
<div class="flex flex-col">
|
||||
<template v-for="education in educations">
|
||||
@@ -120,7 +132,7 @@ export default {
|
||||
{{ education.title }}
|
||||
</h1>
|
||||
<template v-for="program in education.additionalEducations" :key="program.id">
|
||||
<Link class="block text-[#1E57A3] hover:text-blue-600 duration-200 text-sm underline underline-offset-2 py-1" :href="route('client.additionalEducation.show', program)">{{ program.title }}</Link>
|
||||
<Link class="block text-[#1E57A3] hover:text-blue-600 duration-200 text-sm underline underline-offset-2 py-1" :href="route('client.additionalEducation.show', program.slug)">{{ program.title }}</Link>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -131,10 +143,6 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- End Content -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,11 +8,24 @@ import ClientPost from "@/Components/ClientPost.vue";
|
||||
import AdminIndexHeader from "@/Components/AdminIndexHeader.vue";
|
||||
import ClientPostSearch from "@/Components/ClientPostSearch.vue";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import FormBuilder from "@/Components/BuilderUi/Pages/FormBuilder.vue";
|
||||
import FormBlock from "@/Components/BuilderUi/Pages/Blocks/FormBlock.vue";
|
||||
import ProgramBackButton from "@/Components/BuilderUi/Programs/ProgramBackButton.vue";
|
||||
import PostTitle from "@/Components/BuilderUi/Posts/PostTitle.vue";
|
||||
import PostBackButton from "@/Components/BuilderUi/Posts/PostBackButton.vue";
|
||||
import ProgramTitle from "@/Components/BuilderUi/AdditionalEducationPrograms/ProgramTitle.vue";
|
||||
import ProgramBuilder from "@/Components/BuilderUi/AdditionalEducationPrograms/ProgramBuilder.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
ProgramBuilder,
|
||||
ProgramTitle,
|
||||
PostBackButton, PostTitle,
|
||||
ProgramBackButton,
|
||||
FormBlock,
|
||||
FormBuilder,
|
||||
MainPageNavBar,
|
||||
ClientPostSearch,
|
||||
AdminIndexHeader,
|
||||
@@ -55,7 +68,7 @@ export default {
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md: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="px-0 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
|
||||
<div>
|
||||
<!-- Avatar Media -->
|
||||
<!-- End Avatar Media -->
|
||||
@@ -64,14 +77,12 @@ export default {
|
||||
<div class="space-y-5 md:space-y-4">
|
||||
|
||||
<div>
|
||||
<div class="container px-8 mx-auto xl:px-5 max-w-screen-lg py-5 lg:py-8">
|
||||
<a onclick="history.back()" class="inline-flex items-center gap-x-1.5 text-sm text-gray-600 decoration-2 hover:underline dark:text-blue-500" href="#">
|
||||
<svg class="flex-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="m15 18-6-6 6-6"/></svg>
|
||||
Назад
|
||||
</a>
|
||||
<div class="space-y-3 flex flex-col items-center justify-center">
|
||||
<h1 class="text-2xl text-center font-bold md:text-4xl">{{ additionalEducation.data.title }}</h1>
|
||||
<div class="container mx-auto xl:px-5 max-w-screen-lg py-5 lg:py-8">
|
||||
<div class="space-y-3">
|
||||
<ProgramBackButton title="Назад" />
|
||||
<ProgramTitle :header="additionalEducation.data.title" class="text-center" />
|
||||
</div>
|
||||
|
||||
<!-- Icon Blocks -->
|
||||
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-3 items-start gap-12">
|
||||
@@ -145,128 +156,10 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 flex flex-col mb-[50px] items-center justify-center">
|
||||
<button type="button" class="py-2 px-3 inline-flex 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">
|
||||
Оставить заявку на консультацию
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-bold md:text-2xl">О программе</h2>
|
||||
<div class="py-4 px-5">
|
||||
<template v-for="block in this.additionalEducation.data.content" :key="block.id">
|
||||
<!-- <div v-if="block.type === 'image'">-->
|
||||
<!-- <figure :class="block.data.withBackground ? 'bg-gray-100 rounded-lg' : ''">-->
|
||||
<!-- <img loading="lazy" @click="openEditorImagesOnSlide(block.slideNumber)"-->
|
||||
<!-- :src="block.data.file.url"-->
|
||||
<!-- :class="block.data.withBackground ? 'rounded-none' : 'w-full'"-->
|
||||
<!-- class="mx-auto max-h-[350px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition"-->
|
||||
<!-- :alt="block.data.caption">-->
|
||||
<!-- <figcaption class="mt-3 text-sm text-center text-gray-500">-->
|
||||
<!-- {{ block.data.caption }}-->
|
||||
<!-- </figcaption>-->
|
||||
<!-- </figure>-->
|
||||
<!-- </div>-->
|
||||
<div class="mb-4" v-if="block.type === 'heading'">
|
||||
<h2 class="font-bold text-xl">{{ block.data.content }}</h2>
|
||||
</div>
|
||||
<div v-if="block.type === 'image'">
|
||||
<template v-for="img in block.data.url">
|
||||
<img loading="lazy" class="mx-auto object-cover rounded-sm hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + img" alt="">
|
||||
</template>
|
||||
</div>
|
||||
<div class="text-[16px] text-[#374151] leading-8 font-light paragraph-container" v-html="block.data.content" v-if="block.type === 'paragraph'"></div>
|
||||
|
||||
|
||||
<div v-if="block.type === 'attaches'">
|
||||
<div class="flex border rounded-lg px-4 py-2 items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">
|
||||
<svg 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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"
|
||||
stroke="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ block.data.title }}</div>
|
||||
</div>
|
||||
|
||||
<a :href="block.data.file.url" download type="button"
|
||||
class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">
|
||||
<svg 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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="block.type === 'linkTool'">
|
||||
<div v-if="block.data.meta.type === 'post'" class="w-full mx-auto">
|
||||
<a class="group relative block rounded-xl dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" :href="block.data.link">
|
||||
<div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
|
||||
</div>
|
||||
|
||||
<div class="absolute top-0 inset-x-0 z-10">
|
||||
<div class="p-4 flex flex-col h-full sm:p-6">
|
||||
<!-- Avatar -->
|
||||
<div class="flex items-center">
|
||||
<div class="ms-2.5 sm:ms-4">
|
||||
<h4 class="font-semibold text-white">
|
||||
{{ block.data.meta.data.authors[0].name }}
|
||||
</h4>
|
||||
<p class="text-xs text-white/[.8]">
|
||||
{{ block.data.meta.data.created_post }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Avatar -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 inset-x-0 z-10">
|
||||
<div class="flex flex-col h-full p-4 sm:p-6">
|
||||
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">
|
||||
{{ block.data.meta.data.title }}
|
||||
</h3>
|
||||
<p class="mt-2 text-white/[.8]">
|
||||
{{ textLimit(block.data.meta.description, 200) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Card Blog -->
|
||||
<div v-if="block.data.meta.type === 'student'" class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<img loading="lazy" class="rounded-xl w-[150px]" :src="block.data.meta.data.photo" alt="Image Description">
|
||||
<div class="grow">
|
||||
<Link :href="block.data.link" class="font-medium text-gray-800 hover:text-gray-500 underline">
|
||||
{{ block.data.meta.title }}
|
||||
</Link>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.position }}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
{{ block.data.meta.data.contactEmail }} / <a :href="block.data.meta.data.vk_link">Вконтакте</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Brands -->
|
||||
<!-- End Social Brands -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<ProgramBuilder :blocks="this.additionalEducation.data.content" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Icon Blocks -->
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
<PageBuilder :blocks="this.page.data.content"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -53,6 +53,11 @@
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#programs">Программы</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'description', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'description' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#description">Описание</a>
|
||||
</li>
|
||||
<transition name="fade">
|
||||
<li class="anchor-li flex items-center py-2 border-t" v-if="scrollTop" @click.prevent="scrollToTop">
|
||||
<button class="bg-transperant text-gray-600 cursor-pointer hover:text-gray-900 duration-300 block px-2 leading-[1.6] rounded-md">К началу</button>
|
||||
@@ -174,6 +179,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="description" class="font-bold text-xl">Описание</h2>
|
||||
|
||||
|
||||
<div class="space-y-3 md:space-y-4">
|
||||
<DepartmentBuilder :blocks="this.department.data.content "/>
|
||||
</div>
|
||||
@@ -193,8 +201,6 @@
|
||||
</div>
|
||||
|
||||
|
||||
<FsLightbox class="z-1000" :slide="slide" :toggler="toggler" :sources="editorImages"/>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
@@ -340,6 +346,9 @@ export default {
|
||||
|
||||
<style>
|
||||
|
||||
.styled-scrollbar {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-[#1E57A3];
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
<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="w-full h-[67px] fixed" id="visor"></div>
|
||||
<div class="w-full h-[67px] fixed pointer-events-none" id="visor"></div>
|
||||
|
||||
<div class="sticky top-[110px] hidden h-[calc(100vh-110px)] max-w-[20%] md:flex md:shrink-0 md:flex-col md:justify-between">
|
||||
<nav v-if="this.divisions"
|
||||
@@ -41,6 +41,12 @@
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#persons">Состав</a>
|
||||
</li>
|
||||
<li v-if="division.data.description.length > 0" class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'description', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'description' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#description">Описание</a>
|
||||
</li>
|
||||
|
||||
<transition name="fade">
|
||||
<li class="anchor-li flex items-center py-2 border-t" v-if="scrollTop" @click.prevent="scrollToTop">
|
||||
<button class="bg-transperant text-gray-600 cursor-pointer hover:text-gray-900 duration-300 block px-2 leading-[1.6] rounded-md">К началу</button>
|
||||
@@ -53,7 +59,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<article class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
|
||||
<main class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
|
||||
<div class="space-y-5 md:space-y-5">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
||||
@@ -125,134 +131,25 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- FAQ -->
|
||||
|
||||
<!-- End FAQ -->
|
||||
|
||||
|
||||
<!-- Card Section -->
|
||||
<!-- Grid -->
|
||||
<h2 v-if="division.data.description.length > 0" id="description" class="font-bold text-xl">Описание</h2>
|
||||
|
||||
<!-- End Grid -->
|
||||
<!-- End Card Section -->
|
||||
<DivisionBuilder :blocks="division.data.description" />
|
||||
|
||||
<!-- <template v-for="block in this.blocks" :key="block.id">-->
|
||||
<!-- <div v-if="block.type === 'image'">-->
|
||||
<!-- <figure :class="block.data.withBackground ? 'bg-gray-100 rounded-lg' : ''">-->
|
||||
<!-- <img loading="lazy" @click="openEditorImagesOnSlide(block.slideNumber)"-->
|
||||
<!-- :src="block.data.file.url"-->
|
||||
<!-- :class="block.data.withBackground ? 'rounded-none' : 'w-full'"-->
|
||||
<!-- class="mx-auto max-h-[350px] object-cover rounded-lg hover:opacity-95 hover:duration-200 transition"-->
|
||||
<!-- :alt="block.data.caption">-->
|
||||
<!-- <figcaption class="mt-3 text-sm text-center text-gray-500">-->
|
||||
<!-- {{ block.data.caption }}-->
|
||||
<!-- </figcaption>-->
|
||||
<!-- </figure>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-if="block.type === 'heading'">-->
|
||||
<!-- <h2 :id="generateSlug(block.data.content)" class="font-bold text-xl">{{ block.data.content }}</h2>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-if="block.type === 'image'">-->
|
||||
<!-- <template v-for="img in block.data.url">-->
|
||||
<!-- <img loading="lazy" class="mx-auto object-cover rounded-sm hover:opacity-95 hover:duration-200 transition" :src="'/storage/' + img" alt="">-->
|
||||
<!-- </template>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="text-[16px] text-[#374151] dark:text-gray-200 leading-8 font-light" v-html="block.data.content" v-if="block.type === 'paragraph'"></div>-->
|
||||
<!-- <div v-if="block.type === 'attaches'">-->
|
||||
<!-- <div class="flex border rounded-lg px-4 py-2 items-center justify-between">-->
|
||||
<!-- <div class="flex items-center">-->
|
||||
<!-- <div class="w-[35px] h-[35px] bg-black flex justify-center items-center rounded-xl mr-2">-->
|
||||
<!-- <svg 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">-->
|
||||
<!-- <path stroke-linecap="round" stroke-linejoin="round"-->
|
||||
<!-- d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13"-->
|
||||
<!-- stroke="white"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>{{ block.data.title }}</div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <a :href="block.data.file.url" download type="button"-->
|
||||
<!-- class="w-[35px] h-[35px] flex bg-gray-100 rounded-lg justify-center items-center hover:bg-gray-200 duration-200">-->
|
||||
<!-- <svg 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">-->
|
||||
<!-- <path stroke-linecap="round" stroke-linejoin="round"-->
|
||||
<!-- d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div v-if="block.type === 'linkTool'">-->
|
||||
<!-- <div v-if="block.data.meta.type === 'post'" class="w-full mx-auto">-->
|
||||
<!-- <a class="group relative block rounded-xl dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" :href="block.data.link">-->
|
||||
<!-- <div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="absolute top-0 inset-x-0 z-10">-->
|
||||
<!-- <div class="p-4 flex flex-col h-full sm:p-6">-->
|
||||
<!-- <!– Avatar –>-->
|
||||
<!-- <div class="flex items-center">-->
|
||||
<!-- <div class="ms-2.5 sm:ms-4">-->
|
||||
<!-- <h4 class="font-semibold text-white">-->
|
||||
<!-- {{ block.data.meta.data.authors[0].name }}-->
|
||||
<!-- </h4>-->
|
||||
<!-- <p class="text-xs text-white/[.8]">-->
|
||||
<!-- {{ block.data.meta.data.created_post }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– End Avatar –>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="absolute bottom-0 inset-x-0 z-10">-->
|
||||
<!-- <div class="flex flex-col h-full p-4 sm:p-6">-->
|
||||
<!-- <h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">-->
|
||||
<!-- {{ block.data.meta.data.title }}-->
|
||||
<!-- </h3>-->
|
||||
<!-- <p class="mt-2 text-white/[.8]">-->
|
||||
<!-- {{ textLimit(block.data.meta.description, 200) }}-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </a>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!– End Card Blog –>-->
|
||||
<!-- <div v-if="block.data.meta.type === 'student'" class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-slate-900 dark:border-gray-700">-->
|
||||
<!-- <div class="flex items-center gap-x-4">-->
|
||||
<!-- <img loading="lazy" class="rounded-xl w-[150px]" :src="block.data.meta.data.photo" alt="Image Description">-->
|
||||
<!-- <div class="grow">-->
|
||||
<!-- <Link :href="block.data.link" class="font-medium text-gray-800 hover:text-gray-500 underline">-->
|
||||
<!-- {{ block.data.meta.title }}-->
|
||||
<!-- </Link>-->
|
||||
<!-- <p class="text-xs text-gray-500 mt-2">-->
|
||||
<!-- {{ block.data.meta.data.position }}-->
|
||||
<!-- </p>-->
|
||||
<!-- <p class="text-xs text-gray-500 mt-2">-->
|
||||
<!-- {{ block.data.meta.data.contactEmail }} / <a :href="block.data.meta.data.vk_link">Вконтакте</a>-->
|
||||
<!-- </p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <!– Social Brands –>-->
|
||||
<!-- <!– End Social Brands –>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- </template>-->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</main>
|
||||
<ClientFooterDown/>
|
||||
</div>
|
||||
|
||||
<FsLightbox class="z-1000" :slide="slide" :toggler="toggler" :sources="editorImages"/>
|
||||
|
||||
|
||||
</template>
|
||||
@@ -268,6 +165,7 @@ import { Head } from '@inertiajs/vue3'
|
||||
import slugify from "slugify";
|
||||
import axios from "axios";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import DivisionBuilder from "@/Components/BuilderUi/Divisions/DivisionBuilder.vue";
|
||||
|
||||
|
||||
export default {
|
||||
@@ -289,6 +187,7 @@ export default {
|
||||
},
|
||||
|
||||
components: {
|
||||
DivisionBuilder,
|
||||
MainPageNavBar,
|
||||
ClientFooterDown,
|
||||
Link,
|
||||
@@ -337,8 +236,6 @@ export default {
|
||||
mounted() {
|
||||
window.addEventListener("scroll", this.onScroll)
|
||||
|
||||
// this.editorImages = this.blocksWithSlideNumber.filter(block => block.type === 'image').map(block => block.data.file.url);
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
const headings = document.querySelectorAll('h2');
|
||||
const visor = document.querySelector('#visor');
|
||||
@@ -383,6 +280,10 @@ export default {
|
||||
|
||||
<style>
|
||||
|
||||
.styled-scrollbar {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-[#1E57A3];
|
||||
|
||||
@@ -48,6 +48,12 @@
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#department">Кафедры факультета</a>
|
||||
</li>
|
||||
<li class="anchor-li">
|
||||
<a :class="{ 'translate-x-2 text-[#135aae]' : this.currentNavSection === 'description', 'bg-transperant text-gray-600 hover:text-gray-900' : this.currentNavSection !== 'description' }"
|
||||
class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
|
||||
href="#description">Описание</a>
|
||||
</li>
|
||||
|
||||
<transition name="fade">
|
||||
<li class="anchor-li flex items-center py-2 border-t" v-if="scrollTop" @click.prevent="scrollToTop">
|
||||
<button class="bg-transperant text-gray-600 cursor-pointer hover:text-gray-900 duration-300 block px-2 leading-[1.6] rounded-md">К началу</button>
|
||||
@@ -139,6 +145,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="description" class="font-bold text-xl">Описание</h2>
|
||||
|
||||
|
||||
<div class="space-y-3 md:space-y-4">
|
||||
<FacultyBuilder :blocks="this.faculty.data.content "/>
|
||||
</div>
|
||||
@@ -296,6 +305,10 @@ export default {
|
||||
|
||||
<style>
|
||||
|
||||
.styled-scrollbar {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.paragraph-container a {
|
||||
@apply text-[#1E57A3];
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<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="w-full h-[67px] fixed" id="visor"></div>
|
||||
<div class="w-full h-[67px] fixed pointer-events-none" id="visor"></div>
|
||||
|
||||
|
||||
<nav class="order-last hidden w-56 shrink-0 lg:block">
|
||||
|
||||
@@ -89,17 +89,12 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 md:space-y-4">
|
||||
<PostBuilder :blocks="this.blocks"/>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<PostGallery :title="post.data.title" :images="post.data.gallery"/>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a :href="route('client.post.index', { 'tag[]': tag.slug })" v-for="tag in post.data.tags" class="m-1 inline-flex items-center gap-1.5 py-2 px-3 rounded-full text-sm bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="#">
|
||||
{{ tag.name }}
|
||||
|
||||
@@ -136,7 +136,7 @@ export default {
|
||||
{{ napr.name }}
|
||||
</h1>
|
||||
<template v-for="program in napr.programs" :key="program.id">
|
||||
<Link class="block text-[#1E57A3] hover:text-blue-600 duration-200 text-sm underline underline-offset-2 py-1" :href="route('client.program.show', program)">{{ program.name }}</Link>
|
||||
<Link class="block text-[#1E57A3] hover:text-blue-600 duration-200 text-sm underline underline-offset-2 py-1" :href="route('client.program.show', program.slug)">{{ program.name }}</Link>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -11,11 +11,13 @@ import ClientPostSearch from "@/Components/ClientPostSearch.vue";
|
||||
import ClientProgramFilter from "@/Components/ClientProgramFilter.vue";
|
||||
import LevelEduFilter from "@/Components/BuilderUi/Programs/Filters/LevelEduFilter.vue";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import FormBlock from "@/Components/BuilderUi/Pages/Blocks/FormBlock.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
FormBlock,
|
||||
MainPageNavBar,
|
||||
LevelEduFilter, ClientProgramFilter,
|
||||
ClientPostSearch,
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</Head>
|
||||
<MainPageNavBar class="border-b" :sections="$page.props.navigation"></MainPageNavBar>
|
||||
|
||||
<div class="w-full h-[67px] fixed" id="visor"></div>
|
||||
<div class="w-full h-[67px] fixed pointer-events-none" id="visor"></div>
|
||||
<div class="flex flex-col h-screen">
|
||||
<main class="flex-grow">
|
||||
<div class="relative mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
|
||||
@@ -25,7 +25,7 @@ export const linksReform = {
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
updated() {
|
||||
const hostname = window.location.hostname;
|
||||
const defaultLinks = Array.from(this.getDefaultLinks());
|
||||
|
||||
|
||||
Reference in New Issue
Block a user