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

pages/projects/index.vue

@@ -56,14 +56,18 @@
       @select="(i) => router.push(`/projects/show/${i.id}`) "
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekte anzuzeigen' }"
   >
+    <template #name-data="{row}">
+      <span class="text-primary-500 font-bold" v-if="row === filteredRows[selectedItem]">{{row.name}}</span>
+      <span v-else>{{row.name}}</span>
+    </template>
     <template #phase-data="{row}">
       {{getActivePhaseLabel(row)}}
     </template>
     <template #customer-data="{row}">
-      {{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ""}}
+      {{row.customer ? row.customer.name : ""}}
     </template>
     <template #plant-data="{row}">
-      {{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : ""}}
+      {{row.plant ? row.plant.name : ""}}
     </template>
     <template #users-data="{row}">
       {{row.users.map(i => dataStore.getProfileById(i).fullName).join(", ")}}
@@ -85,12 +89,43 @@ defineShortcuts({
   },
   '+': () => {
     router.push("/projects/create")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/projects/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("projects","*, customer (name), plant(name)")
+
+  console.log(items.value)
+}
+
+setupPage()
+
 const templateColumns = [
   {
     key: "phase",
@@ -148,9 +183,7 @@ const searchString = ref('')
 const showFinished = ref(false)
 
 const filteredRows = computed(() => {
-  let items = dataStore.projects
-
-  items = items.map(item => {
+  let temp = items.value.map(item => {
     return  {
       ...item,
       phaseLabel: getActivePhaseLabel(item)
@@ -158,16 +191,16 @@ const filteredRows = computed(() => {
   })
 
   if(showFinished.value) {
-    items = items.filter(i => i.phaseLabel === "Abgeschlossen")
+    temp = temp.filter(i => i.phaseLabel === "Abgeschlossen")
   } else {
-    items = items.filter(i => i.phaseLabel !== "Abgeschlossen")
+    temp = temp.filter(i => i.phaseLabel !== "Abgeschlossen")
   }
 
   if(!searchString.value) {
-    return items
+    return temp
   }
 
-  return items.filter(project => {
+  return temp.filter(project => {
     return Object.values(project).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })