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

Changes

Browse Source
This commit is contained in:
f4ilji
2024-10-28 12:57:16 +05:00
parent e4678fc0d2
commit 6d516d1750
233 changed files with 6312 additions and 1314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/BuilderUi/Pages/Blocks/FormBlock.vue
+1
View File
@@ -42,6 +42,7 @@ export default {
mounted() {
const id = this.block?.data.form || this.formId
this.getForm(id);
},
props: {
block: {
resources/js/Components/BuilderUi/Pages/Blocks/PageItemBlock.vue
+1
View File
@@ -91,6 +91,7 @@ export default {
},
mounted() {
this.getPage(this.block.data.page)
},
props: {
block: {
resources/js/Components/BuilderUi/Pages/Blocks/PageResourceList.vue
+105
View File
@@ -0,0 +1,105 @@
<template>
<div v-if="loading" class="flex flex-col space-y-4">
<div class="group block rounded-xl overflow-hidden animate-pulse">
<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">
<div class="w-full h-full bg-gray-200"></div>
</div>
</div>
</div>
</div>
<div v-else>
<!-- Card Blog -->
<div class="px-0 py-10 sm:px-2 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight">Полезные ресурсы</h2>
<p class="mt-1 text-gray-600">We've helped some great companies brand, design and get to market.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="flex overflow-x-auto space-x-6 mb-10 lg:mb-14 p-4">
<!-- Card -->
<a v-for="item in resource.data.content" class="group flex-shrink-0 w-64 flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md focus:outline-none focus:shadow-md transition" :href="item.link">
<div class="aspect-w-16 aspect-h-9">
<img v-if="item.image" class="w-full backdrop-blur-xl object-cover rounded-t-xl h-[150px]" :src="'/storage/' + item.image" alt="Blog Image">
<div v-else :class="randomBgClass()" class="w-full object-cover rounded-t-xl h-[150px] bg-gradient-to-tr" />
</div>
<div class="p-4 md:p-5">
<p class="mt-2 text-xs uppercase text-gray-600">{{ item.model_select }}</p>
<h3 class="mt-2 text-lg font-medium text-gray-800 group-hover:text-blue-600">{{ item.title }}</h3>
<p class="mt-2 text-xs text-gray-600">{{ item.link_text }}</p>
</div>
</a>
</div>
<!-- End Grid -->
<!-- Card -->
<!-- End Card -->
</div>
<!-- End Card Blog -->
</div>
</template>
<script>
import slugify from "slugify";
import FsLightbox from "fslightbox-vue/v3";
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
import axios from "axios";
import {Link} from "@inertiajs/vue3";
import FormBuilder from "@/Components/BuilderUi/Pages/FormBuilder.vue";
export default {
name: "PageResourceList",
components: {FormBuilder, axios, Link },
data() {
return {
resource: null,
loading: true,
colors: ['from-primaryBlue', 'from-primaryRed'],
}
},
methods: {
getResource(id) {
axios.get(route('client.widget.page.resource.index', id))
.then(response => {
this.resource = response.data;
this.loading = false; // Установить состояние загрузки в false
})
.catch(error => {
console.error('Ошибка:', error);
});
},
randomBgClass() {
return this.colors[Math.floor(Math.random() * this.colors.length)];
},
},
mounted() {
const id = this.block?.data.resource || this.resourceId
this.getResource(id);
},
props: {
block: {
type: Object,
},
resourceId: {
type: String,
default: null,
}
},
}
</script>
<style>
.fslightbox-container {
margin: 0 !important;
}
</style>
resources/js/Components/BuilderUi/Pages/Blocks/PersonBlock.vue
+1
View File
@@ -50,6 +50,7 @@ export default {
},
mounted() {
this.domainPath = window.location.origin;
},
props: {
block: {
resources/js/Components/BuilderUi/Pages/Blocks/PostItemBlock.vue
+1
View File
@@ -88,6 +88,7 @@ export default {
},
mounted() {
this.getPost(this.block.data.post);
},
props: {
block: {
resources/js/Components/BuilderUi/Pages/Blocks/PostListBlock.vue
+1
View File
@@ -133,6 +133,7 @@ export default {
},
mounted() {
this.getPosts();
},
props: {
block: {
resources/js/Components/BuilderUi/Pages/Blocks/StepperBlock.vue
+1
View File
@@ -47,6 +47,7 @@ export default {
},
mounted() {
this.domainPath = window.location.origin;
},
props: {
block: {
resources/js/Components/BuilderUi/Pages/Blocks/TabBlock.vue
+1
View File
@@ -53,6 +53,7 @@ export default {
},
mounted() {
this.domainPath = window.location.origin;
},
props: {
block: {
resources/js/Components/BuilderUi/Pages/Blocks/VideoBlock.vue
+1
View File
@@ -29,6 +29,7 @@ export default {
},
mounted() {
this.domainPath = window.location.origin;
},
props: {
block: {
resources/js/Components/BuilderUi/Pages/PageBreadcrumbs.vue
+48 -48
View File
@@ -6,62 +6,61 @@
<ol v-if="breadcrumbs" class="flex items-center whitespace-normal min-w-0 flex-wrap gap-y-2"
aria-label="Breadcrumb">
<li class="text-sm">
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-primaryBlue">
Главная
<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">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</Link>
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
<BaseIcon class="size-5" name="home" />
</Link>
</li>
<li v-if="breadcrumbs.mainSection" class="text-sm">
<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSectionClick(this.breadcrumbs.mainSection)">
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
{{ textLimit(this.breadcrumbs.mainSection.data.title, 25) }}
</span>
</li>
<li v-if="breadcrumbs.subSection" class="text-sm">
<span class="flex items-center text-gray-500 hover:text-primaryBlue cursor-pointer" @click.prevent="handleSubSectionClick(this.breadcrumbs.mainSection, this.breadcrumbs.subSection)">
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
{{ textLimit(this.breadcrumbs.subSection.data.title, 25) }}
</span>
</li>
<li class="text-sm">
<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">
<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>
</li>
<li class="text-sm">
<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">
<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>
</li>
<li class="text-sm">
<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>
<Link :href="route('page.view', this.breadcrumbs.page.data.path)" class="flex items-center text-gray-500 hover:text-primaryBlue">
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
{{ textLimit(this.breadcrumbs.page.data.title, 25) }}
</Link>
</li>
</ol>
<ol v-if="!breadcrumbs" class="flex items-center whitespace-nowrap min-w-0 flex-wrap"
aria-label="Breadcrumb">
<li class="text-sm">
<span class="flex items-center text-gray-500 hover:text-blue-600" href="/">
Главная
<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">
<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 :href="route('index')" class="flex items-center text-gray-500 hover:text-blue-600" href="/">
<BaseIcon class="size-5" name="home" />
</Link>
</li>
<li class="text-sm">
<span class="flex items-center text-gray-500 hover:text-blue-600" @click.prevent>
{{ textLimit(pageTitle, 30) }}
</span>
<Link :href="route('page.view', this.breadcrumbs.page.data.path)" class="flex items-center text-gray-500 hover:text-primaryBlue">
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
{{ textLimit(this.breadcrumbs.page.data.title, 25) }}
</Link>
</li>
</ol>
</div>
@@ -75,10 +74,11 @@
<script>
import {Link} from "@inertiajs/vue3";
import slugify from "slugify";
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
export default {
name: "PageBreadcrumbs",
components: {Link},
components: {BaseIcon, Link},
data() {
return {
}
resources/js/Components/BuilderUi/Pages/PageBuilder.vue
+52 -8
View File
@@ -1,17 +1,55 @@
<template>
<component
v-for="(block, index) in blocks"
:key="index"
:is="getComponent(block.type)"
:block="block"
/>
<div>
<PageSkeleton v-if="loading" />
<div v-else>
<component
v-for="(block, index) in blocks"
:key="index"
:is="getComponent(block.type)"
:block="block"
/>
</div>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import PageSkeleton from "@/Components/BuilderUi/Pages/PageSkeleton.vue";
export default {
name: "PageBuilder",
components: {PageSkeleton},
data() {
return {
loading: true, // Флаг загрузки
};
},
methods: {
async loadAllComponents() {
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'),
pageResourceList: () => import('@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue'),
};
// Создайте массив промисов для загрузки всех компонентов
const promises = Object.values(componentMap).map(load => load());
// Дождитесь завершения всех загрузок
await Promise.all(promises);
this.loading = false; // Установите флаг загрузки в false
},
getComponent(type) {
const componentMap = {
heading: () => import('@/Components/BuilderUi/Pages/Blocks/HeadingBlock.vue'),
@@ -26,7 +64,8 @@ export default {
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')
customForm: () => import('@/Components/BuilderUi/Pages/Blocks/FormBlock.vue'),
pageResourceList: () => import('@/Components/BuilderUi/Pages/Blocks/PageResourceList.vue'),
};
return defineAsyncComponent(componentMap[type] || null);
},
@@ -37,8 +76,13 @@ export default {
required: true,
},
},
async created() {
await this.loadAllComponents(); // Загрузить все компоненты при создании
},
}
</script>
<style scoped>
</style>
</style>
Найти еще
resources/js/Components/BuilderUi/Pages/PageSkeleton.vue
+38
View File
@@ -0,0 +1,38 @@
<template>
<div class="animate-pulse">
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 rounded w-full mb-4"></div>
</div>
</template>
<script>
import { Link } from "@inertiajs/vue3";
export default {
name: "PageSkeleton",
components: { Link },
props: {
header: {
type: String,
},
},
}
</script>
<style scoped>
</style>
Найти еще