FEDEO/components/EntityEdit.vue

<script setup>
import dayjs from "dayjs";

const props = defineProps({
  type: {
    required: true,
    type: String
  },
  item: {
    required: true,
    type: Object
  }
})

const {type} = props

defineShortcuts({
  'backspace': () => {
    router.push(`/${type}`)
  },
  'arrowleft': () => {
    if(openTab.value > 0){
      openTab.value -= 1
    }
  },
  'arrowright': () => {
    if(openTab.value < 3) {
      openTab.value += 1
    }
  },
})


const router = useRouter()
const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()

const dataType = dataStore.dataTypes[type]
const openTab = ref(0)

const oldItem = ref(null)
const generateOldItemData = () => {
  oldItem.value = JSON.parse(JSON.stringify(props.item))
}
generateOldItemData()


const setupCreate = () => {
  dataType.templateColumns.forEach(datapoint => {
    if(datapoint.key.includes(".")){
      props.item[datapoint.key.split(".")[0]] = {}
    }

    if(datapoint.inputType === "editor") {
      if(datapoint.key.includes(".")){
        props.item[datapoint.key.split(".")[0]][datapoint.key.split(".")[1]] = {}
      } else {
        props.item[datapoint.key] = {}
      }


    }

  })
}

setupCreate()

const loadedOptions = ref({})
const loadOptions = async () => {
  let optionsToLoad = dataType.templateColumns.filter(i => i.selectDataType).map(i => {
    return {
      option: i.selectDataType,
      key: i.key
    }
  })

  for await(const option of optionsToLoad) {
    if(option.option === "countrys") {
      loadedOptions.value[option.option] = (await supabase.from("countrys").select()).data
    } else {
      loadedOptions.value[option.option] = (await useSupabaseSelect(option.option))

      if(dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter){
        loadedOptions.value[option.option] = loadedOptions.value[option.option].filter(i => dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter(i, props.item))
      }
    }
  }
}

loadOptions()

const contentChanged = (content, datapoint) => {
  if(datapoint.key.includes(".")){
    props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html = content.html
    props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].text = content.text
    props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].json = content.json
  } else {
    props.item[datapoint.key].html = content.html
    props.item[datapoint.key].text = content.text
    props.item[datapoint.key].json = content.json
  }
}

</script>

<template>
  <UDashboardNavbar
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #left>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.push(`/standardEntity/${type}`)"
      >
        {{dataType.label}}
      </UButton>
    </template>
    <template #center>
      <h1
          v-if="props.item"
          :class="['text-xl','font-medium']"
      >{{props.item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
    </template>
    <template #right>
      <UButton
          v-if="props.item.id"
          @click="dataStore.updateItem(type,props.item, oldItem)"
      >
        Speichern
      </UButton>
      <UButton
          v-else
          @click="dataStore.createNewItem(type,props.item)"
      >
        Erstellen
      </UButton>
      <UButton
          @click="router.push(props.item.id ? `/standardEntity/${type}/show/${props.item.id}` : `/standardEntity/${type}`)"
          color="red"
          class="ml-2"
      >
        Abbrechen
      </UButton>
    </template>
  </UDashboardNavbar>
  <UDashboardPanelContent>
    <UForm
        class="p-5"
    >
      <UFormGroup
          v-for="datapoint in dataType.templateColumns.filter(i => i.inputType)"
          :label="datapoint.label"
      >
        <div v-if="datapoint.key.includes('.')">
          <UInput
              v-if="['text','number'].includes(datapoint.inputType)"
              v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :type="datapoint.inputType"
              :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
          />
          <UToggle
              v-else-if="datapoint.inputType === 'bool'"
              v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
          />
          <USelectMenu
              v-else-if="datapoint.inputType === 'select'"
              v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :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"
          />
          <UTextarea
              v-else-if="datapoint.inputType === 'textarea'"
              v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              rows="4"
          />
          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
            <UButton
                icon="i-heroicons-calendar-days-20-solid"
                :label="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                variant="outline"
            />

            <template #panel="{ close }">
              <LazyDatePicker v-model="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close" />
            </template>
          </UPopover>
          <Tiptap
              v-else-if="datapoint.inputType === 'editor'"
              @updateContent="(i) => contentChanged(i,datapoint)"
              :preloadedContent="props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
          />
        </div>
        <div v-else>
          <UInput
              v-if="['text','number'].includes(datapoint.inputType)"
              v-model="props.item[datapoint.key]"
              :type="datapoint.inputType"
              :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
          />
          <UToggle
              v-else-if="datapoint.inputType === 'bool'"
              v-model="props.item[datapoint.key]"
          />
          <USelectMenu
              v-else-if="datapoint.inputType === 'select'"
              v-model="props.item[datapoint.key]"
              :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..."
          />
          <UTextarea
              v-else-if="datapoint.inputType === 'textarea'"
              v-model="props.item[datapoint.key]"
              rows="4"
          />
          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
            <UButton
                icon="i-heroicons-calendar-days-20-solid"
                :label="props.item[datapoint.key] ? dayjs(props.item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                variant="outline"
            />

            <template #panel="{ close }">
              <LazyDatePicker v-model="props.item[datapoint.key]" @close="close" />
            </template>
          </UPopover>
          <Tiptap
              v-else-if="datapoint.inputType === 'editor'"
              @updateContent="(i) => contentChanged(i,datapoint)"
              :preloadedContent="props.item[datapoint.key].html"
          />
        </div>
        <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="props.item.ownFields[field.key]"
            />
            <USelectMenu
                v-else-if="field.type === 'select'"
                :options="field.options"
                v-model="props.item.ownFields[field.key]"
            />
          </UFormGroup>
        </div>

      </UFormGroup>
    </UForm>
  </UDashboardPanelContent>
</template>

<style scoped>
td {
  border-bottom: 1px solid lightgrey;
  vertical-align: top;
  padding-bottom: 0.15em;
  padding-top: 0.15em;
}
</style>