Light Restructuring

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

@@ -43,7 +43,7 @@ const itemInfo = ref({
 //Functions
 const setupPage = async () => {
   if(mode.value === "show" ){
-    itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*, customer(id,name), contact(id,fullName)")
+    itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*, customer(id,name,isCompany, customerNumber), contact(id,fullName)")
   } else if (mode.value === "edit"){
     itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*")
   }
@@ -138,12 +138,22 @@ setupPage()
                     </td>
                   </tr>
                   <tr>
-                    <td>Kundennummer:</td>
+                    <td>Kunde:</td>
-                    <td><nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></td>
+                    <td>
+                      <nuxt-link
+                        :to="`/customers/show/${itemInfo.customer.id}`"
+                        v-if="itemInfo.customer"
+                      >{{itemInfo.customer.customerNumber ? `${itemInfo.customer.customerNumber} - ` : ''}}{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link>
+                    </td>
                   </tr>
-                  <tr>
+                  <tr v-if="itemInfo.customer.isCompany">
                     <td>Ansprechpartner:</td>
-                    <td><nuxt-link :to="`/contacts/show/${itemInfo.contact.id}`">{{itemInfo.contact ? itemInfo.contact.fullName : ""}}</nuxt-link></td>
+                    <td>
+                      <nuxt-link
+                          v-if="itemInfo.contact"
+                          :to="`/contacts/show/${itemInfo.contact.id}`"
+                      >{{itemInfo.contact ? itemInfo.contact.fullName : ""}}</nuxt-link>
+                    </td>
                   </tr>
                   <tr>
                     <td>Wiederkehrend:</td>
@@ -153,7 +163,7 @@ setupPage()
                     <td>Startdatum:</td>
                     <td>{{dayjs(itemInfo.startDate).format("DD.MM.YYYY")}}</td>
                   </tr>
-                  <tr>
+                  <tr v-if="!itemInfo.active">
                     <td>Enddatum:</td>
                     <td>{{dayjs(itemInfo.endDate).format("DD.MM.YYYY")}}</td>
                   </tr>
@@ -518,5 +528,7 @@ setupPage()
 td {
   border-bottom: 1px solid lightgrey;
   vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
 }
 </style>

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) {
+  if(itemInfo.value) {
-    router.push(`/inventoryitems/show/${currentItem.value.id}`)
+    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'}]"
+    :items="[{label: 'Informationen'}]"
-    v-if="currentItem && mode == 'show'"
+    v-if="itemInfo && mode == 'show'"
     class="p-5"
   >
     <template #item="{item}">
-      <UCard class="mt-5">
+      <div v-if="item.label === 'Informationen'" class="flex-row flex mt-5">
-        <div v-if="item.label === 'Informationen'">
+        <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 class="w-1/2">
-        <div v-else-if="item.label === 'Logbuch'">
+          <UCard>
             <HistoryDisplay
                 type="inventoryitem"
-              v-if="currentItem"
+                v-if="itemInfo"
-              :element-id="currentItem.id"
+                render-headline
+                :element-id="itemInfo.id"
             />
-        </div>
           </UCard>
+
+        </div>
+      </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>

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'}]"
+        :items="[{label: 'Informationen'},{label: 'Bestand'},{label: 'Inventarartikel'}]"
-        v-if="itemInfo && mode == 'show'"
+        v-if="itemInfo && mode === 'show'"
         class="p-5"
     >
       <template #item="{item}">
-        <UCard class="mt-5">
+        <div v-if="item.label === 'Informationen'" class="flex mt-5">
-          <div v-if="item.label === 'Informationen'">
+          <div class="w-1/2 mr-5">
+            <UCard>
               <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>
+                <table>
-              <p>Beschreibung: <br>{{itemInfo.description}}</p>
+                  <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 class="w-1/2">
+            <UCard>
+              LOGBUCH
+            </UCard>
           </div>
 
 
-          </div>
-          <div v-else-if="item.label === 'Logbuch'">
 
         </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,6 +202,8 @@ setupPage()
               </table>
             </div>
             <p v-else>Es befinden sich keine Artikel in diesem Lagerplatz</p>
+          </UCard>
+
         </div>
         <div v-else-if="item.label === 'Inventarartikel'">
           <UAlert
@@ -179,7 +219,6 @@ setupPage()
 
           </UTable>
         </div>
-        </UCard>
       </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>