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

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

@@ -1,18 +1,35 @@
 <script setup>
 import HistoryDisplay from "~/components/HistoryDisplay.vue";
 import dayjs from "dayjs";
+import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
 
 definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  'backspace': () => {
+    router.push("/contracts")
+  },
+  '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")
@@ -23,12 +40,11 @@ const itemInfo = ref({
 })
 
 //Functions
-const setupPage = () => {
+const setupPage = async () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem.value = dataStore.getContractById(Number(useRoute().params.id))
+    itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*, customer(id,name)")
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem.value
 
   if(mode.value === "create") {
     let query = route.query
@@ -38,8 +54,8 @@ const setupPage = () => {
 }
 
 const cancelEditorCreate = () => {
-  if(currentItem.value) {
-    router.push(`/contracts/show/${currentItem.value.id}`)
+  if(itemInfo.value) {
+    router.push(`/contracts/show/${itemInfo.value.id}`)
   } else {
     router.push(`/contracts/`)
   }
@@ -49,7 +65,7 @@ setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')">
+  <UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')">
     <template #left>
       <UButton
           icon="i-heroicons-chevron-left"
@@ -61,9 +77,9 @@ setupPage()
     </template>
     <template #center>
       <h1
-          v-if="currentItem"
-          :class="['text-xl','font-medium', ... currentItem.active ? ['text-primary'] : ['text-rose-500']]"
-      >{{currentItem ? `Vertrag: ${currentItem.name}` : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')}}</h1>
+          v-if="itemInfo"
+          :class="['text-xl','font-medium', ... itemInfo.active ? ['text-primary'] : ['text-rose-500']]"
+      >{{itemInfo ? `Vertrag: ${itemInfo.name}` : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')}}</h1>
     </template>
     <template #right>
       <UButton
@@ -88,25 +104,26 @@ setupPage()
       </UButton>
       <UButton
           v-if="mode === 'show'"
-          @click="router.push(`/contracts/edit/${currentItem.id}`)"
+          @click="router.push(`/contracts/edit/${itemInfo.id}`)"
       >
         Bearbeiten
       </UButton>
     </template>
   </UDashboardNavbar>
   <UTabs
-      v-if="currentItem && mode === 'show'"
+      v-if="itemInfo.id && mode === 'show'"
       :items="[{label: 'Informationen'}, {label: 'Dokumente'}]"
     class="p-5"
+      v-model="openTab"
   >
     <template #item="{item}">
       <div v-if="item.label === 'Informationen'" class="flex mt-5">
         <div class="w-1/2 mr-5">
           <UCard>
             <div class="text-wrap">
-              <p>Kundennummer: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
+              <p>Kundennummer: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
               Beschreibung:<br>
-              {{currentItem.description}}<br>
+              {{itemInfo.description}}<br>
             </div>
           </UCard>
         </div>
@@ -114,8 +131,8 @@ setupPage()
           <UCard class="h-full">
             <HistoryDisplay
                 type="contract"
-                v-if="currentItem"
-                :element-id="currentItem.id"
+                v-if="itemInfo"
+                :element-id="itemInfo.id"
                 :render-headline="true"
             />
           </UCard>
@@ -126,7 +143,7 @@ setupPage()
 
 
 <!--        <UBadge
-            v-if="currentItem.active"
+            v-if="itemInfo.active"
         >
           Vertrag aktiv
         </UBadge>
@@ -146,11 +163,11 @@ setupPage()
           <Toolbar>
             <DocumentUpload
                 type="contract"
-                :element-id="currentItem.id"
+                :element-id="itemInfo.id"
             />
           </Toolbar>
           <DocumentList
-              :documents="dataStore.getDocumentsByContractId(currentItem.id)"
+              :documents="dataStore.getDocumentsByContractId(itemInfo.id)"
           />
         </UCard>
 

pages/contracts/index.vue

@@ -45,7 +45,8 @@
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Verträge anzuzeigen' }"
   >
     <template #customer-data="{row}">
-      {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : row.customer }}
+      <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.customer ? row.customer.name : ""}}</span>
+      <span v-else>{{row.customer ? row.customer.name : ""}}</span>
     </template>
   </UTable>
 </template>
@@ -63,16 +64,45 @@ defineShortcuts({
   },
   '+': () => {
     router.push("/contracts/create")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/contracts/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("contracts","*, customer(id,name)")
+}
+
+setupPage()
+
 const templateColumns = [
   {
     key: 'customer',
-    label: "Kundennr.:",
+    label: "Kunde",
     sortable: true
   },
   {
@@ -91,15 +121,8 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
 
 const searchString = ref('')
 const filteredRows = computed(() => {
-  if(!searchString.value) {
-    return dataStore.contracts
-  }
+  return useSearch(searchString.value, items.value)
 
-  return dataStore.contracts.filter(item => {
-    return Object.values(item).some((value) => {
-      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
-    })
-  })
 })
 </script>