fixed archived filtering

added tabs to incominginvoices
added Badges to tabs

pages/createDocument/index.vue

@@ -47,10 +47,11 @@
         </template>
       </USelectMenu>
       <USelectMenu
+          v-if="selectableFilters.length > 0"
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
           v-model="selectedFilters"
-          :options="['Nur offene anzeigen']"
+          :options="selectableFilters"
           :color="selectedFilters.length > 0 ? 'primary' : 'white'"
           :ui-menu="{ width: 'min-w-max' }"
       >
@@ -61,6 +62,15 @@
     </template>
   </UDashboardToolbar>
   <UTabs :items="selectedTypes" class="m-3">
+    <template #default="{item}">
+      {{item.label}}
+      <UBadge
+          variant="outline"
+          class="ml-2"
+      >
+        {{filteredRows.filter(i => item.key === 'invoices' ? ['invoices','advanceInvoices','cancellationInvoices'].includes(i.type) : item.key === i.type).length}}
+      </UBadge>
+    </template>
     <template #item="{item}">
       <div style="height: 80vh; overflow-y: scroll">
         <UTable
@@ -182,12 +192,15 @@ const dataStore = useDataStore()
 const tempStore = useTempStore()
 const router = useRouter()
 
+const type = "createddocuments"
+const dataType = dataStore.dataTypes[type]
+
 const items = ref([])
 const selectedItem = ref(0)
 
 
 const setupPage = async () => {
-  items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)","documentNumber",true)).filter(i => !i.archived)
+  items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)","documentNumber",true, true))
 }
 
 setupPage()
@@ -279,24 +292,34 @@ const clearSearchString = () => {
   tempStore.clearSearchString('createddocuments')
   searchString.value = ''
 }
-const selectedFilters = ref([])
+const selectableFilters = ref(dataType.filters.map(i => i.name))
+const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || [])
+
 const filteredRows = computed(() => {
 
-  let temp = items.value.filter(i => types.value.find(x => x.key === 'invoices' ? ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type) : x.key === i.type))
+  let tempItems = items.value.filter(i => types.value.find(x => x.key === 'invoices' ? ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type) : x.key === i.type))
-  temp = temp.filter(i => i.type !== "serialInvoices")
+  tempItems = tempItems.filter(i => i.type !== "serialInvoices")
 
-  /*if(showDrafts.value === true) {
+  tempItems = tempItems.map(i => {
-    temp = temp.filter(i => i.state === "Entwurf")
+    return {
-  } else {
+      ...i,
-    temp = temp.filter(i => i.state !== "Entwurf")
+      class: i.archived ? 'bg-red-500/50 dark:bg-red-400/50' : null
-  }*/
+    }
+  })
 
-  if (selectedFilters.value.includes("Nur offene anzeigen")) {
+  if(selectedFilters.value.length > 0) {
-    temp = temp.filter(i => !isPaid(i))
+    selectedFilters.value.forEach(filterName => {
+      let filter = dataType.filters.find(i => i.name === filterName)
+      tempItems = tempItems.filter(filter.filterFunction)
+    })
   }
 
 
-  return useSearch(searchString.value, temp.slice().reverse())
+
+  tempItems = useSearch(searchString.value, tempItems)
+
+
+  return useSearch(searchString.value, tempItems.slice().reverse())
 
 })
 

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 = [
+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)))
-    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 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[type] ||'')
-const searchString = ref(tempStore.searchStrings['incominginvoices'] ||'')
 
 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")]
 
 
 })
@@ -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,24 +159,54 @@ 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>
+  <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"
+            :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' }"
@@ -229,7 +239,10 @@ const selectIncomingInvoice = (invoice) => {
             <span v-else class="text-rose-600">Offen</span>
           </template>
         </UTable>
-  </UDashboardPanelContent>
+      </div>
+
+    </template>
+  </UTabs>
 
 </template>