Feature/prettify symbols in transaction filtering component (#131)

* Prettify generic scraper symbols

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Respected the data source attribute of the transactions model in the data management for historical data
+- Prettified the generic scraper symbols in the transaction filtering component
 
 ### Fixed
 

apps/client/src/app/components/transactions-table/transactions-table.component.html

@@ -8,7 +8,7 @@
       [removable]="true"
       (removed)="removeKeyword(searchKeyword)"
     >
-      {{ searchKeyword }}
+      {{ searchKeyword | gfSymbol }}
       <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
     </mat-chip>
     <input
@@ -26,11 +26,8 @@
     #autocomplete="matAutocomplete"
     (optionSelected)="keywordSelected($event)"
   >
-    <mat-option
+    <mat-option *ngFor="let filter of filters | async" [value]="filter">
-      *ngFor="let transaction of filteredTransactions | async"
+      {{ filter | gfSymbol }}
-      [value]="transaction"
-    >
-      {{ transaction }}
     </mat-option>
   </mat-autocomplete>
 </mat-form-field>

apps/client/src/app/components/transactions-table/transactions-table.component.ts

@@ -57,10 +57,8 @@ export class TransactionsTableComponent
   public dataSource: MatTableDataSource<OrderWithAccount> = new MatTableDataSource();
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
   public displayedColumns = [];
-  public filteredTransactions$: Subject<string[]> = new BehaviorSubject([]);
+  public filters$: Subject<string[]> = new BehaviorSubject([]);
-  public filteredTransactions: Observable<
+  public filters: Observable<string[]> = this.filters$.asObservable();
-    string[]
-  > = this.filteredTransactions$.asObservable();
   public isLoading = true;
   public placeholder = '';
   public routeQueryParams: Subscription;
@@ -68,7 +66,7 @@ export class TransactionsTableComponent
   public searchKeywords: string[] = [];
   public separatorKeysCodes: number[] = [ENTER, COMMA];
 
-  private allFilteredTransactions: string[];
+  private allFilters: string[];
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -90,13 +88,13 @@ export class TransactionsTableComponent
     this.searchControl.valueChanges.subscribe((keyword) => {
       if (keyword) {
         const filterValue = keyword.toLowerCase();
-        this.filteredTransactions$.next(
+        this.filters$.next(
-          this.allFilteredTransactions.filter(
+          this.allFilters.filter(
             (filter) => filter.toLowerCase().indexOf(filterValue) === 0
           )
         );
       } else {
-        this.filteredTransactions$.next(this.allFilteredTransactions);
+        this.filters$.next(this.allFilters);
       }
     });
   }
@@ -239,13 +237,13 @@ export class TransactionsTableComponent
     this.placeholder =
       lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
 
-    this.allFilteredTransactions = this.getSearchableFieldValues(
+    this.allFilters = this.getSearchableFieldValues(this.transactions).filter(
-      this.transactions
+      (item) => {
-    ).filter((item) => {
+        return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
-      return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
+      }
-    });
+    );
 
-    this.filteredTransactions$.next(this.allFilteredTransactions);
+    this.filters$.next(this.allFilters);
   }
 
   private getSearchableFieldValues(transactions: OrderWithAccount[]): string[] {