From 9aeb0d19ca95d935926d62dd207a2f115a0b7375 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 14 May 2021 20:27:11 +0200
Subject: [PATCH] Improve filter search style

---
 .../transactions-table.component.html         |  3 ++-
 .../transactions-table.component.scss         |  1 +
 .../transactions-table.component.ts           | 20 +++++++++++--------
 3 files changed, 15 insertions(+), 9 deletions(-)

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 da34b315e..b5a8e9425 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
@@ -3,6 +3,7 @@
   <mat-chip-list #chipList aria-label="Search keywords">
     <mat-chip
       *ngFor="let searchKeyword of searchKeywords"
+      class="mx-1 my-0 px-2 py-0"
       matChipRemove
       [removable]="true"
       (removed)="removeKeyword(searchKeyword)"
@@ -13,7 +14,7 @@
     <input
       #searchInput
       name="close-outline"
-      placeholder="Search for account, currency, symbol or type..."
+      [placeholder]="placeholder"
       [formControl]="searchControl"
       [matAutocomplete]="autocomplete"
       [matChipInputFor]="chipList"
diff --git a/apps/client/src/app/components/transactions-table/transactions-table.component.scss b/apps/client/src/app/components/transactions-table/transactions-table.component.scss
index 9d32478b8..5984efe27 100644
--- a/apps/client/src/app/components/transactions-table/transactions-table.component.scss
+++ b/apps/client/src/app/components/transactions-table/transactions-table.component.scss
@@ -11,6 +11,7 @@
 
   .mat-chip {
     cursor: pointer;
+    min-height: 1.5rem !important;
   }
 
   .mat-table {
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 71c70a4cd..3f12c522e 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
@@ -28,6 +28,7 @@ import { takeUntil } from 'rxjs/operators';
 
 import { PositionDetailDialog } from '../position/position-detail-dialog/position-detail-dialog.component';
 
+const SEARCH_PLACEHOLDER = 'Search for account, currency, symbol or type...';
 const SEARCH_STRING_SEPARATOR = ',';
 
 @Component({
@@ -60,6 +61,7 @@ export class TransactionsTableComponent
     string[]
   > = this.filteredTransactions$.asObservable();
   public isLoading = true;
+  public placeholder = '';
   public routeQueryParams: Subscription;
   public searchControl = new FormControl();
   public searchKeywords: string[] = [];
@@ -151,7 +153,7 @@ export class TransactionsTableComponent
     if (this.transactions) {
       this.dataSource = new MatTableDataSource(this.transactions);
       this.dataSource.filterPredicate = (data, filter) => {
-        const dataString = TransactionsTableComponent.getFilterableValues(data)
+        const dataString = this.getFilterableValues(data)
           .join(' ')
           .toLowerCase();
         let contains = true;
@@ -232,26 +234,28 @@ export class TransactionsTableComponent
     const lowercaseSearchKeywords = this.searchKeywords.map((keyword) =>
       keyword.trim().toLowerCase()
     );
-    this.allFilteredTransactions = TransactionsTableComponent.getSearchableFieldValues(
+    this.allFilteredTransactions = this.getSearchableFieldValues(
       this.transactions
     ).filter((item) => {
       return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
     });
+
+    this.placeholder =
+      lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
+
     this.filteredTransactions$.next(this.allFilteredTransactions);
   }
 
-  private static getSearchableFieldValues(
-    transactions: OrderWithAccount[]
-  ): string[] {
+  private getSearchableFieldValues(transactions: OrderWithAccount[]): string[] {
     const fieldValues = new Set<string>();
     for (const transaction of transactions) {
       this.getFilterableValues(transaction, fieldValues);
     }
 
-    return [...fieldValues].filter((item) => item != undefined).sort();
+    return [...fieldValues].filter((item) => item !== undefined).sort();
   }
 
-  private static getFilterableValues(
+  private getFilterableValues(
     transaction,
     fieldValues: Set<string> = new Set<string>()
   ): string[] {
@@ -260,6 +264,6 @@ export class TransactionsTableComponent
     fieldValues.add(transaction.type);
     fieldValues.add(transaction.Account?.name);
     fieldValues.add(transaction.Account?.Platform?.name);
-    return [...fieldValues].filter((item) => item != undefined);
+    return [...fieldValues].filter((item) => item !== undefined);
   }
 }