From db53043b190e6f4135d81503d6bd4c433ed9899b Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 20 May 2025 17:12:35 +0200
Subject: [PATCH] Added Support for Conditional Rendering of Inputs

---
 components/EntityEdit.vue | 462 +++++++++++++++++++-------------------
 1 file changed, 234 insertions(+), 228 deletions(-)

diff --git a/components/EntityEdit.vue b/components/EntityEdit.vue
index 82e833c..6d445ee 100644
--- a/components/EntityEdit.vue
+++ b/components/EntityEdit.vue
@@ -334,255 +334,261 @@ const updateItem = async () => {
            Die Form Group darf nur in der ersten bearbeitet werden und muss dann runterkopiert werden
            -->
 
-
-          <UFormGroup
+          <div
               v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
-              :label="datapoint.label"
           >
-            <template #help>
-              <component
-                  v-if="datapoint.helpComponent"
-                  :is="datapoint.helpComponent"
-                  :item="item"
-              />
-            </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)"
-                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
-                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                  :type="datapoint.inputType"
-                  :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
-              >
-                <template #trailing v-if="datapoint.inputTrailing">
-                  <span class="text-gray-500 dark:text-gray-400 text-xs">{{datapoint.inputTrailing}}</span>
-                </template>
-              </UInput>
-              <UToggle
-                  :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
-                  @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'"
-                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
-                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                  :option-attribute="datapoint.selectOptionAttribute"
-                  :value-attribute="datapoint.selectValueAttribute || 'id'"
-                  :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-                  :searchable="datapoint.selectSearchAttributes"
-                  :search-attributes="datapoint.selectSearchAttributes"
-                  :multiple="datapoint.selectMultiple"
-              >
-                <template #empty>
-                  Keine Optionen verfügbar
-                </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'"
-                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
-                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                  rows="4"
-              />
-              <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
-                <UButton
+            <UFormGroup
+                v-if="(datapoint.showFunction ? datapoint.showFunction(item) : true)"
+                :label="datapoint.label"
+            >
+              <template #help>
+                <component
+                    v-if="datapoint.helpComponent"
+                    :is="datapoint.helpComponent"
+                    :item="item"
+                />
+              </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'"
-                    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"
+                    class="flex-auto"
+                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    v-if="['text','number'].includes(datapoint.inputType)"
+                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    :type="datapoint.inputType"
+                    :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
+                >
+                  <template #trailing v-if="datapoint.inputTrailing">
+                    <span class="text-gray-500 dark:text-gray-400 text-xs">{{datapoint.inputTrailing}}</span>
+                  </template>
+                </UInput>
+                <UToggle
+                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
+                    @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"
-
                 />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker
-                      @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                      v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
-                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                  />
-                </template>
-              </UPopover>
-              <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
-                <UButton
+                <USelectMenu
                     :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"
+                    class="flex-auto"
+                    @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                    v-else-if="datapoint.inputType === 'select'"
+                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                     :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    :option-attribute="datapoint.selectOptionAttribute"
+                    :value-attribute="datapoint.selectValueAttribute || 'id'"
+                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+                    :searchable="datapoint.selectSearchAttributes"
+                    :search-attributes="datapoint.selectSearchAttributes"
+                    :multiple="datapoint.selectMultiple"
+                >
+                  <template #empty>
+                    Keine Optionen verfügbar
+                  </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'"
+                    v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    rows="4"
+                />
+                <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"
+                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
 
+                  />
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker
+                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    />
+                  </template>
+                </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"
+                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+
+                  />
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker
+                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                        v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
+                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                        mode="datetime"
+                    />
+                  </template>
+                </UPopover>
+                <!-- TODO: DISABLED FOR TIPTAP -->
+                <Tiptap
+                    v-else-if="datapoint.inputType === 'editor'"
+                    @updateContent="(i) => contentChanged(i,datapoint)"
+                    :preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
                 />
 
