From 8bf0019c983560e006b99a464b36aa74b5e9ca47 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Mon, 25 Dec 2023 19:45:34 +0100
Subject: [PATCH] Add form builder

---
 .../js/views/formtemplate/FormBuilder.vue     | 82 +++++++++++++++++++
 resources/js/views/formtemplate/Index.vue     | 42 ++++++++++
 vite.config.js                                |  3 +
 3 files changed, 127 insertions(+)
 create mode 100644 resources/js/views/formtemplate/FormBuilder.vue
 create mode 100644 resources/js/views/formtemplate/Index.vue

diff --git a/resources/js/views/formtemplate/FormBuilder.vue b/resources/js/views/formtemplate/FormBuilder.vue
new file mode 100644
index 00000000..6f63a8e9
--- /dev/null
+++ b/resources/js/views/formtemplate/FormBuilder.vue
@@ -0,0 +1,82 @@
+<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>
+            <ui-box heading="Sektionen" container-class="grid gap-3">
+                <template #in-title>
+                    <ui-icon-button class="ml-3 btn-primary" icon="plus" @click="addSection">Sektion hinzufügen</ui-icon-button>
+                </template>
+                <div class="rounded-sm overflow-hidden divide-y divide-primary-600">
+                    <section v-for="(section, sindex) in inner.config.sections" :key="sindex">
+                        <header class="flex items-center hover:cursor-pointer justify-between bg-primary-700 py-1 px-2 text-primary-200 text-sm" @click="sectionVisible = sindex">
+                            <span v-text="section.name ? section.name : '&nbsp;'"></span>
+                            <ui-sprite src="chevron" class="w-3 h-3" :class="{'rotate-180': sectionVisible === sindex}"></ui-sprite>
+                        </header>
+                        <main v-show="sectionVisible === sindex" class="p-1">
+                            <f-text :id="`section-${sindex}-name`" v-model="section.name" label="Name" size="sm" :name="`section-${sindex}-name`"></f-text>
+                            <f-textarea :id="`section-${sindex}-intro`" v-model="section.intro" label="Einleitung" size="sm" :name="`section-${sindex}-intro`"></f-textarea>
+                            <ui-icon-button class="mt-2 btn-primary" icon="plus" @click="addField(section)">Feld hinzufügen</ui-icon-button>
+                            <div v-for="(field, findex) in section.fields" :key="`${sindex}-${findex}`" class="grid gap-1">
+                                <f-select
+                                    :id="`fieldtype-${sindex}-${findex}`"
+                                    :model-value="field.type"
+                                    :name="`fieldtype-${sindex}-${findex}`"
+                                    :options="props.meta.fields"
+                                    label="Typ"
+                                    size="sm"
+                                    @update:modelValue="setFieldType(section, findex, $event)"
+                                ></f-select>
+                                <template v-if="field.type">
+                                    <f-text :id="`section-${sindex}-${findex}-name`" v-model="field.name" label="Name" size="sm" :name="`section-${sindex}-${findex}-name`"></f-text>
+                                    <f-switch
+                                        :id="`section-${sindex}-${findex}-required`"
+                                        v-model="field.required"
+                                        label="Erforderlich"
+                                        size="sm"
+                                        :name="`section-${sindex}-${findex}-required`"
+                                        inline
+                                    ></f-switch>
+                                </template>
+                            </div>
+                        </main>
+                    </section>
+                </div>
+            </ui-box>
+        </div>
+        <ui-box heading="Vorschau" container-class="grid gap-3" class="w-[800px]">
+            <event-form style="--primary: yellow; --secondary: green; --font: #ff6600; --circle: #111111" :value="previewString"></event-form>
+        </ui-box>
+    </form>
+</template>
+
+<script setup>
+import {computed, ref} from 'vue';
+import '!/eventform/dist/main.js';
+
+const sectionVisible = ref(-1);
+
+const props = defineProps({
+    modelValue: {},
+    meta: {},
+});
+
+const inner = ref(JSON.parse(JSON.stringify(props.modelValue)));
+
+function addSection() {
+    sectionVisible.value = inner.value.config.sections.push({...props.meta.section_default}) - 1;
+}
+
+function addField(section) {
+    section.fields = [...section.fields, {name: null, type: null}];
+}
+
+function setFieldType(section, findex, type) {
+    if (type === null) {
+        section.fields[findex].type = null;
+        return;
+    }
+    section.fields[findex] = {...props.meta.fields.find((f) => f.id === type).default};
+}
+
+const previewString = computed(() => (inner.value && inner.value ? JSON.stringify(inner.value.config) : '{}'));
+</script>
diff --git a/resources/js/views/formtemplate/Index.vue b/resources/js/views/formtemplate/Index.vue
new file mode 100644
index 00000000..b0e9047c
--- /dev/null
+++ b/resources/js/views/formtemplate/Index.vue
@@ -0,0 +1,42 @@
+<template>
+    <page-layout>
+        <template #toolbar>
+            <page-toolbar-button color="primary" icon="plus" @click="create">Vorlage erstellen</page-toolbar-button>
+        </template>
+
+        <ui-popup v-if="single !== null" :heading="`Vorlage ${single.id ? 'bearbeiten' : 'erstellen'}`" full @close="cancel">
+            <form-builder v-model="single" :meta="meta"></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>
+                <th></th>
+            </thead>
+
+            <tr v-for="(formtemplate, index) in data" :key="index">
+                <td>
+                    <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>
+                </td>
+            </tr>
+        </table>
+        <div class="px-6">
+            <ui-pagination class="mt-4" :value="meta" @reload="reloadPage"></ui-pagination>
+        </div>
+    </page-layout>
+</template>
+
+<script setup>
+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');
+</script>
diff --git a/vite.config.js b/vite.config.js
index 7827f8a9..c7d9e4c1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -22,6 +22,9 @@ export default defineConfig({
                     // reference assets in the public directory as expected.
                     includeAbsolute: false,
                 },
+                compilerOptions: {
+                    isCustomElement: (tag) => tag === 'event-form',
+                },
             },
         }),
     ],