FEDEO/spaces/pages/customers.vue

<template>
  <div id="main">
<!-- TODO: Kontakte erstellen und dem Kunden zuweisen    -->
    <div id="left">

      <UButton @click="mode = 'create'">+ Kunde</UButton>

      <div class="scrollList">
        <a v-for="item in customers" @click="selectItem(item)">
          <UCard class="listItem">
            <UBadge>{{item.customerNumber}}</UBadge> {{item.name}}
          </UCard>
        </a>
      </div>




    </div>
    <div id="right">
            <UCard v-if="selectedItem.id && mode == 'show'" >
        <template #header>
          <UBadge>{{selectedItem.customerNumber}}</UBadge> {{selectedItem.name}}
        </template>

        {{selectedItem.infoData}}<br>

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

        <br><br>

        <template #footer>
          <UButton
              v-if="mode == 'show' && selectedItem.id"
              @click="editCustomer"
          >
            Bearbeiten
          </UButton>
          <UButton
              @click="cancelEditorCreate"
              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>
  </div>
</template>

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

const supabase = useSupabaseClient()
const toast = useToast()
const {customers } = storeToRefs(useDataStore())
const {fetchCustomers} = useDataStore()


let showCreateCustomer = ref(false)
let customerInfo = ref({
  name: "",
  customerNumber: 0,
  infoData: {}
})

const mode = ref("show")
let selectedItem = ref({})

const selectItem = (item) => {
  selectedItem.value = item
  window.scrollTo(0,0)
}

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

  console.log(error)


  customerInfo.value = {}
  showCreateCustomer.value = false
  fetchCustomers()
}*/


const createCustomer = async () => {
  const {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"})
    fetchCustomers()
  }
}

const editCustomer = async () => {
  mode.value = 'edit';
  customerInfo.value = selectedItem.value
}

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()
}


</script>

<style scoped>
#main {
  display: flex;
  flex-direction: row;
}
#left {
  width: 25vw;

}



#right {
  width: 60vw;
  padding-left: 3vw;
}


</style>