FEDEO/spaces/pages/vendors/[mode]/[[id]].vue

<script setup>
import HistoryDisplay from "~/components/HistoryDisplay.vue";

definePageMeta({
  middleware: "auth"
})

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

let currentItem = ref(null)



//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
  infoData: {}
})

//Functions
const setupPage = () => {
  if (mode.value === "show" || mode.value === "edit") {
    currentItem.value = dataStore.getVendorById(Number(useRoute().params.id))
  }

  if (mode.value === "edit") itemInfo.value = currentItem.value
}

const editItem = async () => {
  router.push(`/vendors/edit/${currentItem.id}`)
  setupPage()
}

const cancelEditorCreate = () => {
  router.push(`/vendors/`)
}

const updateItem = async () => {
  const {error} = await supabase
      .from("vendors")
      .update(itemInfo.value)
      .eq('id',itemInfo.value.id)

  if(error) {
    console.log(error)
  } else {
    toast.add({title: "Lieferant erfolgreich gespeichert"})
    router.push(`/vendors/show/${currentItem.value.id}`)
    dataStore.fetchVendors()
  }


}



setupPage()
</script>

<template>
  <div>
    <UCard v-if="currentItem && mode == 'show'" >
      <template #header>
        {{currentItem.name}}
      </template>

      <InputGroup>
        <UButton
            @click="router.push(`/contacts/create?vendor=${currentItem.id}`)"
        >
          + Ansprechpartner
        </UButton>
      </InputGroup>

      Information: <br>
      <div v-if="currentItem.infoData">
        <span v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}<br></span>
        <span v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}<br></span>
        <span v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}<br></span>
        <span v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}<br></span>
        <span v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}<br></span>
        <span v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}<br></span>
      </div>

      <UDivider class="my-3"/>

      <div v-if="dataStore.getContactsByVendorId(currentItem.id).length > 0">
        Kontakte: <br>

        <ul>
          <li
              v-for="contact in dataStore.getContactsByVendorId(currentItem.id)"
          >
            <router-link :to="'/contacts/show/' + contact.id">{{contact.salutation}} {{contact.fullName}} - {{contact.role}}</router-link>
          </li>
        </ul>
      </div>

      <template #footer>
        <UButton
            v-if="mode == 'show' && currentItem.id"
            @click="editItem"
        >
          Bearbeiten
        </UButton>
        <UButton
            color="red"
            class="ml-2"
            disabled
        >
          Archivieren
        </UButton>
      </template>



    </UCard>
    <UCard v-else-if="mode === 'edit' || mode === 'create'" >
      <template #header v-if="mode === 'edit'">
        {{itemInfo.name}}
      </template>

      <UFormGroup
          label="Name:"
      >
        <UInput
            v-model="itemInfo.name"
        />
      </UFormGroup>
      <UFormGroup
          label="Lieferantennr.:"
      >
        <UInput
            v-model="itemInfo.vendorNumber"
            placeholder="Leer lassen für automatisch generierte Nummer"
        />
      </UFormGroup>
      <UFormGroup
          label="Straße + Hausnummer"
      >
        <UInput
            v-model="itemInfo.infoData.street"
        />
      </UFormGroup>
      <UFormGroup
          label="Postleitzahl"
      >
        <UInput
            v-model="itemInfo.infoData.zip"
        />
      </UFormGroup>
      <UFormGroup
          label="Ort"
      >
        <UInput
            v-model="itemInfo.infoData.city"
        />
      </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>


      <template #footer>
        <UButton
            v-if="mode == 'edit'"
            @click="updateItem"
        >
          Speichern
        </UButton>
        <UButton
            v-else-if="mode == 'create'"
            @click="dataStore.createNewItem('vendors',itemInfo)"
        >
          Erstellen
        </UButton>
        <UButton
            @click="cancelEditorCreate"
            color="red"
            class="ml-2"
        >
          Abbrechen
        </UButton>
      </template>

    </UCard>

    <HistoryDisplay
        type="vendor"
        v-if="currentItem"
        :element-id="currentItem.id"
    />
  </div>
</template>

<style scoped>

</style>