Restructured Pages

Added parent Spaces
This commit is contained in:
2024-07-20 14:50:58 +02:00
parent 013ae3c69c
commit 269c5f4b59
3 changed files with 216 additions and 98 deletions

View File

@@ -106,80 +106,122 @@ setupPage()
v-else-if="mode == 'edit' || mode == 'create'"
class="p-5"
>
<UFormGroup
label="Name:"
>
<UInput
v-model="itemInfo.name"
/>
</UFormGroup>
<UFormGroup
label="Lagerplatz:"
>
<USelectMenu
:options="dataStore.spaces"
v-model="itemInfo.currentSpace"
value-attribute="id"
>
<template #option="{option}">
<span class="truncate">{{option.spaceNumber}} - {{option.description}}</span>
</template>
<template #label>
<span v-if="itemInfo.currentSpace">{{dataStore.getSpaceById(itemInfo.currentSpace).spaceNumber }} - {{dataStore.getSpaceById(itemInfo.currentSpace).description}}</span>
<span v-else>Kein Lagerplatz ausgewählt</span>
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Seriennummer:"
>
<UInput
v-model="itemInfo.serialNumber"
/>
</UFormGroup>
<UFormGroup
label="Menge:"
help="Für Einzelartikel Menge gleich 0"
>
<UInput
type="number"
v-model="itemInfo.quantity"
/>
</UFormGroup>
<UFormGroup
label="Artikelnummer:"
>
<UInput
v-model="itemInfo.articleNumber"
/>
</UFormGroup>
<UFormGroup
label="Lieferant:"
>
<USelectMenu
:options="dataStore.vendors"
option-attribute="name"
value-attribute="id"
searchable
:search-attributes="['name']"
v-model="itemInfo.vendor"
/>
</UFormGroup>
<UFormGroup
label="Kaufdatum:"
>
<UPopover :popper="{ placement: 'bottom-start' }">
<UButton
icon="i-heroicons-calendar-days-20-solid"
:label="itemInfo.purchaseDate ? dayjs(itemInfo.purchaseDate).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline"
/>
<div class="flex flex-row">
<div class="w-1/2 mr-5">
<UDivider>
Allgemeines
</UDivider>
<UFormGroup
label="Name:"
>
<UInput
v-model="itemInfo.name"
/>
</UFormGroup>
<UFormGroup
label="Artikelnummer:"
>
<UInput
v-model="itemInfo.articleNumber"
/>
</UFormGroup>
<UFormGroup
label="Lagerplatz:"
>
<USelectMenu
:options="dataStore.spaces"
v-model="itemInfo.currentSpace"
value-attribute="id"
>
<template #option="{option}">
<span class="truncate">{{option.spaceNumber}} - {{option.description}}</span>
</template>
<template #label>
<span v-if="itemInfo.currentSpace">{{dataStore.getSpaceById(itemInfo.currentSpace).spaceNumber }} - {{dataStore.getSpaceById(itemInfo.currentSpace).description}}</span>
<span v-else>Kein Lagerplatz ausgewählt</span>
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Seriennummer:"
>
<UInput
v-model="itemInfo.serialNumber"
/>
</UFormGroup>
<UFormGroup
label="Menge:"
help="Für Einzelartikel Menge gleich 0"
>
<UInput
type="number"
v-model="itemInfo.quantity"
/>
</UFormGroup>
</div>
<div class="w-1/2">
<UDivider>
Anschaffung
</UDivider>
<UFormGroup
label="Hersteller:"
>
<UInput
v-model="itemInfo.manufacturer"
/>
</UFormGroup>
<UFormGroup
label="Herstellernr.:"
>
<UInput
v-model="itemInfo.manufacturerNumber"
/>
</UFormGroup>
<UFormGroup
label="Lieferant:"
>
<USelectMenu
:options="dataStore.vendors"
option-attribute="name"
value-attribute="id"
searchable
:search-attributes="['name']"
v-model="itemInfo.vendor"
/>
</UFormGroup>
<UFormGroup
label="Kaufdatum:"
>
<UPopover :popper="{ placement: 'bottom-start' }">
<UButton
icon="i-heroicons-calendar-days-20-solid"
:label="itemInfo.purchaseDate ? dayjs(itemInfo.purchaseDate).format('DD.MM.YYYY') : 'Datum auswählen'"
variant="outline"
/>
<template #panel="{ close }">
<LazyDatePicker v-model="itemInfo.purchaseDate" @close="close" />
</template>
</UPopover>
</UFormGroup>
<UFormGroup
label="Kaufpreis:"
>
<UInput
v-model="itemInfo.purchasePrice"
type="number"
steps="0.01"
>
<template #trailing>
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
</template>
</UInput>
</UFormGroup>
</div>
</div>
<template #panel="{ close }">
<LazyDatePicker v-model="itemInfo.purchaseDate" @close="close" />
</template>
</UPopover>
</UFormGroup>
<UFormGroup
label="Beschreibung:"
>