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

pages/plants/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <UDashboardNavbar title="Objekte" :badge="filteredRows.length">
+  <UDashboardNavbar title="Objekte" >
     <template #right>
       <UInput
           id="searchinput"
@@ -54,7 +54,7 @@
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Objekte anzuzeigen' }"
   >
     <template #customer-data="{row}">
-      {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : "" }}
+      {{row.customer ? row.customer.name : ""}}
     </template>
   </UTable>
 
@@ -74,12 +74,42 @@ defineShortcuts({
   },
   '+': () => {
     router.push("/plants/create")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/plants/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("plants","*, customer(id,name)")
+  console.log(items.value)
+}
+
+setupPage()
+
 const templateColumns = [
   {
     key: "name",
@@ -98,22 +128,9 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
 const searchString = ref('')
 
 const filteredRows = computed(() => {
-  if(!searchString.value) {
-    return dataStore.plants
-  }
-
-  return dataStore.plants.filter(item => {
-
-    item.customerName = dataStore.customers.find(i => i.id === item.customer).name
-
-    return Object.values(item).some((value) => {
-      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
-    })
-  })
+  return useSearch(searchString.value, items.value)
 })
-const selectItem = (item) => {
-  router.push(`/plants/show/${item.id} `)
-}
+
 </script>
 
 <style scoped>