From 439539f56d7e492441db63be8e492665c32a6568 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Fri, 30 Jun 2023 23:09:01 +0200
Subject: [PATCH] show optional fields in generic forms

---
 vue/src/components/Modals/ChoiceInput.vue     | 22 ++++++---
 vue/src/components/Modals/DateInput.vue       | 12 ++++-
 vue/src/components/Modals/EmojiInput.vue      | 12 ++++-
 vue/src/components/Modals/FileInput.vue       | 12 ++++-
 .../components/Modals/GenericModalForm.vue    | 21 ++++----
 vue/src/components/Modals/LookupInput.vue     | 27 +++++++----
 vue/src/components/Modals/NumberInput.vue     | 12 ++++-
 vue/src/components/Modals/TextAreaInput.vue   | 48 +++++++++++++++++++
 vue/src/components/Modals/TextInput.vue       | 14 +++++-
 9 files changed, 149 insertions(+), 31 deletions(-)
 create mode 100644 vue/src/components/Modals/TextAreaInput.vue

diff --git a/vue/src/components/Modals/ChoiceInput.vue b/vue/src/components/Modals/ChoiceInput.vue
index 4ac45013d..73f9fa85a 100644
--- a/vue/src/components/Modals/ChoiceInput.vue
+++ b/vue/src/components/Modals/ChoiceInput.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-form-group v-bind:label="label" class="mb-3">
+        <b-form-group v-bind:label="field_label" class="mb-3">
             <b-form-select v-model="new_value" :placeholder="placeholder" :options="translatedOptions"></b-form-select>
         </b-form-group>
     </div>
@@ -10,12 +10,13 @@
 export default {
     name: "ChoiceInput",
     props: {
-        field: { type: String, default: "You Forgot To Set Field Name" },
-        label: { type: String, default: "Text Field" },
-        value: { type: String, default: "" },
+        field: {type: String, default: "You Forgot To Set Field Name"},
+        label: {type: String, default: "Text Field"},
+        value: {type: String, default: ""},
         options: [],
-        placeholder: { type: String, default: "You Should Add Placeholder Text" },
-        show_merge: { type: Boolean, default: false },
+        placeholder: {type: String, default: "You Should Add Placeholder Text"},
+        show_merge: {type: Boolean, default: false},
+        optional: {type: Boolean, default: false},
     },
     data() {
         return {
@@ -31,9 +32,16 @@ export default {
         },
     },
     computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.label
+            } else {
+                return this.label + '*'
+            }
+        },
         translatedOptions() {
             return this.options.map((x) => {
-                return { ...x, text: this.$t(x.text) }
+                return {...x, text: this.$t(x.text)}
             })
         },
     },
diff --git a/vue/src/components/Modals/DateInput.vue b/vue/src/components/Modals/DateInput.vue
index be53c8d23..8f9ba9dad 100644
--- a/vue/src/components/Modals/DateInput.vue
+++ b/vue/src/components/Modals/DateInput.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-form-group v-bind:label="label" class="mb-3">
+        <b-form-group v-bind:label="field_label" class="mb-3">
             <b-form-input v-model="new_value" type="date" ></b-form-input>
             <em v-if="help" class="small text-muted">{{ help }}</em>
             <small v-if="subtitle" class="text-muted">{{ subtitle }}</small>
