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

pages/createDocument/index.vue

@@ -90,12 +90,11 @@
         </span>
     </template>
     <template #partner-data="{row}">
-      <span v-if="row.customer">{{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ''}}</span>
-      <span v-else-if="row.vendor">{{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ''}}</span>
+      <span v-if="row.customer">{{row.customer ? row.customer.name : ""}}</span>
 
     </template>
     <template #reference-data="{row}">
-      <span v-if="row.type === 'incomingInvoice'">{{row.reference}}</span>
+      <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
       <span v-else>{{row.documentNumber}}</span>
     </template>
     <template #date-data="{row}">
@@ -106,8 +105,12 @@
       <span :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : '' ">{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}</span>
     </template>
     <template #paid-data="{row}">
+<!--
       <span v-if="dataStore.bankstatements.find(x => x.assignments.find(y => y.type === 'createdDocument' && y.id === row.id))" class="text-primary-500">Bezahlt</span>
+-->
+<!--
       <span v-else :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : ['text-cyan-500'] ">Offen</span>
+-->
 <!--      {{dataStore.bankstatements.find(x => x.assignments.find(y => y.id === row.id)) ? true : false}}-->
     </template>
     <template #amount-data="{row}">
@@ -140,13 +143,48 @@ defineShortcuts({
   },
   '+': () => {
     router.push('/createDocument/edit')
+  },
+  'Enter': {
+    usingInput: true,
+    handler: () => {
+      router.push(`/createDocument/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("createddocuments","*, customer(id,name)")
+  console.log(items.value)
+}
+
+setupPage()
+
 const templateColumns = [
+  {
+    key: "reference",
+    label: "Referenz",
+    sortable: true
+  },
   {
     key: 'type',
     label: "Typ",
@@ -163,12 +201,7 @@ const templateColumns = [
   },
   {
     key: 'partner',
-    label: "Kunde / Lieferant",
-    sortable: true
-  },
-  {
-    key: "reference",
-    label: "Referenz",
+    label: "Kunde",
     sortable: true
   },
   {
@@ -239,26 +272,17 @@ const getRowAmount = (row) => {
 const searchString = ref('')
 const showDrafts = ref(false)
 const filteredRows = computed(() => {
-  let items = dataStore.createddocuments
 
-  items = items.filter(i => types.value.find(x => x.key === i.type))
+  let temp = items.value.filter(i => types.value.find(x => x.key === i.type))
 
   if(showDrafts.value === true) {
-    items = items.filter(i => i.state === "Entwurf")
+    temp = temp.filter(i => i.state === "Entwurf")
   } else {
-    items = items.filter(i => i.state !== "Entwurf")
+    temp = temp.filter(i => i.state !== "Entwurf")
   }
 
+  return useSearch(searchString.value, temp)
 
-  if(!searchString.value) {
-    return items
-  }
-
-  return items.filter(item => {
-    return Object.values(item).some((value) => {
-      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
-    })
-  })
 })
 
 const calculateDocSum = (rows) => {