From 85ffd61c1627c3fdfcb1c54f8fe9ec08d3b76886 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Wed, 12 Feb 2025 10:19:50 +0100
Subject: [PATCH] Added Required Values

---
 components/EntityEdit.vue | 106 +++++++++++++++++++++++++++++---------
 stores/data.js            |  30 ++++++++++-
 2 files changed, 112 insertions(+), 24 deletions(-)

diff --git a/components/EntityEdit.vue b/components/EntityEdit.vue
index d6fd9a1..852a0b7 100644
--- a/components/EntityEdit.vue
+++ b/components/EntityEdit.vue
@@ -126,6 +126,32 @@ const contentChanged = (content, datapoint) => {
   }
 }
 
+const saveAllowed = ref(false)
+const calcSaveAllowed = (item) => {
+  console.log(dataType.templateColumns)
+  let allowedCount = 0
+
+  dataType.templateColumns.filter(i => i.inputType).forEach(datapoint => {
+    if(datapoint.required) {
+      console.log("is required")
+
+      if(datapoint.key.includes(".")){
+        if(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]) allowedCount += 1
+      } else {
+        if(item[datapoint.key]) allowedCount += 1
+      }
+    } else {
+      allowedCount += 1
+    }
+  })
+
+  saveAllowed.value = allowedCount >= dataType.templateColumns.filter(i => i.inputType).length
+}
+//calcSaveAllowed()
+
+watch(item.value, async (newItem, oldItem) => {
+  calcSaveAllowed(newItem)
+})
 </script>
 
 <template>