-                <template #panel="{ close }">
-                  <LazyDatePicker
-                      @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                      v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
-                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                      mode="datetime"
-                  />
-                </template>
-              </UPopover>
-              <!-- TODO: DISABLED FOR TIPTAP -->
-              <Tiptap
-                  v-else-if="datapoint.inputType === 'editor'"
-                  @updateContent="(i) => contentChanged(i,datapoint)"
-                  :preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
-              />
-
-              <UButton
-                  v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
-                  @click="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] = null"
-                  variant="outline"
-                  color="white"
-                  icon="i-heroicons-x-mark"
-              />
-            </InputGroup>
-            <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]"
-                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                  :type="datapoint.inputType"
-                  :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
-              >
-                <template #trailing v-if="datapoint.inputTrailing">
-                  {{datapoint.inputTrailing}}
-                </template>
-              </UInput>
-              <UToggle
-                  :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
-                  @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'"
-                  v-model="item[datapoint.key]"
-                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                  :option-attribute="datapoint.selectOptionAttribute"
-                  :value-attribute="datapoint.selectValueAttribute || 'id'"
-                  :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
-                  :searchable="datapoint.selectSearchAttributes"
-                  :search-attributes="datapoint.selectSearchAttributes"
-                  :multiple="datapoint.selectMultiple"
-                  searchable-placeholder="Suche..."
-              >
-                <template #empty>
-                  Keine Optionen verfügbar
-                </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'"
-                  v-model="item[datapoint.key]"
-                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                  rows="4"
-              />
-              <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'"
+                    v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
+                    @click="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] = null"
                     variant="outline"
+                    color="white"
+                    icon="i-heroicons-x-mark"
+                />
+              </InputGroup>
+              <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]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    :type="datapoint.inputType"
+                    :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
+                >
+                  <template #trailing v-if="datapoint.inputTrailing">
+                    {{datapoint.inputTrailing}}
+                  </template>
+                </UInput>
+                <UToggle
+                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
+                    @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"
                 />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker
-                      @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                      v-model="item[datapoint.key]" @close="close"
+                <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'"
+                    v-model="item[datapoint.key]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    :option-attribute="datapoint.selectOptionAttribute"
+                    :value-attribute="datapoint.selectValueAttribute || 'id'"
+                    :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
+                    :searchable="datapoint.selectSearchAttributes"
+                    :search-attributes="datapoint.selectSearchAttributes"
+                    :multiple="datapoint.selectMultiple"
+                    searchable-placeholder="Suche..."
+                >
+                  <template #empty>
+                    Keine Optionen verfügbar
+                  </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'"
+                    v-model="item[datapoint.key]"
+                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    rows="4"
+                />
+                <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"
                       :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                   />
-                </template>
-              </UPopover>
-              <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker
+                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                        v-model="item[datapoint.key]" @close="close"
+                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    />
+                  </template>
+                </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"
+                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                  />
+
+                  <template #panel="{ close }">
+                    <LazyDatePicker
+                        @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
+                        v-model="item[datapoint.key]"
+                        @close="close"
+                        :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                        mode="datetime"
+                    />
+                  </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"
+                />
+                <PersonalComposing
+                    v-else-if="datapoint.inputType === 'personalComposing'"
+                    :item="item"
+                />
+
                 <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'"
+                    v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
+                    @click="item[datapoint.key] = null"
                     variant="outline"
-                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
+                    color="white"
+                    icon="i-heroicons-x-mark"
                 />
-
-                <template #panel="{ close }">
-                  <LazyDatePicker
-                      @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
-                      v-model="item[datapoint.key]"
-                      @close="close"
-                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
-                      mode="datetime"
-                  />
-                </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"
-              />
-              <PersonalComposing
-                  v-else-if="datapoint.inputType === 'personalComposing'"
-                  :item="item"
-              />
-
-              <UButton
-                  v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
-                  @click="item[datapoint.key] = null"
-                  variant="outline"
-                  color="white"
-                  icon="i-heroicons-x-mark"
-              />
-            </InputGroup>
-            <!--        <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"
+              </InputGroup>
+              <!--        <div
+                          v-if="profileStore.ownTenant.ownFields"
                       >
-                        <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>-->
+                        <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>
+          </div>
+
+
 
-          </UFormGroup>
         </div>
       </div>
       <UFormGroup