refactor educational components and API routes; update form handling in various actions and Vue components, enhance user interface for form display, and improve data retrieval logic in CreateAdmissionPlan job
This commit is contained in:
F4ilji
@@ -18,11 +18,13 @@ import FormBuilder from "@/componentss/shared/builder/formBuilder/FormBuilder.vu
|
||||
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
|
||||
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
|
||||
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
|
||||
import Form from "@/componentss/features/forms/Form.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "Show",
|
||||
components: {
|
||||
Form,
|
||||
BaseBreadcrumbs,
|
||||
BasicIcon, BreadcrumbsItem,
|
||||
FormBuilder,
|
||||
@@ -193,7 +195,7 @@ export default {
|
||||
<div class="hs-accordion-group">
|
||||
<div class="hs-accordion border-gray-200 active bg-white border rounded-xl" id="hs-active-bordered-heading-two">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-8 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none rounded-xl" aria-expanded="true" aria-controls="hs-basic-active-bordered-collapse-two">
|
||||
Запишитесь на консультацию по курсу
|
||||
{{ form?.title }}
|
||||
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5v14"></path>
|
||||
@@ -207,11 +209,11 @@ export default {
|
||||
<div class="flex rounded-xl">
|
||||
<div class="grow rounded-xl">
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
|
||||
Заполните форму обратной связи и с вами свяжется специалист центра дополнительного образования
|
||||
{{ form?.description }}
|
||||
</p>
|
||||
<div class="mt-5 inline-flex gap-x-2">
|
||||
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-vertically-centered-scrollable-modal" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
|
||||
Записаться
|
||||
{{ form?.button }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -238,7 +240,7 @@ export default {
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-2 overflow-y-auto">
|
||||
<FormBlock :form-id="form" />
|
||||
<Form :form-id="form.id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -251,4 +253,4 @@ export default {
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -15,6 +15,7 @@ import BasicPageWrapper from "@/componentss/ui/wrappers/BasicPageWrapper.vue";
|
||||
import BasicPageContainer from "@/componentss/ui/templates/BasicPageContainer.vue";
|
||||
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
|
||||
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
|
||||
import Form from "@/componentss/features/forms/Form.vue";
|
||||
|
||||
|
||||
export default {
|
||||
@@ -51,6 +52,7 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
BaseBreadcrumbs, BreadcrumbsItem,
|
||||
BasicPageContainer,
|
||||
BasicPageWrapper,
|
||||
@@ -76,6 +78,9 @@ export default {
|
||||
},
|
||||
breadcrumbs: {
|
||||
type: Object
|
||||
},
|
||||
form: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -232,6 +237,61 @@ export default {
|
||||
<BasicFooter />
|
||||
</BasicPageWrapper>
|
||||
|
||||
<div class="fixed bottom-0 end-0 z-60 sm:max-w-xl w-full mx-auto p-6">
|
||||
<div class="hs-accordion-group">
|
||||
<div class="hs-accordion border-gray-200 active bg-white border rounded-xl" id="hs-active-bordered-heading-two">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-8 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none rounded-xl" aria-expanded="true" aria-controls="hs-basic-active-bordered-collapse-two">
|
||||
{{ form?.title }}
|
||||
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5v14"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="hs-basic-active-bordered-collapse-two" class="hs-accordion-content w-full overflow-hidden transition-[height] rounded-xl duration-300" role="region" aria-labelledby="hs-active-bordered-heading-two">
|
||||
<div class="px-8 pb-4 pt-0 bg-white rounded-xl shadow-2xs">
|
||||
<div class="flex rounded-xl">
|
||||
<div class="grow rounded-xl">
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
|
||||
{{ form?.description }}
|
||||
</p>
|
||||
<div class="mt-5 inline-flex gap-x-2">
|
||||
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-vertically-centered-scrollable-modal" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
|
||||
{{ form?.button }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="form" id="hs-vertically-centered-scrollable-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[1000000] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-vertically-centered-scrollable-modal-label">
|
||||
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-3xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
|
||||
<div class="w-full max-h-full overflow-hidden flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl pointer-events-auto dark:bg-neutral-800 dark:border-neutral-700 dark:shadow-neutral-700/70">
|
||||
<div class="flex justify-between items-center py-3 px-4 border-gray-200 dark:border-neutral-700">
|
||||
<h3 id="hs-vertically-centered-scrollable-modal-label" class="font-bold text-gray-800 dark:text-white">
|
||||
</h3>
|
||||
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-hidden focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
|
||||
<span class="sr-only">Close</span>
|
||||
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M18 6 6 18"></path>
|
||||
<path d="m6 6 12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-2 overflow-y-auto">
|
||||
<Form :form-id="form.id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
+119
-51
@@ -1,21 +1,35 @@
|
||||
<template>
|
||||
<MetaTags :seo="seo" />
|
||||
|
||||
<MetaTags :seo="seo" />
|
||||
|
||||
<MainPageNavBar :sections="$page.props.navigation" />
|
||||
|
||||
<BasicPageWrapper>
|
||||
<div class="relative mx-auto mb-auto mt-[67px] max-w-screen-xl w-full px-4 py-10 md:flex md:flex-row md:py-10">
|
||||
<PageSubSectionLinks v-if="!settings?.hide_page_sub_section_links" :sub-section-pages="subSectionPages" :current-section="page.data.section"/>
|
||||
<NavigateLinks v-if="!settings?.hide_page_navigate_links" :header-navs="headerNavs"/>
|
||||
<div
|
||||
class="relative mx-auto mb-auto mt-[67px] max-w-screen-xl w-full px-4 py-10 md:flex md:flex-row md:py-10"
|
||||
>
|
||||
<PageSubSectionLinks
|
||||
v-if="!settings?.hide_page_sub_section_links"
|
||||
:sub-section-pages="subSectionPages"
|
||||
:current-section="page.data.section"
|
||||
/>
|
||||
<NavigateLinks
|
||||
v-if="!settings?.hide_page_navigate_links"
|
||||
:header-navs="headerNavs"
|
||||
/>
|
||||
<div class="w-full min-w-0 mt-1 max-w-6xl px-1 md:px-6" style="">
|
||||
<div class="space-y-2 md:space-y-5">
|
||||
<BaseBreadcrumbs v-if="!settings?.hide_breadcrumbs" :breadcrumbs="breadcrumbs">
|
||||
<BreadcrumbsItem :title="breadcrumbs.page.data.title" :url="route('page.view', breadcrumbs.page.data.path)" />
|
||||
<BaseBreadcrumbs
|
||||
v-if="!settings?.hide_breadcrumbs"
|
||||
:breadcrumbs="breadcrumbs"
|
||||
>
|
||||
<BreadcrumbsItem
|
||||
:title="breadcrumbs.page.data.title"
|
||||
:url="route('page.view', breadcrumbs.page.data.path)"
|
||||
/>
|
||||
</BaseBreadcrumbs>
|
||||
<BasicTitle :header="page.data.title"/>
|
||||
<BasicTitle :header="page.data.title" />
|
||||
<div id="page-area">
|
||||
<Builder :blocks="page.data.content"/>
|
||||
<Builder :blocks="page.data.content" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -24,14 +38,65 @@
|
||||
<BasicFooter />
|
||||
</BasicPageWrapper>
|
||||
|
||||
<div v-if="settings?.form.id" class="fixed bottom-0 end-0 z-60 sm:max-w-xl w-full mx-auto p-6">
|
||||
<div class="hs-accordion-group">
|
||||
<div class="hs-accordion border-gray-200 active bg-white border rounded-xl" id="hs-active-bordered-heading-two">
|
||||
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 inline-flex justify-between items-center gap-x-3 w-full font-semibold text-start text-gray-800 py-4 px-8 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none rounded-xl" aria-expanded="true" aria-controls="hs-basic-active-bordered-collapse-two">
|
||||
{{ settings?.form.title }}
|
||||
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5v14"></path>
|
||||
</svg>
|
||||
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="hs-basic-active-bordered-collapse-two" class="hs-accordion-content w-full overflow-hidden transition-[height] rounded-xl duration-300" role="region" aria-labelledby="hs-active-bordered-heading-two">
|
||||
<div class="px-8 pb-4 pt-0 bg-white rounded-xl shadow-2xs">
|
||||
<div class="flex rounded-xl">
|
||||
<div class="grow rounded-xl">
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
|
||||
{{ settings?.form.description }}
|
||||
</p>
|
||||
<div class="mt-5 inline-flex gap-x-2">
|
||||
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-vertically-centered-scrollable-modal" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
|
||||
{{ settings?.form.button }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="settings?.form.id" id="hs-vertically-centered-scrollable-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-[1000000] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-vertically-centered-scrollable-modal-label">
|
||||
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-3xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
|
||||
<div class="w-full max-h-full overflow-hidden flex flex-col bg-white border border-gray-200 shadow-2xs rounded-xl pointer-events-auto dark:bg-neutral-800 dark:border-neutral-700 dark:shadow-neutral-700/70">
|
||||
<div class="flex justify-between items-center py-3 px-4 border-gray-200 dark:border-neutral-700">
|
||||
<h3 id="hs-vertically-centered-scrollable-modal-label" class="font-bold text-gray-800 dark:text-white">
|
||||
</h3>
|
||||
<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-hidden focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
|
||||
<span class="sr-only">Close</span>
|
||||
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M18 6 6 18"></path>
|
||||
<path d="m6 6 12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-2 overflow-y-auto">
|
||||
<Form :form-id="settings?.form.id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import {Link, Head} from "@inertiajs/vue3";
|
||||
import { Link, Head } from "@inertiajs/vue3";
|
||||
import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
|
||||
import MetaTags from "@/componentss/shared/SEO/MetaTags.vue";
|
||||
import BasicFooter from "@/footers/BasicFooter.vue";
|
||||
@@ -53,37 +118,41 @@ import SortingByFilter from "@/componentss/shared/filter/filters/SortingByFilter
|
||||
import BaseBreadcrumbs from "@/componentss/shared/Breadcrumbs/BaseBreadcrumbs.vue";
|
||||
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
|
||||
import BreadcrumbsItem from "@/componentss/shared/Breadcrumbs/BreadcrumbsItem.vue";
|
||||
|
||||
import FormBlock from "@/componentss/shared/builder/pageBuilder/blocks/FormBlock.vue";
|
||||
import Form from "@/componentss/features/forms/Form.vue";
|
||||
|
||||
export default {
|
||||
name: "Page",
|
||||
name: "Page",
|
||||
data() {
|
||||
return {
|
||||
headerNavs: (this.page?.data?.content || []).filter(block => block?.type === 'heading').map(block => ({
|
||||
id: block?.data?.id,
|
||||
text: block?.data?.content
|
||||
})),
|
||||
settings: this.page?.data?.settings || {}
|
||||
}
|
||||
headerNavs: (this.page?.data?.content || [])
|
||||
.filter((block) => block?.type === "heading")
|
||||
.map((block) => ({
|
||||
id: block?.data?.id,
|
||||
text: block?.data?.content,
|
||||
})),
|
||||
settings: this.page?.data?.settings || {},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
navigation: {
|
||||
type: Object,
|
||||
},
|
||||
page: {
|
||||
type: Object,
|
||||
},
|
||||
subSectionPages: {
|
||||
type: Object,
|
||||
},
|
||||
breadcrumbs: {
|
||||
type: Object,
|
||||
},
|
||||
seo: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
props: {
|
||||
navigation: {
|
||||
type: Object,
|
||||
},
|
||||
page: {
|
||||
type: Object,
|
||||
},
|
||||
subSectionPages: {
|
||||
type: Object,
|
||||
},
|
||||
breadcrumbs: {
|
||||
type: Object,
|
||||
},
|
||||
seo: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
BreadcrumbsItem,
|
||||
BasicIcon,
|
||||
BaseBreadcrumbs,
|
||||
@@ -102,20 +171,19 @@ export default {
|
||||
Builder,
|
||||
BasicFooter,
|
||||
MetaTags,
|
||||
MainPageNavBar,
|
||||
PageSubSectionLinks,
|
||||
PageBreadcrumbs,
|
||||
Link,
|
||||
Head
|
||||
},
|
||||
methods: {},
|
||||
MainPageNavBar,
|
||||
PageSubSectionLinks,
|
||||
PageBreadcrumbs,
|
||||
Link,
|
||||
Head,
|
||||
FormBlock,
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
|
||||
computed: {}
|
||||
}
|
||||
computed: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
</style>
|
||||
<style></style>
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
<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>
|
||||
<div>
|
||||
<FormModalBuilder :blocks="form" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from "axios";
|
||||
import {Link} from "@inertiajs/vue3";
|
||||
import FormBuilder from "@/componentss/shared/builder/formBuilder/FormBuilder.vue";
|
||||
import SubmitBlock from "@/componentss/shared/builder/formBuilder/blocks/SubmitBlock.vue";
|
||||
import FormModalBuilder from "@/componentss/features/forms/components/builder/FormModalBuilder.vue";
|
||||
export default {
|
||||
name: "Form",
|
||||
components: {FormModalBuilder, SubmitBlock, FormBuilder, 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() {
|
||||
this.getForm(this.formId);
|
||||
},
|
||||
props: {
|
||||
formId: {
|
||||
type: String,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div v-if="success" class="relative flex flex-col bg-white shadow-lg rounded-xl dark:bg-neutral-900">
|
||||
<div class="pb-10 px-5 text-center overflow-y-auto">
|
||||
<!-- Icon -->
|
||||
<span class="mb-4 inline-flex justify-center items-center size-11 rounded-full border-4 border-green-50 bg-green-100 text-green-500 dark:bg-green-700 dark:border-green-600 dark:text-green-100">
|
||||
<svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<!-- End Icon -->
|
||||
|
||||
<h3 id="hs-task-created-alert-label" class="mb-8 text-xl font-bold text-gray-800 dark:text-neutral-200">
|
||||
Успех!
|
||||
</h3>
|
||||
<p class="text-gray-500 dark:text-neutral-500">
|
||||
{{ message }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else>
|
||||
<div class="max-w-[85rem] sm:px-6 lg:px-8 lg:py-7 mx-auto">
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div class="text-center px-2">
|
||||
<h2 class="text-2xl text-gray-800 font-semibold sm:text-3xl">
|
||||
{{ blocks.data.title }}
|
||||
</h2>
|
||||
<p class="mt-5 text-sm text-gray-500">{{ blocks.data.description }}</p>
|
||||
</div>
|
||||
<!-- Card -->
|
||||
<div class="relative z-1000 bg-white rounded-xl p-5 md:p-8">
|
||||
<form class="space-y-4" @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"
|
||||
/>
|
||||
|
||||
<PersonalDataBlock v-if="blocks.data.settings.personal_data" />
|
||||
<CaptchaBlock v-if="blocks.data.settings.captcha" />
|
||||
|
||||
<div class="mt-10">
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-primary-light disabled:opacity-50 disabled:pointer-events-none"
|
||||
:disabled="!isFormAvailable"
|
||||
>
|
||||
{{ blocks.data.button }}
|
||||
</button>
|
||||
<p v-if="!isFormAvailable" class="mt-2 text-sm text-red-600">
|
||||
{{ availabilityMessage }}
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- End Card -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <transition name="fade">-->
|
||||
<!-- <SuccessNotification v-if="success" :text="message" />-->
|
||||
<!-- </transition>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SubmitBlock from "@/componentss/shared/builder/formBuilder/blocks/SubmitBlock.vue";
|
||||
import axios from "axios";
|
||||
import SuccessNotification from "@/componentss/shared/notifications/SuccessNotification.vue";
|
||||
import {defineAsyncComponent} from "vue";
|
||||
import PersonalDataBlock from "@/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue";
|
||||
import CaptchaBlock from "@/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue";
|
||||
|
||||
export default {
|
||||
name: "FormModalBuilder",
|
||||
components: {
|
||||
CaptchaBlock,
|
||||
PersonalDataBlock,
|
||||
SuccessNotification,
|
||||
SubmitBlock,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {},
|
||||
errors: null,
|
||||
success: false,
|
||||
message: null,
|
||||
currentTime: new Date(),
|
||||
timeInterval: null
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
isFormAvailable() {
|
||||
if (!this.blocks.data.settings.period) return true;
|
||||
|
||||
const startTime = new Date(this.blocks.data.settings.period.start_time);
|
||||
const endTime = new Date(this.blocks.data.settings.period.end_time);
|
||||
|
||||
return this.currentTime >= startTime && this.currentTime <= endTime;
|
||||
},
|
||||
|
||||
availabilityMessage() {
|
||||
if (!this.blocks.data.settings.period) return '';
|
||||
|
||||
const startTime = new Date(this.blocks.data.settings.period.start_time);
|
||||
const endTime = new Date(this.blocks.data.settings.period.end_time);
|
||||
|
||||
if (this.currentTime < startTime) {
|
||||
return `Форма будет доступна с ${this.formatDateTime(startTime)}`;
|
||||
} else if (this.currentTime > endTime) {
|
||||
return `Форма была доступна до ${this.formatDateTime(endTime)}`;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.updateCurrentTime();
|
||||
this.timeInterval = setInterval(this.updateCurrentTime, 60000);
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
if (this.timeInterval) {
|
||||
clearInterval(this.timeInterval);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateCurrentTime() {
|
||||
this.currentTime = new Date();
|
||||
},
|
||||
|
||||
formatDateTime(date) {
|
||||
return date.toLocaleString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
},
|
||||
|
||||
getComponent(type) {
|
||||
const componentMap = {
|
||||
text: () => import('@/componentss/shared/builder/formBuilder/blocks/TextBlock.vue'),
|
||||
phone: () => import('@/componentss/shared/builder/formBuilder/blocks/PhoneBlock.vue'),
|
||||
email: () => import('@/componentss/shared/builder/formBuilder/blocks/EmailBlock.vue'),
|
||||
textarea: () => import('@/componentss/shared/builder/formBuilder/blocks/TextAreaBlock.vue'),
|
||||
multiple_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/MultipleChoiceBlock.vue'),
|
||||
single_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/SingleChoiceBlock.vue'),
|
||||
date: () => import('@/componentss/shared/builder/formBuilder/blocks/DateBlock.vue'),
|
||||
additional_education_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/AdditionalEducationalChoiceBlock.vue'),
|
||||
educational_program_choice: () => import('@/componentss/shared/builder/formBuilder/blocks/EducationalChoiceBlock.vue'),
|
||||
};
|
||||
return defineAsyncComponent(componentMap[type] || null);
|
||||
},
|
||||
|
||||
submitForm(event) {
|
||||
if (!this.isFormAvailable) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
this.formData = this.getFormData(event.target.elements);
|
||||
this.sendDataToServer();
|
||||
},
|
||||
|
||||
getFormData(formElements) {
|
||||
const formData = {};
|
||||
for (let i = 0; i < formElements.length; i++) {
|
||||
const element = formElements[i];
|
||||
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
|
||||
const fieldName = this.normalizeFieldName(element.name);
|
||||
|
||||
if (element.tagName === 'INPUT') {
|
||||
if (element.type === 'checkbox') {
|
||||
this.handleCheckbox(formData, fieldName, element);
|
||||
} else if (fieldName && fieldName !== 'choices') {
|
||||
formData[fieldName] = element.value;
|
||||
}
|
||||
} else if (element.tagName === 'TEXTAREA') {
|
||||
formData[fieldName] = element.value;
|
||||
} else if (element.tagName === 'SELECT') {
|
||||
formData[fieldName] = element.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return formData;
|
||||
},
|
||||
|
||||
normalizeFieldName(name) {
|
||||
return name.endsWith('[]') ? name.slice(0, -2) : name;
|
||||
},
|
||||
|
||||
handleCheckbox(formData, fieldName, element) {
|
||||
if (!formData[fieldName]) {
|
||||
formData[fieldName] = [];
|
||||
}
|
||||
if (element.checked) {
|
||||
formData[fieldName].push(element.value);
|
||||
}
|
||||
},
|
||||
|
||||
sendDataToServer() {
|
||||
axios.post(route('client.widget.form.submit', this.blocks.data.id), this.formData)
|
||||
.then(this.handleResponse)
|
||||
.catch(this.handleError);
|
||||
},
|
||||
|
||||
handleResponse(response) {
|
||||
if (response.data.status === 'ok') {
|
||||
this.success = true;
|
||||
this.message = response.data.message;
|
||||
this.errors = null;
|
||||
}
|
||||
},
|
||||
|
||||
handleError(error) {
|
||||
this.errors = error.response.data || ['Неизвестная ошибка'];
|
||||
this.success = false;
|
||||
}
|
||||
},
|
||||
props: {
|
||||
blocks: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
</style>
|
||||
+1
-1
@@ -8,7 +8,7 @@
|
||||
<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="null" selected="">Без выбора</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">
|
||||
|
||||
Reference in New Issue
Block a user