From b109d40ebbc380a666cea43e6f63e3ceab8dfa5e Mon Sep 17 00:00:00 2001
From: Philipp Lang <privat@zoomyboy.de>
Date: Tue, 26 Dec 2023 20:20:32 +0100
Subject: [PATCH] add field meta

---
 app/Form/Fields/CheckboxesField.php           |  2 +-
 .../js/views/formtemplate/CheckboxField.vue   | 27 ++++++++++++-------
 ...{DropdownField.vue => CheckboxesField.vue} |  0
 .../js/views/formtemplate/FormBuilder.vue     |  7 ++---
 .../js/views/formtemplate/RadioField.vue      |  9 +++++++
 resources/js/views/formtemplate/TextField.vue | 21 +++++++++++++++
 .../js/views/formtemplate/TextareaField.vue   | 22 +++++++--------
 7 files changed, 62 insertions(+), 26 deletions(-)
 rename resources/js/views/formtemplate/{DropdownField.vue => CheckboxesField.vue} (100%)
 create mode 100644 resources/js/views/formtemplate/TextField.vue

diff --git a/app/Form/Fields/CheckboxesField.php b/app/Form/Fields/CheckboxesField.php
index 62f5badc..45d1546c 100644
--- a/app/Form/Fields/CheckboxesField.php
+++ b/app/Form/Fields/CheckboxesField.php
@@ -14,7 +14,7 @@ class CheckboxesField extends Field
     public static function meta(): array
     {
         return [
-            ['key' => 'options', 'default' => [], 'rules' => ['options' => 'array', 'options.*' => 'string'], 'label' => 'Optionen'],
+            ['key' => 'options', 'default' => [], 'rules' => ['options' => 'array', 'options.*' => 'required|string'], 'label' => 'Optionen'],
         ];
     }
 
diff --git a/resources/js/views/formtemplate/CheckboxField.vue b/resources/js/views/formtemplate/CheckboxField.vue
index d54235dd..0b90dce7 100644
--- a/resources/js/views/formtemplate/CheckboxField.vue
+++ b/resources/js/views/formtemplate/CheckboxField.vue
@@ -1,14 +1,21 @@
 <template>
-    <div>
-        <f-textarea
-            id="description"
-            label="Beschreibung"
-            size="sm"
-            name="description"
-            :model-value="modelValue.description"
-            @update:modelValue="$emit('update:modelValue', {...modelValue, description: $event})"
-        ></f-textarea>
-    </div>
+    <f-switch
+        id="fieldrequired"
+        v-model="modelValue.required"
+        label="Erforderlich"
+        size="sm"
+        name="fieldrequired"
+        inline
+        @update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
+    ></f-switch>
+    <f-textarea
+        id="description"
+        label="Beschreibung"
+        size="sm"
+        name="description"
+        :model-value="modelValue.description"
+        @update:modelValue="$emit('update:modelValue', {...modelValue, description: $event})"
+    ></f-textarea>
 </template>
 
 <script setup>
diff --git a/resources/js/views/formtemplate/DropdownField.vue b/resources/js/views/formtemplate/CheckboxesField.vue
similarity index 100%
rename from resources/js/views/formtemplate/DropdownField.vue
rename to resources/js/views/formtemplate/CheckboxesField.vue
diff --git a/resources/js/views/formtemplate/FormBuilder.vue b/resources/js/views/formtemplate/FormBuilder.vue
index dfe1a67f..d5c0e9c3 100644
--- a/resources/js/views/formtemplate/FormBuilder.vue
+++ b/resources/js/views/formtemplate/FormBuilder.vue
@@ -26,7 +26,6 @@
                     @submit="storeField"
                 >
                     <f-text id="fieldname" v-model="singleField.model.name" label="Name" size="sm" name="fieldname"></f-text>
-                    <f-switch id="fieldrequired" v-model="singleField.model.required" label="Erforderlich" size="sm" name="fieldrequired" inline></f-switch>
                     <component :is="fields[singleField.model.type]" v-model="singleField.model"></component>
                 </asideform>
             </div>
@@ -52,10 +51,11 @@ import {snakeCase} from 'change-case';
 import '!/eventform/dist/main.js';
 import Asideform from './Asideform.vue';
 import TextareaField from './TextareaField.vue';
-import DropdownField from './DropdownField.vue';
+import TextField from './TextField.vue';
+import DropdownField from './RadioField.vue';
 import RadioField from './RadioField.vue';
 import CheckboxField from './CheckboxField.vue';
-import CheckboxesField from './DropdownField.vue';
+import CheckboxesField from './CheckboxesField.vue';
 
 const sectionVisible = ref(-1);
 const singleSection = ref(null);
@@ -69,6 +69,7 @@ const emit = defineEmits(['submit', 'cancel']);
 
 const fields = {
     TextareaField: TextareaField,
+    TextField: TextField,
     DropdownField: DropdownField,
     RadioField: RadioField,
     CheckboxField: CheckboxField,
diff --git a/resources/js/views/formtemplate/RadioField.vue b/resources/js/views/formtemplate/RadioField.vue
index b7b4096a..c6a15d4c 100644
--- a/resources/js/views/formtemplate/RadioField.vue
+++ b/resources/js/views/formtemplate/RadioField.vue
@@ -12,6 +12,15 @@
         ></f-text>
         <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
     </div>
+    <f-switch
+        id="fieldrequired"
+        v-model="modelValue.required"
+        label="Erforderlich"
+        size="sm"
+        name="fieldrequired"
+        inline
+        @update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
+    ></f-switch>
 </template>
 
 <script setup>
diff --git a/resources/js/views/formtemplate/TextField.vue b/resources/js/views/formtemplate/TextField.vue
new file mode 100644
index 00000000..3e19bcbc
--- /dev/null
+++ b/resources/js/views/formtemplate/TextField.vue
@@ -0,0 +1,21 @@
+<template>
+    <f-switch
+        id="fieldrequired"
+        v-model="modelValue.required"
+        label="Erforderlich"
+        size="sm"
+        name="fieldrequired"
+        inline
+        @update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
+    ></f-switch>
+</template>
+
+<script setup>
+const props = defineProps({
+    modelValue: {
+        validator: (v) => v === true || v === false,
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+</script>
diff --git a/resources/js/views/formtemplate/TextareaField.vue b/resources/js/views/formtemplate/TextareaField.vue
index 375a3dcb..bdaf9e92 100644
--- a/resources/js/views/formtemplate/TextareaField.vue
+++ b/resources/js/views/formtemplate/TextareaField.vue
@@ -1,16 +1,14 @@
 <template>
-    <div>
-        <f-text
-            id="rows"
-            label="Zeilen"
-            size="sm"
-            name="rows"
-            :model-value="modelValue.rows"
-            type="number"
-            min="1"
-            @update:modelValue="$emit('update:modelValue', {...modelValue, rows: $event})"
-        ></f-text>
-    </div>
+    <f-text id="rows" label="Zeilen" size="sm" name="rows" :model-value="modelValue.rows" type="number" min="1" @update:modelValue="$emit('update:modelValue', {...modelValue, rows: $event})"></f-text>
+    <f-switch
+        id="fieldrequired"
+        v-model="modelValue.required"
+        label="Erforderlich"
+        size="sm"
+        name="fieldrequired"
+        inline
+        @update:modelValue="$emit('update:modelValue', {...modelValue, required: $event})"
+    ></f-switch>
 </template>
 
 <script setup>