Move Config to FormBuilder
This commit is contained in:
philipp lang
parent
0eb8928b22
commit
b421f85d89
|
|
@ -1,55 +1,47 @@
|
|||
<template>
|
||||
<ui-popup :heading="`Vorlage ${inner.id ? 'bearbeiten' : 'erstellen'}`" full @close="$emit('cancel')">
|
||||
<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>
|
||||
<template #actions>
|
||||
<a href="#" @click.prevent="$emit('submit', inner)">
|
||||
<ui-sprite src="save" class="text-zinc-400 w-6 h-6"></ui-sprite>
|
||||
<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>
|
||||
</template>
|
||||
<form class="grid gap-3 mt-4 grid-cols-[1fr_max-content] items-start" @submit.prevent="submit">
|
||||
<div class="grid gap-3">
|
||||
<f-text id="name" v-model="inner.name" name="name" label="Name" required></f-text>
|
||||
<asideform v-if="singleSection !== null" :heading="`Sektion ${singleSection.index !== null ? 'bearbeiten' : 'erstellen'}`" @close="singleSection = null" @submit="storeSection">
|
||||
<f-text :id="`sectionform-name`" v-model="singleSection.model.name" label="Name" :name="`sectionform-name`"></f-text>
|
||||
<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"
|
||||
: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>
|
||||
<column-selector v-model="singleField.model.columns"></column-selector>
|
||||
<component :is="fields[singleField.model.type]" v-model="singleField.model"></component>
|
||||
</asideform>
|
||||
</div>
|
||||
<ui-box heading="Vorschau" container-class="grid gap-3" class="w-[800px]">
|
||||
<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])"
|
||||
@deleteField="deleteField($event.detail[0], $event.detail[1])"
|
||||
@deleteSection="deleteSection($event.detail[0])"
|
||||
></event-form>
|
||||
</ui-box>
|
||||
</form>
|
||||
</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">
|
||||
<f-text :id="`sectionform-name`" v-model="singleSection.model.name" label="Name"
|
||||
:name="`sectionform-name`"></f-text>
|
||||
<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"
|
||||
: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>
|
||||
<column-selector v-model="singleField.model.columns"></column-selector>
|
||||
<component :is="fields[singleField.model.type]" v-model="singleField.model"></component>
|
||||
</asideform>
|
||||
</div>
|
||||
<ui-box heading="Vorschau" container-class="grid gap-3" class="w-[800px]">
|
||||
<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])"
|
||||
@deleteField="deleteField($event.detail[0], $event.detail[1])"
|
||||
@deleteSection="deleteSection($event.detail[0])"></event-form>
|
||||
</ui-box>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, ref} from 'vue';
|
||||
import {snakeCase} from 'change-case';
|
||||
import { computed, ref } from 'vue';
|
||||
import { snakeCase } from 'change-case';
|
||||
import '!/eventform/dist/main.js';
|
||||
import Asideform from './Asideform.vue';
|
||||
import TextareaField from './TextareaField.vue';
|
||||
|
|
@ -60,7 +52,6 @@ import CheckboxField from './CheckboxField.vue';
|
|||
import CheckboxesField from './CheckboxesField.vue';
|
||||
import ColumnSelector from './ColumnSelector.vue';
|
||||
|
||||
const sectionVisible = ref(-1);
|
||||
const singleSection = ref(null);
|
||||
const singleField = ref(null);
|
||||
|
||||
|
|
@ -68,7 +59,7 @@ const props = defineProps({
|
|||
modelValue: {},
|
||||
meta: {},
|
||||
});
|
||||
const emit = defineEmits(['submit', 'cancel']);
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const fields = {
|
||||
TextareaField: TextareaField,
|
||||
|
|
@ -81,11 +72,15 @@ const fields = {
|
|||
|
||||
function editSection(sectionIndex) {
|
||||
singleSection.value = {
|
||||
model: {...inner.value.config.sections[sectionIndex]},
|
||||
model: { ...inner.value.sections[sectionIndex] },
|
||||
index: sectionIndex,
|
||||
};
|
||||
}
|
||||
|
||||
function push() {
|
||||
emit('update:modelValue', inner.value);
|
||||
}
|
||||
|
||||
const inner = ref(JSON.parse(JSON.stringify(props.modelValue)));
|
||||
const innerMeta = ref(JSON.parse(JSON.stringify(props.meta)));
|
||||
|
||||
|
|
@ -98,7 +93,7 @@ function addSection() {
|
|||
|
||||
function editField(sindex, findex) {
|
||||
singleField.value = {
|
||||
model: JSON.parse(JSON.stringify(inner.value.config.sections[sindex].fields[findex])),
|
||||
model: JSON.parse(JSON.stringify(inner.value.sections[sindex].fields[findex])),
|
||||
sectionIndex: sindex,
|
||||
index: findex,
|
||||
};
|
||||
|
|
@ -106,25 +101,28 @@ function editField(sindex, findex) {
|
|||
|
||||
function storeSection() {
|
||||
if (singleSection.value.index !== null) {
|
||||
inner.value.config.sections.splice(singleSection.value.index, 1, singleSection.value.model);
|
||||
inner.value.sections.splice(singleSection.value.index, 1, singleSection.value.model);
|
||||
} else {
|
||||
inner.value.config.sections.push(singleSection.value.model);
|
||||
inner.value.sections.push(singleSection.value.model);
|
||||
}
|
||||
singleSection.value = null;
|
||||
push();
|
||||
}
|
||||
|
||||
function storeField() {
|
||||
singleField.value.model.key = snakeCase(singleField.value.model.name);
|
||||
if (singleField.value.index !== null) {
|
||||
inner.value.config.sections[singleField.value.sectionIndex].fields.splice(singleField.value.index, 1, singleField.value.model);
|
||||
inner.value.sections[singleField.value.sectionIndex].fields.splice(singleField.value.index, 1, singleField.value.model);
|
||||
} else {
|
||||
inner.value.config.sections[singleField.value.sectionIndex].fields.push(singleField.value.model);
|
||||
inner.value.sections[singleField.value.sectionIndex].fields.push(singleField.value.model);
|
||||
}
|
||||
singleField.value = null;
|
||||
push();
|
||||
}
|
||||
|
||||
function deleteField(sindex, findex) {
|
||||
inner.value.config.sections[sindex].fields.splice(findex, 1);
|
||||
inner.value.sections[sindex].fields.splice(findex, 1);
|
||||
push();
|
||||
}
|
||||
|
||||
function addField(sectionIndex) {
|
||||
|
|
@ -136,12 +134,13 @@ function addField(sectionIndex) {
|
|||
}
|
||||
|
||||
function deleteSection(sindex) {
|
||||
inner.value.config.sections.splice(sindex, 1);
|
||||
inner.value.sections.splice(sindex, 1);
|
||||
push();
|
||||
}
|
||||
|
||||
function setFieldType(field) {
|
||||
singleField.value.model = JSON.parse(JSON.stringify(field.default));
|
||||
}
|
||||
|
||||
const previewString = computed(() => (inner.value && inner.value ? JSON.stringify(inner.value.config) : '{}'));
|
||||
const previewString = computed(() => (inner.value && inner.value ? JSON.stringify(inner.value) : '{}'));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,20 @@
|
|||
<page-toolbar-button color="primary" icon="plus" @click="create">Vorlage erstellen</page-toolbar-button>
|
||||
</template>
|
||||
|
||||
<form-builder v-if="single !== null" :model-value="single" :meta="meta" @submit="innerSubmit" @cancel="cancel"></form-builder>
|
||||
<ui-popup v-if="single !== null" :heading="`Vorlage ${single.id ? 'bearbeiten' : 'erstellen'}`" full
|
||||
@close="cancel">
|
||||
<form-builder v-model="single.config" :meta="meta">
|
||||
<template #meta>
|
||||
<f-text id="name" v-model="single.name" name="name" label="Name" required></f-text>
|
||||
</template>
|
||||
</form-builder>
|
||||
<template #actions>
|
||||
<a href="#" @click.prevent="submit">
|
||||
<ui-sprite src="save" class="text-zinc-400 w-6 h-6"></ui-sprite>
|
||||
</a>
|
||||
</template>
|
||||
</ui-popup>
|
||||
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="custom-table custom-table-sm">
|
||||
<thead>
|
||||
<th>Name</th>
|
||||
|
|
@ -16,7 +29,8 @@
|
|||
<div v-text="formtemplate.name"></div>
|
||||
</td>
|
||||
<td>
|
||||
<a v-tooltip="`Bearbeiten`" href="#" class="ml-2 inline-flex btn btn-warning btn-sm" @click.prevent="edit(formtemplate)"><ui-sprite src="pencil"></ui-sprite></a>
|
||||
<a v-tooltip="`Bearbeiten`" href="#" class="ml-2 inline-flex btn btn-warning btn-sm"
|
||||
@click.prevent="edit(formtemplate)"><ui-sprite src="pencil"></ui-sprite></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -27,11 +41,11 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import {indexProps, useIndex} from '../../composables/useInertiaApiIndex.js';
|
||||
import { indexProps, useIndex } from '../../composables/useInertiaApiIndex.js';
|
||||
import FormBuilder from './FormBuilder.vue';
|
||||
|
||||
const props = defineProps(indexProps);
|
||||
var {meta, data, reloadPage, create, single, edit, cancel, submit} = useIndex(props.data, 'invoice');
|
||||
var { meta, data, reloadPage, create, single, edit, cancel, submit } = useIndex(props.data, 'invoice');
|
||||
|
||||
function innerSubmit(payload) {
|
||||
single.value = payload;
|
||||
|
|
|
|||
Loading…
Reference in New Issue