fixed archived filtering

added tabs to incominginvoices
added Badges to tabs

pages/incomingInvoices/index.vue

@@ -47,69 +47,49 @@ const sort = ref({
   direction: 'desc'
 })
 
+const type = "incominginvoices"
+const dataType = dataStore.dataTypes[type]
+
 const setupPage = async () => {
   //items.value = await useSupabaseSelect("incominginvoices","*, vendor(id,name), statementallocations(id,amount)","created_at",false)
-  items.value = await useEntities("incominginvoices").select("*, vendor(id,name), statementallocations(id,amount)",sort.value.column,sort.value.direction === "asc")
+  items.value = await useEntities(type).select("*, vendor(id,name), statementallocations(id,amount)",sort.value.column,sort.value.direction === "asc")
 }
 
 setupPage()
 
-const templateColumns = [
-  {
-    key: 'reference',
-    label: "Referenz:",
-    sortable: true,
-  }, {
-    key: 'state',
-    label: "Status:"
-  },
-  {
-    key: "date",
-    label: "Datum",
-    sortable: true,
-  },
-  {
-    key: "vendor",
-    label: "Lieferant",
-  },
-  {
-    key: "amount",
-    label: "Betrag",
-  },
-  {
-    key: "dueDate",
-    label: "Fälligkeitsdatum",
-    sortable: true,
-  },
-  {
-    key: "paid",
-    label: "Bezahlt"
-  },
-  {
-    key: "paymentType",
-    label: "Zahlart",
-    sortable: true,
-  },
-  {
-    key: "description",
-    label: "Beschreibung"
-  }
-]
-const selectedColumns = ref(templateColumns)
-const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+const selectedColumns = ref(tempStore.columns[type] ? tempStore.columns[type] : dataType.templateColumns.filter(i => !i.disabledInTable))
+const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
 
+const selectableFilters = ref(dataType.filters.map(i => i.name))
+const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || [])
 
-
-const searchString = ref(tempStore.searchStrings['incominginvoices'] ||'')
+const searchString = ref(tempStore.searchStrings[type] ||'')
 
 const clearSearchString = () => {
-  tempStore.clearSearchString('incominginvoices')
+  tempStore.clearSearchString(type)
   searchString.value = ''
 }
 const filteredRows = computed(() => {
-  let filteredItems = useSearch(searchString.value, items.value)
+  let tempItems = items.value.map(i => {
+    return {
+      ...i,
+      class: i.archived ? 'bg-red-500/50 dark:bg-red-400/50' : null
+    }
+  })
 
-  return [...filteredItems.filter(i => i.state === "Vorbereitet"), ...filteredItems.filter(i => i.state !== "Vorbereitet")]
+  if(selectedFilters.value.length > 0) {
+    selectedFilters.value.forEach(filterName => {
+      let filter = dataType.filters.find(i => i.name === filterName)
+      tempItems = tempItems.filter(filter.filterFunction)
+    })
+  }
+
+
+
+  tempItems = useSearch(searchString.value, tempItems)
+
+
+  return [...tempItems.filter(i => i.state === "Vorbereitet"), ...tempItems.filter(i => i.state !== "Vorbereitet")]
 
 
 })
