Changes
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user