Added Required Values

2025-02-12 10:19:50 +01:00
parent 291762a49e
commit 85ffd61c16
2 changed files with 112 additions and 24 deletions
--- 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)"