Some Changes

pages/inventoryitems/[mode]/[[id]].vue

@@ -1,5 +1,6 @@
 <script setup>
 import HistoryDisplay from "~/components/HistoryDisplay.vue";
+import dayjs from "dayjs";
 
 definePageMeta({
   middleware: "auth"
@@ -21,9 +22,9 @@ const itemInfo = ref({
 })
 
 //Functions
-const setupPage = () => {
+const setupPage = async () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem.value = dataStore.getInventoryItemById(Number(useRoute().params.id))
+    currentItem.value = await useSupabaseSelectSingle("inventoryitems", route.params.id, "*, vendor(*)")
   }
 
   if(mode.value === "edit") itemInfo.value = currentItem.value
@@ -82,6 +83,10 @@ setupPage()
 
           <div class="text-wrap">
             <p v-if="currentItem.currentSpace">Lagerplatz: {{dataStore.getSpaceById(currentItem.currentSpace).spaceNumber}} - {{dataStore.getSpaceById(currentItem.currentSpace).description}}</p>
+            <p>Seriennummer: {{currentItem.serialNumber}}</p>
+            <p>Artikelnummer: {{currentItem.articleNumber}}</p>
+            <p>Lieferant: {{currentItem.vendor ? currentItem.vendor.name : ''}}</p>
+            <p>Kaufdatum: {{currentItem.purchaseDate}}</p>
             <p>Beschreibung: {{currentItem.description}}</p>
           </div>
         </div>
@@ -123,6 +128,47 @@ setupPage()
         </template>
       </USelectMenu>
     </UFormGroup>
+    <UFormGroup
+        label="Seriennummer:"
+    >
+      <UInput
+          v-model="itemInfo.serialNumber"
+      />
+    </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"
+        />
+
+        <template #panel="{ close }">
+          <LazyDatePicker v-model="itemInfo.purchaseDate" @close="close" />
+        </template>
+      </UPopover>
+    </UFormGroup>
     <UFormGroup
         label="Beschreibung:"
     >