@@ -17,6 +17,16 @@ export default {
         value: { type: String, default: "" },
         help: { type: String, default: undefined },
         subtitle: { type: String, default: undefined },
+        optional: {type: Boolean, default: false},
+    },
+    computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.label
+            } else {
+                return this.label + '*'
+            }
+        }
     },
     data() {
         return {
diff --git a/vue/src/components/Modals/EmojiInput.vue b/vue/src/components/Modals/EmojiInput.vue
index cd38b4bc9..c5af01047 100644
--- a/vue/src/components/Modals/EmojiInput.vue
+++ b/vue/src/components/Modals/EmojiInput.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <b-form-group
-            v-bind:label="label"
+            v-bind:label="field_label"
             class="mb-3">
 
             <input class="form-control" v-model="new_value">
@@ -27,6 +27,7 @@ export default {
         field: {type: String, default: 'You Forgot To Set Field Name'},
         label: {type: String, default: ''},
         value: {type: String, default: ''},
+        optional: {type: Boolean, default: false},
     },
     data() {
         return {
@@ -36,6 +37,15 @@ export default {
             emojisOutput: ""
         }
     },
+    computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.label
+            } else {
+                return this.label + '*'
+            }
+        }
+    },
     watch: {
         'new_value': function () {
             this.$root.$emit('change', this.field, this.new_value ?? null)
diff --git a/vue/src/components/Modals/FileInput.vue b/vue/src/components/Modals/FileInput.vue
index 14315cb31..7a0c7de45 100644
--- a/vue/src/components/Modals/FileInput.vue
+++ b/vue/src/components/Modals/FileInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <b-form-group
-        v-bind:label="label"
+        v-bind:label="field_label"
         class="mb-3">
       <b-form-file
           v-model="new_value"
@@ -30,7 +30,17 @@ export default {
     value: {type: String, default: ''},
     placeholder: {type: String, default: ''},
     show_merge: {type: Boolean, default: false},
+      optional: {type: Boolean, default: false},
   },
+    computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.label
+            } else {
+                return this.label + '*'
+            }
+        }
+    },
   data() {
     return {
       new_value: undefined,
diff --git a/vue/src/components/Modals/GenericModalForm.vue b/vue/src/components/Modals/GenericModalForm.vue
index e0e545d9c..bdc59b50f 100644
--- a/vue/src/components/Modals/GenericModalForm.vue
+++ b/vue/src/components/Modals/GenericModalForm.vue
@@ -11,15 +11,16 @@
                 </template>
                 <div v-for="(f, i) in form.fields" v-bind:key="i">
                     <p v-if="visibleCondition(f, 'instruction')">{{ f.label }}</p>
-                    <lookup-input v-if="visibleCondition(f, 'lookup')" :form="f" :model="listModel(f.list)" @change="storeValue" :help="showHelp && f.help"/>
+                    <lookup-input v-if="visibleCondition(f, 'lookup')" :form="f" :model="listModel(f.list)" @change="storeValue" :help="showHelp && f.help" :optional="f.optional"/>
                     <checkbox-input class="mb-3" v-if="visibleCondition(f, 'checkbox')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help"/>
-                    <text-input v-if="visibleCondition(f, 'text')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" :disabled="f.disabled"/>
-                    <choice-input v-if="visibleCondition(f, 'choice')" :label="f.label" :value="f.value" :field="f.field" :options="f.options" :placeholder="f.placeholder"/>
-                    <emoji-input v-if="visibleCondition(f, 'emoji')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue"/>
-                    <file-input v-if="visibleCondition(f, 'file')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue"/>
-                    <small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value"/>
-                    <date-input v-if="visibleCondition(f, 'date')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle"/>
-                    <number-input v-if="visibleCondition(f, 'number')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle"/>
+                    <text-input v-if="visibleCondition(f, 'text')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" :disabled="f.disabled" :optional="f.optional"/>
+                    <text-area-input v-if="visibleCondition(f, 'textarea')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" :disabled="f.disabled" :optional="f.optional"/>
+                    <choice-input v-if="visibleCondition(f, 'choice')" :label="f.label" :value="f.value" :field="f.field" :options="f.options" :placeholder="f.placeholder" :optional="f.optional"/>
+                    <emoji-input v-if="visibleCondition(f, 'emoji')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" :optional="f.optional"/>
+                    <file-input v-if="visibleCondition(f, 'file')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" :optional="f.optional"/>
+                    <small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value" />
+                    <date-input v-if="visibleCondition(f, 'date')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
+                    <number-input v-if="visibleCondition(f, 'number')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" :optional="f.optional"/>
                 </div>
                 <template v-slot:modal-footer>
                     <div class="row w-100">
@@ -57,6 +58,7 @@ import FileInput from "@/components/Modals/FileInput"
 import SmallText from "@/components/Modals/SmallText"
 import HelpBadge from "@/components/Badges/Help"
 import NumberInput from "@/components/Modals/NumberInput.vue";
+import TextAreaInput from "@/components/Modals/TextAreaInput.vue";
 
 export default {
     name: "GenericModalForm",
@@ -70,7 +72,8 @@ export default {
         SmallText,
         HelpBadge,
         DateInput,
-        NumberInput
+        NumberInput,
+        TextAreaInput
     },
     mixins: [ApiMixin, ToastMixin],
     props: {
diff --git a/vue/src/components/Modals/LookupInput.vue b/vue/src/components/Modals/LookupInput.vue
index 518a59be6..e93c15a26 100644
--- a/vue/src/components/Modals/LookupInput.vue
+++ b/vue/src/components/Modals/LookupInput.vue
@@ -2,7 +2,7 @@
     <div>
         <b-form-group :class="class_list">
             <template #label v-if="show_label">
-                {{ form.label }}
+                {{ field_label }}
             </template>
             <generic-multiselect
                 @change="new_value = $event.val"
@@ -27,11 +27,11 @@
 
 <script>
 import GenericMultiselect from "@/components/GenericMultiselect"
-import { StandardToasts, ApiMixin } from "@/utils/utils"
+import {StandardToasts, ApiMixin} from "@/utils/utils"
 
 export default {
     name: "LookupInput",
-    components: { GenericMultiselect },
+    components: {GenericMultiselect},
     mixins: [ApiMixin],
     props: {
         form: {
@@ -46,11 +46,13 @@ export default {
                 return undefined
             },
         },
-        class_list: { type: String, default: "mb-3" },
-        show_label: { type: Boolean, default: true },
-        clear: { type: Number },
-        help: { type: String, default: undefined },
+        class_list: {type: String, default: "mb-3"},
+        show_label: {type: Boolean, default: true},
+        clear: {type: Number},
+        help: {type: String, default: undefined},
+        optional: {type: Boolean, default: false},
     },
+
     data() {
         return {
             new_value: undefined,
@@ -67,7 +69,7 @@ export default {
         this.label = this.form?.label ?? ""
         this.sticky_options = this.form?.sticky_options ?? []
         this.sticky_options = this.sticky_options.map((x) => {
-            return { ...x, name: this.$t(x.name) }
+            return {...x, name: this.$t(x.name)}
         })
         this.list_label = this.form?.list_label ?? undefined
         if (this.list_label?.includes("::")) {
@@ -75,6 +77,13 @@ export default {
         }
     },
     computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.form.label
+            } else {
+                return this.form.label + '*'
+            }
+        },
         modelName() {
             return this.$t(this?.model?.name) ?? this.$t("Search")
         },
@@ -124,7 +133,7 @@ export default {
             let item = undefined
             let label = this.form.list_label.split("::")
             itemlist.forEach((x) => {
-                item = { ...x }
+                item = {...x}
                 for (const [k, v] of Object.entries(x)) {
                     if (k == label[0]) {
                         item["id"] = v.id
diff --git a/vue/src/components/Modals/NumberInput.vue b/vue/src/components/Modals/NumberInput.vue
index 5f492d5e5..a86f0b0e7 100644
--- a/vue/src/components/Modals/NumberInput.vue
+++ b/vue/src/components/Modals/NumberInput.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-form-group v-bind:label="label" class="mb-3">
+        <b-form-group v-bind:label="field_label" class="mb-3">
             <b-form-input v-model="new_value" type="number" :placeholder="placeholder"></b-form-input>
             <em v-if="help" class="small text-muted">{{ help }}</em>
             <small v-if="subtitle" class="text-muted">{{ subtitle }}</small>
@@ -18,6 +18,16 @@ export default {
         placeholder: { type: Number, default: 0 },
         help: { type: String, default: undefined },
         subtitle: { type: String, default: undefined },
+        optional: {type: Boolean, default: false},
+    },
+    computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.label
+            } else {
+                return this.label + '*'
+            }
+        }
     },
     data() {
         return {
diff --git a/vue/src/components/Modals/TextAreaInput.vue b/vue/src/components/Modals/TextAreaInput.vue
new file mode 100644
index 000000000..4bb184718
--- /dev/null
+++ b/vue/src/components/Modals/TextAreaInput.vue
@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <b-form-group v-bind:label="field_label" class="mb-3">
+            <b-form-textarea v-model="new_value" type="text" :placeholder="placeholder" :disabled="disabled"></b-form-textarea>
+            <em v-if="help" class="small text-muted">{{ help }}</em>
+            <small v-if="subtitle" class="text-muted">{{ subtitle }}</small>
+        </b-form-group>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "TextAreaInput",
+    props: {
+        field: {type: String, default: "You Forgot To Set Field Name"},
+        label: {type: String, default: "Text Field"},
+        value: {type: String, default: ""},
+        placeholder: {type: String, default: "You Should Add Placeholder Text"},
+        help: {type: String, default: undefined},
+        subtitle: {type: String, default: undefined},
+        disabled: {type: Boolean, default: false},
+        optional: {type: Boolean, default: false},
+    },
+    computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.label
+            } else {
+                return this.label + '*'
+            }
+        }
+    },
+    data() {
+        return {
+            new_value: undefined,
+        }
+    },
+    mounted() {
+        this.new_value = this.value
+    },
+    watch: {
+        new_value: function () {
+            this.$root.$emit("change", this.field, this.new_value)
+        },
+    },
+    methods: {},
+}
+</script>
diff --git a/vue/src/components/Modals/TextInput.vue b/vue/src/components/Modals/TextInput.vue
index 4f85ca75f..8b1428367 100644
--- a/vue/src/components/Modals/TextInput.vue
+++ b/vue/src/components/Modals/TextInput.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-form-group v-bind:label="label" class="mb-3">
+        <b-form-group v-bind:label="field_label" class="mb-3">
             <b-form-input v-model="new_value" type="text" :placeholder="placeholder" :disabled="disabled"></b-form-input>
             <em v-if="help" class="small text-muted">{{ help }}</em>
             <small v-if="subtitle" class="text-muted">{{ subtitle }}</small>
@@ -18,13 +18,23 @@ export default {
         placeholder: { type: String, default: "You Should Add Placeholder Text" },
         help: { type: String, default: undefined },
         subtitle: { type: String, default: undefined },
-        disabled: { type: Boolean, default: false }
+        disabled: { type: Boolean, default: false },
+        optional: {type: Boolean, default: false},
     },
     data() {
         return {
             new_value: undefined,
         }
     },
+    computed: {
+        field_label: function () {
+            if (this.optional) {
+                return this.label
+            } else {
+                return this.label + '*'
+            }
+        }
+    },
     mounted() {
         this.new_value = this.value
     },