Refactoring

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -24,8 +24,8 @@ import { OrderWithAccount } from '@ghostfolio/common/types';
 import Big from 'big.js';
 import { format, parseISO } from 'date-fns';
 import { isNumber } from 'lodash';
-import { Observable, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 
 import { AccountDetailDialogParams } from './interfaces/interfaces';
 
@@ -46,7 +46,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public hasPermissionToDeleteAccountBalance: boolean;
   public historicalDataItems: HistoricalDataItem[];
-  public holdings$: Observable<PortfolioPosition[]>;
+  public holdings: PortfolioPosition[];
   public isLoadingActivities: boolean;
   public isLoadingChart: boolean;
   public name: string;
@@ -85,16 +85,6 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
   }
 
   public ngOnInit() {
-    this.holdings$ = this.dataService
-      .fetchPortfolioDetails({
-        filters: [
-          {
-            type: 'ACCOUNT',
-            id: this.data.accountId
-          }
-        ]
-      })
-      .pipe(map((d) => Object.values(d.holdings)));
     this.dataService
       .fetchAccount(this.data.accountId)
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -126,6 +116,26 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
         }
       );
 
+    this.dataService
+      .fetchPortfolioDetails({
+        filters: [
+          {
+            type: 'ACCOUNT',
+            id: this.data.accountId
+          }
+        ]
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ holdings }) => {
+        this.holdings = [];
+
+        for (const [symbol, holding] of Object.entries(holdings)) {
+          this.holdings.push(holding);
+        }
+
+        this.changeDetectorRef.markForCheck();
+      });
+
     this.impersonationStorageService
       .onChangeHasImpersonation()
       .pipe(takeUntil(this.unsubscribeSubject))

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html

@@ -75,7 +75,7 @@
           [baseCurrency]="user?.settings?.baseCurrency"
           [deviceType]="data.deviceType"
           [locale]="user?.settings?.locale"
-          [positions]="holdings$ | async"
+          [positions]="holdings"
         ></gf-holdings-table>
       </mat-tab>
       <mat-tab>

apps/client/src/app/pages/portfolio/holdings/holdings-page.component.ts

@@ -31,10 +31,10 @@ export class HoldingsPageComponent implements OnDestroy, OnInit {
   public filters$ = new Subject<Filter[]>();
   public hasImpersonationId: boolean;
   public hasPermissionToCreateOrder: boolean;
+  public holdings: PortfolioPosition[];
   public isLoading = false;
   public placeholder = '';
   public portfolioDetails: PortfolioDetails;
-  public positionsArray: PortfolioPosition[];
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -152,16 +152,16 @@ export class HoldingsPageComponent implements OnDestroy, OnInit {
   }
 
   public initialize() {
-    this.positionsArray = [];
+    this.holdings = [];
   }
 
   public initializeAnalysisData() {
     this.initialize();
 
-    for (const [symbol, position] of Object.entries(
+    for (const [symbol, holding] of Object.entries(
       this.portfolioDetails.holdings
     )) {
-      this.positionsArray.push(position);
+      this.holdings.push(holding);
     }
   }
 

apps/client/src/app/pages/portfolio/holdings/holdings-page.html

@@ -17,10 +17,10 @@
         [deviceType]="deviceType"
         [hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
         [locale]="user?.settings?.locale"
-        [positions]="positionsArray"
+        [positions]="holdings"
       ></gf-holdings-table>
       <div
-        *ngIf="hasPermissionToCreateOrder && positionsArray?.length > 0"
+        *ngIf="hasPermissionToCreateOrder && holdings?.length > 0"
         class="text-center"
       >
         <a

apps/client/src/app/services/data.service.ts

@@ -39,12 +39,12 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { filterGlobalPermissions } from '@ghostfolio/common/permissions';
 import { AccountWithValue, DateRange, GroupBy } from '@ghostfolio/common/types';
+import { translate } from '@ghostfolio/ui/i18n';
 import { DataSource, Order as OrderModel } from '@prisma/client';
 import { format, parseISO } from 'date-fns';
 import { cloneDeep, groupBy, isNumber } from 'lodash';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { translate } from '@ghostfolio/ui/i18n';
 
 @Injectable({
   providedIn: 'root'
@@ -400,19 +400,20 @@ export class DataService {
 
           if (response.holdings) {
             for (const symbol of Object.keys(response.holdings)) {
-              response.holdings[symbol].dateOfFirstActivity = response.holdings[
-                symbol
-              ].dateOfFirstActivity
-                ? parseISO(response.holdings[symbol].dateOfFirstActivity)
-                : undefined;
-
               response.holdings[symbol].assetClassLabel = translate(
                 response.holdings[symbol].assetClass
               );
+
               response.holdings[symbol].assetSubClassLabel = translate(
                 response.holdings[symbol].assetSubClass
               );
 
+              response.holdings[symbol].dateOfFirstActivity = response.holdings[
+                symbol
+              ].dateOfFirstActivity
+                ? parseISO(response.holdings[symbol].dateOfFirstActivity)
+                : undefined;
+
               response.holdings[symbol].value = isNumber(
                 response.holdings[symbol].value
               )