Introduced EntityEdit.vue
Introduced EntityShow.vue Deprecated following as non standardEntity contracts, customers, vendors, projects, plants, vehicles
This commit is contained in:
@@ -252,92 +252,95 @@ setup()
|
||||
</template>
|
||||
|
||||
<table class="w-full" v-if="itemInfo.id">
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td>
|
||||
<span class="font-semibold">Buchungsdatum:</span>
|
||||
</td>
|
||||
<td>
|
||||
{{dayjs(itemInfo.date).format("DD.MM.YYYY")}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td>
|
||||
<span class="font-semibold">Wertstellungsdatum:</span>
|
||||
</td>
|
||||
<td>
|
||||
{{dayjs(itemInfo.valueDate).format("DD.MM.YYYY")}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between text-right">
|
||||
<td>
|
||||
<span class="font-semibold">Partner:</span>
|
||||
</td>
|
||||
<td>
|
||||
{{itemInfo.amount > 0 ? itemInfo.debName : itemInfo.credName}}
|
||||
<tbody>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td>
|
||||
<span class="font-semibold">Buchungsdatum:</span>
|
||||
</td>
|
||||
<td>
|
||||
{{dayjs(itemInfo.date).format("DD.MM.YYYY")}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td>
|
||||
<span class="font-semibold">Wertstellungsdatum:</span>
|
||||
</td>
|
||||
<td>
|
||||
{{dayjs(itemInfo.valueDate).format("DD.MM.YYYY")}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between text-right">
|
||||
<td>
|
||||
<span class="font-semibold">Partner:</span>
|
||||
</td>
|
||||
<td>
|
||||
{{itemInfo.amount > 0 ? itemInfo.debName : itemInfo.credName}}
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td>
|
||||
<span class="font-semibold">Partner IBAN:</span>
|
||||
</td>
|
||||
<td>
|
||||
{{itemInfo.amount > 0 ? separateIBAN(itemInfo.debIban) : separateIBAN(itemInfo.credIban)}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td>
|
||||
<span class="font-semibold">Konto:</span>
|
||||
</td>
|
||||
<td>
|
||||
{{dataStore.getBankAccountById(itemInfo.account) ? dataStore.getBankAccountById(itemInfo.account).name || separateIBAN(dataStore.getBankAccountById(itemInfo.account).iban) : ""}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td colspan="2">
|
||||
<span class="font-semibold">Verknüpfte Dokumente:</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="flex-row flex justify-between mb-3"
|
||||
v-for="item in itemInfo.statementallocations"
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td>
|
||||
<span class="font-semibold">Partner IBAN:</span>
|
||||
</td>
|
||||
<td>
|
||||
{{itemInfo.amount > 0 ? separateIBAN(itemInfo.debIban) : separateIBAN(itemInfo.credIban)}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td>
|
||||
<span class="font-semibold">Konto:</span>
|
||||
</td>
|
||||
<td>
|
||||
{{dataStore.getBankAccountById(itemInfo.account) ? dataStore.getBankAccountById(itemInfo.account).name || separateIBAN(dataStore.getBankAccountById(itemInfo.account).iban) : ""}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td colspan="2">
|
||||
<span class="font-semibold">Verknüpfte Dokumente:</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="flex-row flex justify-between mb-3"
|
||||
v-for="item in itemInfo.statementallocations"
|
||||
>
|
||||
|
||||
<td>
|
||||
<!-- <span v-if="itemInfo.createdDocument"><nuxt-link :to="`/createDocument/show/${itemInfo.createdDocument}`">{{dataStore.createddocuments.find(i => i.id === itemInfo.createdDocument).documentNumber}}</nuxt-link></span>
|
||||
<span v-else-if="itemInfo.incomingInvoice"><nuxt-link :to="`/incominInvoices/show/${itemInfo.incomingInvoice}`">{{dataStore.getIncomingInvoiceById(itemInfo.incomingInvoice).reference}}</nuxt-link></span>-->
|
||||
<span v-if="item.cd_id">
|
||||
{{dataStore.getCreatedDocumentById(item.cd_id).documentNumber}}
|
||||
</span>
|
||||
<span v-else-if="item.ii_id">
|
||||
{{dataStore.getVendorById(dataStore.getIncomingInvoiceById(item.ii_id).vendor).name}} - {{dataStore.getIncomingInvoiceById(item.ii_id).reference}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<UButton
|
||||
variant="outline"
|
||||
icon="i-heroicons-arrow-right-end-on-rectangle"
|
||||
@click="router.push(`/createDocument/show/${item.cd_id}`)"
|
||||
v-if="item.cd_id"
|
||||
/>
|
||||
<UButton
|
||||
variant="outline"
|
||||
icon="i-heroicons-arrow-right-end-on-rectangle"
|
||||
@click="router.push(`/incominginvoices/show/${item.ii_id}`)"
|
||||
v-else-if="item.ii_id"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td colspan="2">
|
||||
<span class="font-semibold">Beschreibung:</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
{{itemInfo.text}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<td>
|
||||
<!-- <span v-if="itemInfo.createdDocument"><nuxt-link :to="`/createDocument/show/${itemInfo.createdDocument}`">{{dataStore.createddocuments.find(i => i.id === itemInfo.createdDocument).documentNumber}}</nuxt-link></span>
|
||||
<span v-else-if="itemInfo.incomingInvoice"><nuxt-link :to="`/incominInvoices/show/${itemInfo.incomingInvoice}`">{{dataStore.getIncomingInvoiceById(itemInfo.incomingInvoice).reference}}</nuxt-link></span>-->
|
||||
<span v-if="item.cd_id">
|
||||
{{dataStore.getCreatedDocumentById(item.cd_id).documentNumber}}
|
||||
</span>
|
||||
<span v-else-if="item.ii_id">
|
||||
{{dataStore.getVendorById(dataStore.getIncomingInvoiceById(item.ii_id).vendor).name}} - {{dataStore.getIncomingInvoiceById(item.ii_id).reference}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<UButton
|
||||
variant="outline"
|
||||
icon="i-heroicons-arrow-right-end-on-rectangle"
|
||||
@click="router.push(`/createDocument/show/${item.cd_id}`)"
|
||||
v-if="item.cd_id"
|
||||
/>
|
||||
<UButton
|
||||
variant="outline"
|
||||
icon="i-heroicons-arrow-right-end-on-rectangle"
|
||||
@click="router.push(`/incominginvoices/show/${item.ii_id}`)"
|
||||
v-else-if="item.ii_id"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="flex-row flex justify-between">
|
||||
<td colspan="2">
|
||||
<span class="font-semibold">Beschreibung:</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
{{itemInfo.text}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</UCard>
|
||||
|
||||
@@ -1388,379 +1388,379 @@ setupPage()
|
||||
|
||||
<table class="w-full" v-if="itemInfo.rows.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Pos.</th>
|
||||
<th>Name</th>
|
||||
<th>Menge</th>
|
||||
<th>Einheit</th>
|
||||
<th v-if="itemInfo.type !== 'deliveryNotes'">Preis</th>
|
||||
<th v-if="itemInfo.type !== 'deliveryNotes'">Steuer</th>
|
||||
<th v-if="itemInfo.type !== 'deliveryNotes'">Rabatt</th>
|
||||
<th>Beschreibung</th>
|
||||
<th v-if="itemInfo.type !== 'deliveryNotes'">Gesamt</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Pos.</th>
|
||||
<th>Name</th>
|
||||
<th>Menge</th>
|
||||
<th>Einheit</th>
|
||||
<th v-if="itemInfo.type !== 'deliveryNotes'">Preis</th>
|
||||
<th v-if="itemInfo.type !== 'deliveryNotes'">Steuer</th>
|
||||
<th v-if="itemInfo.type !== 'deliveryNotes'">Rabatt</th>
|
||||
<th>Beschreibung</th>
|
||||
<th v-if="itemInfo.type !== 'deliveryNotes'">Gesamt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
||||
<draggable
|
||||
v-model="itemInfo.rows"
|
||||
handle=".handle"
|
||||
tag="tbody"
|
||||
itemKey="pos"
|
||||
@end="setPosNumbers"
|
||||
>
|
||||
<template #item="{element: row}">
|
||||
<tr>
|
||||
<td>
|
||||
<UIcon
|
||||
class="handle"
|
||||
name="i-mdi-menu"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
v-if="row.mode === 'pagebreak'"
|
||||
colspan="9"
|
||||
>
|
||||
<UDivider/>
|
||||
</td>
|
||||
<td
|
||||
v-if="row.mode === 'text'"
|
||||
colspan="9"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.text"
|
||||
placeholder="Titel"
|
||||
maxlength="60"
|
||||
/>
|
||||
<UTextarea
|
||||
class="mt-2"
|
||||
v-model="row.description"
|
||||
placeholder="Text"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
v-if="!['pagebreak','text'].includes(row.mode)"
|
||||
>{{row.pos}}</td>
|
||||
<td
|
||||
class="w-120"
|
||||
v-if="row.mode === 'free'"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.text"
|
||||
placeholder="Name"
|
||||
class="min-w-40"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="w-120"
|
||||
v-else-if="row.mode === 'normal'"
|
||||
>
|
||||
<InputGroup class="w-full">
|
||||
<USelectMenu
|
||||
class="flex-auto"
|
||||
:options="products"
|
||||
:color="row.product ? 'primary' : 'rose'"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
searchable-placeholder="Suche ..."
|
||||
:search-attributes="['name']"
|
||||
v-model="row.product"
|
||||
@change="row.unit = products.find(i => i.id === row.product).unit,
|
||||
row.price = (products.find(i => i.id === row.product).sellingPrice || 0),
|
||||
row.description = products.find(i => i.id === row.product).description"
|
||||
>
|
||||
<template #label>
|
||||
<span class="truncate">{{row.product ? products.find(i => i.id === row.product).name : "Kein Produkt ausgewählt" }}</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<UButton
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
@click="showProductSelectionModal = true"
|
||||
<tbody>
|
||||
<draggable
|
||||
v-model="itemInfo.rows"
|
||||
handle=".handle"
|
||||
tag="tbody"
|
||||
itemKey="pos"
|
||||
@end="setPosNumbers"
|
||||
>
|
||||
<template #item="{element: row}">
|
||||
<tr>
|
||||
<td>
|
||||
<UIcon
|
||||
class="handle"
|
||||
name="i-mdi-menu"
|
||||
/>
|
||||
<UModal v-model="showProductSelectionModal">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Artikel Auswählen
|
||||
</template>
|
||||
|
||||
<InputGroup class="w-full">
|
||||
<UFormGroup label="Artikelkategorie:">
|
||||
<USelectMenu
|
||||
v-if="productcategories.length > 0"
|
||||
:options="[{name: 'Nicht zugeordnet',id:'not set'},...productcategories]"
|
||||
value-attribute="id"
|
||||
option-attribute="name"
|
||||
v-model="selectedProductcategorie"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
<UTable
|
||||
:rows="selectedProductcategorie !== 'not set' ? products.filter(i => i.productcategories.includes(selectedProductcategorie)) : products.filter(i => i.productcategories.length === 0)"
|
||||
:columns="[
|
||||
{key: 'name',label:'Name'},
|
||||
{key: 'manufacturer',label:'Hersteller'},
|
||||
{key: 'articleNumber',label:'Artikelnummer'},
|
||||
]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
|
||||
@select=" (i) => {
|
||||
row.product = i.id
|
||||
row.unit = products.find(i => i.id === row.product).unit,
|
||||
row.price = (products.find(i => i.id === row.product).sellingPrice || 0),
|
||||
row.description = products.find(i => i.id === row.product).description
|
||||
showProductSelectionModal = false}"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</InputGroup>
|
||||
|
||||
</td>
|
||||
<td
|
||||
class="w-120"
|
||||
v-else-if="row.mode === 'service'"
|
||||
>
|
||||
<InputGroup class="w-full">
|
||||
<USelectMenu
|
||||
class="flex-auto"
|
||||
:options="services"
|
||||
:color="row.service ? 'primary' : 'rose'"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
searchable-placeholder="Suche ..."
|
||||
:search-attributes="['name']"
|
||||
v-model="row.service"
|
||||
@change="row.unit = dataStore.getServiceById(row.service).unit,
|
||||
row.price = dataStore.getServiceById(row.service).sellingPrice || 0,
|
||||
row.description = dataStore.getServiceById(row.service).description"
|
||||
>
|
||||
<template #label>
|
||||
<span class="truncate">{{dataStore.getServiceById(row.service) ? dataStore.getServiceById(row.service).name : "Keine Leistung ausgewählt" }}</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<UButton
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
@click="showServiceSelectionModal = true"
|
||||
</td>
|
||||
<td
|
||||
v-if="row.mode === 'pagebreak'"
|
||||
colspan="9"
|
||||
>
|
||||
<UDivider/>
|
||||
</td>
|
||||
<td
|
||||
v-if="row.mode === 'text'"
|
||||
colspan="9"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.text"
|
||||
placeholder="Titel"
|
||||
maxlength="60"
|
||||
/>
|
||||
<UModal v-model="showServiceSelectionModal">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Leistung Auswählen
|
||||
<UTextarea
|
||||
class="mt-2"
|
||||
v-model="row.description"
|
||||
placeholder="Text"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
v-if="!['pagebreak','text'].includes(row.mode)"
|
||||
>{{row.pos}}</td>
|
||||
<td
|
||||
class="w-120"
|
||||
v-if="row.mode === 'free'"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.text"
|
||||
placeholder="Name"
|
||||
class="min-w-40"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="w-120"
|
||||
v-else-if="row.mode === 'normal'"
|
||||
>
|
||||
<InputGroup class="w-full">
|
||||
<USelectMenu
|
||||
class="flex-auto"
|
||||
:options="products"
|
||||
:color="row.product ? 'primary' : 'rose'"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
searchable-placeholder="Suche ..."
|
||||
:search-attributes="['name']"
|
||||
v-model="row.product"
|
||||
@change="row.unit = products.find(i => i.id === row.product).unit,
|
||||
row.price = (products.find(i => i.id === row.product).sellingPrice || 0),
|
||||
row.description = products.find(i => i.id === row.product).description"
|
||||
>
|
||||
<template #label>
|
||||
<span class="truncate">{{row.product ? products.find(i => i.id === row.product).name : "Kein Produkt ausgewählt" }}</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<UButton
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
@click="showProductSelectionModal = true"
|
||||
/>
|
||||
<UModal v-model="showProductSelectionModal">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Artikel Auswählen
|
||||
</template>
|
||||
|
||||
<InputGroup class="w-full">
|
||||
<UFormGroup label="Leistungskategorie:">
|
||||
<USelectMenu
|
||||
v-if="servicecategories.length > 0"
|
||||
:options="[{name: 'Nicht zugeordnet',id:'not set'},...servicecategories]"
|
||||
value-attribute="id"
|
||||
option-attribute="name"
|
||||
v-model="selectedServicecategorie"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
<UTable
|
||||
:rows="selectedServicecategorie !== 'not set' ? services.filter(i => i.servicecategories.includes(selectedServicecategorie)) : services.filter(i => i.servicecategories.length === 0)"
|
||||
:columns="[
|
||||
<InputGroup class="w-full">
|
||||
<UFormGroup label="Artikelkategorie:">
|
||||
<USelectMenu
|
||||
v-if="productcategories.length > 0"
|
||||
:options="[{name: 'Nicht zugeordnet',id:'not set'},...productcategories]"
|
||||
value-attribute="id"
|
||||
option-attribute="name"
|
||||
v-model="selectedProductcategorie"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
<UTable
|
||||
:rows="selectedProductcategorie !== 'not set' ? products.filter(i => i.productcategories.includes(selectedProductcategorie)) : products.filter(i => i.productcategories.length === 0)"
|
||||
:columns="[
|
||||
{key: 'name',label:'Name'},
|
||||
{key: 'serviceNumber',label:'Leistungsnummer'},
|
||||
{key: 'sellingPrice',label:'Verkaufspreis'},
|
||||
{key: 'manufacturer',label:'Hersteller'},
|
||||
{key: 'articleNumber',label:'Artikelnummer'},
|
||||
]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
|
||||
@select=" (i) => {
|
||||
row.service = i.id
|
||||
row.unit = dataStore.getServiceById(row.service).unit,
|
||||
row.price = dataStore.getServiceById(row.service).sellingPrice || 0,
|
||||
row.description = dataStore.getServiceById(row.service).description
|
||||
showServiceSelectionModal = false}"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
|
||||
@select=" (i) => {
|
||||
row.product = i.id
|
||||
row.unit = products.find(i => i.id === row.product).unit,
|
||||
row.price = (products.find(i => i.id === row.product).sellingPrice || 0),
|
||||
row.description = products.find(i => i.id === row.product).description
|
||||
showProductSelectionModal = false}"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</InputGroup>
|
||||
|
||||
</td>
|
||||
<td
|
||||
class="w-120"
|
||||
v-else-if="row.mode === 'service'"
|
||||
>
|
||||
<InputGroup class="w-full">
|
||||
<USelectMenu
|
||||
class="flex-auto"
|
||||
:options="services"
|
||||
:color="row.service ? 'primary' : 'rose'"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
searchable-placeholder="Suche ..."
|
||||
:search-attributes="['name']"
|
||||
v-model="row.service"
|
||||
@change="row.unit = dataStore.getServiceById(row.service).unit,
|
||||
row.price = dataStore.getServiceById(row.service).sellingPrice || 0,
|
||||
row.description = dataStore.getServiceById(row.service).description"
|
||||
>
|
||||
<template #label>
|
||||
<span class="truncate">{{dataStore.getServiceById(row.service) ? dataStore.getServiceById(row.service).name : "Keine Leistung ausgewählt" }}</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<UButton
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
@click="showServiceSelectionModal = true"
|
||||
/>
|
||||
<UModal v-model="showServiceSelectionModal">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Leistung Auswählen
|
||||
</template>
|
||||
|
||||
<InputGroup class="w-full">
|
||||
<UFormGroup label="Leistungskategorie:">
|
||||
<USelectMenu
|
||||
v-if="servicecategories.length > 0"
|
||||
:options="[{name: 'Nicht zugeordnet',id:'not set'},...servicecategories]"
|
||||
value-attribute="id"
|
||||
option-attribute="name"
|
||||
v-model="selectedServicecategorie"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
<UTable
|
||||
:rows="selectedServicecategorie !== 'not set' ? services.filter(i => i.servicecategories.includes(selectedServicecategorie)) : services.filter(i => i.servicecategories.length === 0)"
|
||||
:columns="[
|
||||
{key: 'name',label:'Name'},
|
||||
{key: 'serviceNumber',label:'Leistungsnummer'},
|
||||
{key: 'sellingPrice',label:'Verkaufspreis'},
|
||||
]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
|
||||
@select=" (i) => {
|
||||
row.service = i.id
|
||||
row.unit = dataStore.getServiceById(row.service).unit,
|
||||
row.price = dataStore.getServiceById(row.service).sellingPrice || 0,
|
||||
row.description = dataStore.getServiceById(row.service).description
|
||||
showServiceSelectionModal = false}"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</InputGroup>
|
||||
</td>
|
||||
<td
|
||||
class="w-20"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode)"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.quantity"
|
||||
type="number"
|
||||
:step="dataStore.units.find(i => i.id === row.unit) ? dataStore.units.find(i => i.id === row.unit).step : '1' "
|
||||
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="w-40"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode)"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="row.unit"
|
||||
:options="dataStore.units"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.units.find(i => i.id === row.unit) ? dataStore.units.find(i => i.id === row.unit).name : "Keine Einheit gewählt"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</td>
|
||||
<td
|
||||
class="w-40"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode) && itemInfo.type !== 'deliveryNotes'"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.price"
|
||||
type="number"
|
||||
step="0.001"
|
||||
:color="getRowMargin(row) > 0 ? 'primary' : 'rose'"
|
||||
>
|
||||
<template #trailing>
|
||||
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</td>
|
||||
<td
|
||||
class="w-40"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode)&& itemInfo.type !== 'deliveryNotes'"
|
||||
|
||||
>
|
||||
<USelectMenu
|
||||
:options="[19,7,0]"
|
||||
v-model="row.taxPercent"
|
||||
>
|
||||
<template #option="{option}">
|
||||
{{option}} %
|
||||
</template>
|
||||
<template #label>
|
||||
{{row.taxPercent}} %
|
||||
</template>
|
||||
</USelectMenu>
|
||||
|
||||
</td>
|
||||
<td
|
||||
class="w-40"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode)&& itemInfo.type !== 'deliveryNotes'"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.discountPercent"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0"
|
||||
>
|
||||
<template #trailing>
|
||||
<span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</td>
|
||||
<td
|
||||
class="w-40"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode)"
|
||||
>
|
||||
<UButton
|
||||
icon="i-heroicons-document-text"
|
||||
@click="row.showEdit = true"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-mdi-water-drop-outline"
|
||||
class="ml-3"
|
||||
v-if="row.agriculture"
|
||||
@click="row.showEditDiesel = true"
|
||||
/>
|
||||
<UModal v-model="row.showEdit">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Beschreibung bearbeiten
|
||||
</template>
|
||||
<UTextarea
|
||||
v-model="row.description"
|
||||
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</UTextarea>
|
||||
<template #footer>
|
||||
<UButton
|
||||
@click="row.showEdit = false"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
|
||||
|
||||
</UModal>
|
||||
</InputGroup>
|
||||
</td>
|
||||
<td
|
||||
class="w-20"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode)"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.quantity"
|
||||
type="number"
|
||||
:step="dataStore.units.find(i => i.id === row.unit) ? dataStore.units.find(i => i.id === row.unit).step : '1' "
|
||||
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
class="w-40"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode)"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="row.unit"
|
||||
:options="dataStore.units"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.units.find(i => i.id === row.unit) ? dataStore.units.find(i => i.id === row.unit).name : "Keine Einheit gewählt"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</td>
|
||||
<td
|
||||
class="w-40"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode) && itemInfo.type !== 'deliveryNotes'"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.price"
|
||||
type="number"
|
||||
step="0.001"
|
||||
:color="getRowMargin(row) > 0 ? 'primary' : 'rose'"
|
||||
>
|
||||
<template #trailing>
|
||||
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</td>
|
||||
<td
|
||||
class="w-40"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode)&& itemInfo.type !== 'deliveryNotes'"
|
||||
|
||||
>
|
||||
<USelectMenu
|
||||
:options="[19,7,0]"
|
||||
v-model="row.taxPercent"
|
||||
>
|
||||
<template #option="{option}">
|
||||
{{option}} %
|
||||
</template>
|
||||
<template #label>
|
||||
{{row.taxPercent}} %
|
||||
</template>
|
||||
</USelectMenu>
|
||||
|
||||
</td>
|
||||
<td
|
||||
class="w-40"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode)&& itemInfo.type !== 'deliveryNotes'"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.discountPercent"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0"
|
||||
>
|
||||
<template #trailing>
|
||||
<span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</td>
|
||||
<td
|
||||
class="w-40"
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode)"
|
||||
>
|
||||
<UButton
|
||||
icon="i-heroicons-document-text"
|
||||
@click="row.showEdit = true"
|
||||
/>
|
||||
<UButton
|
||||
icon="i-mdi-water-drop-outline"
|
||||
class="ml-3"
|
||||
v-if="row.agriculture"
|
||||
@click="row.showEditDiesel = true"
|
||||
/>
|
||||
<UModal v-model="row.showEdit">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Beschreibung bearbeiten
|
||||
</template>
|
||||
<UTextarea
|
||||
v-model="row.description"
|
||||
|
||||
>
|
||||
|
||||
</UTextarea>
|
||||
<template #footer>
|
||||
<UButton
|
||||
@click="row.showEdit = false"
|
||||
<UModal v-model="row.showEditDiesel">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Dieselverbrauch bearbeiten
|
||||
</template>
|
||||
<UFormGroup
|
||||
label="Menge:"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
|
||||
|
||||
</UModal>
|
||||
<UModal v-model="row.showEditDiesel">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Dieselverbrauch bearbeiten
|
||||
</template>
|
||||
<UFormGroup
|
||||
label="Menge:"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.agriculture.dieselUsage"
|
||||
<UInput
|
||||
v-model="row.agriculture.dieselUsage"
|
||||
>
|
||||
<template #trailing>
|
||||
L
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Preis:"
|
||||
>
|
||||
<template #trailing>
|
||||
L
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Preis:"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.agriculture.dieselPrice"
|
||||
type="number"
|
||||
steps="0.01"
|
||||
>
|
||||
<template #trailing>
|
||||
€/L
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<template #footer>
|
||||
<UButton
|
||||
@click="row.showEditDiesel = false,
|
||||
processDieselPosition()"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
<UInput
|
||||
v-model="row.agriculture.dieselPrice"
|
||||
type="number"
|
||||
steps="0.01"
|
||||
>
|
||||
<template #trailing>
|
||||
€/L
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<template #footer>
|
||||
<UButton
|
||||
@click="row.showEditDiesel = false,
|
||||
processDieselPosition()"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
|
||||
|
||||
</UModal>
|
||||
</td>
|
||||
<td
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode) && itemInfo.type !== 'deliveryNotes'"
|
||||
>
|
||||
</UModal>
|
||||
</td>
|
||||
<td
|
||||
v-if="!['pagebreak','title','text'].includes(row.mode) && itemInfo.type !== 'deliveryNotes'"
|
||||
>
|
||||
|
||||
<p class="text-right font-bold whitespace-nowrap"><span v-if="row.discountPercent !== 0" class="line-through mr-2 text-rose-500">{{getRowAmountUndiscounted(row)}} €</span>{{getRowAmount(row)}} €</p>
|
||||
</td>
|
||||
<td
|
||||
v-if="row.mode === 'title'"
|
||||
colspan="8"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.text"
|
||||
placeholder="Titel"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<UButton
|
||||
variant="ghost"
|
||||
color="rose"
|
||||
icon="i-heroicons-x-mark-16-solid"
|
||||
@click="removePosition(row.id)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</draggable>
|
||||
<p class="text-right font-bold whitespace-nowrap"><span v-if="row.discountPercent !== 0" class="line-through mr-2 text-rose-500">{{getRowAmountUndiscounted(row)}} €</span>{{getRowAmount(row)}} €</p>
|
||||
</td>
|
||||
<td
|
||||
v-if="row.mode === 'title'"
|
||||
colspan="8"
|
||||
>
|
||||
<UInput
|
||||
v-model="row.text"
|
||||
placeholder="Titel"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<UButton
|
||||
variant="ghost"
|
||||
color="rose"
|
||||
icon="i-heroicons-x-mark-16-solid"
|
||||
@click="removePosition(row.id)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</draggable>
|
||||
</tbody>
|
||||
</table>
|
||||
<UAlert
|
||||
v-else
|
||||
|
||||
@@ -344,17 +344,7 @@ setupPage()
|
||||
label="Vertragsstart:"
|
||||
class="mt-2"
|
||||
>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.startDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Vertragsende(voraussichtlich):"
|
||||
@@ -189,24 +189,7 @@ setupPage()
|
||||
<UCard class="mt-5" v-else>
|
||||
|
||||
<div v-if="item.label === 'Projekte'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/projects/create?customer=${itemInfo.id}`)"
|
||||
>
|
||||
+ Projekt
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<UTable
|
||||
:rows="dataStore.getProjectsByCustomerId(itemInfo.id)"
|
||||
@select="(row) => router.push(`/projects/show/${row.id}`)"
|
||||
:columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
|
||||
|
||||
>
|
||||
<template #phase-data="{row}">
|
||||
{{row.phases ? row.phases.find(i => i.active).label : ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Objekte'">
|
||||
<Toolbar>
|
||||
236
pages/deprecated/entitys/vehicles/[mode]/[[id]].vue
Normal file
236
pages/deprecated/entitys/vehicles/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'backspace': () => {
|
||||
router.push("/vehicles")
|
||||
},
|
||||
'arrowleft': () => {
|
||||
if(openTab.value > 0){
|
||||
openTab.value -= 1
|
||||
}
|
||||
},
|
||||
'arrowright': () => {
|
||||
if(openTab.value < 3) {
|
||||
openTab.value += 1
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const profileStore = useProfileStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
const openTab = ref(0)
|
||||
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({
|
||||
name: "",
|
||||
licensePlate: "",
|
||||
type: "",
|
||||
driver: null,
|
||||
active: true
|
||||
})
|
||||
const oldItemInfo = ref({})
|
||||
|
||||
|
||||
//Functions
|
||||
const setupPage = async () => {
|
||||
if(mode.value === "show"){
|
||||
itemInfo.value = await useSupabaseSelectSingle("vehicles",route.params.id,"*, checks(*)")
|
||||
} else if(mode.value === "edit"){
|
||||
itemInfo.value = await useSupabaseSelectSingle("vehicles",route.params.id,"*")
|
||||
}
|
||||
|
||||
if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(itemInfo.value.id) {
|
||||
router.push(`/vehicles/show/${itemInfo.value.id}`)
|
||||
} else {
|
||||
router.push(`/vehicles`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EntityEdit
|
||||
v-if="mode === 'edit' || mode === 'create'"
|
||||
type="vehicles"
|
||||
:item="itemInfo"
|
||||
/>
|
||||
|
||||
|
||||
<!-- <UDashboardNavbar
|
||||
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
||||
>
|
||||
<template #left>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
variant="outline"
|
||||
@click="router.push(`/vehicles`)"
|
||||
>
|
||||
Fahrzeuge
|
||||
</UButton>
|
||||
</template>
|
||||
<template #center>
|
||||
<h1
|
||||
v-if="itemInfo"
|
||||
:class="['text-xl','font-medium']"
|
||||
>{{itemInfo ? `Fahrzeug: ${itemInfo.licensePlate}` : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')}}</h1>
|
||||
</template>
|
||||
<template #right>
|
||||
<ButtonWithConfirm
|
||||
color="rose"
|
||||
variant="outline"
|
||||
@confirmed="dataStore.updateItem('vehicles',{...itemInfo, archived: true})"
|
||||
v-if="mode === 'edit'"
|
||||
>
|
||||
<template #button>
|
||||
Archivieren
|
||||
</template>
|
||||
<template #header>
|
||||
<span class="text-md text-black font-bold">Archivieren bestätigen</span>
|
||||
</template>
|
||||
Möchten Sie das Fahrzeug {{itemInfo.name}} wirklich archivieren?
|
||||
</ButtonWithConfirm>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('vehicles',itemInfo, oldItemInfo)"
|
||||
>
|
||||
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>
|
||||
</template>
|
||||
</UDashboardNavbar>-->
|
||||
|
||||
<!-- <UForm
|
||||
class="p-5"
|
||||
>
|
||||
|
||||
<UFormGroup
|
||||
label="Kennzeichen:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.licensePlate"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Fahrzeug aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Fahrgestellnummer:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.vin"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.type"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Fahrer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.driver"
|
||||
:options="[{id: null, fullName: 'Kein Fahrer'},...profileStore.profiles]"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
|
||||
>
|
||||
<template #label>
|
||||
{{profileStore.profiles.find(profile => profile.id === itemInfo.driver) ? profileStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Tankvolumen:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.tankSize"
|
||||
type="number"
|
||||
>
|
||||
<template #trailing>
|
||||
L
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Baujahr:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.buildYear"
|
||||
type="number"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Anhängelast:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.towingCapacity"
|
||||
type="number"
|
||||
>
|
||||
<template #trailing>kg</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Farbe:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.color"
|
||||
type="text"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Leistung:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.powerInKW"
|
||||
type="number"
|
||||
>
|
||||
<template #trailing>kW</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
</UForm>-->
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
33
pages/deprecated/entitys/vehicles/show/[id].vue
Normal file
33
pages/deprecated/entitys/vehicles/show/[id].vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const itemInfo = ref({})
|
||||
|
||||
const tabItems = [{
|
||||
label: 'Informationen',
|
||||
}, {
|
||||
label: 'Dokumente',
|
||||
}, {
|
||||
label: 'Überprüfungen',
|
||||
}]
|
||||
|
||||
const setupPage = async () => {
|
||||
itemInfo.value = await useSupabaseSelectSingle("vehicles",route.params.id,"*, checks(*), documents(*)")
|
||||
console.log(itemInfo.value)
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EntityShow
|
||||
type="vehicles"
|
||||
:item="itemInfo"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -6,7 +6,6 @@ definePageMeta({
|
||||
const supabase = useSupabaseClient()
|
||||
const dataStore = useDataStore()
|
||||
const profileStore = useProfileStore()
|
||||
const profileStore = useProfileStore()
|
||||
|
||||
|
||||
|
||||
|
||||
60
pages/standardEntity/[type]/[[mode]]/[[id]].vue
Normal file
60
pages/standardEntity/[type]/[[mode]]/[[id]].vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const dataStore = useDataStore()
|
||||
|
||||
const type = route.params.type
|
||||
|
||||
const dataType = dataStore.dataTypes[route.params.type]
|
||||
|
||||
const loaded = ref(false)
|
||||
const mode = ref("list")
|
||||
const items = ref([])
|
||||
const item = ref({})
|
||||
|
||||
const setupPage = async () => {
|
||||
if(route.params.mode) mode.value = route.params.mode
|
||||
|
||||
if(mode.value === "show") {
|
||||
//Load Data for Show
|
||||
item.value = await useSupabaseSelectSingle(type, route.params.id, dataType.supabaseSelectWithInformation || "*")
|
||||
} else if(mode.value === "edit") {
|
||||
//Load Data for Edit
|
||||
item.value = await useSupabaseSelectSingle(type, route.params.id)
|
||||
} else if(mode.value === "list") {
|
||||
//Load Data for List
|
||||
items.value = await useSupabaseSelect(type, dataType.supabaseSelectWithInformation || "*", dataType.supabaseSortColumn)
|
||||
}
|
||||
|
||||
loaded.value = true
|
||||
}
|
||||
|
||||
setupPage()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EntityShow
|
||||
v-if="loaded && mode === 'show'"
|
||||
:type="route.params.type"
|
||||
:item="item"
|
||||
/>
|
||||
<EntityEdit
|
||||
v-else-if="loaded && (mode === 'edit' || mode === 'create')"
|
||||
:type="route.params.type"
|
||||
:item="item"
|
||||
/>
|
||||
<EntityList
|
||||
v-else-if="loaded && mode === 'list'"
|
||||
:type="type"
|
||||
:items="items"
|
||||
/>
|
||||
<UProgress
|
||||
v-else
|
||||
animation="carousel"
|
||||
class="p-5 mt-10"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,406 +0,0 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'backspace': () => {
|
||||
router.push("/vehicles")
|
||||
},
|
||||
'arrowleft': () => {
|
||||
if(openTab.value > 0){
|
||||
openTab.value -= 1
|
||||
}
|
||||
},
|
||||
'arrowright': () => {
|
||||
if(openTab.value < 3) {
|
||||
openTab.value += 1
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const profileStore = useProfileStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
const openTab = ref(0)
|
||||
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({
|
||||
name: "",
|
||||
licensePlate: "",
|
||||
type: "",
|
||||
driver: null,
|
||||
active: true
|
||||
})
|
||||
const oldItemInfo = ref({})
|
||||
|
||||
const tabItems = [{
|
||||
label: 'Informationen',
|
||||
}, {
|
||||
label: 'Dokumente',
|
||||
}, {
|
||||
label: 'Überprüfungen',
|
||||
}]
|
||||
|
||||
const incomingInvoicesColumns = [
|
||||
{
|
||||
key: "state",
|
||||
label: "Status",
|
||||
sortable: true
|
||||
},{
|
||||
key: "vendor",
|
||||
label: "Lieferant",
|
||||
sortable: true
|
||||
},{
|
||||
key: "date",
|
||||
label: "Datum",
|
||||
sortable: true
|
||||
},{
|
||||
key: "description",
|
||||
label: "Beschreibung",
|
||||
sortable: true
|
||||
},{
|
||||
key: "accounts",
|
||||
label: "Betrag",
|
||||
sortable: true
|
||||
},
|
||||
]
|
||||
|
||||
//Functions
|
||||
const setupPage = async () => {
|
||||
if(mode.value === "show"){
|
||||
itemInfo.value = await useSupabaseSelectSingle("vehicles",route.params.id,"*, checks(*)")
|
||||
} else if(mode.value === "edit"){
|
||||
itemInfo.value = await useSupabaseSelectSingle("vehicles",route.params.id,"*")
|
||||
}
|
||||
|
||||
if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(itemInfo.value.id) {
|
||||
router.push(`/vehicles/show/${itemInfo.value.id}`)
|
||||
} else {
|
||||
router.push(`/vehicles`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const getRowAmount = (row) => {
|
||||
let amount = 0
|
||||
|
||||
row.accounts.forEach(account => {
|
||||
amount += account.amountNet
|
||||
amount += account.amountTax
|
||||
})
|
||||
|
||||
return amount
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar
|
||||
:title="itemInfo ? itemInfo.licensePlate : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')"
|
||||
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
||||
>
|
||||
<template #left>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
variant="outline"
|
||||
@click="router.push(`/vehicles`)"
|
||||
>
|
||||
Fahrzeuge
|
||||
</UButton>
|
||||
</template>
|
||||
<template #center>
|
||||
<h1
|
||||
v-if="itemInfo"
|
||||
:class="['text-xl','font-medium']"
|
||||
>{{itemInfo ? `Fahrzeug: ${itemInfo.licensePlate}` : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')}}</h1>
|
||||
</template>
|
||||
<template #right>
|
||||
<ButtonWithConfirm
|
||||
color="rose"
|
||||
variant="outline"
|
||||
@confirmed="dataStore.updateItem('vehicles',{...itemInfo, archived: true})"
|
||||
v-if="mode === 'edit'"
|
||||
>
|
||||
<template #button>
|
||||
Archivieren
|
||||
</template>
|
||||
<template #header>
|
||||
<span class="text-md text-black font-bold">Archivieren bestätigen</span>
|
||||
</template>
|
||||
Möchten Sie das Fahrzeug {{itemInfo.name}} wirklich archivieren?
|
||||
</ButtonWithConfirm>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('vehicles',itemInfo, oldItemInfo)"
|
||||
>
|
||||
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/${itemInfo.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
:items="tabItems"
|
||||
v-if="mode === 'show' && itemInfo.id"
|
||||
class="p-5"
|
||||
v-model="openTab"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
|
||||
<UCard class="w-1/2 mr-5">
|
||||
<UAlert
|
||||
v-if="itemInfo.archived"
|
||||
color="rose"
|
||||
variant="outline"
|
||||
title="Objekt archiviert"
|
||||
icon="i-heroicons-light-bulb"
|
||||
class="mb-5"
|
||||
/>
|
||||
<div class="text-wrap">
|
||||
<table class="w-full">
|
||||
<tr>
|
||||
<td>Kennzeichen: </td>
|
||||
<td>{{itemInfo.licensePlate}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Typ: </td>
|
||||
<td>{{itemInfo.type}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fahrgestellnummer: </td>
|
||||
<td>{{itemInfo.vin}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fahrer:</td>
|
||||
<td>{{profileStore.profiles.find(profile => profile.id === itemInfo.driver) ? profileStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer gewählt'}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tankvolumen:</td>
|
||||
<td>{{itemInfo.tankSize !== 0 ? `${itemInfo.tankSize} L` : "Kein Tank verbaut"}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Baujahr:</td>
|
||||
<td>{{itemInfo.buildYear}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anhänglast:</td>
|
||||
<td>{{itemInfo.towingCapacity}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Farbe:</td>
|
||||
<td>{{itemInfo.color}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Leistung:</td>
|
||||
<td>{{itemInfo.powerInKW && itemInfo.powerInKW + " kW"}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</UCard>
|
||||
<UCard class="w-1/2">
|
||||
<HistoryDisplay
|
||||
type="vehicle"
|
||||
v-if="itemInfo"
|
||||
:element-id="itemInfo.id"
|
||||
/>
|
||||
</UCard>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Eingangsrechnungen'">
|
||||
<UTable
|
||||
:rows="dataStore.getIncomingInvoicesByVehicleId(itemInfo.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'">
|
||||
<UCard class="mt-5">
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="vehicle"
|
||||
:element-id="itemInfo.id"
|
||||
/>
|
||||
</Toolbar>
|
||||
|
||||
<DocumentList
|
||||
:documents="dataStore.getDocumentsByVehicleId(itemInfo.id)"
|
||||
/>
|
||||
</UCard>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Überprüfungen'">
|
||||
<UCard class="mt-5">
|
||||
<UTable
|
||||
:rows="itemInfo.checks"
|
||||
:columns="[{key:'name',label: 'Name'},{key:'rhythm',label: 'Rhythmus'},{key:'description',label: 'Beschreibung'}]"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/checks/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Überprüfungen anzuzeigen' }"
|
||||
>
|
||||
<template #rhythm-data="{row}">
|
||||
{{row.distance}}
|
||||
<span v-if="row.distanceUnit === 'dayjs'">Tage</span>
|
||||
<span v-if="row.distanceUnit === 'years'">Jahre</span>
|
||||
</template>
|
||||
</UTable>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</UTabs>
|
||||
<UForm
|
||||
v-else-if="mode == 'edit' || mode == 'create'"
|
||||
class="p-5"
|
||||
>
|
||||
|
||||
<UFormGroup
|
||||
label="Kennzeichen:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.licensePlate"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Fahrzeug aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Fahrgestellnummer:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.vin"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.type"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Fahrer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.driver"
|
||||
:options="[{id: null, fullName: 'Kein Fahrer'},...profileStore.profiles]"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
|
||||
>
|
||||
<template #label>
|
||||
{{profileStore.profiles.find(profile => profile.id === itemInfo.driver) ? profileStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Tankvolumen:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.tankSize"
|
||||
type="number"
|
||||
>
|
||||
<template #trailing>
|
||||
L
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Baujahr:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.buildYear"
|
||||
type="number"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Anhängelast:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.towingCapacity"
|
||||
type="number"
|
||||
>
|
||||
<template #trailing>kg</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Farbe:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.color"
|
||||
type="text"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Leistung:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.powerInKW"
|
||||
type="number"
|
||||
>
|
||||
<template #trailing>kW</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
td {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
vertical-align: top;
|
||||
padding-bottom: 0.15em;
|
||||
padding-top: 0.15em;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user