Refactor filtering with an interface

apps/api/src/app/order/order.service.ts

@@ -189,7 +189,7 @@ export class OrderService {
         some: {
           OR: tags.map((tag) => {
             return {
-              name: tag
+              id: tag
             };
           })
         }

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -8,6 +8,7 @@ import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
 import { prettifySymbol } from '@ghostfolio/common/helper';
 import {
+  Filter,
   PortfolioDetails,
   PortfolioPosition,
   UniqueAsset,
@@ -32,6 +33,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       value: number;
     };
   };
+  public allFilters: Filter[];
   public continents: {
     [code: string]: { name: string; value: number };
   };
@@ -39,7 +41,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     [code: string]: { name: string; value: number };
   };
   public deviceType: string;
-  public filters$ = new Subject<string[]>();
+  public filters$ = new Subject<Filter[]>();
   public hasImpersonationId: boolean;
   public isLoading = false;
   public markets: {
@@ -76,7 +78,6 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       value: number;
     };
   };
-  public tags: string[] = [];
 
   public user: User;
 
@@ -127,10 +128,10 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     this.filters$
       .pipe(
         distinctUntilChanged(),
-        switchMap((tags) => {
+        switchMap((filters) => {
           this.isLoading = true;
 
-          return this.dataService.fetchPortfolioDetails({ tags });
+          return this.dataService.fetchPortfolioDetails({ filters });
         }),
         takeUntil(this.unsubscribeSubject)
       )
@@ -150,8 +151,12 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
-          this.tags = this.user.tags.map((tag) => {
-            return tag.name;
+          this.allFilters = this.user.tags.map((tag) => {
+            return {
+              id: tag.id,
+              label: tag.name,
+              type: 'tag'
+            };
           });
 
           this.changeDetectorRef.markForCheck();

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -3,9 +3,9 @@
     <div class="col">
       <h3 class="d-flex justify-content-center mb-3" i18n>Allocations</h3>
       <gf-activities-filter
-        [allFilters]="tags"
+        [allFilters]="allFilters"
         [isLoading]="isLoading"
-        [ngClass]="{ 'd-none': tags.length <= 0 }"
+        [ngClass]="{ 'd-none': allFilters.length <= 0 }"
         [placeholder]="placeholder"
         (valueChanged)="filters$.next($event)"
       ></gf-activities-filter>

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

@@ -19,6 +19,7 @@ import {
   AdminData,
   AdminMarketData,
   Export,
+  Filter,
   InfoItem,
   PortfolioChart,
   PortfolioDetails,
@@ -182,11 +183,21 @@ export class DataService {
     );
   }
 
-  public fetchPortfolioDetails({ tags }: { tags?: string[] }) {
+  public fetchPortfolioDetails({ filters }: { filters?: Filter[] }) {
     let params = new HttpParams();
 
-    if (tags?.length > 0) {
-      params = params.append('tags', tags.join(','));
+    if (filters?.length > 0) {
+      params = params.append(
+        'tags',
+        filters
+          .filter((filter) => {
+            return filter.type === 'tag';
+          })
+          .map((filter) => {
+            return filter.id;
+          })
+          .join(',')
+      );
     }
 
     return this.http.get<PortfolioDetails>('/api/v1/portfolio/details', {

libs/common/src/lib/interfaces/filter.interface.ts

@@ -0,0 +1,5 @@
+export interface Filter {
+  id: string;
+  label: string;
+  type: 'tag';
+}

libs/common/src/lib/interfaces/index.ts

@@ -8,6 +8,7 @@ import {
 } from './admin-market-data.interface';
 import { Coupon } from './coupon.interface';
 import { Export } from './export.interface';
+import { Filter } from './filter.interface';
 import { InfoItem } from './info-item.interface';
 import { PortfolioChart } from './portfolio-chart.interface';
 import { PortfolioDetails } from './portfolio-details.interface';
@@ -38,6 +39,7 @@ export {
   AdminMarketDataItem,
   Coupon,
   Export,
+  Filter,
   InfoItem,
   PortfolioChart,
   PortfolioDetails,

libs/ui/src/lib/activities-filter/activities-filter.component.html

@@ -2,13 +2,13 @@
   <ion-icon class="mr-1" matPrefix name="search-outline"></ion-icon>
   <mat-chip-list #chipList aria-label="Search keywords">
     <mat-chip
-      *ngFor="let searchKeyword of searchKeywords"
+      *ngFor="let searchKeyword of searchFilters"
       class="mx-1 my-0 px-2 py-0"
       matChipRemove
       [removable]="true"
-      (removed)="removeKeyword(searchKeyword)"
+      (removed)="onRemoveFilter(searchKeyword)"
     >
-      {{ searchKeyword | gfSymbol }}
+      {{ searchKeyword.label | gfSymbol }}
       <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
     </mat-chip>
     <input
@@ -19,15 +19,15 @@
       [matChipInputFor]="chipList"
       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
       [placeholder]="placeholder"
-      (matChipInputTokenEnd)="addKeyword($event)"
+      (matChipInputTokenEnd)="onAddFilter($event)"
     />
   </mat-chip-list>
   <mat-autocomplete
     #autocomplete="matAutocomplete"
-    (optionSelected)="keywordSelected($event)"
+    (optionSelected)="onSelectFilter($event)"
   >
     <mat-option *ngFor="let filter of filters | async" [value]="filter">
-      {{ filter | gfSymbol }}
+      {{ filter.label | gfSymbol }}
     </mat-option>
   </mat-autocomplete>
   <mat-spinner

libs/ui/src/lib/activities-filter/activities-filter.component.ts

@@ -17,6 +17,7 @@ import {
   MatAutocompleteSelectedEvent
 } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
+import { Filter } from '@ghostfolio/common/interfaces';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -27,19 +28,19 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './activities-filter.component.html'
 })
 export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
-  @Input() allFilters: string[];
+  @Input() allFilters: Filter[];
   @Input() isLoading: boolean;
   @Input() placeholder: string;
 
-  @Output() valueChanged = new EventEmitter<string[]>();
+  @Output() valueChanged = new EventEmitter<Filter[]>();
 
   @ViewChild('autocomplete') matAutocomplete: MatAutocomplete;
   @ViewChild('searchInput') searchInput: ElementRef<HTMLInputElement>;
 
-  public filters$: Subject<string[]> = new BehaviorSubject([]);
-  public filters: Observable<string[]> = this.filters$.asObservable();
+  public filters$: Subject<Filter[]> = new BehaviorSubject([]);
+  public filters: Observable<Filter[]> = this.filters$.asObservable();
   public searchControl = new FormControl();
-  public searchKeywords: string[] = [];
+  public searchFilters: Filter[] = [];
   public separatorKeysCodes: number[] = [ENTER, COMMA];
 
   private unsubscribeSubject = new Subject<void>();
@@ -47,13 +48,10 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
   public constructor() {
     this.searchControl.valueChanges
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((keyword) => {
-        if (keyword) {
-          const filterValue = keyword.toLowerCase();
+      .subscribe((currentFilter) => {
+        if (currentFilter) {
           this.filters$.next(
-            this.allFilters.filter(
-              (filter) => filter.toLowerCase().indexOf(filterValue) === 0
-            )
+            this.allFilters.filter((filter) => filter.id === currentFilter.id)
           );
         } else {
           this.filters$.next(this.allFilters);
@@ -67,9 +65,8 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
     }
   }
 
-  public addKeyword({ input, value }: MatChipInputEvent): void {
+  public onAddFilter({ input, value }: MatChipInputEvent): void {
     if (value?.trim()) {
-      this.searchKeywords.push(value.trim());
       this.updateFilter();
     }
 
@@ -81,20 +78,19 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
     this.searchControl.setValue(null);
   }
 
-  public keywordSelected(event: MatAutocompleteSelectedEvent): void {
-    this.searchKeywords.push(event.option.viewValue);
+  public onRemoveFilter(aFilter: Filter): void {
+    this.searchFilters = this.searchFilters.filter((filter) => {
+      return filter.id !== aFilter.id;
+    });
+
     this.updateFilter();
-    this.searchInput.nativeElement.value = '';
-    this.searchControl.setValue(null);
   }
 
-  public removeKeyword(keyword: string): void {
-    const index = this.searchKeywords.indexOf(keyword);
-
-    if (index >= 0) {
-      this.searchKeywords.splice(index, 1);
-      this.updateFilter();
-    }
+  public onSelectFilter(event: MatAutocompleteSelectedEvent): void {
+    this.searchFilters.push(event.option.value);
+    this.updateFilter();
+    this.searchInput.nativeElement.value = '';
+    this.searchControl.setValue(null);
   }
 
   public ngOnDestroy() {
@@ -106,6 +102,6 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
     this.filters$.next(this.allFilters);
 
     // Emit an array with a new reference
-    this.valueChanged.emit([...this.searchKeywords]);
+    this.valueChanged.emit([...this.searchFilters]);
   }
 }

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -1,8 +1,9 @@
 <gf-activities-filter
   [allFilters]="allFilters"
+  [isLoading]="isLoading"
   [ngClass]="{ 'd-none': !hasPermissionToFilter }"
   [placeholder]="placeholder"
-  (valueChanged)="updateFilter($event)"
+  (valueChanged)="filters$.next($event)"
 ></gf-activities-filter>
 
 <div class="activities">

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -14,13 +14,13 @@ import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { getDateFormatString } from '@ghostfolio/common/helper';
-import { UniqueAsset } from '@ghostfolio/common/interfaces';
+import { Filter, UniqueAsset } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 import Big from 'big.js';
 import { isUUID } from 'class-validator';
 import { endOfToday, format, isAfter } from 'date-fns';
 import { isNumber } from 'lodash';
-import { Subject, Subscription } from 'rxjs';
+import { distinctUntilChanged, Subject, Subscription, takeUntil } from 'rxjs';
 
 const SEARCH_PLACEHOLDER = 'Search for account, currency, symbol or type...';
 const SEARCH_STRING_SEPARATOR = ',';
@@ -53,11 +53,12 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
   @ViewChild(MatSort) sort: MatSort;
 
-  public allFilters: string[];
+  public allFilters: Filter[];
   public dataSource: MatTableDataSource<Activity> = new MatTableDataSource();
   public defaultDateFormat: string;
   public displayedColumns = [];
   public endOfToday = endOfToday();
+  public filters$ = new Subject<Filter[]>();
   public hasDrafts = false;
   public isAfter = isAfter;
   public isLoading = true;
@@ -71,7 +72,13 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private router: Router) {}
+  public constructor(private router: Router) {
+    this.filters$
+      .pipe(distinctUntilChanged(), takeUntil(this.unsubscribeSubject))
+      .subscribe((filters) => {
+        this.updateFilters(filters);
+      });
+  }
 
   public ngOnChanges() {
     this.displayedColumns = [
@@ -95,11 +102,15 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
       });
     }
 
-    this.isLoading = true;
-
     this.defaultDateFormat = getDateFormatString(this.locale);
 
     if (this.activities) {
+      this.allFilters = this.getSearchableFieldValues(this.activities).map(
+        (label) => {
+          return { label, id: label, type: 'tag' };
+        }
+      );
+
       this.dataSource = new MatTableDataSource(this.activities);
       this.dataSource.filterPredicate = (data, filter) => {
         const dataString = this.getFilterableValues(data)
@@ -113,8 +124,8 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
         return contains;
       };
       this.dataSource.sort = this.sort;
-      this.updateFilter();
-      this.isLoading = false;
+
+      this.updateFilters();
     }
   }
 
@@ -172,30 +183,6 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
     this.activityToUpdate.emit(aActivity);
   }
 
-  public updateFilter(filters: string[] = []) {
-    this.dataSource.filter = filters.join(SEARCH_STRING_SEPARATOR);
-    const lowercaseSearchKeywords = filters.map((keyword) =>
-      keyword.trim().toLowerCase()
-    );
-
-    this.placeholder =
-      lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
-
-    this.searchKeywords = filters;
-
-    this.allFilters = this.getSearchableFieldValues(this.activities).filter(
-      (item) => {
-        return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
-      }
-    );
-
-    this.hasDrafts = this.dataSource.data.some((activity) => {
-      return activity.isDraft === true;
-    });
-    this.totalFees = this.getTotalFees();
-    this.totalValue = this.getTotalValue();
-  }
-
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
@@ -280,4 +267,32 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
     return totalValue.toNumber();
   }
+
+  private updateFilters(filters: Filter[] = []) {
+    this.isLoading = true;
+
+    this.dataSource.filter = filters
+      .map((filter) => {
+        return filter.label;
+      })
+      .join(SEARCH_STRING_SEPARATOR);
+    const lowercaseSearchKeywords = filters.map((filter) => {
+      return filter.label.trim().toLowerCase();
+    });
+
+    this.placeholder =
+      lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
+
+    this.searchKeywords = filters.map((filter) => {
+      return filter.label;
+    });
+
+    this.hasDrafts = this.dataSource.filteredData.some((activity) => {
+      return activity.isDraft === true;
+    });
+    this.totalFees = this.getTotalFees();
+    this.totalValue = this.getTotalValue();
+
+    this.isLoading = false;
+  }
 }