moved filter

pages/banking/index.vue

@@ -64,7 +64,6 @@ const clearSearchString = () => {
 }
 
 const filterAccount = ref(bankaccounts || [])
-const showOnlyNotAssigned = ref(true)
 
 const displayCurrency = (value, currency = "€") => {
   return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
@@ -82,9 +81,17 @@ const calculateOpenSum = (statement) => {
   return (Math.abs(statement.amount) - startingAmount).toFixed(2)
 }
 
+const selectedFilters = ref(['Nur offene anzeigen'])
 
 const filteredRows = computed(() => {
-  return useSearch(searchString.value, bankstatements.value.filter(i => filterAccount.value.find(x => x.id === i.account) && (showOnlyNotAssigned.value ? Number(calculateOpenSum(i)) !== 0 : true)))
+  let temp = bankstatements.value
+
+  if(selectedFilters.value.includes("Nur offene anzeigen")){
+    temp = temp.filter(i => Number(calculateOpenSum(i)) !== 0)
+  }
+
+
+  return useSearch(searchString.value, temp.filter(i => filterAccount.value.find(x => x.id === i.account)))
 })
 
 setupPage()
@@ -131,11 +138,6 @@ setupPage()
           Konto
         </template>
       </USelectMenu>
-      <UCheckbox
-          v-model="showOnlyNotAssigned"
-          class="my-auto ml-3"
-          label="Nur offene anzeigen"
-      />
     </template>
     <template #right>
       <USelectMenu
@@ -151,6 +153,18 @@ setupPage()
           Spalten
         </template>
       </USelectMenu>
+      <USelectMenu
+          icon="i-heroicons-adjustments-horizontal-solid"
+          multiple
+          v-model="selectedFilters"
+          :options="['Nur offene anzeigen']"
+          :color="selectedFilters.length > 0 ? 'primary' : 'white'"
+          :ui-menu="{ width: 'min-w-max' }"
+      >
+        <template #label>
+          Filter
+        </template>
+      </USelectMenu>
     </template>
   </UDashboardToolbar>
   <UTable