From 1ca4f885b0fe669b5095b4b08585391f63fe6560 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 27 Jan 2024 19:28:13 +0100
Subject: [PATCH] Feature/migrate holdings page to work with filters of
 assistant (#2932)

* Migrate portfolio holdings to work with filters of assistant

* Update changelog
---
 CHANGELOG.md                                  |  6 +++
 apps/api/src/services/api/api.service.ts      | 15 ++++---
 .../holdings/holdings-page.component.ts       | 43 +++++++++++++------
 .../portfolio/holdings/holdings-page.html     |  2 +
 .../holdings-table.component.ts               |  8 ++--
 5 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 382b8321..c9d908b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Migrated the portfolio holdings to work with the filters of the assistant (experimental)
+
 ## 2.45.0 - 2024-01-27
 
 ### Added
diff --git a/apps/api/src/services/api/api.service.ts b/apps/api/src/services/api/api.service.ts
index 8ef0df7b..541e3556 100644
--- a/apps/api/src/services/api/api.service.ts
+++ b/apps/api/src/services/api/api.service.ts
@@ -24,7 +24,7 @@ export class ApiService {
     const searchQuery = filterBySearchQuery?.toLowerCase();
     const tagIds = filterByTags?.split(',') ?? [];
 
-    return [
+    const filters = [
       ...accountIds.map((accountId) => {
         return <Filter>{
           id: accountId,
@@ -43,10 +43,6 @@ export class ApiService {
           type: 'ASSET_SUB_CLASS'
         };
       }),
-      {
-        id: searchQuery,
-        type: 'SEARCH_QUERY'
-      },
       ...tagIds.map((tagId) => {
         return <Filter>{
           id: tagId,
@@ -54,5 +50,14 @@ export class ApiService {
         };
       })
     ];
+
+    if (searchQuery) {
+      filters.push({
+        id: searchQuery,
+        type: 'SEARCH_QUERY'
+      });
+    }
+
+    return filters;
   }
 }
diff --git a/apps/client/src/app/pages/portfolio/holdings/holdings-page.component.ts b/apps/client/src/app/pages/portfolio/holdings/holdings-page.component.ts
index 5afb649b..9413796f 100644
--- a/apps/client/src/app/pages/portfolio/holdings/holdings-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/holdings/holdings-page.component.ts
@@ -86,16 +86,14 @@ export class HoldingsPageComponent implements OnDestroy, OnInit {
               ? $localize`Filter by account or tag...`
               : '';
 
-          return this.dataService.fetchPortfolioDetails({
-            filters: this.activeFilters
-          });
+          return this.fetchPortfolioDetails();
         }),
         takeUntil(this.unsubscribeSubject)
       )
       .subscribe((portfolioDetails) => {
         this.portfolioDetails = portfolioDetails;
 
-        this.initializeAnalysisData();
+        this.initialize();
 
         this.isLoading = false;
 
@@ -146,17 +144,41 @@ export class HoldingsPageComponent implements OnDestroy, OnInit {
             ...tagFilters
           ];
 
+          if (this.user?.settings?.isExperimentalFeatures === true) {
+            this.holdings = undefined;
+
+            this.fetchPortfolioDetails()
+              .pipe(takeUntil(this.unsubscribeSubject))
+              .subscribe((portfolioDetails) => {
+                this.portfolioDetails = portfolioDetails;
+
+                this.initialize();
+
+                this.changeDetectorRef.markForCheck();
+              });
+          }
+
           this.changeDetectorRef.markForCheck();
         }
       });
   }
 
-  public initialize() {
-    this.holdings = [];
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
   }
 
-  public initializeAnalysisData() {
-    this.initialize();
+  private fetchPortfolioDetails() {
+    return this.dataService.fetchPortfolioDetails({
+      filters:
+        this.activeFilters.length > 0
+          ? this.activeFilters
+          : this.userService.getFilters()
+    });
+  }
+
+  private initialize() {
+    this.holdings = [];
 
     for (const [symbol, holding] of Object.entries(
       this.portfolioDetails.holdings
@@ -165,11 +187,6 @@ export class HoldingsPageComponent implements OnDestroy, OnInit {
     }
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private openPositionDialog({
     dataSource,
     symbol
diff --git a/apps/client/src/app/pages/portfolio/holdings/holdings-page.html b/apps/client/src/app/pages/portfolio/holdings/holdings-page.html
index 282dc5a0..34e88077 100644
--- a/apps/client/src/app/pages/portfolio/holdings/holdings-page.html
+++ b/apps/client/src/app/pages/portfolio/holdings/holdings-page.html
@@ -2,12 +2,14 @@
   <div class="row">
     <div class="col">
       <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Holdings</h1>
+      @if (!user?.settings?.isExperimentalFeatures) {
       <gf-activities-filter
         [allFilters]="allFilters"
         [isLoading]="isLoading"
         [placeholder]="placeholder"
         (valueChanged)="filters$.next($event)"
       ></gf-activities-filter>
+      }
     </div>
   </div>
   <div class="row">
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.ts b/libs/ui/src/lib/holdings-table/holdings-table.component.ts
index e931c505..18105861 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.ts
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.ts
@@ -58,11 +58,11 @@ export class HoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
 
     this.isLoading = true;
 
-    if (this.holdings) {
-      this.dataSource = new MatTableDataSource(this.holdings);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sort = this.sort;
+    this.dataSource = new MatTableDataSource(this.holdings);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
 
+    if (this.holdings) {
       this.isLoading = false;
     }
   }