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

pages/contacts/index.vue

@@ -44,15 +44,19 @@
       @select="(i) => router.push(`/contacts/show/${i.id}`)"
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Ansprechpartner anzuzeigen' }"
   >
+    <template #fullName-data="{row}">
+      <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.fullName}}</span>
+      <span v-else>{{row.fullName}}</span>
+    </template>
     <template #active-data="{row}">
       <span v-if="row.active" class="text-primary-500">Aktiv</span>
       <span v-else class="text-rose">Gesperrt</span>
     </template>
     <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>
     <template #vendor-data="{row}">
-      {{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
+      {{row.vendor ? row.vendor.name : ""}}
     </template>
   </UTable>
 </template>
@@ -73,12 +77,43 @@ defineShortcuts({
   },
   '+': () => {
     router.push("/contacts/create")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/contacts/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("contacts","*, customer(name), vendor(name)")
+}
+
+setupPage()
+
+
+
 const templateColumns = [
 
   {
@@ -139,7 +174,7 @@ const searchString = ref('')
 })*/
 
 const filteredRows = computed(() => {
-  return useSearch(searchString.value, dataStore.contacts)
+  return useSearch(searchString.value, items.value)
 })
 
 </script>