FEDEO/pages/deprecated/entitys/customers/[mode]/[[id]].vue

<script setup>

import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";

definePageMeta({
  middleware: "auth"
})

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

const dataStore = useDataStore()
const profileStore = useProfileStore()
const route = useRoute()
const router = useRouter()

const openTab = ref(0)


//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
  name: "",
  infoData: {
    country: "Deutschland"
  },
  active: true,
  isCompany: true,
  profiles: [profileStore.activeProfile.id]
})
const oldItemInfo = ref({})

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

  if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
}

const editItem = async () => {
  await router.push(`/customers/edit/${itemInfo.value.id}`)
}

const setCityByZip = async () => {
    itemInfo.value.infoData.city = await useZipCheck(itemInfo.value.infoData.zip)
}

setupPage()
</script>

<template>
  <UDashboardNavbar
      :title="itemInfo ? `Kunde: ${itemInfo.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')"
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #left>
      <UButton
        icon="i-heroicons-chevron-left"
        variant="outline"
        @click="router.push(`/customers`)"
      >
        Kunden
      </UButton>
    </template>
    <template #center>
      <h1
          v-if="itemInfo"
          :class="['text-xl','font-medium', ... itemInfo.active ? ['text-primary'] : ['text-rose-500']]"
      >{{itemInfo.id ? `Kunde: ${itemInfo.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')}}</h1>
    </template>
    <template #right>
      <UButton
          v-if="mode === 'edit'"
          @click="dataStore.updateItem('customers',itemInfo,oldItemInfo)"
      >
        Speichern
      </UButton>
      <UButton
          v-else-if="mode === 'create'"
          @click="dataStore.createNewItem('customers',itemInfo)"
      >
        Erstellen
      </UButton>
      <UButton
          @click="itemInfo.id ? router.push(`/customers/show/${itemInfo.id}`) : router.push(`/customers`)"
          color="red"
          class="ml-2"
          v-if="mode === 'edit' || mode === 'create'"
      >
        Abbrechen
      </UButton>
      <UButton
          v-if="mode === 'show'"
          @click="editItem"
      >
        Bearbeiten
      </UButton>
    </template>
    <template #badge v-if="itemInfo">
      <UBadge
          v-if="itemInfo.active"
      >
        Aktiv
      </UBadge>
      <UBadge
          v-else
          color="red"
      >
        Gesperrt
      </UBadge>
    </template>
  </UDashboardNavbar>

  <UDashboardPanelContent>
    <UTabs
        v-if="itemInfo.id && mode == 'show'"
        :items="[{label: 'Informationen'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}]"
        class="p-5"
        v-model="openTab"
    >
      <template #item="{item}">
        <div v-if="item.label === 'Informationen'" class="flex mt-5">
          <div class="w-1/2 mr-5">
            <UCard >
              <div class="text-wrap">
                <p>Kundennummer: {{itemInfo.customerNumber}}</p>
                <p>Typ: {{itemInfo.isCompany ? 'Firma' : 'Privatperson'}}</p>
                <p v-if="itemInfo.infoData.street">Straße + Hausnummer: {{itemInfo.infoData.street}}</p>
                <p v-if="itemInfo.infoData.zip && itemInfo.infoData.city">PLZ + Ort: {{itemInfo.infoData.zip}} {{itemInfo.infoData.city}}</p>
                <p v-if="itemInfo.infoData.tel">Telefon: {{itemInfo.infoData.tel}}</p>
                <p v-if="itemInfo.infoData.email">E-Mail: {{itemInfo.infoData.email}}</p>
                <p v-if="itemInfo.infoData.web">Web: {{itemInfo.infoData.web}}</p>
                <p v-if="itemInfo.infoData.ustid">USt-Id: {{itemInfo.infoData.ustid}}</p>
                <p>Notizen:<br> {{itemInfo.notes}}</p>
              </div>

            </UCard>
            <UCard class="mt-5">
              <Toolbar>
                <UButton
                    @click="router.push(`/contacts/create?customer=${itemInfo.id}`)"
                >
                  + Ansprechpartner
                </UButton>
              </Toolbar>
              <UTable
                  :rows="dataStore.getContactsByCustomerId(itemInfo.id)"
                  @select="(row) => router.push(`/contacts/show/${row.id}`)"
                  :columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
                  :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"

              >

              </UTable>
            </UCard>
          </div>
          <div class="w-1/2">
            <UCard class="h-full">
              <HistoryDisplay
                  type="customer"
                  v-if="itemInfo"
                  :element-id="itemInfo.id"
                  :render-headline="true"
              />
            </UCard>
          </div>

        </div>



        <UCard class="mt-5" v-else>

          <div v-if="item.label === 'Projekte'">

          </div>
          <div v-else-if="item.label === 'Objekte'">
            <Toolbar>
              <UButton
                  @click="router.push(`/plants/create?customer=${itemInfo.id}`)"
              >
                + Objekt
              </UButton>
            </Toolbar>
            <UTable
                :rows="dataStore.getPlantsByCustomerId(itemInfo.id)"
                @select="(row) => router.push(`/plants/show/${row.id}`)"
                :columns="[{label: 'Name', key: 'name'}]"
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"

            >

            </UTable>
          </div>
          <div v-else-if="item.label === 'Verträge'">
            <Toolbar>
              <UButton
                  @click="router.push(`/contracts/create?customer=${itemInfo.id}`)"
              >
                + Vertrag
              </UButton>
            </Toolbar>
            <UTable
                :rows="dataStore.getContractsByCustomerId(itemInfo.id)"
                @select="(row) => router.push(`/contracts/show/${row.id}`)"
                :columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"

            >

            </UTable>
          </div>
        </UCard>

      </template>
    </UTabs>
    <UForm v-else-if="mode === 'edit' || mode === 'create'" class="p-5">
      <UFormGroup
          label="Name:"
      >
        <UInput
            v-model="itemInfo.name"
        />
      </UFormGroup>

      <UFormGroup
          label="Kundennummer:"
      >
        <UInput
            v-model="itemInfo.customerNumber"
            placeholder="Leer lassen für automatisch generierte Nummer"
        />
      </UFormGroup>

      <UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
        <UFormGroup
            label="Kunde aktiv:"
        >
          <UCheckbox
              v-model="itemInfo.active"
          />
        </UFormGroup>
      </UTooltip>
      <UFormGroup
          label="Firmenkunde:"
      >
        <UCheckbox
            v-model="itemInfo.isCompany"
        />
      </UFormGroup>
      <UFormGroup
          label="Notizen:"
      >
        <UTextarea
            v-model="itemInfo.notes"
        />
      </UFormGroup>

      <UFormGroup
          label="Straße + Hausnummer"
      >
        <UInput
            v-model="itemInfo.infoData.street"
        />
      </UFormGroup>
      <UFormGroup
          label="Adresszusatz"
      >
        <UInput
            v-model="itemInfo.infoData.special"
        />
      </UFormGroup>
      <UFormGroup
          label="Postleitzahl"
      >
        <UInput
            v-model="itemInfo.infoData.zip"
            @focusout="setCityByZip"
        />
      </UFormGroup>
      <UFormGroup
          label="Ort"
      >
        <UInput
            v-model="itemInfo.infoData.city"
        />
      </UFormGroup>
      <UFormGroup
          label="Land"
      >
        <USelectMenu
            :options="['Deutschland','Niederlande','Belgien','Italien', 'Frankreich','Irland','USA','Spanien', 'Schweden']"
            v-model="itemInfo.infoData.country"
        />
      </UFormGroup>

      <UFormGroup
          label="Telefon:"
      >
        <UInput
            v-model="itemInfo.infoData.tel"
        />
      </UFormGroup>
      <UFormGroup
          label="E-Mail:"
      >
        <UInput
            v-model="itemInfo.infoData.email"
        />
      </UFormGroup>
      <UFormGroup
          label="Webseite:"
      >
        <UInput
            v-model="itemInfo.infoData.web"
        />
      </UFormGroup>
      <UFormGroup
          label="USt-Id:"
      >
        <UInput
            v-model="itemInfo.infoData.ustid"
        />
      </UFormGroup>
      <UFormGroup
          label="Berechtigte Benutzer:"
      >
        <USelectMenu
            v-model="itemInfo.profiles"
            :options="profileStore.profiles"
            option-attribute="fullName"
            value-attribute="id"
            searchable
            multiple
            :search-attributes="['fullName']"
        >
          <template #label>
            {{itemInfo.profiles.length > 0 ? itemInfo.profiles.map(i => profileStore.getProfileById(i).fullName).join(", ") : "Kein Benutzer ausgewählt"}}
          </template>
        </USelectMenu>
      </UFormGroup>
    </UForm>
  </UDashboardPanelContent>




</template>

<style scoped>

</style>