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

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

@@ -2,39 +2,55 @@
 import HistoryDisplay from "~/components/HistoryDisplay.vue";
 import DocumentList from "~/components/DocumentList.vue";
 import DocumentUpload from "~/components/DocumentUpload.vue";
+import {useSupabaseSelect} from "~/composables/useSupabase.js";
 
 definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  'backspace': () => {
+    router.push("/products")
+  },
+  '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 )
 
-let currentItem = ref(null)
-
 //Working
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
     unit: 1,
     tags: []
 })
+const openTab = ref(0)
 
 //Functions
-const setupPage = () => {
+const setupPage = async () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem.value = dataStore.getProductById(Number(useRoute().params.id))
+    itemInfo.value = await useSupabaseSelectSingle("products",route.params.id,"*")
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem.value
+  if(mode.value === "edit") itemInfo.value = itemInfo.value
 
 }
 
 const cancelEditorCreate = () => {
-  if(currentItem.value) {
-    router.push(`/products/show/${currentItem.value.id}`)
+  if(itemInfo.value) {
+    router.push(`/products/show/${itemInfo.value.id}`)
   } else {
     router.push(`/products/`)
   }
@@ -45,7 +61,6 @@ setupPage()
 
 <template>
   <UDashboardNavbar
-      :title="currentItem ? currentItem.name : (mode === 'create' ? 'Artikel erstellen' : 'Artikel bearbeiten')"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
   >
     <template #left>
@@ -59,9 +74,9 @@ setupPage()
     </template>
     <template #center>
       <h1
-          v-if="currentItem"
+          v-if="itemInfo"
           class="text-xl font-medium"
-      >{{currentItem ? `Artikel: ${currentItem.name}` : (mode === 'create' ? 'Artikel erstellen' : 'Artikel bearbeiten')}}</h1>
+      >{{itemInfo.name ? `Artikel: ${itemInfo.name}` : (mode === 'create' ? 'Artikel erstellen' : 'Artikel bearbeiten')}}</h1>
     </template>
     <template #right>
       <UButton
@@ -86,7 +101,7 @@ setupPage()
       </UButton>
       <UButton
           v-if="mode === 'show'"
-          @click="  router.push(`/products/edit/${currentItem.id}`)"
+          @click="  router.push(`/products/edit/${itemInfo.id}`)"
       >
         Bearbeiten
       </UButton>
@@ -94,8 +109,9 @@ setupPage()
   </UDashboardNavbar>
   <UTabs
     :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Bestand'},{label: 'Dokumente'}]"
-    v-if="mode === 'show'"
+    v-if="mode === 'show' && itemInfo"
     class="p-5"
+    v-model="openTab"
   >
     <template #item="{item}">
       <UCard class="mt-5">
@@ -103,15 +119,16 @@ setupPage()
           v-if="item.label === 'Informationen'"
         >
           <UBadge
-              v-for="tag in currentItem.tags"
+              v-for="tag in itemInfo.tags"
               class="mr-2"
+
           >
             {{tag}}
           </UBadge>
           <UDivider
               class="my-2"
           />
-          <span v-if="currentItem.purchasePrice">Einkaufspreis: {{Number(currentItem.purchasePrice).toFixed(2)}} €<br></span>
+          <span v-if="itemInfo.purchasePrice">Einkaufspreis: {{Number(itemInfo.purchasePrice).toFixed(2)}} €<br></span>
 
         </div>
         <div
@@ -119,14 +136,14 @@ setupPage()
         >
           <HistoryDisplay
               type="product"
-              v-if="currentItem"
-              :element-id="currentItem.id"
+              v-if="itemInfo"
+              :element-id="itemInfo.id"
           />
         </div>
         <div
           v-if="item.label === 'Bestand'"
         >
-          Bestand: {{dataStore.getStockByProductId(currentItem.id)}} {{dataStore.units.find(unit => unit.id === currentItem.unit) ? dataStore.units.find(unit => unit.id === currentItem.unit).name : ""}}
+          Bestand: {{dataStore.getStockByProductId(itemInfo.id)}} {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : ""}}
 
         </div>
         <div
@@ -135,12 +152,12 @@ setupPage()
           <Toolbar>
             <DocumentUpload
                 type="product"
-                :element-id="currentItem.id"
+                :element-id="itemInfo.id"
             />
           </Toolbar>
 
 
-          <DocumentList :documents="dataStore.getDocumentsByProductId(currentItem.id)"/>
+          <DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
         </div>
       </UCard>
     </template>
@@ -154,6 +171,7 @@ setupPage()
     >
       <UInput
           v-model="itemInfo.name"
+          autofocus
       />
     </UFormGroup>
     <UFormGroup

pages/products/index.vue

@@ -48,7 +48,6 @@
       </USelectMenu>
     </template>
   </UDashboardToolbar>
-
   <UTable
       :rows="filteredRows"
       :columns="columns"
@@ -57,6 +56,15 @@
       @select="(i) => router.push(`/products/show/${i.id}`) "
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
   >
+    <template #name-data="{row}">
+      <span
+          v-if="row === filteredRows[selectedItem]"
+          class="text-primary-500 font-bold">{{row.name}}</span>
+      <span v-else>
+        {{row.name}}
+      </span>
+
+    </template>
     <template #stock-data="{row}">
       {{`${dataStore.getStockByProductId(row.id)} ${(dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : "")}`}}
     </template>
@@ -76,7 +84,7 @@
     <template #unit-data="{row}">
       {{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
     </template>
-  </UTable>/
+  </UTable>
 
 </template>
 
@@ -94,12 +102,42 @@ defineShortcuts({
   },
   '+': () => {
     router.push("/products/create")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/products/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("products","*")
+}
+
+setupPage()
+
+
 const templateColumns = [
   {
     key: "stock",
@@ -152,19 +190,10 @@ const selectedTags = ref(templateTags.value)
 const searchString = ref('')
 
 const filteredRows = computed(() => {
-  let items = dataStore.products
+  let temp = items.value.filter(i => i.tags.some(x => selectedTags.value.includes(x)) || i.tags.length === 0)
 
-  items = items.filter(i => i.tags.some(x => selectedTags.value.includes(x)) || i.tags.length === 0)
+  return useSearch(searchString.value, temp)
 
-  if(!searchString.value) {
-    return items
-  }
-
-  return items.filter(product => {
-    return Object.values(product).some((value) => {
-      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
-    })
-  })
 })