Light Restructuring

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

@@ -97,6 +97,21 @@ setupPage()
 
 <template>
   <UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Lagerplatz erstellen' : 'Lagerplatz bearbeiten')">
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/spaces`)"
+      >
+        Lagerplätze
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          :class="['text-xl','font-medium']"
+      >{{itemInfo ? `Lagerplatz: ${itemInfo.spaceNumber} - ${itemInfo.description}` : (mode === 'create' ? 'Lagerplatz erstellen' : 'Lagerplatz bearbeiten')}}</h1>
+    </template>
     <template #right>
       <UButton
           v-if="mode === 'edit'"
@@ -128,30 +143,53 @@ setupPage()
   </UDashboardNavbar>
   <UDashboardPanelContent>
     <UTabs
-        :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Bestand'},{label: 'Inventarartikel'}]"
-        v-if="itemInfo && mode == 'show'"
+        :items="[{label: 'Informationen'},{label: 'Bestand'},{label: 'Inventarartikel'}]"
+        v-if="itemInfo && mode === 'show'"
         class="p-5"
     >
       <template #item="{item}">
-        <UCard class="mt-5">
-          <div v-if="item.label === 'Informationen'">
-            <div class="truncate">
-              <p>Übergeordneter Lagerplatz: <router-link v-if="itemInfo.parentSpace" :to="`/spaces/show/${itemInfo.parentSpace.id}`">{{itemInfo.parentSpace.spaceNumber}} - {{itemInfo.parentSpace.description}}</router-link></p>
-              <p>Beschreibung: <br>{{itemInfo.description}}</p>
-            </div>
-
+        <div v-if="item.label === 'Informationen'" class="flex mt-5">
+          <div class="w-1/2 mr-5">
+            <UCard>
+              <div class="truncate">
+                <table>
+                  <tr>
+                    <td>Typ:</td>
+                    <td>{{itemInfo.type}}</td>
+                  </tr>
+                  <tr v-if="itemInfo.type !== 'Standort'">
+                    <td>Übergeordneter Lagerplatz:</td>
+                    <td><router-link v-if="itemInfo.parentSpace" :to="`/spaces/show/${itemInfo.parentSpace.id}`">{{itemInfo.parentSpace.spaceNumber}} - {{itemInfo.parentSpace.description}}</router-link></td>
+                  </tr>
+                  <tr v-if="itemInfo.type === 'Standort'">
+                    <td>Adresse:</td>
+                    <td>{{`${itemInfo.address.streetNumber}, ${itemInfo.address.zip} ${itemInfo.address.city}`}}</td>
+                  </tr>
+                  <tr>
+                    <td>Beschreibung:</td>
+                    <td>{{itemInfo.description}}</td>
+                  </tr>
+                </table>
+              </div>
+            </UCard>
 
           </div>
-          <div v-else-if="item.label === 'Logbuch'">
-
+          <div class="w-1/2">
+            <UCard>
+              LOGBUCH
+            </UCard>
           </div>
-          <div v-else-if="item.label === 'Bestand'">
+
+
+
+        </div>
+        <div v-else-if="item.label === 'Bestand'">
+          <UCard>
             <div v-if="spaceProducts.length > 0">
-              <p class="mt-5">Artikel in diesem Lagerplatz</p>
 
-              <table>
+              <table class="w-full">
                 <tr>
-                  <th class="text-left">Artikel</th>
+                  <th class="text-left">Artikel in diesem Lagerplatz</th>
                   <th>Anzahl</th>
                   <th>Einheit</th>
                 </tr>
@@ -164,22 +202,23 @@ setupPage()
               </table>
             </div>
             <p v-else>Es befinden sich keine Artikel in diesem Lagerplatz</p>
-          </div>
-          <div v-else-if="item.label === 'Inventarartikel'">
-            <UAlert
+          </UCard>
+
+        </div>
+        <div v-else-if="item.label === 'Inventarartikel'">
+          <UAlert
               description="Hier werden alle Inventarartikel in diesem Lagerplatz aufgelistet"
               color="primary"
               variant="outline"
-            />
-            <UTable
-                :rows="itemInfo.inventoryitems"
-                :columns="[{label:'Name',key:'name'}]"
-                @select="(row) => router.push(`/inventoryitems/show/${row.id}`)"
-            >
+          />
+          <UTable
+              :rows="itemInfo.inventoryitems"
+              :columns="[{label:'Name',key:'name'}]"
+              @select="(row) => router.push(`/inventoryitems/show/${row.id}`)"
+          >
 
-            </UTable>
-          </div>
-        </UCard>
+          </UTable>
+        </div>
       </template>
     </UTabs>
     <UForm
@@ -262,5 +301,15 @@ setupPage()
 </template>
 
 <style scoped>
+td,th {
+  padding-right: 2em;
+  text-align: left;
+}
 
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
 </style>