Many Changes in Navigation, Shortcuts, Search and Data Pulling directly from Supabase

pages/products/index.vue

@@ -48,7 +48,6 @@
       </USelectMenu>
     </template>
   </UDashboardToolbar>
-
   <UTable
       :rows="filteredRows"
       :columns="columns"
@@ -57,6 +56,15 @@
       @select="(i) => router.push(`/products/show/${i.id}`) "
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
   >
+    <template #name-data="{row}">
+      <span
+          v-if="row === filteredRows[selectedItem]"
+          class="text-primary-500 font-bold">{{row.name}}</span>
+      <span v-else>
+        {{row.name}}
+      </span>
+
+    </template>
     <template #stock-data="{row}">
       {{`${dataStore.getStockByProductId(row.id)} ${(dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : "")}`}}
     </template>
@@ -76,7 +84,7 @@
     <template #unit-data="{row}">
       {{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
     </template>
-  </UTable>/
+  </UTable>
 
 </template>
 
@@ -94,12 +102,42 @@ defineShortcuts({
   },
   '+': () => {
     router.push("/products/create")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/products/show/${filteredRows.value[selectedItem.value].id}`)
+    }
+  },
+  'arrowdown': () => {
+    if(selectedItem.value < filteredRows.value.length - 1) {
+      selectedItem.value += 1
+    } else {
+      selectedItem.value = 0
+    }
+  },
+  'arrowup': () => {
+    if(selectedItem.value === 0) {
+      selectedItem.value = filteredRows.value.length - 1
+    } else {
+      selectedItem.value -= 1
+    }
   }
 })
 
 const dataStore = useDataStore()
 const router = useRouter()
 
+const items = ref([])
+const selectedItem = ref(0)
+
+const setupPage = async () => {
+  items.value = await useSupabaseSelect("products","*")
+}
+
+setupPage()
+
+
 const templateColumns = [
   {
     key: "stock",
@@ -152,19 +190,10 @@ const selectedTags = ref(templateTags.value)
 const searchString = ref('')
 
 const filteredRows = computed(() => {
-  let items = dataStore.products
+  let temp = items.value.filter(i => i.tags.some(x => selectedTags.value.includes(x)) || i.tags.length === 0)
 
-  items = items.filter(i => i.tags.some(x => selectedTags.value.includes(x)) || i.tags.length === 0)
+  return useSearch(searchString.value, temp)
 
-  if(!searchString.value) {
-    return items
-  }
-
-  return items.filter(product => {
-    return Object.values(product).some((value) => {
-      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
-    })
-  })
 })