273 lines
15 KiB
Vue
273 lines
15 KiB
Vue
<template>
|
|
<div>
|
|
<form v-if="loaded" novalidate @submit.prevent="submit">
|
|
<div v-if="finished === false" class="bg-white @container rounded-lg shadow-lg">
|
|
<div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
|
|
<template v-for="(section, index) in v.sections">
|
|
<a
|
|
href="#"
|
|
class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-full transition duration-300 relative"
|
|
:class="{
|
|
'bg-primary': index <= active,
|
|
'bg-secondary': index > active,
|
|
}"
|
|
@click.prevent="active = index"
|
|
>
|
|
<svg
|
|
preserveAspectRatio="none"
|
|
class="h-full w-3 absolute left-0 text-primary transition duration-300"
|
|
viewBox="0 0 100 100"
|
|
:class="{
|
|
'opacity-100': index !== 0 && index - 1 <= active,
|
|
'opacity-0': !(index !== 0 && index - 1 <= active),
|
|
}"
|
|
>
|
|
<path d="M0,0 100,50 0,100" fill="currentColor"></path>
|
|
</svg>
|
|
<span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300" v-html="index + 1"></span>
|
|
<span class="text-sm text-font ml-2" v-html="section.name"></span>
|
|
<div v-if="editable" class="hidden @md:flex items-center h-full">
|
|
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editSection', index)">
|
|
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
|
|
</a>
|
|
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteSection', index)">
|
|
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
|
|
</a>
|
|
</div>
|
|
</a>
|
|
</template>
|
|
<div v-if="editable" class="hidden @md:flex items-center h-full absolute right-0 mr-6">
|
|
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font" @click.prevent.stop="$emit('addSection')">
|
|
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
|
|
<path
|
|
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
|
|
<a
|
|
href="#"
|
|
class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
|
|
:class="{'opacity-40': !backable}"
|
|
@click.prevent="back"
|
|
>
|
|
<svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
|
|
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
|
|
</svg>
|
|
</a>
|
|
<div class="overflow-hidden">
|
|
<carousel v-model="active">
|
|
<slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden">
|
|
<div class="flex-none w-full">
|
|
<div
|
|
href="#"
|
|
class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-12 @md:h-16 transition duration-300 relative"
|
|
@click="active = index"
|
|
>
|
|
<span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span>
|
|
<span class="text-sm text-font" v-html="section.name"></span>
|
|
</div>
|
|
</div>
|
|
</slide>
|
|
</carousel>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
|
|
:class="{'opacity-40': !nextable}"
|
|
@click.prevent="next"
|
|
>
|
|
<svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
|
|
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="py-4 @xs:py-8">
|
|
<carousel v-model="active">
|
|
<slide v-for="(section, index) in v.sections" :key="index">
|
|
<div class="w-full flex-none px-3 @xs:px-6">
|
|
<div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div>
|
|
<div class="grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-4 mt-6 items-start">
|
|
<div
|
|
v-for="(field, findex) in section.fields"
|
|
:key="findex"
|
|
class="flex justify-stretch relative group"
|
|
:class="{
|
|
'hover:ring-edit hover:ring-4': editable,
|
|
[colClasses.mobile[field.columns.mobile]]: true,
|
|
[colClasses.tablet[field.columns.tablet]]: true,
|
|
[colClasses.desktop[field.columns.desktop]]: true,
|
|
}"
|
|
>
|
|
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :fields="allFields" :payload="payload" :field="field"></component>
|
|
<div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
|
|
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editField', index, findex)">
|
|
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
|
|
</a>
|
|
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteField', index, findex)">
|
|
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="editable" class="flex justify-center mt-6 relative">
|
|
<a href="#" class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font" @click.prevent="$emit('addField', index)">
|
|
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
|
|
<path
|
|
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<navigation v-if="active === index" v-model="active" :last="v.sections.length"></navigation>
|
|
</slide>
|
|
</carousel>
|
|
</div>
|
|
</div>
|
|
<div v-if="finished === true" class="mx-auto">
|
|
<div
|
|
class="bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[5rem_1fr] sm:grid-rows-[12rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10"
|
|
>
|
|
<div class="bg-primary w-32 h-32 md:w-40 md:h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
|
|
<svg class="w-20 h-20 md:w-24 md:h-24 text-emerald-300 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
|
|
<div class="absolute right-0 top-0 h-full flex items-center justify-end">
|
|
<div class="bg-primary w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
|
|
</div>
|
|
<div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
|
|
<img class="w-64 h-32 object-cover" src="" />
|
|
</div>
|
|
<div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
|
|
<img class="w-64 h-32 object-cover" src="" />
|
|
</div>
|
|
</div>
|
|
<div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0 pt-6 sm:pt-0">
|
|
<div class="font-bold text-xl">Vielen Dank für deine Anmeldung.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed, ref, watch} from 'vue';
|
|
import {Carousel, Slide} from 'vue3-carousel';
|
|
import Navigation from './components/Navigation.vue';
|
|
import useNav from './composables/useNav.js';
|
|
import EditIcon from './components/icons/EditIcon.vue';
|
|
import DeleteIcon from './components/icons/DeleteIcon.vue';
|
|
import useToastify from './composables/useToastify.js';
|
|
import useFields from './composables/useFields.js';
|
|
|
|
const {success, errorFromResponse} = useToastify();
|
|
const finished = ref(true);
|
|
|
|
const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'addField', 'editField', 'deleteField', 'active']);
|
|
|
|
const colClasses = {
|
|
mobile: {
|
|
1: 'col-span-1',
|
|
2: 'col-span-2',
|
|
3: 'col-span-3',
|
|
4: 'col-span-4',
|
|
5: 'col-span-5',
|
|
6: 'col-span-6',
|
|
},
|
|
tablet: {
|
|
1: '@sm:col-span-1',
|
|
2: '@sm:col-span-2',
|
|
3: '@sm:col-span-3',
|
|
4: '@sm:col-span-4',
|
|
5: '@sm:col-span-5',
|
|
6: '@sm:col-span-6',
|
|
},
|
|
desktop: {
|
|
1: '@lg:col-span-1',
|
|
2: '@lg:col-span-2',
|
|
3: '@lg:col-span-3',
|
|
4: '@lg:col-span-4',
|
|
5: '@lg:col-span-5',
|
|
6: '@lg:col-span-6',
|
|
},
|
|
};
|
|
|
|
const props = defineProps({
|
|
editable: {
|
|
type: Boolean,
|
|
default: () => false,
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: () => '{}',
|
|
},
|
|
configVarName: {
|
|
default: () => null,
|
|
reuired: false,
|
|
},
|
|
formId: {
|
|
default: () => null,
|
|
reuired: false,
|
|
},
|
|
});
|
|
|
|
const active = ref(0);
|
|
const payload = ref({});
|
|
const loaded = ref(false);
|
|
const v = ref(null);
|
|
|
|
watch(active, function (newValue) {
|
|
emits('active', v.value.sections.length ? active.value : null);
|
|
});
|
|
|
|
const allFields = computed(() => {
|
|
var fields = [];
|
|
v.value.sections.forEach((section) => section.fields.forEach((field) => fields.push(field)));
|
|
|
|
return fields;
|
|
});
|
|
|
|
function reload() {
|
|
loaded.value = false;
|
|
var values = window[props.configVarName] ? window[props.configVarName] : JSON.parse(props.value);
|
|
var p = {};
|
|
|
|
values.sections.forEach(function (section) {
|
|
section.fields.forEach(function (field) {
|
|
p[field.key] = field.value;
|
|
});
|
|
});
|
|
payload.value = p;
|
|
active.value = Math.max(0, Math.min(active.value, values.sections.length - 1));
|
|
emits('active', values.sections.length ? active.value : null);
|
|
loaded.value = true;
|
|
v.value = values;
|
|
}
|
|
|
|
reload();
|
|
watch(
|
|
() => props.value,
|
|
(value) => reload()
|
|
);
|
|
|
|
const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
|
|
const {resolveComponentName} = useFields();
|
|
|
|
async function submit() {
|
|
try {
|
|
await axios.post('/api/form/' + props.formId + '/register', payload.value);
|
|
} catch (e) {
|
|
errorFromResponse(e);
|
|
}
|
|
}
|
|
</script>
|