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

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

@@ -330,18 +330,18 @@ setupPage()
             Netto
           </InputGroup>
 
-          <table v-if="itemInfo.accounts.length > 1">
+          <table v-if="itemInfo.accounts.length > 1" class="w-full">
             <tr>
               <td>Gesamt exkl. Steuer: </td>
-              <td class="text-right">{{totalCalculated.totalNet.toFixed(2)}} €</td>
+              <td class="text-right">{{totalCalculated.totalNet.toFixed(2).replace(".",",")}} €</td>
             </tr>
             <tr>
               <td>19% Steuer: </td>
-              <td class="text-right">{{totalCalculated.totalAmount19Tax.toFixed(2)}} €</td>
+              <td class="text-right">{{totalCalculated.totalAmount19Tax.toFixed(2).replace(".",",")}} €</td>
             </tr>
             <tr>
               <td>Gesamt inkl. Steuer: </td>
-              <td class="text-right">{{totalCalculated.totalGross.toFixed(2)}} €</td>
+              <td class="text-right">{{totalCalculated.totalGross.toFixed(2).replace(".",",")}} €</td>
             </tr>
           </table>
 
@@ -412,7 +412,7 @@ setupPage()
               <UFormGroup
                   v-if="useNetMode"
                   label="Gesamtbetrag exkl. Steuer in EUR"
-                  class="flex-auto"
+                  class="flex-auto truncate"
                   :help="item.taxType !== null ? `Betrag inkl. Steuern: ${String(Number(item.amountNet + item.amountTax).toFixed(2)).replace('.',',')} €` : 'Zuerst Steuertyp festlegen' "
 
               >
@@ -421,7 +421,7 @@ setupPage()
                     step="0.01"
                     v-model="item.amountNet"
                     :disabled="item.taxType === null"
-                    @keyup="item.amountTax = Number((item.amountNet * (Number(item.taxType)/100)).toFixed(2))"
+                    @keyup="item.amountTax = Number((item.amountNet * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
                 >
                   <template #trailing>
                     <span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>

pages/incomingInvoices/index.vue

@@ -12,15 +12,47 @@ defineShortcuts({
   },
   '+': () => {
     router.push("/incomingInvoices/[mode]")
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/incomingInvoices/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("incominginvoices","*, vendor(id,name)")
+}
+
+setupPage()
 
 const templateColumns = [
   {
+    key: 'reference',
+    label: "Referenz:",
+    sortable: true
+  }, {
     key: 'state',
     label: "Status:",
     sortable: true
@@ -49,15 +81,8 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn
 
 const searchString = ref('')
 const filteredRows = computed(() => {
-  if(!searchString.value) {
-    return dataStore.incominginvoices
-  }
+  return useSearch(searchString.value, items.value)
 
-  return dataStore.incominginvoices.filter(item => {
-    return Object.values(item).some((value) => {
-      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
-    })
-  })
 })
 
 
@@ -110,18 +135,22 @@ const filteredRows = computed(() => {
         @select="(i) => router.push(`/incomingInvoices/show/${i.id}`) "
         :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
     >
+      <template #reference-data="{row}">
+        <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.reference}}</span>
+        <span v-else>{{row.reference}}</span>
+      </template>
       <template #date-data="{row}">
         {{dayjs(row.date).format("DD.MM.YYYY")}}
       </template>
       <template #vendor-data="{row}">
-        {{dataStore.getVendorById(row.vendor).name}}
+        {{row.vendor ? row.vendor.name : ""}}
       </template>
       <template #dueDate-data="{row}">
         {{dayjs(row.dueDate).format("DD.MM.YYYY")}}
       </template>
       <template #paid-data="{row}">
-        <span v-if="dataStore.bankstatements.find(x => x.assignments.find(y => y.type === 'incomingInvoice' && y.id === row.id))" class="text-primary-500">Bezahlt</span>
-        <span v-else class="text-rose-600">Offen</span>
+<!--        <span v-if="dataStore.bankstatements.find(x => x.statementallocations.find(y => y.ii_id === row.id))" class="text-primary-500">Bezahlt</span>
+        <span v-else class="text-rose-600">Offen</span>-->
       </template>
     </UTable>
   </UDashboardPanelContent>