flfeders/FEDEO
2
1
Fork 0
Code Issues 63 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

Changed Customers to Multi Page with Route Params to add mobile performance

Browse Source
This commit is contained in:
Florian Federspiel
2023-12-06 22:06:57 +01:00
parent 987f8a0bec
commit ce3a013f86
4 changed files with 333 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
spaces/pages/customers.vue
View File

@@ -1,291 +0,0 @@
<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>

283
spaces/pages/customers/[mode]/[[id]].vue Normal file
View File

@@ -0,0 +1,283 @@
<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 } = storeToRefs(useDataStore())
const {fetchCustomers, getCustomerById} = useDataStore()
let currentCustomer = null
//Working
const mode = ref(route.params.mode || "show")
const customerInfo = ref({
name: "",
customerNumber: 0,
infoData: {}
})
//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>
<!-- 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
@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>
</template>
<style scoped>
</style>

49
spaces/pages/customers/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div id="main">
<!-- TODO: Kontakte erstellen und dem Kunden zuweisen -->
<UButton @click="router.push(`/customers/create/`)">+ Kunde</UButton>
<UTable
:rows="customers"
:columns="customerColumns"
@select="selectCustomer"
/>
</div>
</template>
<script setup>
definePageMeta({
middleware: "auth"
})
const router = useRouter()
const {customers } = storeToRefs(useDataStore())
const mode = ref("show")
const customerColumns = [
{
key: 'customerNumber',
label: "Kundennr.",
sortable: true
},
{
key: "name",
label: "Name",
sortable: true
}
]
const selectCustomer = (customer) => {
console.log(customer)
router.push(`/customers/show/${customer.id} `)
}
</script>
<style scoped>
</style>

1
spaces/stores/data.ts
View File

@@ -120,6 +120,7 @@ export const useDataStore = defineStore('data', {
movementsBySpace: (state) => (spaceId:number) => state.movements.filter(move => move.spaceId === spaceId), movementsBySpace: (state) => (spaceId:number) => state.movements.filter(move => move.spaceId === spaceId),
getProductById: (state) => (productId:number) => state.products.find(product => product.id === productId), getProductById: (state) => (productId:number) => state.products.find(product => product.id === productId),
getProjectById: (state) => (projectId:number) => state.projects.find(project => project.id === projectId), getProjectById: (state) => (projectId:number) => state.projects.find(project => project.id === projectId),
getCustomerById: (state) => (customerId:number) => state.customers.find(customer => customer.id === customerId),
getFormSubmitsWithLabelProp: (state) => (state.formSubmits.map(submit => {return{...submit, label: submit.id}})), getFormSubmitsWithLabelProp: (state) => (state.formSubmits.map(submit => {return{...submit, label: submit.id}})),
getResources: (state) => { getResources: (state) => {
return [ return [