Many Changes

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>