Light Restructuring

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

@@ -12,8 +12,6 @@ const router = useRouter()
 const toast = useToast()
 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({
@@ -25,15 +23,15 @@ const itemInfo = ref({
 //Functions
 const setupPage = async () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem.value = await useSupabaseSelectSingle("inventoryitems", route.params.id, "*, vendor(*)")
+    itemInfo.value = await useSupabaseSelectSingle("inventoryitems", route.params.id, "*, vendor(*)")
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem.value
+  if(mode.value === "edit") itemInfo.value = itemInfo.value
 }
 
 const cancelEditorCreate = () => {
-  if(currentItem.value) {
-    router.push(`/inventoryitems/show/${currentItem.value.id}`)
+  if(itemInfo.value) {
+    router.push(`/inventoryitems/show/${itemInfo.value.id}`)
   } else {
     router.push(`/inventoryitems`)
   }
@@ -43,7 +41,22 @@ setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Inventartikel erstellen' : 'Inventartikel bearbeiten')">
+  <UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Inventartikel erstellen' : 'Inventartikel bearbeiten')">
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/inventoryitems`)"
+      >
+        Inventar
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          :class="['text-xl','font-medium']"
+      >{{itemInfo ? `Inventarartikel: ${itemInfo.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')}}</h1>
+    </template>
     <template #right>
       <UButton
           v-if="mode === 'edit'"
@@ -67,39 +80,66 @@ setupPage()
       </UButton>
       <UButton
           v-if="mode === 'show'"
-          @click="  router.push(`/inventoryitems/edit/${currentItem.id}`)"
+          @click="  router.push(`/inventoryitems/edit/${itemInfo.id}`)"
       >
         Bearbeiten
       </UButton>
     </template>
   </UDashboardNavbar>
   <UTabs
-    :items="[{label: 'Informationen'}, {label: 'Logbuch'}]"
-    v-if="currentItem && mode == 'show'"
+    :items="[{label: 'Informationen'}]"
+    v-if="itemInfo && mode == 'show'"
     class="p-5"
   >
     <template #item="{item}">
-      <UCard class="mt-5">
-        <div v-if="item.label === 'Informationen'">
+      <div v-if="item.label === 'Informationen'" class="flex-row flex mt-5">
+        <div class="w-1/2 mr-5">
+          <UCard>
+            <table class="w-full">
+              <tr v-if="itemInfo.currentSpace">
+                <td>Lagerplatz: </td>
+                <td>{{dataStore.getSpaceById(itemInfo.currentSpace).spaceNumber}} - {{dataStore.getSpaceById(itemInfo.currentSpace).description}}</td>
+              </tr>
+              <tr>
+                <td>Seriennummer:</td>
+                <td>{{itemInfo.serialNumber}}</td>
+              </tr>
+              <tr>
+                <td>Menge:</td>
+                <td>{{itemInfo.quantity > 0 ? itemInfo.quantity : 'Einzelarktikel'}}</td>
+              </tr>
+              <tr>
+                <td>Artikelnummer:</td>
+                <td>{{itemInfo.articleNumber}}</td>
+              </tr>
+              <tr>
+                <td>Lieferant:</td>
+                <td>{{itemInfo.vendor ? itemInfo.vendor.name : ''}}</td>
+              </tr>
+              <tr>
+                <td>Kaufdatum:</td>
+                <td>{{itemInfo.purchaseDate ? dayjs(itemInfo.purchaseDate).format("DD.MM.YYYY") : ''}}</td>
+              </tr>
+              <tr>
+                <td>Beschreibung:</td>
+                <td>{{itemInfo.description}}</td>
+              </tr>
+            </table>
+          </UCard>
 
-          <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>Menge: {{currentItem.quantity > 0 ? currentItem.quantity : 'Einzelarktikel'}}</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>
-        <div v-else-if="item.label === 'Logbuch'">
-          <HistoryDisplay
-              type="inventoryitem"
-              v-if="currentItem"
-              :element-id="currentItem.id"
-          />
+        <div class="w-1/2">
+          <UCard>
+            <HistoryDisplay
+                type="inventoryitem"
+                v-if="itemInfo"
+                render-headline
+                :element-id="itemInfo.id"
+            />
+          </UCard>
+
         </div>
-      </UCard>
+      </div>
     </template>
   </UTabs>
   <UForm
@@ -234,5 +274,10 @@ setupPage()
 </template>
 
 <style scoped>
-
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
 </style>