From 4a123c38f2aec1e920bf8a7d0959e01b31a25343 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 16 May 2022 21:17:58 +0200
Subject: [PATCH] Refactor placeholder (#925)

---
 .../allocations/allocations-page.component.ts        |  3 +++
 .../activities-table/activities-table.component.ts   | 12 ++++++------
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
index a072319f0..279d2a499 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
@@ -84,6 +84,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
 
   public user: User;
 
+  private readonly SEARCH_PLACEHOLDER = 'Filter by account or tag...';
   private unsubscribeSubject = new Subject<void>();
 
   /**
@@ -134,6 +135,8 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         switchMap((filters) => {
           this.isLoading = true;
           this.activeFilters = filters;
+          this.placeholder =
+            this.activeFilters.length <= 0 ? this.SEARCH_PLACEHOLDER : '';
 
           return this.dataService.fetchPortfolioDetails({
             filters: this.activeFilters
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.ts b/libs/ui/src/lib/activities-table/activities-table.component.ts
index 6f73b0b48..055c82d86 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.ts
+++ b/libs/ui/src/lib/activities-table/activities-table.component.ts
@@ -22,9 +22,6 @@ import { endOfToday, format, isAfter } from 'date-fns';
 import { isNumber } from 'lodash';
 import { Subject, Subscription, distinctUntilChanged, takeUntil } from 'rxjs';
 
-const SEARCH_PLACEHOLDER = 'Search for account, currency, symbol or type...';
-const SEARCH_STRING_SEPARATOR = ',';
-
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'gf-activities-table',
@@ -70,6 +67,9 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   public totalFees: number;
   public totalValue: number;
 
+  private readonly SEARCH_PLACEHOLDER =
+    'Filter by account, currency, symbol or type...';
+  private readonly SEARCH_STRING_SEPARATOR = ',';
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(private router: Router) {
@@ -117,7 +117,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
           .toLowerCase();
 
         let contains = true;
-        for (const singleFilter of filter.split(SEARCH_STRING_SEPARATOR)) {
+        for (const singleFilter of filter.split(this.SEARCH_STRING_SEPARATOR)) {
           contains =
             contains && dataString.includes(singleFilter.trim().toLowerCase());
         }
@@ -276,14 +276,14 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
       .map((filter) => {
         return filter.label;
       })
-      .join(SEARCH_STRING_SEPARATOR);
+      .join(this.SEARCH_STRING_SEPARATOR);
 
     const lowercaseSearchKeywords = filters.map((filter) => {
       return filter.label.trim().toLowerCase();
     });
 
     this.placeholder =
-      lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
+      lowercaseSearchKeywords.length <= 0 ? this.SEARCH_PLACEHOLDER : '';
 
     this.searchKeywords = filters.map((filter) => {
       return filter.label;