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>