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

Rework frontend

Browse Source
This commit is contained in:
F4ilji
2025-03-23 00:38:16 +05:00
parent 17518ceed2
commit 49072e50c7
438 changed files with 14375 additions and 20015 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/componentss/shared/builder/formBuilder/FormBuilder.vue
+176
View File
@@ -0,0 +1,176 @@
<template>
<div v-if="success" class="bg-teal-50 border-t-2 border-teal-500 rounded-lg p-4 dark:bg-teal-800/30" role="alert" tabindex="-1" aria-labelledby="hs-bordered-success-style-label">
<div class="flex">
<div class="shrink-0">
<!-- Icon -->
<span class="inline-flex justify-center items-center size-8 rounded-full border-4 border-teal-100 bg-teal-200 text-teal-800 dark:border-teal-900 dark:bg-teal-800 dark:text-teal-400">
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
<path d="m9 12 2 2 4-4"></path>
</svg>
</span>
<!-- End Icon -->
</div>
<div class="ms-3">
<h3 id="hs-bordered-success-style-label" class="text-gray-800 font-semibold dark:text-white">
Успешно отправлено!
</h3>
<p class="text-sm text-gray-700 dark:text-neutral-400">
{{ message }}
</p>
</div>
</div>
</div>
<div v-else class="max-w-[85rem] py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<div class="mx-auto max-w-2xl">
<div class="text-center">
<h2 class="text-xl text-gray-800 font-bold sm:text-3xl">
{{ blocks.data.title }}
</h2>
</div>
<!-- Card -->
<div class="mt-5 p-4 relative z-1000 bg-white border rounded-xl sm:mt-10 md:p-10">
<form @submit="submitForm">
<component
v-for="(block, index) in blocks.data.columns"
:key="index"
:is="getComponent(block.type)"
:block="block"
:error="errors && errors[block.data.name_field] ? errors[block.data.name_field] : null"
/>
<SubmitBlock :block="blocks.data.button" />
</form>
</div>
<!-- End Card -->
</div>
</div>
<transition name="fade">
<SuccessNotification v-if="success" :text="message" />
</transition>
</template>
<script>
import SubmitBlock from "@/componentss/shared/builder/formBuilder/blocks/SubmitBlock.vue";
import axios from "axios";
import SuccessNotification from "@/Components/Notifications/SuccessNotification.vue";
import {defineAsyncComponent} from "vue";
export default {
name: "FormBuilder",
components: {
SuccessNotification,
SubmitBlock,
},
data() {
return {
formData: {},
errors: null,
success: false,
message: null,
};
},
methods: {
getComponent(type) {
const componentMap = {
text: () => import('@/componentss/shared/builder/formBuilder/blocks/TextBlock.vue'),
phone: () => import('@/componentss/shared/builder/formBuilder/blocks/PhoneBlock.vue'),
email: () => import('@/componentss/shared/builder/formBuilder/blocks/EmailBlock.vue'),
textarea: () => import('@/componentss/shared/builder/formBuilder/blocks/TextAreaBlock.vue'),
multiple_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/MultipleChoiceBlock.vue'),
single_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/SingleChoiceBlock.vue'),
date: () => import('@/componentss/shared/builder/formBuilder/blocks/DateBlock.vue'),
additional_education_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/AdditionalEducationalChoiceBlock.vue'),
educational_program_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/EducationalChoiceBlock.vue'),
captcha: () => import('@/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue'),
personal_data: () => import('@/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue'),
};
return defineAsyncComponent(componentMap[type] || null);
},
submitForm(event) {
event.preventDefault();
this.formData = this.getFormData(event.target.elements);
this.sendDataToServer();
},
getFormData(formElements) {
const formData = {};
for (let i = 0; i < formElements.length; i++) {
const element = formElements[i];
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
const fieldName = this.normalizeFieldName(element.name);
if (element.tagName === 'INPUT') {
if (element.type === 'checkbox') {
this.handleCheckbox(formData, fieldName, element);
} else if (fieldName && fieldName !== 'choices') {
formData[fieldName] = element.value;
}
} else if (element.tagName === 'TEXTAREA') {
formData[fieldName] = element.value;
} else if (element.tagName === 'SELECT') {
formData[fieldName] = element.value;
}
}
}
return formData;
},
normalizeFieldName(name) {
return name.endsWith('[]') ? name.slice(0, -2) : name;
},
handleCheckbox(formData, fieldName, element) {
if (!formData[fieldName]) {
formData[fieldName] = [];
}
if (element.checked) {
formData[fieldName].push(element.value);
}
},
sendDataToServer() {
axios.post(route('client.widget.form.submit', this.blocks.data.id), this.formData)
.then(this.handleResponse)
.catch(this.handleError);
},
handleResponse(response) {
if (response.data.status === 'ok') {
this.success = true;
this.message = response.data.message;
this.errors = null; // Сбрасываем ошибки при успешной отправке
}
},
handleError(error) {
this.errors = error.response.data || ['Неизвестная ошибка']; // Обработка ошибок
this.success = false; // Сбрасываем успешное состояние
}
},
props: {
blocks: {
type: Object,
},
},
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>
resources/js/componentss/shared/builder/formBuilder/blocks/AdditionalEducationalChoiceBlock.vue
+92
View File
@@ -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>
resources/js/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue
+48
View File
@@ -0,0 +1,48 @@
<template>
<div class="mb-4 sm:mb-8">
<div class="relative">
<!-- Компонент капчи -->
<YSmartCaptcha v-model="token" />
<!-- Скрытое поле ввода -->
<input
v-model="inputValue"
:required="block.data.rules.required"
:name="block.data.name_field"
type="text"
class="hidden"
/>
</div>
</div>
</template>
<script>
export default {
name: "CaptchaBlock",
data() {
return {
token: null, // Токен капчи
inputValue: "", // Значение, которое будет отправлено в input
};
},
watch: {
// Отслеживаем изменения токена
token(newToken) {
if (newToken) {
// Если токен получен, считаем капчу успешно пройденной
this.inputValue = "Капча успешно пройдена";
} else {
// Если токен сброшен, очищаем поле
this.inputValue = "";
}
},
},
props: {
block: {
type: Object,
},
error: {
type: Object,
},
},
};
</script>
resources/js/componentss/shared/builder/formBuilder/blocks/DateBlock.vue
+49
View File
@@ -0,0 +1,49 @@
<template>
<div 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">
<input
:required="block.data.rules.required"
:name="block.data.name_field"
type="date"
:id="block.data.name_field + '-id'"
:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
:placeholder="block.data.title_field"
>
<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>
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
</div>
</template>
<script>
export default {
name: "DateBlock",
data() {
return {
}
},
methods: {},
props: {
block: {
type: Object,
},
error: {
type: Object,
}
},
}
</script>
resources/js/componentss/shared/builder/formBuilder/blocks/EducationalChoiceBlock.vue
+92
View File
@@ -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>
resources/js/componentss/shared/builder/formBuilder/blocks/EmailBlock.vue
+50
View File
@@ -0,0 +1,50 @@
<template>
<div 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">
<input
:required="block.data.rules.required"
:name="block.data.name_field"
:min="block.data.rules.min"
:max="block.data.rules.max"
type="email"
:id="block.data.name_field + '-id'"
:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
:placeholder="block.data.title_field"
>
<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>
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
</div>
</template>
<script>
export default {
name: "EmailBlock",
data() {
return {
}
},
methods: {},
props: {
block: {
type: Object,
},
error: {
type: Object,
}
},
}
</script>
resources/js/componentss/shared/builder/formBuilder/blocks/MultipleChoiceBlock.vue
+41
View File
@@ -0,0 +1,41 @@
<template>
<div class="mb-4 sm:mb-8">
<label class="block mb-3 text-sm font-medium">{{ block.data.title_field }}</label>
<div class="space-y-2">
<div v-for="column in block.data.columns" class="flex">
<input
type="checkbox"
:name="block.data.name_field + '[]'"
:value="column.name_field"
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="column.name_field + '-id'">
<label :for="column.name_field + '-id'" class="text-sm text-gray-500 ms-3">{{ column.title_field }}</label>
</div>
</div>
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
</div>
</template>
<script>
export default {
name: "MultipleChoiceBlock",
data() {
return {
}
},
methods: {},
props: {
block: {
type: Object,
},
error: {
type: Object,
}
},
}
</script>
resources/js/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue
+45
View File
@@ -0,0 +1,45 @@
<template>
<div class="mb-4 sm:mb-8">
<label class="block mb-3 text-sm font-medium">{{ block.data.title_field }}</label>
<div class="">
<input
type="checkbox"
required="required"
class="shrink-0 mb-0.5 border-gray-200 rounded text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
:id="block.data.name_field + '-id'">
<input
:name="block.data.name_field"
value="Даю согласие на обработку персональных данных"
type="text"
class="hidden"
/>
<label :for="block.data.name_field + '-id'" class="text-sm text-gray-500 ms-2">Даю свое согласие на сбор, обработку, хранение и использование персональных данных в соответствии с <a class="underline text-primaryBlue" target="_blank" href="https://ntspi.ru/upload/824_%D0%9E%D0%B1_%D1%83%D1%82%D0%B2_%D0%9F%D0%BE%D0%BB%D0%B8%D1%82_%D0%BE%D0%B1%D1%80_%D0%B7%D0%B0%D1%89%D0%B8%D1%82_%D0%BF%D0%B5%D1%80%D1%81_%D0%B4%D0%B0%D0%BD.pdf">Пользовательским соглашением</a> </label>
</div>
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
</div>
</template>
<script>
export default {
name: "PersonalDataBlock",
data() {
return {
text: "",
}
},
methods: {},
props: {
block: {
type: Object,
},
error: {
type: Object,
}
},
}
</script>
resources/js/componentss/shared/builder/formBuilder/blocks/PhoneBlock.vue
+49
View File
@@ -0,0 +1,49 @@
<template>
<div 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">
<input
:required="block.data.rules.required"
:name="block.data.name_field"
:min="block.data.rules.min"
:max="block.data.rules.max"
type="tel"
:id="block.data.name_field + '-id'"
:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
:placeholder="block.data.title_field"
>
<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>
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
</div>
</template>
<script>
export default {
name: "PhoneBlock",
data() {
return {}
},
methods: {},
props: {
block: {
type: Object,
},
error: {
type: Object,
}
},
}
</script>
resources/js/componentss/shared/builder/formBuilder/blocks/SingleChoiceBlock.vue
+42
View File
@@ -0,0 +1,42 @@
<template>
<div class="mb-4 sm:mb-8">
<label class="block mb-3 text-sm font-medium">{{ block.data.title_field }}</label>
<div class="space-y-2">
<div v-for="column in block.data.columns" class="flex">
<input
type="radio"
:name="block.data.name_field"
:value="column.name_field"
name="hs-default-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="column.name_field + '-id'">
<label :for="column.name_field + '-id'" class="text-sm text-gray-500 ms-2">{{ column.title_field }}</label>
</div>
</div>
<p v-if="!error" class="mt-2 text-sm text-gray-500" id="hs-input-helper-text">{{ block.data.description }}</p>
<p v-for="item in error" class="text-sm text-red-600 mt-2" id="hs-validation-name-error-helper">{{ item }}</p>
</div>
</template>
<script>
export default {
name: "SingleChoiceBlock",
data() {
return {
}
},
methods: {},
props: {
block: {
type: Object,
},
error: {
type: Object,
}
},
}
</script>
resources/js/componentss/shared/builder/formBuilder/blocks/SubmitBlock.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<div class="mt-6 grid">
<button type="submit" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">{{ block }}</button>
</div>
</template>
<script>
import slugify from "slugify";
export default {
name: "SubmitBlock",
methods: {
},
props: {
block: {
type: Object,
},
},
}
</script>
<style>
</style>
resources/js/componentss/shared/builder/formBuilder/blocks/TextAreaBlock.vue
+62
View File
@@ -0,0 +1,62 @@
<template>
<div 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">
<textarea
v-model="textarea"
:required="block.data.rules.required"
:name="block.data.name_field"
:minlength="block.data.rules.min"
:maxlength="block.data.rules.max"
type="text"
:id="block.data.name_field + '-id'"
:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
:placeholder="block.data.title_field"
/>
<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">{{ textarea.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>
export default {
name: "TextAreaBlock",
data() {
return {
textarea: "",
}
},
methods: {},
props: {
block: {
type: Object,
},
error: {
type: Object,
}
},
}
</script>
<style scoped>
</style>
resources/js/componentss/shared/builder/formBuilder/blocks/TextBlock.vue
+58
View File
@@ -0,0 +1,58 @@
<template>
<div 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">
<input
v-model="text"
:required="block.data.rules.required"
:name="block.data.name_field"
:minlength="block.data.rules.min"
:maxlength="block.data.rules.max"
type="text"
:id="block.data.name_field + '-id'"
:class="(error) ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'focus:border-blue-500 focus:ring-blue-500'"
class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm disabled:opacity-50 disabled:pointer-events-none"
:placeholder="block.data.title_field"
>
<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 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>
</div>
</template>
<script>
export default {
name: "TextBlock",
data() {
return {
text: "",
}
},
methods: {},
props: {
block: {
type: Object,
},
error: {
type: Object,
}
},
}
</script>
resources/js/componentss/shared/builder/pageBuilder/Builder.vue
+81
View File
@@ -0,0 +1,81 @@
<template>
<div>
<transition name="fade" mode="out-in">
<PageSkeleton v-if="loading" key="skeleton" />
<div class="space-y-6" v-else key="content">
<component
v-for="(block, index) in blocks"
:key="index"
:is="getComponent(block.type)"
:block="block"
/>
</div>
</transition>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import PageSkeleton from "@/componentss/shared/builder/pageBuilder/skeletons/PageSkeleton.vue";
export default {
name: "Builder",
components: {PageSkeleton},
data() {
return {
loading: true,
componentMap: {
heading: () => import('@/componentss/shared/builder/pageBuilder/blocks/HeadingBlock.vue'),
paragraph: () => import('@/componentss/shared/builder/pageBuilder/blocks/ParagraphBlock.vue'),
images: () => import('@/componentss/shared/builder/pageBuilder/blocks/BasicImageSlider.vue'),
image: () => import('@/componentss/shared/builder/pageBuilder/blocks/ImageBlock.vue'),
files: () => import('@/componentss/shared/builder/pageBuilder/blocks/FileBlock.vue'),
person: () => import('@/componentss/shared/builder/pageBuilder/blocks/PersonBlock.vue'),
stepper: () => import('@/componentss/shared/builder/pageBuilder/blocks/StepperBlock.vue'),
video: () => import('@/componentss/shared/builder/pageBuilder/blocks/VideoBlock.vue'),
tabs: () => import('@/componentss/shared/builder/pageBuilder/blocks/TabBlock.vue'),
postsList: () => import('@/componentss/shared/builder/pageBuilder/blocks/PostListBlock.vue'),
postItem: () => import('@/componentss/shared/builder/pageBuilder/blocks/PostItemBlock.vue'),
pageItem: () => import('@/componentss/shared/builder/pageBuilder/blocks/PageItemBlock.vue'),
customForm: () => import('@/componentss/shared/builder/pageBuilder/blocks/FormBlock.vue'),
pageResourceList: () => import('@/componentss/shared/builder/pageBuilder/blocks/PageResourceList.vue'),
contact: () => import('@/componentss/shared/builder/pageBuilder/blocks/contacts/ContactSectionBlock.vue'),
slider: () => import('@/componentss/features/sliders/shared/SliderBlock.vue')
},
};
},
methods: {
async loadAllComponents() {
// Создайте массив промисов для загрузки всех компонентов
const promises = Object.values(this.componentMap).map(load => load());
// Дождитесь завершения всех загрузок
await Promise.all(promises);
this.loading = false; // Установите флаг загрузки в false
},
getComponent(type) {
return defineAsyncComponent(this.componentMap[type] || null);
},
},
props: {
blocks: {
type: Array,
required: true,
},
},
async created() {
await this.loadAllComponents(); // Загрузить все компоненты при создании
},
}
</script>
<style scoped>
/* Анимация появления */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>
resources/js/componentss/shared/builder/pageBuilder/blocks/BasicImageSlider.vue
+89
View File
@@ -0,0 +1,89 @@
<template>
<div class="relative">
<div class="flex">
<div
v-for="(item, index) in items"
:key="index"
class="w-full h-[500px] overflow-hidden relative"
:class="{ 'block': currentIndex === index, 'hidden': currentIndex !== index }"
>
<div class="absolute inset-0 bg-cover bg-center blur-lg" :style="{ backgroundImage: 'url(/storage/' + item + ')' }"></div>
<img
@click="openLightboxOnSlide(index + 1)"
:src="'/storage/' + item"
class="absolute inset-0 w-full h-full object-cover rounded-md hover:opacity-95 hover:duration-200 transition"
/>
</div>
</div>
<button
class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
@click="prevSlide"
>
&#10094;
</button>
<button
class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-white rounded-full p-2 shadow-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
@click="nextSlide"
>
&#10095;
</button>
</div>
<figcaption class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
{{ block.data.alt }}
</figcaption>
<FsLightbox class="" :slide="slide" :toggler="toggler" :sources="items.map(item => domainPath + '/storage/' + item)"/>
</template>
<script>
import FsLightbox from "fslightbox-vue";
export default {
name: "ClientImageSlider",
components: { FsLightbox },
data() {
return {
currentIndex: 0,
items: this.block.data.url,
toggler: false,
domainPath: null,
slide: null,
};
},
props: {
block: {
type: Array,
},
},
methods: {
prevSlide() {
if (this.currentIndex === 0) {
this.currentIndex = this.items.length - 1;
} else {
this.currentIndex--;
}
},
nextSlide() {
if (this.currentIndex === this.items.length - 1) {
this.currentIndex = 0;
} else {
this.currentIndex++;
}
},
openLightboxOnSlide: function (number) {
this.slide = number;
this.toggler = !this.toggler;
}
},
mounted() {
this.domainPath = window.location.origin;
},
};
</script>
<style scoped>
.blur-lg {
filter: blur(20px);
}
</style>
resources/js/componentss/shared/builder/pageBuilder/blocks/FileBlock.vue
+66
View File
@@ -0,0 +1,66 @@
<template>
<template v-for="file in block.data.file">
<div class="mb-4">
<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 justify-between">
<div class="min-w-[30px] min-h-[30px] bg-[#303030] flex justify-center items-center rounded-md mr-2">
<BasicIcon :name="file.expansion" class="w-5 h-5 flex-shrink-0" />
</div>
<div>{{ textLimit(file.title, 70) }}</div>
</div>
<span class="text-sm text-gray-400">{{ file.size }}</span>
</div>
</a>
</div>
</template>
</template>
<script>
import slugify from "slugify";
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
export default {
name: "FileBlock",
components: {BasicIcon },
data() {
return {
toggler: false,
domainPath: null,
}
},
methods: {
generateSlug: function (text) {
return slugify(text, {
lower: true,
strict: true,
locale: 'ru'
});
},
textLimit(text, symbols) {
if (text.length > symbols) {
let LimitedText;
LimitedText = text.substring(0, symbols);
return LimitedText + "...";
}
return text;
},
},
mounted() {
this.domainPath = window.location.origin;
},
props: {
block: {
type: Object,
},
},
}
</script>
<style>
</style>
resources/js/componentss/shared/builder/pageBuilder/blocks/FormBlock.vue
+62
View File
@@ -0,0 +1,62 @@
<template>
<div v-if="loading" class="flex flex-col space-y-4">
<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>
<div v-else>
<FormBuilder :blocks="form" />
</div>
</template>
<script>
import axios from "axios";
import {Link} from "@inertiajs/vue3";
export default {
name: "FormBlock",
components: {axios, Link },
data() {
return {
form: null,
loading: true, // Состояние загрузки
}
},
methods: {
getForm(id) {
axios.get(route('client.widget.form.single', id))
.then(response => {
this.form = response.data;
this.loading = false; // Установить состояние загрузки в false
})
.catch(error => {
console.error('Ошибка:', error);
});
}
},
mounted() {
const id = this.block?.data.form || this.formId
this.getForm(id);
},
props: {
block: {
type: Object,
},
formId: {
type: String,
default: null,
}
},
}
</script>
<style>
.fslightbox-container {
margin: 0 !important;
}
</style>
resources/js/componentss/shared/builder/pageBuilder/blocks/HeadingBlock.vue
+31
View File
@@ -0,0 +1,31 @@
<template>
<div >
<h2 :id="generateSlug(block.data.content)" class="font-bold text-xl">{{ 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>
resources/js/componentss/shared/builder/pageBuilder/blocks/ImageBlock.vue
+53
View File
@@ -0,0 +1,53 @@
<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 v-if="block.data.alt" class="mt-3 text-sm text-center text-gray-500 dark:text-neutral-500">
{{ block.data.alt }}
</div>
</div>
<FsLightbox class="" :toggler="toggler" :sources="[domainPath + '/storage/' + block.data.url]"/>
</template>
<script>
import slugify from "slugify";
import FsLightbox from "fslightbox-vue";
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>
resources/js/componentss/shared/builder/pageBuilder/blocks/PageItemBlock.vue
+106
View File
@@ -0,0 +1,106 @@
<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 py-5 sm:px-3 lg:px-4 lg:py-7 mx-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 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>
resources/js/componentss/shared/builder/pageBuilder/blocks/PageResourceList.vue
+144
View File
@@ -0,0 +1,144 @@
<template>
<div v-if="loading" class="flex flex-col space-y-4">
<div class="group flex justify-center space-x-8 mb-8 flex-wrap rounded-xl overflow-hidden animate-pulse items-center">
<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 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 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 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 v-if="resource.data.length !== 0" class="px-0 sm:px-2 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl text-center mx-auto mb-4 md: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"></p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="flex md:justify-center 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 flex flex-col flex-grow">
<!-- <p class="mt-2 text-xs uppercase text-gray-600">{{ item.model_select }}</p> -->
<h3 class="my-2 text-lg font-medium text-gray-800 group-hover:text-blue-600">
{{ textLimit(item.title, 40) }}
</h3>
<p class="text-xs text-gray-600 mt-auto group-hover:text-gray-900">
{{ item.link_text }}
</p>
</div>
</a>
</div>
<!-- End Grid -->
<!-- Card -->
<!-- End Card -->
</div>
<!-- End Card Blog -->
</div>
</template>
<script>
import axios from "axios";
import {Link} from "@inertiajs/vue3";
export default {
name: "PageResourceList",
components: {axios, Link },
data() {
return {
resource: null,
loading: true,
colors: ['from-primaryBlue', 'from-primaryRed'],
}
},
methods: {
getResource(id) {
axios.get(route('client.widget.page.resource.show', 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)];
},
textLimit(text, symbols) {
if (text.length > symbols) {
let LimitedText;
LimitedText = text.substring(0, symbols);
return LimitedText + "...";
}
return text;
},
},
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/componentss/shared/builder/pageBuilder/blocks/ParagraphBlock.vue
+123
View File
@@ -0,0 +1,123 @@
<template>
<div class="text-normal leading-7 font-light text-gray-600 md:text-[16px] md:text-[#374151] md:leading-8 md:font-normal 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>
resources/js/componentss/shared/builder/pageBuilder/blocks/PersonBlock.vue
+70
View File
@@ -0,0 +1,70 @@
<template>
<div class="w-full rounded-xl mb-4 p-4 md:p-6 bg-white border border-gray-200 ">
<div class="flex items-center gap-y-4 gap-x-4 flex-wrap md:flex-nowrap">
<img v-if="block.data.photo" @click="toggler = !toggler" loading="lazy" class="rounded-xl md:w-[150px]" :src="'/storage/' + block.data.photo" alt="Image Description">
<div class="grow overflow-x-auto">
<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";
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 scoped>
.fslightbox-container {
margin: 0 !important;
}
</style>
resources/js/componentss/shared/builder/pageBuilder/blocks/PostItemBlock.vue
+105
View File
@@ -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>
resources/js/componentss/shared/builder/pageBuilder/blocks/PostListBlock.vue
+160
View File
@@ -0,0 +1,160 @@
<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">
<div>
<span class="text-sm font-light text-gray-700">Опубликовано {{ post.created_post }}</span>
</div>
<h3 class="text-xl font-semibold text-gray-800 group-hover:text-gray-600">
{{ post.title }}
</h3>
<p class="mt-3 text-gray-600">
{{ textLimit(post.preview_text, 80) }}
</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 даже при ошибке
});
},
textLimit(text, symbols) {
if (text.length > symbols) {
let LimitedText;
LimitedText = text.substring(0, symbols);
return LimitedText + "...";
}
return text;
},
},
mounted() {
this.getPosts();
},
props: {
block: {
type: Object,
},
},
}
</script>
<style>
.fslightbox-container {
margin: 0 !important;
}
</style>
resources/js/componentss/shared/builder/pageBuilder/blocks/StepperBlock.vue
+82
View File
@@ -0,0 +1,82 @@
<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";
export default {
name: "StepperBlock",
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>
resources/js/componentss/shared/builder/pageBuilder/blocks/TabBlock.vue
+68
View File
@@ -0,0 +1,68 @@
<template>
<div class="">
<nav class="-mb-0.5 flex justify-center gap-2 flex-wrap" 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 "@/componentss/shared/builder/tabsBuilder/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>
resources/js/componentss/shared/builder/pageBuilder/blocks/VideoBlock.vue
+45
View File
@@ -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>
export default {
name: "VideoBlock",
data() {
return {
toggler: false,
domainPath: null,
}
},
methods: {
},
mounted() {
this.domainPath = window.location.origin;
},
props: {
block: {
type: Object,
},
},
}
</script>
<style>
</style>
resources/js/componentss/shared/builder/pageBuilder/blocks/contacts/ContactGroup.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<div class="space-y-3">
<h2 class="font-semibold text-[#1A5AAF] text-lg">{{ title }}</h2>
<div v-for="(item, index) in items" :key="index">
<h3 class="font-semibold md:mb-2 mb-1">{{ item.header }}</h3>
<div class="font-light">
<p v-for="(detail, idx) in item.details" :key="idx">
<span v-if="detail.url">
<a :href="detail.url" class="text-blue-500 hover:underline">{{ detail.content }}</a>
</span>
<span v-else>
{{ detail.content }}
</span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true,
},
items: {
type: Array,
required: true,
},
},
};
</script>
<style scoped>
/* ваши стили, если необходимо */
</style>
resources/js/componentss/shared/builder/pageBuilder/blocks/contacts/ContactSectionBlock.vue
+68
View File
@@ -0,0 +1,68 @@
<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-if="!loading & contacts">
<section class="bg-[#F5F5F5] w-full py-10">
<div class="max-w-screen-xl md:flex justify-around w-full mx-auto px-4 md:py-[50px] flex-wrap space-y-7 md:space-y-0">
<ContactGroup v-for="contact in contacts.data.content"
:title="contact.title"
:items="contact.items"
/>
</div>
</section>
</div>
</template>
<script>
import ContactGroup from './ContactGroup.vue';
import axios from "axios";
export default {
components: {
ContactGroup,
},
data() {
return {
loading: true,
contacts: null,
};
},
methods: {
getContact(id) {
axios.get(route('client.widget.contact.show', id))
.then(response => {
this.contacts = response.data;
this.loading = false; // Установить состояние загрузки в false
})
.catch(error => {
console.error('Ошибка:', error);
});
},
},
mounted() {
const id = this.block?.data.contact || this.contactId
this.getContact(id);
},
props: {
block: {
type: Object,
},
contactId: {
type: String,
default: null,
}
},
};
</script>
<style scoped>
/* ваши стили, если необходимо */
</style>
resources/js/componentss/shared/builder/pageBuilder/skeletons/PageSkeleton.vue
+50
View File
@@ -0,0 +1,50 @@
<template>
<div role="status" class="space-y-2.5 animate-pulse w-full">
<div v-for="slide in 16" :key="slide" class="flex items-center w-full">
<div
class="h-2.5 rounded-full"
:class="getRandomBgColor()"
:style="{ width: getRandomInt(20, 80) + '%' }"
></div>
<div
class="h-2.5 ms-2 rounded-full"
:class="getRandomBgColor()"
:style="{ width: getRandomInt(10, 40) + '%' }"
></div>
<div
class="h-2.5 ms-2 rounded-full"
:class="getRandomBgColor()"
:style="{ width: getRandomInt(10, 40) + '%' }"
></div>
</div>
</div>
</template>
<script>
import { Link } from "@inertiajs/vue3";
export default {
name: "PageSkeleton",
components: { Link },
props: {
header: {
type: String,
},
},
methods: {
// Функция для генерации случайного числа в диапазоне
getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
// Функция для случайного выбора цвета фона
getRandomBgColor() {
const colors = ["bg-gray-100", "bg-gray-200", "bg-gray-300"];
return colors[this.getRandomInt(0, colors.length - 1)];
},
},
};
</script>
<style scoped>
/* Ваши стили, если нужно */
</style>
resources/js/componentss/shared/builder/tabsBuilder/PageTabBuilder.vue
+93
View File
@@ -0,0 +1,93 @@
<template>
<div>
<PageSkeleton v-if="loading" />
<div class="space-y-6" 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 "@/componentss/shared/builder/pageBuilder/skeletons/PageSkeleton.vue";
export default {
name: "PageTabBuilder",
components: {PageSkeleton},
data() {
return {
loading: true, // Флаг загрузки
};
},
methods: {
async loadAllComponents() {
const componentMap = {
heading: () => import('@/componentss/shared/builder/pageBuilder/blocks/HeadingBlock.vue'),
paragraph: () => import('@/componentss/shared/builder/pageBuilder/blocks/ParagraphBlock.vue'),
images: () => import('@/componentss/shared/builder/pageBuilder/blocks/BasicImageSlider.vue'),
image: () => import('@/componentss/shared/builder/pageBuilder/blocks/ImageBlock.vue'),
files: () => import('@/componentss/shared/builder/pageBuilder/blocks/FileBlock.vue'),
person: () => import('@/componentss/shared/builder/pageBuilder/blocks/PersonBlock.vue'),
stepper: () => import('@/componentss/shared/builder/pageBuilder/blocks/StepperBlock.vue'),
video: () => import('@/componentss/shared/builder/pageBuilder/blocks/VideoBlock.vue'),
postsList: () => import('@/componentss/shared/builder/pageBuilder/blocks/PostListBlock.vue'),
postItem: () => import('@/componentss/shared/builder/pageBuilder/blocks/PostItemBlock.vue'),
pageItem: () => import('@/componentss/shared/builder/pageBuilder/blocks/PageItemBlock.vue'),
customForm: () => import('@/componentss/shared/builder/pageBuilder/blocks/FormBlock.vue'),
pageResourceList: () => import('@/componentss/shared/builder/pageBuilder/blocks/PageResourceList.vue'),
contact: () => import('@/componentss/shared/builder/pageBuilder/blocks/contacts/ContactSectionBlock.vue'),
slider: () => import('@/componentss/features/sliders/shared/SliderBlock.vue')
};
// Создайте массив промисов для загрузки всех компонентов
const promises = Object.values(componentMap).map(load => load());
// Дождитесь завершения всех загрузок
await Promise.all(promises);
this.loading = false; // Установите флаг загрузки в false
},
getComponent(type) {
const componentMap = {
heading: () => import('@/componentss/shared/builder/pageBuilder/blocks/HeadingBlock.vue'),
paragraph: () => import('@/componentss/shared/builder/pageBuilder/blocks/ParagraphBlock.vue'),
images: () => import('@/componentss/shared/builder/pageBuilder/blocks/BasicImageSlider.vue'),
image: () => import('@/componentss/shared/builder/pageBuilder/blocks/ImageBlock.vue'),
files: () => import('@/componentss/shared/builder/pageBuilder/blocks/FileBlock.vue'),
person: () => import('@/componentss/shared/builder/pageBuilder/blocks/PersonBlock.vue'),
stepper: () => import('@/componentss/shared/builder/pageBuilder/blocks/StepperBlock.vue'),
video: () => import('@/componentss/shared/builder/pageBuilder/blocks/VideoBlock.vue'),
postsList: () => import('@/componentss/shared/builder/pageBuilder/blocks/PostListBlock.vue'),
postItem: () => import('@/componentss/shared/builder/pageBuilder/blocks/PostItemBlock.vue'),
pageItem: () => import('@/componentss/shared/builder/pageBuilder/blocks/PageItemBlock.vue'),
customForm: () => import('@/componentss/shared/builder/pageBuilder/blocks/FormBlock.vue'),
pageResourceList: () => import('@/componentss/shared/builder/pageBuilder/blocks/PageResourceList.vue'),
contact: () => import('@/componentss/shared/builder/pageBuilder/blocks/contacts/ContactSectionBlock.vue'),
slider: () => import('@/componentss/features/sliders/shared/SliderBlock.vue')
};
return defineAsyncComponent(componentMap[type] || null);
},
},
async created() {
await this.loadAllComponents(); // Загрузить все компоненты при создании
},
props: {
blocks: {
type: Object,
},
},
}
</script>
<style scoped>
</style>