Introduced EntityEdit.vue

Introduced EntityShow.vue

Deprecated following as non standardEntity contracts, customers, vendors, projects, plants, vehicles
This commit is contained in:
2024-12-22 16:59:18 +01:00
parent b465f4a75a
commit 565d531376
28 changed files with 1942 additions and 932 deletions

View File

@@ -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