Added Productcategories

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

@@ -25,6 +25,7 @@ defineShortcuts({
 })
 
 const dataStore = useDataStore()
+const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -34,16 +35,23 @@ const id = ref(route.params.id ? route.params.id : null )
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
     unit: 1,
-    tags: []
+    tags: [],
+    productcategories: []
 })
 const openTab = ref(0)
 
+const productcategories = ref([])
+const units = ref([])
+
 //Functions
 const setupPage = async () => {
   if(mode.value === "show" || mode.value === "edit"){
     itemInfo.value = await useSupabaseSelectSingle("products",route.params.id,"*")
   }
 
+  productcategories.value = await useSupabaseSelect("productcategories","*")
+  units.value = (await supabase.from("units").select()).data
+  console.log(units.value[0])
 
 }
 
@@ -118,64 +126,100 @@ setupPage()
     </template>
   </UDashboardNavbar>
   <UTabs
-    :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Bestand'},{label: 'Dokumente'}]"
+    :items="[{label: 'Informationen'},{label: 'Bestand'},{label: 'Dokumente'}]"
     v-if="mode === 'show' && itemInfo"
     class="p-5"
     v-model="openTab"
   >
     <template #item="{item}">
-      <UCard class="mt-5">
-        <div
-          v-if="item.label === 'Informationen'"
-        >
-          <UBadge
-              v-for="tag in itemInfo.tags"
-              class="mr-2"
+      <div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
+        <div class="w-1/2 mr-5">
+          <UCard>
+            <UBadge
+                v-for="tag in itemInfo.tags"
+                class="mr-2"
 
-          >
-            {{tag}}
-          </UBadge>
-          <UDivider
-              class="my-2"
-          />
+            >
+              {{tag}}
+            </UBadge>
+            <UDivider
+                class="my-2"
+            />
 
-          <UButton @click="printLabel(itemInfo.ean)">Print Label</UButton>
-          {{itemInfo}}
+<!--
+            <UButton @click="printLabel(itemInfo.ean)">Print Label</UButton>
+-->
 
-          <span v-if="itemInfo.manufacturer">Hersteller: {{itemInfo.manufacturer}}<br></span>
-          <span v-if="itemInfo.manufacturerNumber">Herstellernummer: {{itemInfo.manufacturerNumber}}<br></span>
-          <span v-if="itemInfo.description">Beschreibung: {{itemInfo.description}}<br></span>
-          <span v-if="itemInfo.purchasePrice">Einkaufspreis: {{Number(itemInfo.purchasePrice).toFixed(2)}} €<br></span>
+            <table class="w-full">
+              <tr>
+                <td>Name:</td>
+                <td>{{itemInfo.name}}</td>
+              </tr>
+              <tr>
+                <td>Hersteller:</td>
+                <td>{{itemInfo.manufacturer}}</td>
+              </tr>
+              <tr>
+                <td>Herstellernummer:</td>
+                <td>{{itemInfo.manufacturerNumber}}</td>
+              </tr>
+              <tr>
+                <td>Einheit:</td>
+                <td>{{units.find(i => i.id === itemInfo.unit) ? units.find(i => i.id === itemInfo.unit).name : ""}}</td>
+              </tr>
+              <tr>
+                <td>Tags:</td>
+                <td>{{itemInfo.tags.join(", ")}}</td>
+              </tr>
+              <tr>
+                <td>Artikelkategorien:</td>
+                <td>{{itemInfo.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ")}}</td>
+              </tr>
+              <tr>
+                <td>EAN:</td>
+                <td>{{itemInfo.ean}}</td>
+              </tr>
+              <tr>
+                <td>Verkaufspreis:</td>
+                <td>{{itemInfo.sellingPrice}}</td>
+              </tr>
+              <tr>
+                <td>Beschreibung:</td>
+                <td>{{itemInfo.description}}</td>
+              </tr>
+            </table>
+          </UCard>
         </div>
-        <div
-          v-if="item.label === 'Logbuch'"
-        >
-          <HistoryDisplay
-              type="product"
-              v-if="itemInfo"
-              :element-id="itemInfo.id"
-          />
-        </div>
-        <div
-          v-if="item.label === 'Bestand'"
-        >
-          Bestand: {{dataStore.getStockByProductId(itemInfo.id)}} {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : ""}}
-
-        </div>
-        <div
-          v-if="item.label === 'Dokumente'"
-        >
-          <Toolbar>
-            <DocumentUpload
+        <div class="w-1/2">
+          <UCard>
+            <HistoryDisplay
                 type="product"
+                v-if="itemInfo"
                 :element-id="itemInfo.id"
             />
-          </Toolbar>
-
-
-          <DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
+          </UCard>
         </div>
-      </UCard>
+      </div>
+      <div
+          v-if="item.label === 'Bestand'"
+      >
+        <UCard>
+          Bestand: {{dataStore.getStockByProductId(itemInfo.id)}} {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : ""}}
+        </UCard>
+      </div>
+      <div
+          v-if="item.label === 'Dokumente'"
+      >
+        <Toolbar>
+          <DocumentUpload
+              type="product"
+              :element-id="itemInfo.id"
+          />
+        </Toolbar>
+
+
+        <DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
+      </div>
     </template>
   </UTabs>
   <UForm
@@ -231,6 +275,21 @@ setupPage()
         </template>
       </USelectMenu>
     </UFormGroup>
+    <UFormGroup
+        label="Artikelkategorien:"
+    >
+      <USelectMenu
+          v-model="itemInfo.productcategories"
+          :options="productcategories"
+          value-attribute="id"
+          option-attribute="name"
+          multiple
+      >
+        <template #label>
+          {{itemInfo.productcategories.length > 0 ? itemInfo.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ") : "Keine Kategorien ausgewählt"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
     <UFormGroup
         label="EAN:"
     >
@@ -269,5 +328,10 @@ setupPage()
 </template>
 
 <style scoped>
-
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
 </style>