From 3907395506afab856559972fe7f19d2b8ccba8cd Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Fri, 7 Jun 2024 00:46:31 +0200
Subject: [PATCH] Add intro for field

---
 src/components/fields/Checkbox.vue   | 2 +-
 src/components/fields/Checkboxes.vue | 1 +
 src/components/fields/Nami.vue       | 2 ++
 src/components/fields/Radio.vue      | 1 +
 src/components/fields/VCheckbox.vue  | 6 ++++++
 src/main.js                          | 2 +-
 6 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/fields/Checkbox.vue b/src/components/fields/Checkbox.vue
index 6c35bda..836d4da 100644
--- a/src/components/fields/Checkbox.vue
+++ b/src/components/fields/Checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-checkbox :id="innerId" v-model="inner" :name="field.key" :label="field.description" :required="field.required" :hint="field.hint"></v-checkbox>
+    <v-checkbox :id="innerId" v-model="inner" :name="field.key" :label="field.description" :required="field.required" :intro="field.intro" :hint="field.hint"></v-checkbox>
 </template>
 
 <script setup>
diff --git a/src/components/fields/Checkboxes.vue b/src/components/fields/Checkboxes.vue
index 7bd8c73..dc70b98 100644
--- a/src/components/fields/Checkboxes.vue
+++ b/src/components/fields/Checkboxes.vue
@@ -2,6 +2,7 @@
     <div class="relative">
         <field-label :name="field.name" :required="false" :hint="field.hint" inline></field-label>
         <div class="grid grid-cols-1 gap-2 pt-1">
+            <div class="text-sm text-gray-600" v-text="field.intro" v-if="field.intro"></div>
             <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-start">
                 <input :id="`${innerId}-${index}`" v-model="inner" type="checkbox" :name="field.key" :value="option" class="peer absolute invisible" />
                 <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
diff --git a/src/components/fields/Nami.vue b/src/components/fields/Nami.vue
index 22f282e..894c51f 100644
--- a/src/components/fields/Nami.vue
+++ b/src/components/fields/Nami.vue
@@ -50,6 +50,7 @@
                             :name="`${field.key}-memberselect-${member.id}`"
                             :id="`${field.key}-memberselect-${member.id}`"
                             :label="member.name"
+                            intro=""
                             v-for="member in searchResults.data"
                         ></v-checkbox>
                     </div>
@@ -89,6 +90,7 @@
                                 :name="`${field.key}-memberattr-${member.id}-${memberField.key}`"
                                 :id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
                                 :label="memberField.name"
+                                intro=""
                             ></v-checkbox>
                             <v-dropdown
                                 v-if="memberField.type === 'DropdownField'"
diff --git a/src/components/fields/Radio.vue b/src/components/fields/Radio.vue
index 569c759..b97f57f 100644
--- a/src/components/fields/Radio.vue
+++ b/src/components/fields/Radio.vue
@@ -2,6 +2,7 @@
     <div class="relative">
         <field-label :name="field.name" :required="field.required" :hint="field.hint" :button="modelValue === null ? '' : 'Option löschen'" @buttonclick="selected = null" inline></field-label>
         <div class="grid grid-cols-1 gap-2 pt-1">
+            <div class="text-sm text-gray-600" v-text="field.intro" v-if="field.intro"></div>
             <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-center">
                 <input :id="`${innerId}-${index}`" v-model="selected" type="radio" :name="field.key" :value="option" class="peer absolute invisible" />
                 <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
diff --git a/src/components/fields/VCheckbox.vue b/src/components/fields/VCheckbox.vue
index 402e868..86d2b56 100644
--- a/src/components/fields/VCheckbox.vue
+++ b/src/components/fields/VCheckbox.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="relative">
         <div class="grid grid-cols-1 gap-2">
+            <div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
             <label :for="id" class="p-0 block leading-none relative flex items-start">
                 <input :id="id" v-model="inner" type="checkbox" :name="name" class="peer absolute invisible" />
                 <span
@@ -50,6 +51,11 @@ const props = defineProps({
         validator: (value) => value === null || typeof value === 'string',
         default: () => null,
     },
+    intro: {
+        required: false,
+        validator: (value) => value === null || typeof value === 'string',
+        default: () => null,
+    },
 });
 
 const inner = computed({
diff --git a/src/main.js b/src/main.js
index 436dddd..16d1937 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,7 +33,7 @@ window.hasKeys = function (object, expected) {
 };
 
 window.globalFieldRules = function () {
-    return ['value', 'special_type', 'nami_type', 'for_members', 'key', 'columns', 'name', 'type', 'hint'];
+    return ['value', 'special_type', 'nami_type', 'for_members', 'key', 'columns', 'name', 'type', 'hint', 'intro'];
 };
 
 EventForm.styles = [classes, carousel, carouselStyle];