Multi-SelectFilters

apps/client/src/app/components/header/header.component.ts

@@ -179,7 +179,9 @@ export class HeaderComponent implements OnChanges {
         filtersType = 'tags';
       }
 
-      userSetting[`filters.${filtersType}`] = filter.id ? [filter.id] : null;
+      userSetting[`filters.${filtersType}`] = filters
+        .filter((f) => f.type === filter.type)
+        .map((f) => f.id);
     }
 
     this.dataService

apps/client/src/app/services/user/user.service.ts

@@ -53,21 +53,21 @@ export class UserService extends ObservableStore<UserStoreState> {
 
     if (user.settings['filters.accounts']) {
       filters.push({
-        id: user.settings['filters.accounts'][0],
+        id: user.settings['filters.accounts'].join(','),
         type: 'ACCOUNT'
       });
     }
 
     if (user.settings['filters.assetClasses']) {
       filters.push({
-        id: user.settings['filters.assetClasses'][0],
+        id: user.settings['filters.assetClasses'].join(','),
         type: 'ASSET_CLASS'
       });
     }
 
     if (user.settings['filters.tags']) {
       filters.push({
-        id: user.settings['filters.tags'][0],
+        id: user.settings['filters.tags'].join(','),
         type: 'TAG'
       });
     }

libs/ui/src/lib/assistant/assistant.component.ts

@@ -24,6 +24,7 @@ import {
 import { FormBuilder, FormControl } from '@angular/forms';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { Account, AssetClass } from '@prisma/client';
+import { filter } from 'lodash';
 import { EMPTY, Observable, Subject, lastValueFrom } from 'rxjs';
 import {
   catchError,
@@ -117,9 +118,9 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
     { label: $localize`Max`, value: 'max' }
   ];
   public filterForm = this.formBuilder.group({
-    account: new FormControl<string>(undefined),
-    assetClass: new FormControl<string>(undefined),
-    tag: new FormControl<string>(undefined)
+    account: new FormControl<string[]>(undefined),
+    assetClass: new FormControl<string[]>(undefined),
+    tag: new FormControl<string[]>(undefined)
   });
   public isLoading = false;
   public isOpen = false;
@@ -203,9 +204,9 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
 
     this.filterForm.setValue(
       {
-        account: this.user?.settings?.['filters.accounts']?.[0] ?? null,
-        assetClass: this.user?.settings?.['filters.assetClasses']?.[0] ?? null,
-        tag: this.user?.settings?.['filters.tags']?.[0] ?? null
+        account: this.user?.settings?.['filters.accounts'] ?? null,
+        assetClass: this.user?.settings?.['filters.assetClasses'] ?? null,
+        tag: this.user?.settings?.['filters.tags'] ?? null
       },
       {
         emitEvent: false
@@ -213,7 +214,7 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
     );
   }
 
-  public hasFilter(aFormValue: { [key: string]: string }) {
+  public hasFilter(aFormValue: { [key: string]: string[] }) {
     return Object.values(aFormValue).some((value) => {
       return !!value;
     });
@@ -243,20 +244,28 @@ export class AssistantComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   public onApplyFilters() {
-    this.filtersChanged.emit([
-      {
-        id: this.filterForm.get('account').value,
-        type: 'ACCOUNT'
-      },
-      {
-        id: this.filterForm.get('assetClass').value,
-        type: 'ASSET_CLASS'
-      },
-      {
-        id: this.filterForm.get('tag').value,
-        type: 'TAG'
-      }
-    ]);
+    let accountFilters =
+      this.filterForm
+        .get('account')
+        .value?.reduce(
+          (arr, val) => [...arr, { id: val, type: 'ACCOUNT' }],
+          []
+        ) ?? [];
+    let assetClassFilters =
+      this.filterForm
+        .get('assetClass')
+        .value?.reduce(
+          (arr, val) => [...arr, { id: val, type: 'ASSET_CLASS' }],
+          []
+        ) ?? [];
+    let tagFilters =
+      this.filterForm
+        .get('tag')
+        .value?.reduce((arr, val) => [...arr, { id: val, type: 'TAG' }], []) ??
+      [];
+    let filters = [...accountFilters, ...assetClassFilters];
+    filters = [...filters, ...tagFilters];
+    this.filtersChanged.emit(filters);
 
     this.onCloseAssistant();
   }

libs/ui/src/lib/assistant/assistant.html

@@ -105,7 +105,7 @@
         <div class="mb-3">
           <mat-form-field appearance="outline" class="w-100 without-hint">
             <mat-label i18n>Accounts</mat-label>
-            <mat-select formControlName="account">
+            <mat-select formControlName="account" multiple>
               <mat-option [value]="null" />
               @for (account of accounts; track account.id) {
               <mat-option [value]="account.id">
@@ -125,7 +125,7 @@
         <div class="mb-3">
           <mat-form-field appearance="outline" class="w-100 without-hint">
             <mat-label i18n>Tags</mat-label>
-            <mat-select formControlName="tag">
+            <mat-select formControlName="tag" multiple>
               <mat-option [value]="null" />
               @for (tag of tags; track tag.id) {
               <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
@@ -136,7 +136,7 @@
         <div class="mb-3">
           <mat-form-field appearance="outline" class="w-100 without-hint">
             <mat-label i18n>Asset Classes</mat-label>
-            <mat-select formControlName="assetClass">
+            <mat-select formControlName="assetClass" multiple>
               <mat-option [value]="null" />
               @for (assetClass of assetClasses; track assetClass.id) {
               <mat-option [value]="assetClass.id"