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-14 14:56:10 +05:00
parent 77b3e3b4b1
commit dd3a0c6ecd
258 changed files with 6548 additions and 1777 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/BuilderUi/Pages/Blocks/FormBlock.vue
+9 -14
View File
@@ -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>
resources/js/Components/BuilderUi/Pages/FormBlocks/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/Components/BuilderUi/Pages/FormBlocks/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/Components/BuilderUi/Pages/FormBlocks/TextBlock.vue
+1 -1
View File
@@ -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>
resources/js/Components/BuilderUi/Pages/FormBuilder.vue
+7 -3
View File
@@ -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;
},
resources/js/Components/BuilderUi/Pages/PageBreadcrumbs.vue
+81 -9
View File
@@ -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: {
resources/js/Components/BuilderUi/Pages/PageNavigateLinks.vue
+1 -1
View File
@@ -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)]">
resources/js/Components/BuilderUi/Pages/PageSubSectionLinks.vue
+2 -1
View File
@@ -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>