Feature/migrate holdings page to work with filters of assistant (#2932)

* Migrate portfolio holdings to work with filters of assistant

* Update changelog

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

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;
   }
 }

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({
+          return this.fetchPortfolioDetails();
-            filters: this.activeFilters
-          });
         }),
         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() {
+  public ngOnDestroy() {
-    this.holdings = [];
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
   }
 
-  public initializeAnalysisData() {
+  private fetchPortfolioDetails() {
-    this.initialize();
+    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

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">

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 = new MatTableDataSource(this.holdings);
+    this.dataSource.paginator = this.paginator;
-      this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
-      this.dataSource.sort = this.sort;
 
+    if (this.holdings) {
       this.isLoading = false;
     }
   }