Changed to new Layout System
This commit is contained in:
@@ -6,7 +6,6 @@ definePageMeta({
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
@@ -14,8 +13,6 @@ const id = ref(route.params.id ? route.params.id : null )
|
||||
|
||||
let currentItem = ref(null)
|
||||
|
||||
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({
|
||||
@@ -65,15 +62,6 @@ const setupPage = () => {
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
const editCustomer = async () => {
|
||||
router.push(`/vehicles/edit/${currentItem.value.id}`)
|
||||
setupPage()
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
@@ -85,20 +73,7 @@ const cancelEditorCreate = () => {
|
||||
|
||||
}
|
||||
|
||||
const updateItem = async () => {
|
||||
const {error} = await supabase
|
||||
.from("vehicles")
|
||||
.update(itemInfo.value)
|
||||
.eq('id',itemInfo.value.id)
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
|
||||
router.push(`/vehicles/show/${currentItem.value.id}`)
|
||||
toast.add({title: "Fahrzeug erfolgreich gespeichert"})
|
||||
dataStore.fetchVehicles()
|
||||
}
|
||||
}
|
||||
|
||||
const getRowAmount = (row) => {
|
||||
let amount = 0
|
||||
@@ -115,148 +90,123 @@ setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UCard v-if="currentItem && mode == 'show'" >
|
||||
<template #header>
|
||||
<UBadge
|
||||
v-if="currentItem.active"
|
||||
>
|
||||
Fahrzeug aktiv
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.licensePlate : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('vehicles',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('vehicles',itemInfo)"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="cancelEditorCreate"
|
||||
color="red"
|
||||
class="ml-2"
|
||||
v-if="mode === 'edit' || mode === 'create'"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="mode === 'show'"
|
||||
@click="router.push(`/vehicles/edit/${currentItem.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
:items="tabItems"
|
||||
v-if="mode === 'show'"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<div v-if="item.label === 'Informationen'">
|
||||
Typ: {{currentItem.type}} <br>
|
||||
Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Eingangsrechnungen'">
|
||||
<UTable
|
||||
:rows="dataStore.getIncomingInvoicesByVehicleId(currentItem.id)"
|
||||
:columns="incomingInvoicesColumns"
|
||||
@select="(row) => router.push('/receipts/show/' + row.id)"
|
||||
>
|
||||
Fahrzeug gesperrt
|
||||
</UBadge>
|
||||
{{currentItem.licensePlate}}
|
||||
</template>
|
||||
|
||||
<UTabs :items="tabItems">
|
||||
<template #item="{item}">
|
||||
<div v-if="item.label === 'Informationen'">
|
||||
<InputGroup class="mb-3">
|
||||
<UButton
|
||||
@click="editCustomer"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
Typ: {{currentItem.type}} <br>
|
||||
Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Eingangsrechnungen'">
|
||||
<UTable
|
||||
:rows="dataStore.getIncomingInvoicesByVehicleId(currentItem.id)"
|
||||
:columns="incomingInvoicesColumns"
|
||||
@select="(row) => router.push('/receipts/show/' + row.id)"
|
||||
>
|
||||
<template #vendor-data="{row}">
|
||||
{{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ""}}
|
||||
</template>
|
||||
<template #date-data="{row}">
|
||||
{{dayjs(row.date).format("DD.MM.YYYY")}}
|
||||
</template>
|
||||
<template #accounts-data="{row}">
|
||||
{{getRowAmount(row) ? String(getRowAmount(row).toFixed(2)).replace('.',',') + " €" : ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Dokumente'">
|
||||
<InputGroup>
|
||||
<DocumentUpload
|
||||
type="vehicle"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<DocumentList
|
||||
:documents="dataStore.getDocumentsByVehicleId(currentItem.id)"
|
||||
/>
|
||||
</div>
|
||||
<template #vendor-data="{row}">
|
||||
{{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ""}}
|
||||
</template>
|
||||
</UTabs>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</UCard>
|
||||
<UCard v-else-if="mode == 'edit' || mode == 'create'" >
|
||||
<template #header v-if="mode === 'edit'">
|
||||
{{itemInfo.licensePlate}}
|
||||
</template>
|
||||
|
||||
<UFormGroup
|
||||
label="Kennzeichen:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.licensePlate"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Fahrzeug aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.type"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Fahrer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.driver"
|
||||
:options="[{id: null, fullName: 'Kein Fahrer'},...dataStore.profiles]"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.profiles.find(profile => profile.id === itemInfo.driver) ? dataStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
|
||||
<template #date-data="{row}">
|
||||
{{dayjs(row.date).format("DD.MM.YYYY")}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<template #accounts-data="{row}">
|
||||
{{getRowAmount(row) ? String(getRowAmount(row).toFixed(2)).replace('.',',') + " €" : ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Dokumente'">
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="vehicle"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</Toolbar>
|
||||
|
||||
<DocumentList
|
||||
:documents="dataStore.getDocumentsByVehicleId(currentItem.id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UTabs>
|
||||
<UForm
|
||||
v-else-if="mode == 'edit' || mode == 'create'"
|
||||
class="p-5"
|
||||
>
|
||||
|
||||
<UFormGroup
|
||||
label="Kennzeichen:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.licensePlate"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="mode == 'edit'"
|
||||
@click="dataStore.updateItem('vehicles',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode == 'create'"
|
||||
@click="dataStore.createNewItem('vehicles',itemInfo)"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="cancelEditorCreate"
|
||||
color="red"
|
||||
class="ml-2"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
</UCard>
|
||||
</div>
|
||||
<UFormGroup
|
||||
label="Fahrzeug aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.type"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Fahrer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.driver"
|
||||
:options="[{id: null, fullName: 'Kein Fahrer'},...dataStore.profiles]"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.profiles.find(profile => profile.id === itemInfo.driver) ? dataStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user