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

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

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

//Store
const {customers, contacts } = storeToRefs(useDataStore())
const {fetchCustomers, getCustomerById, getContactsByCustomerId} = useDataStore()

let currentCustomer = null



//Working
const mode = ref(route.params.mode || "show")
const customerInfo = ref({
  name: "",
  customerNumber: 0,
  infoData: {},
  active: true
})

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

  if(mode.value === "edit") customerInfo.value = currentCustomer



}

const createCustomer = async () => {
  const {data,error} = await supabase
      .from("customers")
      .insert([customerInfo.value])
      .select()

  if(error) {
    console.log(error)
  } else {
    mode.value = "show"
    customerInfo.value = {
      id: 0,
      name: "",
      infoData: {}
    }
    toast.add({title: "Kunde erfolgreich erstellt"})
    await fetchCustomers()
    router.push(`/customers/show/${data[0].id}`)
    setupPage()
  }
}

const editCustomer = async () => {
  router.push(`/customers/edit/${currentCustomer.id}`)
  setupPage()
}

const cancelEditorCreate = () => {
  mode.value = "show"
  customerInfo.value = {
    id: 0,
    name: "",
    infoData: {}
  }
}

const updateCustomer = async () => {
  const {error} = await supabase
      .from("customers")
      .update(customerInfo.value)
      .eq('id',customerInfo.value.id)
  console.log(error)
  mode.value = "show"
  customerInfo.value = {
    id: 0,
    name: "",
    infoData: {}
  }
  toast.add({title: "Kunde erfolgreich gespeichert"})
  fetchCustomers()
}



setupPage()
</script>

<template>
  <div>
    <UCard v-if="currentCustomer && mode == 'show'" >
      <template #header>
        <UBadge
            v-if="currentCustomer.active"
        >
          Kunde aktiv
        </UBadge>
        <UBadge
          v-else
          color="red"
        >
          Kunde gesperrt
        </UBadge>
        {{currentCustomer.name}}
      </template>

      Kundennummer: {{currentCustomer.customerNumber}} <br>

      <UDivider
          class="my-2"
      />

      Informationen:<br>
      {{currentCustomer.infoData}}<br>

      <UDivider
        class="my-2"
      />

      Notizen:<br>
      {{currentCustomer.notes}}<br>

      <UDivider
        class="my-2"
      />

      Kontakte: <br>
      <table>
        <tr>
          <th>Anrede</th>
          <th>Name</th>
          <th>Rolle</th>
        </tr>
        <tr v-for="contact in getContactsByCustomerId(currentCustomer.id)">
          <td>{{contact.salutation}}</td>
          <td>{{contact.fullName}}</td>
          <td>{{contact.role}}</td>
        </tr>
      </table>

<!--      Kontakte:<br>
      &lt;!&ndash;        <ul>
      <li v-for="contact in currentCustomer.contacts.data">{{contact.lastName}}, {{contact.firstName}}</li>
    </ul>&ndash;&gt;
      &lt;!&ndash;        {{currentCustomer.contacts.data}}&ndash;&gt;
      <br>
      Projekte:<br>
      &lt;!&ndash;        <ul>
      <li v-for="project in currentCustomer.projects.data"><router-link :to="'/projects?id=' + project.id">{{project.name}}</router-link></li>
    </ul>&ndash;&gt;-->



      <template #footer>
        <UButton
            v-if="mode == 'show' && currentCustomer.id"
            @click="editCustomer"
        >
          Bearbeiten
        </UButton>
        <UButton
            color="red"
            class="ml-2"
            disabled
        >
          Archivieren
        </UButton>
        <!-- TODO: Kunde archivieren        -->
      </template>



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

      <UFormGroup
          label="Name:"
      >
        <UInput
            v-model="customerInfo.name"
        />
      </UFormGroup>

      <UFormGroup
          label="Kundennummer:"
      >
        <UInput
            v-model="customerInfo.customerNumber"
        />
      </UFormGroup>

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

      <UFormGroup
          label="Straße + Hausnummer"
      >
        <UInput
            v-model="customerInfo.infoData.street"
        />
      </UFormGroup>
      <UFormGroup
          label="Postleitzahl"
      >
        <UInput
            v-model="customerInfo.infoData.zip"
        />
      </UFormGroup>
      <UFormGroup
          label="Ort"
      >
        <UInput
            v-model="customerInfo.infoData.city"
        />
      </UFormGroup>

      <UFormGroup
          label="Telefon:"
      >
        <UInput
            v-model="customerInfo.infoData.tel"
        />
      </UFormGroup>
      <UFormGroup
          label="E-Mail:"
      >
        <UInput
            v-model="customerInfo.infoData.email"
        />
      </UFormGroup>
      <UFormGroup
          label="Webseite:"
      >
        <UInput
            v-model="customerInfo.infoData.web"
        />
      </UFormGroup>
      <UFormGroup
          label="USt-Id:"
      >
        <UInput
            v-model="customerInfo.infoData.ustid"
        />
      </UFormGroup>

      <template #footer>
        <UButton
            v-if="mode == 'edit'"
            @click="updateCustomer"
        >
          Speichern
        </UButton>
        <UButton
            v-else-if="mode == 'create'"
            @click="createCustomer"
        >
          Erstellen
        </UButton>
        <UButton
            @click="cancelEditorCreate"
            color="red"
            class="ml-2"
        >
          Abbrechen
        </UButton>
      </template>

    </UCard>
  </div>
</template>

<style scoped>
td {
  padding: 0.2em;
}
</style>