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

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

@@ -1,19 +1,35 @@
 <script setup>
 import dayjs from "dayjs";
+import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
 
 definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  'backspace': () => {
+    router.push("/contacts")
+  },
+  '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")
 const itemInfo = ref({
@@ -22,25 +38,23 @@ const itemInfo = ref({
 const oldItemInfo = ref({})
 
 //Functions
-const setupPage = () => {
+const setupPage = async () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem.value = dataStore.getContactById(Number(useRoute().params.id))
+    itemInfo.value = await useSupabaseSelectSingle("contacts",route.params.id,"*, customer(id, name), vendor(id,name) ")
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem.value
-
   if(mode.value === "create") {
     let query = route.query
 
     if(query.customer) itemInfo.value.customer = Number(query.customer)
     if(query.vendor) itemInfo.value.vendor = Number(query.vendor)
   }
-  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(`/contacts/show/${currentItem.value.id}`)
+  if(itemInfo.value) {
+    router.push(`/contacts/show/${itemInfo.value.id}`)
   } else {
     router.push(`/contacts`)
   }
@@ -52,7 +66,7 @@ setupPage()
 
 <template>
   <UDashboardNavbar
-      :title="currentItem ? currentItem.fullName : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')"
+      :title="itemInfo ? itemInfo.fullName : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
   >
     <template #left>
@@ -66,9 +80,9 @@ setupPage()
     </template>
     <template #center>
       <h1
-          v-if="currentItem"
-          :class="['text-xl','font-medium', ... currentItem.active ? ['text-primary'] : ['text-rose-500']]"
-      >{{currentItem ? `Ansprechpartner: ${currentItem.fullName}` : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')}}</h1>
+          v-if="itemInfo"
+          :class="['text-xl','font-medium', ... itemInfo.active ? ['text-primary'] : ['text-rose-500']]"
+      >{{itemInfo ? `Ansprechpartner: ${itemInfo.fullName}` : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')}}</h1>
     </template>
     <template #right>
       <UButton
@@ -93,14 +107,14 @@ setupPage()
       </UButton>
       <UButton
           v-if="mode === 'show'"
-          @click="router.push(`/contacts/edit/${currentItem.id}`)"
+          @click="router.push(`/contacts/edit/${itemInfo.id}`)"
       >
         Bearbeiten
       </UButton>
     </template>
-<!--    <template #badge v-if="currentItem">
+<!--    <template #badge v-if="itemInfo">
       <UBadge
-          v-if="currentItem.active"
+          v-if="itemInfo.active"
       >
         Kontakt aktiv
       </UBadge>
@@ -114,8 +128,9 @@ setupPage()
   </UDashboardNavbar>
   <UTabs
     :items="[{label: 'Informationen'}, {label: 'Logbuch'}]"
-    v-if="currentItem && mode == 'show'"
+    v-if="itemInfo && mode == 'show'"
     class="p-5"
+    v-model="openTab"
   >
     <template #item="{item}">
       <UCard class="mt-5">
@@ -123,16 +138,16 @@ setupPage()
 
 
           <div class="text-wrap mt-3">
-            <p v-if="currentItem.customer">Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.customers.find(customer => customer.id === currentItem.customer) ? dataStore.customers.find(customer => customer.id === currentItem.customer).name : "" }}</nuxt-link></p>
-            <p v-if="currentItem.vendor">Lieferant: <nuxt-link :to="`/vendors/show/${currentItem.vendor}`">{{dataStore.vendors.find(vendor => vendor.id === currentItem.vendor) ? dataStore.vendors.find(vendor => vendor.id === currentItem.vendor).name : ""}}</nuxt-link></p>
+            <p v-if="itemInfo.customer">Kunde: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
+            <p v-if="itemInfo.vendor">Lieferant: <nuxt-link :to="`/vendors/show/${itemInfo.vendor.id}`">{{itemInfo.vendor ? itemInfo.vendor.name : ""}}</nuxt-link></p>
 
 
-            <p>E-Mail: {{currentItem.email}}</p>
-            <p>Mobil: {{currentItem.phoneMobile}}</p>
-            <p>Festnetz: {{currentItem.phoneHome}}</p>
-            <p>Rolle: {{currentItem.role}}</p>
-            <p>Geburtstag: {{currentItem.birthday ? dayjs(currentItem.birthday).format("DD.MM.YYYY") : ""}}</p>
-            <p>Notizen:<br> {{currentItem.notes}}</p>
+            <p>E-Mail: {{itemInfo.email}}</p>
+            <p>Mobil: {{itemInfo.phoneMobile}}</p>
+            <p>Festnetz: {{itemInfo.phoneHome}}</p>
+            <p>Rolle: {{itemInfo.role}}</p>
+            <p>Geburtstag: {{itemInfo.birthday ? dayjs(itemInfo.birthday).format("DD.MM.YYYY") : ""}}</p>
+            <p>Notizen:<br> {{itemInfo.notes}}</p>
           </div>
 
 
@@ -140,8 +155,8 @@ setupPage()
         <div v-else-if="item.label === 'Logbuch'">
           <HistoryDisplay
               type="contact"
-              v-if="currentItem"
-              :element-id="currentItem.id"
+              v-if="itemInfo"
+              :element-id="itemInfo.id"
           />
         </div>
       </UCard>