Light Restructuring

2024-08-23 12:09:53 +02:00
parent 1c76d8e63c
commit b71814369d
3 changed files with 168 additions and 62 deletions
--- a/pages/contracts/[mode]/[[id]].vue
+++ b/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><nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></td>
+                    <td>Kunde:</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>
--- a/pages/inventoryitems/[mode]/[[id]].vue
+++ b/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>
--- a/pages/spaces/[mode]/[[id]].vue
+++ b/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>