silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

update form

This commit is contained in:
philipp lang 2023-12-28 00:32:41 +01:00
parent b421f85d89
commit e0558e4b13
2 changed files with 35 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/views/formtemplate/Asideform.vue
View File

@ -3,10 +3,10 @@
<slot></slot>
<template #in-title>
<div class="flex ml-3 space-x-3 absolute right-0 top-0 mr-4 mt-4">
<a href="#" @click.prevent="$emit('submit')">
<a v-if="storeable" href="#" @click.prevent="$emit('submit')">
<ui-sprite src="save" class="text-zinc-400 w-4 h-4"></ui-sprite>
</a>
<a href="#" @click.prevent="$emit('close')">
<a v-if="closeable" href="#" @click.prevent="$emit('close')">
<ui-sprite src="close" class="text-zinc-400 w-4 h-4"></ui-sprite>
</a>
</div>
@ -19,5 +19,13 @@ const emit = defineEmits(['close', 'submit']);
const props = defineProps({
heading: {},
closeable: {
default: () => true,
type: Boolean,
},
storeable: {
default: () => true,
type: Boolean,
},
});
</script>

47
resources/js/views/formtemplate/FormBuilder.vue
View File

@ -1,17 +1,6 @@
<template>
<ui-popup v-if="singleField !== null && singleField.model === null" heading="Feldtyp auswählen"
@close="singleField = null">
<div class="mt-3 grid gap-3 grid-cols-3">
<a v-for="(field, index) in props.meta.fields" :key="index"
class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition" href="#"
@click.prevent="setFieldType(field)">
<span v-text="field.name"></span>
</a>
</div>
</ui-popup>
<form class="grid gap-3 mt-4 grid-cols-[1fr_max-content] items-start" @submit.prevent="submit">
<div class="grid gap-3">
<slot name="meta"></slot>
<asideform v-if="singleSection !== null"
:heading="`Sektion ${singleSection.index !== null ? 'bearbeiten' : 'erstellen'}`"
@close="singleSection = null" @submit="storeSection">
@ -20,7 +9,17 @@
<f-textarea :id="`sectionform-intro`" v-model="singleSection.model.intro" label="Einleitung"
:name="`sectionform-intro`"></f-textarea>
</asideform>
<asideform v-if="singleField !== null && singleField.model !== null"
<asideform v-if="singleSection === null && singleField === null" heading="Feld erstellen" :closeable="false"
:storeable="false" @submit="storeField">
<div class="mt-3 grid gap-3">
<a v-for="(field, index) in props.meta.fields" :key="index"
class="py-2 px-3 border rounded bg-zinc-800 hover:bg-zinc-700 transition" href="#"
@click.prevent="addField(field)">
<span v-text="field.name"></span>
</a>
</div>
</asideform>
<asideform v-if="singleSection === null && singleField !== null"
:heading="`Feld ${singleField.index !== null ? 'bearbeiten' : 'erstellen'}`" @close="singleField = null"
@submit="storeField">
<f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm" name="fieldname"></f-text>
@ -32,15 +31,15 @@
<event-form editable
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
:value="previewString" @editSection="editSection($event.detail[0])" @addSection="addSection"
@addField="addField($event.detail[0])" @editField="editField($event.detail[0], $event.detail[1])"
@editField="editField($event.detail[0], $event.detail[1])"
@deleteField="deleteField($event.detail[0], $event.detail[1])"
@deleteSection="deleteSection($event.detail[0])"></event-form>
@deleteSection="deleteSection($event.detail[0])" @active="updateActive($event.detail[0])"></event-form>
</ui-box>
</form>
</template>
<script setup>
import { computed, ref } from 'vue';
import { watch, computed, ref } from 'vue';
import { snakeCase } from 'change-case';
import '!/eventform/dist/main.js';
import Asideform from './Asideform.vue';
@ -54,6 +53,14 @@ import ColumnSelector from './ColumnSelector.vue';
const singleSection = ref(null);
const singleField = ref(null);
const active = ref(null);
function updateActive(a) {
active.value = a;
if (a === null) {
addSection();
}
}
const props = defineProps({
modelValue: {},
@ -125,10 +132,10 @@ function deleteField(sindex, findex) {
push();
}
function addField(sectionIndex) {
function addField(type) {
singleField.value = {
model: null,
sectionIndex: sectionIndex,
model: JSON.parse(JSON.stringify(type.default)),
sectionIndex: active,
index: null,
};
}
@ -138,9 +145,5 @@ function deleteSection(sindex) {
push();
}
function setFieldType(field) {
singleField.value.model = JSON.parse(JSON.stringify(field.default));
}
const previewString = computed(() => (inner.value && inner.value ? JSON.stringify(inner.value) : '{}'));
</script>