Many Changes

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

@@ -44,7 +44,25 @@ setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Artikel erstellen' : 'Artikel bearbeiten')">
+  <UDashboardNavbar
+      :title="currentItem ? currentItem.name : (mode === 'create' ? 'Artikel erstellen' : 'Artikel bearbeiten')"
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/products`)"
+      >
+        Artikel
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="currentItem"
+          class="text-xl font-medium"
+      >{{currentItem ? `Artikel: ${currentItem.name}` : (mode === 'create' ? 'Artikel erstellen' : 'Artikel bearbeiten')}}</h1>
+    </template>
     <template #right>
       <UButton
           v-if="mode === 'edit'"
@@ -145,6 +163,13 @@ setupPage()
           v-model="itemInfo.manufacturer"
       />
     </UFormGroup>
+    <UFormGroup
+        label="Hersteller Nr.:"
+    >
+      <UInput
+          v-model="itemInfo.manufacturerNumber"
+      />
+    </UFormGroup>
     <UFormGroup
         label="Einheit:"
     >
@@ -168,7 +193,7 @@ setupPage()
           multiple
       >
         <template #label>
-          {{itemInfo.tags.join(", ")}}
+          {{itemInfo.tags.length > 0 ? itemInfo.tags.join(", ") : "Keine Tags ausgewählt"}}
         </template>
       </USelectMenu>
     </UFormGroup>
@@ -199,6 +224,13 @@ setupPage()
         </template>
       </UInput>
     </UFormGroup>
+    <UFormGroup
+        label="Beschreibung:"
+    >
+      <UTextarea
+          v-model="itemInfo.description"
+      />
+    </UFormGroup>
   </UForm>
 </template>
 

pages/products/index.vue

@@ -20,6 +20,19 @@
   </UDashboardNavbar>
 
   <UDashboardToolbar>
+    <template #left>
+      <USelectMenu
+          v-model="selectedTags"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateTags"
+          multiple
+          class="hidden lg:block"
+      >
+        <template #label>
+          Tags
+        </template>
+      </USelectMenu>
+    </template>
     <template #right>
       <USelectMenu
           v-model="selectedColumns"
@@ -121,14 +134,33 @@ const templateColumns = [
 const selectedColumns = ref(templateColumns)
 const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
+const templateTags = computed(() => {
+  let temp = []
+
+  dataStore.products.forEach(row => {
+    row.tags.forEach(tag => {
+      if(!temp.includes(tag)) temp.push(tag)
+    })
+  })
+
+  return temp
+
+})
+const selectedTags = ref(templateTags.value)
+
+
 const searchString = ref('')
 
 const filteredRows = computed(() => {
+  let items = dataStore.products
+
+  items = items.filter(i => i.tags.some(x => selectedTags.value.includes(x)) || i.tags.length === 0)
+
   if(!searchString.value) {
-    return dataStore.products
+    return items
   }
 
-  return dataStore.products.filter(product => {
+  return items.filter(product => {
     return Object.values(product).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
@@ -136,6 +168,7 @@ const filteredRows = computed(() => {
 })
 
 
+
 </script>
 
 <style scoped>