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

pages/vendors/index.vue

@@ -46,6 +46,10 @@
       @select="(i) => router.push(`/vendors/show/${i.id}`)"
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Lieferanten 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 #address-data="{row}">
       {{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{(row.infoData.zip || row.infoData.city) ? `${row.infoData.zip} ${row.infoData.city}, ` : ''}} {{row.infoData.country}}
     </template>
@@ -67,11 +71,17 @@ defineShortcuts({
   '+': () => {
     router.push("/vendors/create")
   },
-  'enter': {
-    usingInput: "searchinput",
+  'Enter': {
+    usingInput: true,
     handler: () => {
-      router.push(`/vendors/show/${selectedEntry.value}`)
+      router.push(`/vendors/show/${filteredRows.value[selectedItem.value].id}`)
     }
+  },
+  'arrowdown': () => {
+    selectedItem.value += 1
+  },
+  'arrowup': () => {
+    selectedItem.value -= 1
   }
 })
 
@@ -79,6 +89,16 @@ const dataStore = useDataStore()
 const router = useRouter()
 const mode = ref("show")
 
+const items = ref([])
+const selectedItem = ref(0)
+
+const setupPage = async () => {
+  items.value = await useSupabaseSelect("vendors","*","vendorNumber")
+}
+
+setupPage()
+
+
 const templateColumns = [
   {
     key: 'vendorNumber',
@@ -100,22 +120,9 @@ const selectedColumns = ref(templateColumns)
 const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 const searchString = ref('')
-const selectedEntry = ref(null)
 
 const filteredRows = computed(() => {
-  if(!searchString.value) {
-    return dataStore.vendors
-  }
-
-  let results =  dataStore.vendors.filter(item => {
-    return Object.values(item).some((value) => {
-      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
-    })
-  })
-
-  selectedEntry.value = results[0].id
-
-  return results
+  return useSearch(searchString.value, items.value)
 })
 </script>