Added Filters to Serial Invoice

pages/createDocument/serialInvoice.vue

@@ -24,9 +24,23 @@
           Spalten
         </template>
       </USelectMenu>
+      <USelectMenu
+          v-model="selectedFilters"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="filterOptions"
+          option-attribute="name"
+          value-attribute="name"
+          multiple
+          class="hidden lg:block"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
     </template>
   </UDashboardToolbar>
-
   <UTable
       :rows="filteredRows"
       :columns="columns"
@@ -82,6 +96,10 @@
     <template #amount-data="{row}">
       {{displayCurrency(calculateDocSum(row))}}
     </template>
+    <template #serialConfig.active-data="{row}">
+      <span v-if="row.serialConfig.active" class="text-primary">Ja</span>
+      <span v-else class="text-rose-600">Nein</span>
+    </template>
   </UTable>
 
 </template>
@@ -109,6 +127,11 @@ const filteredRows = computed(() => {
     temp = temp.filter(i => i.state !== "Entwurf")
   }*/
 
+  selectedFilters.value.forEach(filterName => {
+    let filter = filterOptions.value.find(i => i.name === filterName)
+    temp = temp.filter(filter.filterFunction)
+  })
+
   return useSearch(searchString.value, temp.slice().reverse())
 
 })
@@ -116,27 +139,52 @@ const filteredRows = computed(() => {
 const templateColumns = [
   {
     key: 'type',
-    label: "Typ",
-    sortable: true
+    label: "Typ"
   },{
     key: 'state',
-    label: "Status.",
-    sortable: true
+    label: "Status"
   },
   {
     key: "amount",
-    label: "Betrag",
-    sortable: true
+    label: "Betrag"
   },
   {
     key: 'partner',
-    label: "Kunde",
-    sortable: true
+    label: "Kunde"
+  },
+  {
+    key: 'serialConfig.active',
+    label: "Aktiv"
   }
 ]
 const selectedColumns = ref(templateColumns)
 const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
+const filterOptions = ref([
+  {
+    name: "Archivierte ausblenden",
+    default: true,
+    "filterFunction": function (row) {
+      if(!row.archived) {
+        return true
+      } else {
+        return false
+      }
+    }
+  },{
+    name: "Inaktive ausblenden",
+    default: true,
+    "filterFunction": function (row) {
+      if(row.serialConfig.active) {
+        return true
+      } else {
+        return false
+      }
+    }
+  }
+])
+const selectedFilters = ref(filterOptions.value.filter(i => i.default).map(i => i.name) ||[])
+
 
 const displayCurrency = (value, currency = "€") => {
   return `${Number(value).toFixed(2).replace(".",",")} ${currency}`