From 2eac4122c242b88e02c6594606a4c0bf7b5cc983 Mon Sep 17 00:00:00 2001
From: mantovanig <gabriele.mantovani92@gmail.com>
Date: Wed, 5 May 2021 17:59:39 +0200
Subject: [PATCH] feat: add account filter with chips on transactions

---
 .../transactions-table.component.html         | 21 +++++++++++++++
 .../transactions-table.component.ts           | 26 +++++++++++++++++++
 .../transactions-table.module.ts              |  2 ++
 3 files changed, 49 insertions(+)

diff --git a/apps/client/src/app/components/transactions-table/transactions-table.component.html b/apps/client/src/app/components/transactions-table/transactions-table.component.html
index 9d2165180..6f36fee58 100644
--- a/apps/client/src/app/components/transactions-table/transactions-table.component.html
+++ b/apps/client/src/app/components/transactions-table/transactions-table.component.html
@@ -1,3 +1,24 @@
+<div *ngIf="chipsAccount.length > 1">
+  <mat-chip-list aria-label="Account selection" class="d-block mb-4">
+    <mat-chip
+      [selected]="true"
+      #c="matChip"
+      (click)="!c.selected && c.toggleSelected()"
+      (selectionChange)="applyAccountFilter($event)"
+    >
+      All
+    </mat-chip>
+    <mat-chip
+      #c="matChip"
+      *ngFor="let account of chipsAccount"
+      (click)="!c.selected && c.toggleSelected()"
+      (selectionChange)="applyAccountFilter($event)"
+    >
+      {{ account }}
+    </mat-chip>
+  </mat-chip-list>
+</div>
+
 <mat-form-field appearance="outline" class="w-100">
   <input
     #input
diff --git a/apps/client/src/app/components/transactions-table/transactions-table.component.ts b/apps/client/src/app/components/transactions-table/transactions-table.component.ts
index 4978701f4..ad3d1dac1 100644
--- a/apps/client/src/app/components/transactions-table/transactions-table.component.ts
+++ b/apps/client/src/app/components/transactions-table/transactions-table.component.ts
@@ -11,6 +11,11 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSort } from '@angular/material/sort';
+import {
+  MatChipList,
+  MatChip,
+  MatChipSelectionChange
+} from '@angular/material/chips';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DEFAULT_DATE_FORMAT } from '@ghostfolio/helper';
@@ -39,6 +44,7 @@ export class TransactionsTableComponent
   @Output() transactionToUpdate = new EventEmitter<OrderModel>();
 
   @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatChipList) chipsList: MatChipList;
 
   public dataSource: MatTableDataSource<OrderModel> = new MatTableDataSource();
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
@@ -46,6 +52,8 @@ export class TransactionsTableComponent
   public isLoading = true;
   public routeQueryParams: Subscription;
 
+  chipsAccount: string[] = [];
+
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -89,10 +97,28 @@ export class TransactionsTableComponent
       this.dataSource = new MatTableDataSource(this.transactions);
       this.dataSource.sort = this.sort;
 
+      this.chipsAccount = [
+        ...new Set(this.transactions.map((t) => t.Account?.name))
+      ];
+
       this.isLoading = false;
     }
   }
 
+  public applyAccountFilter(event: MatChipSelectionChange) {
+    if (event.selected) {
+      const selectedAccount = event.source.value.trim();
+      if (selectedAccount === 'All') {
+        this.dataSource.data = this.transactions;
+      } else {
+        const filtered = this.transactions.filter(
+          (f) => f.Account.name === selectedAccount
+        );
+        this.dataSource.data = filtered;
+      }
+    }
+  }
+
   public applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
     this.dataSource.filter = filterValue.trim().toLowerCase();
diff --git a/apps/client/src/app/components/transactions-table/transactions-table.module.ts b/apps/client/src/app/components/transactions-table/transactions-table.module.ts
index 34d66e84a..f35625645 100644
--- a/apps/client/src/app/components/transactions-table/transactions-table.module.ts
+++ b/apps/client/src/app/components/transactions-table/transactions-table.module.ts
@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
+import { MatChipsModule } from '@angular/material/chips';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -29,6 +30,7 @@ import { TransactionsTableComponent } from './transactions-table.component';
     MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
+    MatChipsModule,
     RouterModule
   ],
   providers: [],