FEDEO/pages/services/[mode]/[[id]].vue

<script setup>
definePageMeta({
  middleware: "auth"
})

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

const dataStore = useDataStore()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const supabase = useSupabaseClient()
const id = ref(route.params.id ? route.params.id : null )

//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
    unit: 1,
    tags: [],
    servicecategories: []
})

const openTab = ref(0)

const servicecategories = ref([])
const units = ref([])

//Functions
const setupPage = async () => {
  if(mode.value === "show"){
    itemInfo.value = await useSupabaseSelectSingle("services",useRoute().params.id, "*")
  } else if(mode.value === "edit") {
    itemInfo.value = await useSupabaseSelectSingle("services",useRoute().params.id)
  }

  servicecategories.value = await useSupabaseSelect("servicecategories","*")
  units.value = (await supabase.from("units").select()).data

}

setupPage()
</script>

<template>
  <UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Leistung erstellen' : 'Leistung bearbeiten')">
    <template #left>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.push(`/services`)"
      >
        Leistungen
      </UButton>
    </template>
    <template #center>
      <h1
          v-if="itemInfo"
          class="text-xl font-medium"
      >{{itemInfo.name ? `Leistung: ${itemInfo.name}` : (mode === 'create' ? 'Leistung erstellen' : 'Leistung bearbeiten')}}</h1>
    </template>
    <template #right>
      <UButton
          v-if="mode === 'edit'"
          @click="dataStore.updateItem('services',itemInfo)"
      >
        Speichern
      </UButton>
      <UButton
          v-else-if="mode === 'create'"
          @click="dataStore.createNewItem('services',itemInfo)"
      >
        Erstellen
      </UButton>
      <UButton
          @click="itemInfo.value ? router.push(`/services/show/${itemInfo.value.id}`) : router.push(`/services/`)"
          color="red"
          class="ml-2"
          v-if="mode === 'edit' || mode === 'create'"
      >
        Abbrechen
      </UButton>
      <UButton
          v-if="mode === 'show'"
          @click="router.push(`/services/edit/${itemInfo.id}`)"
      >
        Bearbeiten
      </UButton>
    </template>
  </UDashboardNavbar>
  <UTabs
    :items="[{label: 'Informationen'},{label: 'Dokumente'}]"
    v-if="mode === 'show'"
    class="p-5"
    v-model="openTab"
  >
    <template #item="{item}">
      <div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
        <div class="w-1/2 mr-5">
          <UCard>
            <table class="w-full">
              <tr>
                <td>Name:</td>
                <td>{{itemInfo.name}}</td>
              </tr>
              <tr>
                <td>Leistungsnummer:</td>
                <td>{{itemInfo.serviceNumber}}</td>
              </tr>
              <tr>
                <td>Verkaufpreis:</td>
                <td>{{itemInfo.sellingPrice && itemInfo.sellingPrice.toFixed(2).replace(".", ",") + " €"}}</td>
              </tr>
              <tr>
                <td>Einheit:</td>
                <td>{{units.find(i => i.id === itemInfo.unit) ? units.find(i => i.id === itemInfo.unit).name : itemInfo.unit}}</td>
              </tr>
              <tr>
                <td>Tags:</td>
                <td>{{itemInfo.tags.join(", ")}}</td>
              </tr>
              <tr>
                <td>Leistungskategorien:</td>
                <td>{{itemInfo.servicecategories ? itemInfo.servicecategories.map(i => servicecategories.find(x => x.id === i).name).join(", ") : ""}}</td>
              </tr>
              <tr>
                <td>Beschreibung:</td>
                <td>{{itemInfo.description}}</td>
              </tr>
            </table>
          </UCard>
        </div>
        <div class="w-1/2">
          <UCard>
            <HistoryDisplay
                render-headline
                type="product"
                v-if="itemInfo"
                :element-id="itemInfo.id"
            />
          </UCard>
        </div>
      </div>
      <div
          v-if="item.label === 'Dokumente'"
          class="mt-5"
      >
        <UCard>
          <Toolbar>
            <DocumentUpload
                type="product"
                :element-id="itemInfo.id"
            />
          </Toolbar>


          <DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
        </UCard>

      </div>
    </template>
  </UTabs>
  <UForm
      v-else-if="mode == 'edit' || mode == 'create'"
    class="p-5"
  >
    <UFormGroup
        label="Name:"
    >
      <UInput
          v-model="itemInfo.name"
      />
    </UFormGroup>
    <UFormGroup
        label="Leistungsnummer:"
    >
      <UInput
          v-model="itemInfo.serviceNumber"
      />
    </UFormGroup>
    <UFormGroup
        label="Einheit:"
    >
      <USelectMenu
          v-model="itemInfo.unit"
          :options="dataStore.units"
          option-attribute="name"
          value-attribute="id"
      >
        <template #label>
          {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : itemInfo.unit }}
        </template>
      </USelectMenu>
    </UFormGroup>
    <UFormGroup
        label="Tags:"
    >
      <USelectMenu
          v-model="itemInfo.tags"
          :options="dataStore.ownTenant.tags.products"
          multiple
      />
    </UFormGroup>

    <UFormGroup
      label="Leistungskategorie:"
    >
      <USelectMenu
        :options="servicecategories"
        option-attribute="name"
        value-attribute="id"
        v-model="itemInfo.servicecategories"
        multiple
      >
        <template #label>
          {{itemInfo.servicecategories && itemInfo.servicecategories.length > 0 ? itemInfo.servicecategories.map(i => servicecategories.find(x => x.id === i).name).join(", ") : "Keine Kategorien ausgewählt"}}
        </template>
      </USelectMenu>
    </UFormGroup>

    <UFormGroup
        label="Verkaufspreis:"
    >
      <UInput
          v-model="itemInfo.sellingPrice"
          type="number"
          steps="0.001"
      >
        <template #trailing>
          <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
        </template>
      </UInput>
    </UFormGroup>
    <UFormGroup
      label="Beschreibung:"
    >
      <UTextarea
        v-model="itemInfo.description"
        :rows="6"
      />
    </UFormGroup>
  </UForm>
</template>

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