From 796617338565f8ea44e4c9c036fc25fe8d6177f8 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Wed, 1 May 2024 21:55:41 +0200
Subject: [PATCH] Added Reset in Inventory Added Keyboard Controls for Tab Nav
 and Back to List Added Select On Enter for First Entry in Search

for Customers and Vendors
---
 pages/contacts/[mode]/[[id]].vue  | 24 +++++++++++++++++++++---
 pages/customers/[mode]/[[id]].vue | 20 +++++++++++++++++++-
 pages/customers/index.vue         | 19 +++++++++++++++++--
 pages/vehicles/[mode]/[[id]].vue  | 20 +++++++++++++++++++-
 pages/vendors/[mode]/[[id]].vue   | 19 ++++++++++++++++++-
 pages/vendors/index.vue           | 14 +++++++++++++-
 6 files changed, 107 insertions(+), 9 deletions(-)

diff --git a/pages/contacts/[mode]/[[id]].vue b/pages/contacts/[mode]/[[id]].vue
index c271f05..b27b32c 100644
--- a/pages/contacts/[mode]/[[id]].vue
+++ b/pages/contacts/[mode]/[[id]].vue
@@ -51,7 +51,25 @@ setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.fullName : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')">
+  <UDashboardNavbar
+      :title="currentItem ? currentItem.fullName : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')"
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/contacts`)"
+      >
+        Ansprechpartner
+      </UButton>
+    </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>
+    </template>
     <template #right>
       <UButton
           v-if="mode === 'edit'"
@@ -80,7 +98,7 @@ setupPage()
         Bearbeiten
       </UButton>
     </template>
-    <template #badge v-if="currentItem">
+<!--    <template #badge v-if="currentItem">
       <UBadge
           v-if="currentItem.active"
       >
@@ -92,7 +110,7 @@ setupPage()
       >
         Kontakt inaktiv
       </UBadge>
-    </template>
+    </template>-->
   </UDashboardNavbar>
   <UTabs
     :items="[{label: 'Informationen'}, {label: 'Logbuch'}]"
diff --git a/pages/customers/[mode]/[[id]].vue b/pages/customers/[mode]/[[id]].vue
index e8a95d5..3faa595 100644
--- a/pages/customers/[mode]/[[id]].vue
+++ b/pages/customers/[mode]/[[id]].vue
@@ -4,6 +4,22 @@ definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  'backspace': () => {
+    router.push("/customers")
+  },
+  '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()
@@ -11,7 +27,7 @@ const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )
 
 let currentItem = ref(null)
-
+const openTab = ref(0)
 
 
 //Working
@@ -57,6 +73,7 @@ setupPage()
 </script>
 
 <template>
+  {{openTab}}
   <UDashboardNavbar
       :title="currentItem ? `Kunde: ${currentItem.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
@@ -123,6 +140,7 @@ setupPage()
       v-if="currentItem && mode == 'show'"
       :items="[{label: 'Informationen'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}]"
       class="p-5"
+      v-model="openTab"
   >
     <template #item="{item}">
       <div v-if="item.label === 'Informationen'" class="flex mt-5">
diff --git a/pages/customers/index.vue b/pages/customers/index.vue
index 08a8ebe..6b91912 100644
--- a/pages/customers/index.vue
+++ b/pages/customers/index.vue
@@ -3,6 +3,7 @@
     <template #right>
       <UInput
           id="searchinput"
+          name="searchinput"
           v-model="searchString"
           icon="i-heroicons-funnel"
           autocomplete="off"
@@ -54,7 +55,7 @@
       <span v-else class="text-rose-500">Gesperrt</span>
     </template>
     <template #address-data="{row}">
-      {{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{row.infoData.zip ? row.infoData.zip : ""}}{{row.infoData.city ? `${row.infoData.city}, ` : ''}} {{row.infoData.country}}
+      {{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{row.infoData.zip ? row.infoData.zip : ""}} {{row.infoData.city ? `${row.infoData.city}, ` : ''}} {{row.infoData.country}}
     </template>
   </UTable>
 </template>
@@ -72,7 +73,16 @@ defineShortcuts({
   },
   '+': () => {
     router.push("/customers/create")
+  },
+  'enter': {
+    usingInput: "searchinput",
+    handler: () => {
+      router.push(`/customers/show/${selectedEntry.value}`)
+    }
   }
+
+
+
 })
 
 const dataStore = useDataStore()
@@ -115,17 +125,22 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
 
 
 const searchString = ref('')
+const selectedEntry = ref(null)
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
     return dataStore.customers
   }
 
-  return dataStore.customers.filter(item => {
+  let results =  dataStore.customers.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
   })
+
+  selectedEntry.value = results[0].id
+
+  return results
 })
 </script>
 
diff --git a/pages/vehicles/[mode]/[[id]].vue b/pages/vehicles/[mode]/[[id]].vue
index 0e868ce..2dfcb1c 100644
--- a/pages/vehicles/[mode]/[[id]].vue
+++ b/pages/vehicles/[mode]/[[id]].vue
@@ -94,7 +94,25 @@ setupPage()
 </script>
 
 <template>
-  <UDashboardNavbar :title="currentItem ? currentItem.licensePlate : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')">
+  <UDashboardNavbar
+      :title="currentItem ? currentItem.licensePlate : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')"
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/vehicles`)"
+      >
+        Fahrzeuge
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="currentItem"
+          :class="['text-xl','font-medium']"
+      >{{currentItem ? `Fahrzeug: ${currentItem.licensePlate}` : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')}}</h1>
+    </template>
     <template #right>
       <UButton
           v-if="mode === 'edit'"
diff --git a/pages/vendors/[mode]/[[id]].vue b/pages/vendors/[mode]/[[id]].vue
index 7d364b1..6e7f64a 100644
--- a/pages/vendors/[mode]/[[id]].vue
+++ b/pages/vendors/[mode]/[[id]].vue
@@ -4,12 +4,28 @@ definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  'backspace': () => {
+    router.push("/vendors")
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 1) {
+      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)
 
 
@@ -92,6 +108,7 @@ setupPage()
     :items="[{label: 'Informationen'},{label: 'Dokumente'}]"
     v-if="currentItem && mode == 'show'"
     class="p-5"
+    v-model="openTab"
   >
     <template #item="{item}">
       <div v-if="item.label === 'Informationen'" class="mt-5 flex">
diff --git a/pages/vendors/index.vue b/pages/vendors/index.vue
index 8fbc58e..5d0e7ff 100644
--- a/pages/vendors/index.vue
+++ b/pages/vendors/index.vue
@@ -3,6 +3,7 @@
     <template #right>
       <UInput
           id="searchinput"
+          name="searchinput"
           v-model="searchString"
           icon="i-heroicons-funnel"
           autocomplete="off"
@@ -65,6 +66,12 @@ defineShortcuts({
   },
   '+': () => {
     router.push("/vendors/create")
+  },
+  'enter': {
+    usingInput: "searchinput",
+    handler: () => {
+      router.push(`/vendors/show/${selectedEntry.value}`)
+    }
   }
 })
 
@@ -93,17 +100,22 @@ const selectedColumns = ref(templateColumns)
 const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 const searchString = ref('')
+const selectedEntry = ref(null)
 
 const filteredRows = computed(() => {
   if(!searchString.value) {
     return dataStore.vendors
   }
 
-  return dataStore.vendors.filter(item => {
+  let results =  dataStore.vendors.filter(item => {
     return Object.values(item).some((value) => {
       return String(value).toLowerCase().includes(searchString.value.toLowerCase())
     })
   })
+
+  selectedEntry.value = results[0].id
+
+  return results
 })
 </script>