121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
<template>
|
|
<div id="main">
|
|
<!-- 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>
|
|
|
|
<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>
|
|
|
|
|
|
</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">
|
|
<template #header>
|
|
<UBadge>{{selectedItem.customerNumber}}</UBadge> {{selectedItem.name}}
|
|
</template>
|
|
|
|
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>
|
|
|
|
|
|
|
|
<!-- TODO: Scrollcontainer -->
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
const supabase = useSupabaseClient()
|
|
|
|
const {customers } = storeToRefs(useDataStore())
|
|
|
|
|
|
let showCreateCustomer = ref(false)
|
|
let customerInfo = ref({
|
|
name: "",
|
|
customerNumber: 0
|
|
})
|
|
|
|
|
|
let selectedItem = ref({})
|
|
|
|
const selectItem = (item) => {
|
|
selectedItem.value = item
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
#main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
#left {
|
|
width: 25vw;
|
|
}
|
|
|
|
#right {
|
|
width: 60vw;
|
|
padding-left: 3vw;
|
|
}
|
|
|
|
|
|
</style> |