Improve filter search style

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"

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 {

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(
+  private getSearchableFieldValues(transactions: OrderWithAccount[]): string[] {
-    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);
   }
 }