@@ -133,7 +113,7 @@ const isPaid = (item) => {
 }
 
 const selectIncomingInvoice = (invoice) => {
-  if(invoice.state === "Vorbereitet") {
+  if(invoice.state === "Vorbereitet" ) {
     router.push(`/incomingInvoices/edit/${invoice.id}`)
   } else {
     router.push(`/incomingInvoices/show/${invoice.id}`)
@@ -157,7 +137,7 @@ const selectIncomingInvoice = (invoice) => {
           placeholder="Suche..."
           class="hidden lg:block"
           @keydown.esc="$event.target.blur()"
-          @change="tempStore.modifySearchString('incominginvoices',searchString)"
+          @change="tempStore.modifySearchString(type,searchString)"
       >
         <template #trailing>
           <UKbd value="/" />
@@ -179,57 +159,90 @@ const selectIncomingInvoice = (invoice) => {
       <USelectMenu
           v-model="selectedColumns"
           icon="i-heroicons-adjustments-horizontal-solid"
-          :options="templateColumns"
+          :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
           multiple
           class="hidden lg:block"
           by="key"
+          :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+          @change="tempStore.modifyColumns(type,selectedColumns)"
       >
         <template #label>
           Spalten
         </template>
       </USelectMenu>
+      <USelectMenu
+          v-if="selectableFilters.length > 0"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+          v-model="selectedFilters"
+          :options="selectableFilters"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
     </template>
   </UDashboardToolbar>
 
-  <UDashboardPanelContent>
-    <UTable
-        v-model:sort="sort"
-        sort-mode="manual"
-        @update:sort="setupPage"
-        :rows="filteredRows"
-        :columns="columns"
-        class="w-full"
-        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-        @select="(i) => selectIncomingInvoice(i) "
-        :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 #state-data="{row}">
-        <span v-if="row.state === 'Vorbereitet'" class="text-cyan-500">{{row.state}}</span>
-        <span v-else-if="row.state === 'Entwurf'" class="text-red-500">{{row.state}}</span>
-        <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{row.state}}</span>
-      </template>
-      <template #date-data="{row}">
-        {{dayjs(row.date).format("DD.MM.YYYY")}}
-      </template>
-      <template #vendor-data="{row}">
-        {{row.vendor ? row.vendor.name : ""}}
-      </template>
-      <template #amount-data="{row}">
-        {{displayCurrency(sum.getIncomingInvoiceSum(row))}}
-      </template>
-      <template #dueDate-data="{row}">
-        <span v-if="row.dueDate">{{dayjs(row.dueDate).format("DD.MM.YYYY")}}</span>
-      </template>
-      <template #paid-data="{row}">
-        <span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
-        <span v-else class="text-rose-600">Offen</span>
-      </template>
-    </UTable>
-  </UDashboardPanelContent>
+  <UTabs
+      class="m-3"
+      :items="[{label: 'In Bearbeitung'},{label: 'Gebucht'}]"
+  >
+    <template #default="{item}">
+      {{item.label}}
+      <UBadge
+        variant="outline"
+        class="ml-2"
+      >
+        {{filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' ).length}}
+      </UBadge>
+    </template>
+    <template #item="{item}">
+      <div style="height: 80dvh; overflow-y: scroll">
+        <UTable
+            v-model:sort="sort"
+            sort-mode="manual"
+            @update:sort="setupPage"
+            :rows="filteredRows.filter(i => item.label === 'Gebucht' ? i.state === 'Gebucht' : i.state !== 'Gebucht' )"
+            :columns="columns"
+            class="w-full"
+            :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+            @select="(i) => selectIncomingInvoice(i) "
+            :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 #state-data="{row}">
+            <span v-if="row.state === 'Vorbereitet'" class="text-cyan-500">{{row.state}}</span>
+            <span v-else-if="row.state === 'Entwurf'" class="text-red-500">{{row.state}}</span>
+            <span v-else-if="row.state === 'Gebucht'" class="text-primary-500">{{row.state}}</span>
+          </template>
+          <template #date-data="{row}">
+            {{dayjs(row.date).format("DD.MM.YYYY")}}
+          </template>
+          <template #vendor-data="{row}">
+            {{row.vendor ? row.vendor.name : ""}}
+          </template>
+          <template #amount-data="{row}">
+            {{displayCurrency(sum.getIncomingInvoiceSum(row))}}
+          </template>
+          <template #dueDate-data="{row}">
+            <span v-if="row.dueDate">{{dayjs(row.dueDate).format("DD.MM.YYYY")}}</span>
+          </template>
+          <template #paid-data="{row}">
+            <span v-if="isPaid(row)" class="text-primary-500">Bezahlt</span>
+            <span v-else class="text-rose-600">Offen</span>
+          </template>
+        </UTable>
+      </div>
+
+    </template>
+  </UTabs>
 
 </template>