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

pages/vehicles/[mode]/[[id]].vue

@@ -1,17 +1,34 @@
 <script setup>
 import dayjs from "dayjs";
+import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
 
 definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  'backspace': () => {
+    router.push("/vehicles")
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 3) {
+      openTab.value += 1
+    }
+  },
+})
+
 const dataStore = useDataStore()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
+const openTab = ref(0)
 
-let currentItem = ref(null)
 
 //Working
 const mode = ref(route.params.mode || "show")
@@ -59,18 +76,17 @@ const incomingInvoicesColumns = [
 ]
 
 //Functions
-const setupPage = () => {
+const setupPage = async () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem.value = dataStore.getVehicleById(Number(useRoute().params.id))
+    itemInfo.value = await useSupabaseSelectSingle("vehicles",route.params.id,"*")
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem.value
-  if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
+  if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 }
 
 const cancelEditorCreate = () => {
-  if(currentItem.value) {
-    router.push(`/vehicles/show/${currentItem.value.id}`)
+  if(itemInfo.value) {
+    router.push(`/vehicles/show/${itemInfo.value.id}`)
   } else {
     router.push(`/vehicles`)
   }
@@ -95,7 +111,7 @@ setupPage()
 
 <template>
   <UDashboardNavbar
-      :title="currentItem ? currentItem.licensePlate : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')"
+      :title="itemInfo ? itemInfo.licensePlate : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
   >
     <template #left>
@@ -109,9 +125,9 @@ setupPage()
     </template>
     <template #center>
       <h1
-          v-if="currentItem"
+          v-if="itemInfo"
           :class="['text-xl','font-medium']"
-      >{{currentItem ? `Fahrzeug: ${currentItem.licensePlate}` : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')}}</h1>
+      >{{itemInfo ? `Fahrzeug: ${itemInfo.licensePlate}` : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')}}</h1>
     </template>
     <template #right>
       <UButton
@@ -136,7 +152,7 @@ setupPage()
       </UButton>
       <UButton
           v-if="mode === 'show'"
-          @click="router.push(`/vehicles/edit/${currentItem.id}`)"
+          @click="router.push(`/vehicles/edit/${itemInfo.id}`)"
       >
         Bearbeiten
       </UButton>
@@ -144,19 +160,20 @@ setupPage()
   </UDashboardNavbar>
   <UTabs
       :items="tabItems"
-      v-if="mode === 'show'"
+      v-if="mode === 'show' && itemInfo.id"
       class="p-5"
+      v-model="openTab"
   >
     <template #item="{item}">
       <UCard class="mt-5">
         <div class="truncate" v-if="item.label === 'Informationen'">
-          <p>Typ: {{currentItem.type}}</p>
-          <p>Fahrgestellnummer: {{currentItem.vin}}</p>
-          <p>Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}}</p>
+          <p>Typ: {{itemInfo.type}}</p>
+          <p>Fahrgestellnummer: {{itemInfo.vin}}</p>
+          <p>Fahrer: {{dataStore.profiles.find(profile => profile.id === itemInfo.driver) ? dataStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer gewählt'}}</p>
         </div>
         <div v-else-if="item.label === 'Eingangsrechnungen'">
           <UTable
-              :rows="dataStore.getIncomingInvoicesByVehicleId(currentItem.id)"
+              :rows="dataStore.getIncomingInvoicesByVehicleId(itemInfo.id)"
               :columns="incomingInvoicesColumns"
               @select="(row) => router.push('/receipts/show/' + row.id)"
           >
@@ -175,20 +192,20 @@ setupPage()
         <div v-else-if="item.label === 'Logbuch'">
           <HistoryDisplay
               type="vehicle"
-              v-if="currentItem"
-              :element-id="currentItem.id"
+              v-if="itemInfo"
+              :element-id="itemInfo.id"
           />
         </div>
         <div v-else-if="item.label === 'Dokumente'">
           <Toolbar>
             <DocumentUpload
                 type="vehicle"
-                :element-id="currentItem.id"
+                :element-id="itemInfo.id"
             />
           </Toolbar>
 
           <DocumentList
-              :documents="dataStore.getDocumentsByVehicleId(currentItem.id)"
+              :documents="dataStore.getDocumentsByVehicleId(itemInfo.id)"
           />
         </div>
       </UCard>

pages/vehicles/index.vue

@@ -35,7 +35,6 @@
       </USelectMenu>
     </template>
   </UDashboardToolbar>
-
   <UTable
       :rows="filteredRows"
       :columns="columns"
@@ -44,7 +43,10 @@
       @select="(i) => router.push(`/vehicles/show/${i.id}`) "
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Fahrzeuge anzuzeigen' }"
   >
-
+    <template #licensePlate-data="{row}">
+      <span v-if="row === filteredRows[selectedItem]" class="font-bold text-primary-500">{{row.licensePlate}}</span>
+      <span v-else>{{row.licensePlate}}</span>
+    </template>
   </UTable>
 </template>
 
@@ -61,13 +63,42 @@ defineShortcuts({
     document.getElementById("searchinput").focus()
   },
   '+': () => {
-    router.push("/tasks/create")
+    router.push("/vehicles/create")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/vehicles/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("vehicles","*")
+}
+
+setupPage()
+
 const templateColumns = [
   {
     key: 'licensePlate',
@@ -86,15 +117,7 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
 const searchString = ref('')
 
 const filteredRows = computed(() => {
-  if(!searchString.value) {
-    return dataStore.vehicles
-  }
-
-  return dataStore.vehicles.filter(item => {
-    return Object.values(item).some((value) => {
-      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
-    })
-  })
+  return useSearch(searchString.value, items.value)
 })
 </script>