This commit is contained in:
2023-12-04 20:24:01 +01:00
parent 68a5775717
commit ef9105e286
9 changed files with 443 additions and 134 deletions

View File

@@ -3,46 +3,28 @@
<!-- TODO: Kontakte erstellen und dem Kunden zuweisen -->
<div id="left">
<UButton @click="showCreateCustomer = true">+ Kunde</UButton>
<UModal v-model="showCreateCustomer">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
Kunde erstellen
</template>
<UButton @click="mode = 'create'">+ Kunde</UButton>
<UForm @submit="createCustomer">
<UFormGroup label="Name:" required>
<UInput v-model="customerInfo.name"/>
</UFormGroup>
<UFormGroup label="Kundenummer:" required>
<UInput type="number" v-model="customerInfo.customerNumber"/>
</UFormGroup>
<UButton type="submit">
Erstellen
</UButton>
</UForm>
<div class="scrollList">
<a v-for="item in customers" @click="selectItem(item)">
<UCard class="listItem">
<UBadge>{{item.customerNumber}}</UBadge> {{item.name}}
</UCard>
</a>
</div>
</UCard>
</UModal>
<a v-for="item in customers" @click="selectItem(item)">
<UCard class="listItem">
<UBadge>{{item.customerNumber}}</UBadge> {{item.name}}
</UCard>
</a>
</div>
<div id="right">
<UCard v-if="selectedItem.id">
<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>
@@ -56,9 +38,138 @@
<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>
<!-- TODO: Scrollcontainer -->
</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>
@@ -70,7 +181,7 @@ definePageMeta({
})
const supabase = useSupabaseClient()
const toast = useToast()
const {customers } = storeToRefs(useDataStore())
const {fetchCustomers} = useDataStore()
@@ -78,17 +189,19 @@ const {fetchCustomers} = useDataStore()
let showCreateCustomer = ref(false)
let customerInfo = ref({
name: "",
customerNumber: 0
customerNumber: 0,
infoData: {}
})
const mode = ref("show")
let selectedItem = ref({})
const selectItem = (item) => {
selectedItem.value = item
window.scrollTo(0,0)
}
const createCustomer = async () => {
/*const createCustomer = async () => {
//await create('customers', customerInfo.value)
const {data,error} = await supabase
.from("customers")
@@ -101,8 +214,50 @@ const createCustomer = async () => {
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"
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"
toast.add({title: "Kunde erfolgreich gespeichert"})
fetchCustomers()
}
</script>
<style scoped>
@@ -112,8 +267,11 @@ const createCustomer = async () => {
}
#left {
width: 25vw;
}
#right {
width: 60vw;
padding-left: 3vw;