@@ -164,12 +190,14 @@ const contentChanged = (content, datapoint) => {
       <UButton
           v-if="item.id"
           @click="dataStore.updateItem(type,item, oldItem)"
+          :disabled="!saveAllowed"
       >
         Speichern
       </UButton>
       <UButton
           v-else
           @click="dataStore.createNewItem(type,item)"
+          :disabled="!saveAllowed"
       >
         Erstellen
       </UButton>
@@ -198,7 +226,7 @@ const contentChanged = (content, datapoint) => {
            -->
 
           <UFormGroup
-              v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
+              v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && !i.inputColumn === columnName)"
               :label="datapoint.label"
           >
             <template #help>
@@ -210,6 +238,7 @@ const contentChanged = (content, datapoint) => {
             </template>
             <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
               <UInput
+                  :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                   class="flex-auto"
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                   v-if="['text','number'].includes(datapoint.inputType)"
@@ -223,12 +252,14 @@ const contentChanged = (content, datapoint) => {
                 </template>
               </UInput>
               <UToggle
+                  :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                   v-else-if="datapoint.inputType === 'bool'"
                   v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
               />
               <USelectMenu
+                  :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                   class="flex-auto"
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                   v-else-if="datapoint.inputType === 'select'"
@@ -246,6 +277,7 @@ const contentChanged = (content, datapoint) => {
                 </template>
               </USelectMenu>
               <UTextarea
+                  :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                   class="flex-auto"
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                   v-else-if="datapoint.inputType === 'textarea'"
@@ -255,6 +287,7 @@ const contentChanged = (content, datapoint) => {
               />
               <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
                 <UButton
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                     icon="i-heroicons-calendar-days-20-solid"
                     :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                     variant="outline"
@@ -272,6 +305,7 @@ const contentChanged = (content, datapoint) => {
               </UPopover>
               <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
                 <UButton
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                     icon="i-heroicons-calendar-days-20-solid"
                     :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                     variant="outline"
@@ -306,6 +340,7 @@ const contentChanged = (content, datapoint) => {
             <InputGroup class="w-full" v-else>
               <UInput
                   class="flex-auto"
+                  :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                   v-if="['text','number'].includes(datapoint.inputType)"
                   v-model="item[datapoint.key]"
@@ -318,12 +353,14 @@ const contentChanged = (content, datapoint) => {
                 </template>
               </UInput>
               <UToggle
+                  :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                   v-else-if="datapoint.inputType === 'bool'"
                   v-model="item[datapoint.key]"
                   :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
               />
               <USelectMenu
+                  :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                   class="flex-auto"
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                   v-else-if="datapoint.inputType === 'select'"
@@ -342,6 +379,7 @@ const contentChanged = (content, datapoint) => {
                 </template>
               </USelectMenu>
               <UTextarea
+                  :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                   class="flex-auto"
                   @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                   v-else-if="datapoint.inputType === 'textarea'"
@@ -351,6 +389,7 @@ const contentChanged = (content, datapoint) => {
               />
               <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
                 <UButton
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                     icon="i-heroicons-calendar-days-20-solid"
                     :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                     variant="outline"
@@ -367,6 +406,7 @@ const contentChanged = (content, datapoint) => {
               </UPopover>
               <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
                 <UButton
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                     icon="i-heroicons-calendar-days-20-solid"
                     :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                     variant="outline"
@@ -383,12 +423,19 @@ const contentChanged = (content, datapoint) => {
                   />
                 </template>
               </UPopover>
+              <!-- TODO: Color/Required for TipTap and MaterialComposing -->
               <Tiptap
                   v-else-if="datapoint.inputType === 'editor'"
                   @updateContent="(i) => contentChanged(i,datapoint)"
                   :preloadedContent="item[datapoint.key].html"
               />
 
+
+              <MaterialComposing
+                  v-else-if="datapoint.inputType === 'materialComposing'"
+                  :item="item"
+              />
+
               <UButton
                   v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
                   @click="item[datapoint.key] = null"
@@ -397,29 +444,29 @@ const contentChanged = (content, datapoint) => {
                   icon="i-heroicons-x-mark"
               />
             </InputGroup>
-            <div
-                v-if="profileStore.ownTenant.ownFields"
-            >
-              <UDivider
-                  class="mt-3"
-              >Eigene Felder</UDivider>
+            <!--        <div
+                        v-if="profileStore.ownTenant.ownFields"
+                    >
+                      <UDivider
+                          class="mt-3"
+                      >Eigene Felder</UDivider>
 
-              <UFormGroup
-                  v-for="field in profileStore.ownTenant.ownFields.contracts"
-                  :key="field.key"
-                  :label="field.label"
-              >
-                <UInput
-                    v-if="field.type === 'text'"
-                    v-model="item.ownFields[field.key]"
-                />
-                <USelectMenu
-                    v-else-if="field.type === 'select'"
-                    :options="field.options"
-                    v-model="item.ownFields[field.key]"
-                />
-              </UFormGroup>
-            </div>
+                      <UFormGroup
+                          v-for="field in profileStore.ownTenant.ownFields.contracts"
+                          :key="field.key"
+                          :label="field.label"
+                      >
+                        <UInput
+                            v-if="field.type === 'text'"
+                            v-model="item.ownFields[field.key]"
+                        />
+                        <USelectMenu
+                            v-else-if="field.type === 'select'"
+                            :options="field.options"
+                            v-model="item.ownFields[field.key]"
+                        />
+                      </UFormGroup>
+                    </div>-->
 
           </UFormGroup>
         </div>
@@ -437,6 +484,7 @@ const contentChanged = (content, datapoint) => {
         </template>
         <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
           <UInput
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-if="['text','number'].includes(datapoint.inputType)"
@@ -450,12 +498,14 @@ const contentChanged = (content, datapoint) => {
             </template>
           </UInput>
           <UToggle
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'bool'"
               v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
           />
           <USelectMenu
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'select'"
@@ -473,6 +523,7 @@ const contentChanged = (content, datapoint) => {
             </template>
           </USelectMenu>
           <UTextarea
+              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'textarea'"
@@ -482,6 +533,7 @@ const contentChanged = (content, datapoint) => {
           />
           <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
             <UButton
+                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                 variant="outline"
@@ -499,6 +551,7 @@ const contentChanged = (content, datapoint) => {
           </UPopover>
           <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
             <UButton
+                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                 variant="outline"
@@ -533,6 +586,7 @@ const contentChanged = (content, datapoint) => {
         <InputGroup class="w-full" v-else>
           <UInput
               class="flex-auto"
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-if="['text','number'].includes(datapoint.inputType)"
               v-model="item[datapoint.key]"
@@ -545,12 +599,14 @@ const contentChanged = (content, datapoint) => {
             </template>
           </UInput>
           <UToggle
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'bool'"
               v-model="item[datapoint.key]"
               :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
           />
           <USelectMenu
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'select'"
@@ -569,6 +625,7 @@ const contentChanged = (content, datapoint) => {
             </template>
           </USelectMenu>
           <UTextarea
+              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
               class="flex-auto"
               @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
               v-else-if="datapoint.inputType === 'textarea'"
@@ -578,6 +635,7 @@ const contentChanged = (content, datapoint) => {
           />
           <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
             <UButton
+                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                 variant="outline"
@@ -594,6 +652,7 @@ const contentChanged = (content, datapoint) => {
           </UPopover>
           <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
             <UButton
+                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                 variant="outline"
@@ -610,6 +669,7 @@ const contentChanged = (content, datapoint) => {
               />
             </template>
           </UPopover>
+          <!-- TODO: Color/Required for TipTap and MaterialComposing -->
           <Tiptap
               v-else-if="datapoint.inputType === 'editor'"
               @updateContent="(i) => contentChanged(i,datapoint)"
diff --git a/stores/data.js b/stores/data.js
index eac724b..29b3522 100644
--- a/stores/data.js
+++ b/stores/data.js
@@ -85,10 +85,12 @@ export const useDataStore = defineStore('data', () => {
                     key: "name",
                     label: "Name",
                     title: true,
+                    required: true,
                     inputType: "text"
                 },{
                     key: "categorie",
-                    label: "Kategorie"
+                    label: "Kategorie",
+                    required: true,
                 },{
                     key: "profile",
                     label: "Mitarbeiter",
@@ -157,6 +159,7 @@ export const useDataStore = defineStore('data', () => {
                 }, {
                     key: "name",
                     label: "Firmenname",
+                    required: true,
                     title: true,
                     inputType: "text",
                     disabledFunction: function (item) {
@@ -324,6 +327,7 @@ export const useDataStore = defineStore('data', () => {
                 },{
                     key: "lastName",
                     label: "Nachname",
+                    required: true,
                     inputType: "text",
                     inputChangeFunction: function (row) {
                         row.fullName = `${row.firstName} ${row.lastName}`
@@ -414,6 +418,7 @@ export const useDataStore = defineStore('data', () => {
             templateColumns: [
                 {
                     key: "name",
+                    required: true,
                     label: "Name",
                     title: true,
                     inputType: "text",
@@ -570,12 +575,14 @@ export const useDataStore = defineStore('data', () => {
                 },{
                     key: "name",
                     label: "Name",
+                    required: true,
                     inputType: "text",
                     title: true
                 },
                 {
                     key: "profile",
                     label: "Mitarbeiter",
+                    required: true,
                     inputType: "select",
                     selectDataType: "profiles",
                     selectOptionAttribute: "fullName",
@@ -601,11 +608,13 @@ export const useDataStore = defineStore('data', () => {
                     ]
                 },{
                     key: "startDate",
+                    required: true,
                     label: "Start",
                     inputType: "date",
                     component: startDate
                 },{
                     key: "endDate",
+                    required: true,
                     label: "Ende",
                     inputType: "date",
                     component: endDate
@@ -639,6 +648,7 @@ export const useDataStore = defineStore('data', () => {
                 {
                     key: "name",
                     label: "Name",
+                    required: true,
                     inputType: "text",
                     title: true
                 },
@@ -690,6 +700,7 @@ export const useDataStore = defineStore('data', () => {
                 {
                     key: "name",
                     label:"Name",
+                    required: true,
                     title: true,
                     inputType: "text"
                 },
@@ -716,6 +727,7 @@ export const useDataStore = defineStore('data', () => {
                 },{
                     key: "sellingPrice",
                     label: "Verkaufpreispreis",
+                    required: true,
                     component: sellingPrice,
                     inputType: "number",
                     inputTrailing: "EUR"
@@ -800,6 +812,7 @@ export const useDataStore = defineStore('data', () => {
                 {
                     key: "projecttype",
                     label: "Typ",
+                    required: true,
                     component: projecttype,
                     inputType: "select",
                     selectDataType: "projecttypes",
@@ -815,6 +828,7 @@ export const useDataStore = defineStore('data', () => {
                 },{
                     key: "name",
                     label: "Name",
+                    required: true,
                     title: true,
                     inputType: "text"
                 },
@@ -822,6 +836,7 @@ export const useDataStore = defineStore('data', () => {
                     key: "customer",
                     label: "Kunde",
                     component: customer,
+                    required: true,
                     inputType: "select",
                     selectDataType: "customers",
                     selectOptionAttribute: "name",
@@ -909,6 +924,7 @@ export const useDataStore = defineStore('data', () => {
                 },{
                     key: 'licensePlate',
                     label: "Kennzeichen",
+                    required: true,
                     inputType: "text",
                     title: true
                 },{
@@ -1011,6 +1027,7 @@ export const useDataStore = defineStore('data', () => {
                 },
                 {
                     key: "name",
+                    required: true,
                     label: "Name",
                     title: true,
                     inputType: "text"
@@ -1143,6 +1160,7 @@ export const useDataStore = defineStore('data', () => {
                     key: "name",
                     label: "Name",
                     inputType: "text",
+                    required: true,
                     title: true,
                     inputColumn: "Allgemeines"
                 },
@@ -1157,6 +1175,7 @@ export const useDataStore = defineStore('data', () => {
                     key: "type",
                     label: "Typ",
                     inputType: "select",
+                    required: true,
                     selectValueAttribute: "label",
                     selectManualOptions: [
                         {label:"Standort"},
@@ -1278,6 +1297,7 @@ export const useDataStore = defineStore('data', () => {
                     key: "name",
                     label: "Name",
                     title: true,
+                    required: true,
                     inputType: "text",
                     inputColumn: "Allgemeines"
                 },
@@ -1408,6 +1428,7 @@ export const useDataStore = defineStore('data', () => {
                 {
                     key: "name",
                     label: "Name",
+                    required: true,
                     title: true,
                     inputType: "text"
                 },
@@ -1519,17 +1540,20 @@ export const useDataStore = defineStore('data', () => {
                 {
                     key: 'name',
                     label: "Name",
+                    required: true,
                     title: true,
                     inputType: "text"
                 },
                 {
                     key: "startDate",
                     label: "Start",
+                    required: true,
                     inputType: "datetime",
                 },
                 {
                     key: "endDate",
                     label: "Ende",
+                    required: true,
                     inputType: "datetime",
                 },/*{
                     key: "eventtype",
@@ -1556,6 +1580,7 @@ export const useDataStore = defineStore('data', () => {
                 },{
                     key: "profiles",
                     label: "Beteiligte Benutzer",
+                    required: true,
                     inputType: "select",
                     selectDataType: "profiles",
                     selectOptionAttribute: "fullName",
@@ -1615,6 +1640,7 @@ export const useDataStore = defineStore('data', () => {
                 {
                     key: "name",
                     label: "Name",
+                    required: true,
                     title: true,
                     inputType: "text"
                 },
@@ -1651,6 +1677,7 @@ export const useDataStore = defineStore('data', () => {
                 {
                     key: "name",
                     label: "Name",
+                    required: true,
                     title: true,
                     inputType: "text"
                 },
@@ -1701,6 +1728,7 @@ export const useDataStore = defineStore('data', () => {
                     key: "name",
                     label: "Name",
                     title: true,
+                    required: true,
                     inputType: "text"
                 },
                 {