Feature/Add holdings tab to account detail dialog (#2853) (#2864)

* Feature/Add holdings tab to account detail dialog (#2853)

* 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
+
+### Added
+
+- Added the holdings table to the account detail dialog
+
 ## 2.40.0 - 2024-01-15
 
 ### Changed

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

@@ -16,6 +16,7 @@ import { downloadAsFile } from '@ghostfolio/common/helper';
 import {
   AccountBalancesResponse,
   HistoricalDataItem,
+  PortfolioPosition,
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
@@ -45,6 +46,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public hasPermissionToDeleteAccountBalance: boolean;
   public historicalDataItems: HistoricalDataItem[];
+  public holdings: PortfolioPosition[];
   public isLoadingActivities: boolean;
   public isLoadingChart: boolean;
   public name: string;
@@ -114,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

@@ -70,12 +70,27 @@
       [ngClass]="{ 'd-none': isLoadingActivities }"
     >
       <mat-tab>
-        <ng-template i18n mat-tab-label>Activities</ng-template>
+        <ng-template mat-tab-label>
+          <ion-icon name="wallet-outline" />
+          <div class="d-none d-sm-block ml-2" i18n>Holdings</div>
+        </ng-template>
+        <gf-holdings-table
+          [baseCurrency]="user?.settings?.baseCurrency"
+          [deviceType]="data.deviceType"
+          [holdings]="holdings"
+          [locale]="user?.settings?.locale"
+        ></gf-holdings-table>
+      </mat-tab>
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <ion-icon name="swap-vertical-outline" />
+          <div class="d-none d-sm-block ml-2" i18n>Activities</div>
+        </ng-template>
         <gf-activities-table-lazy
           *ngIf="user?.settings?.isExperimentalFeatures === true"
           [baseCurrency]="user?.settings?.baseCurrency"
           [dataSource]="dataSource"
-          [deviceType]="deviceType"
+          [deviceType]="data.deviceType"
           [hasPermissionToCreateActivity]="false"
           [hasPermissionToExportActivities]="!hasImpersonationId && !user.settings.isRestrictedView"
           [hasPermissionToFilter]="false"
@@ -103,7 +118,10 @@
         ></gf-activities-table>
       </mat-tab>
       <mat-tab>
-        <ng-template i18n mat-tab-label>Cash Balances</ng-template>
+        <ng-template mat-tab-label>
+          <ion-icon name="cash-outline" />
+          <div class="d-none d-sm-block ml-2" i18n>Cash Balances</div>
+        </ng-template>
         <gf-account-balances
           [accountBalances]="accountBalances"
           [accountId]="data.accountId"

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

@@ -5,6 +5,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatTabsModule } from '@angular/material/tabs';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
 import { GfAccountBalancesModule } from '@ghostfolio/ui/account-balances/account-balances.module';
 import { GfActivitiesTableLazyModule } from '@ghostfolio/ui/activities-table-lazy/activities-table-lazy.module';
@@ -23,6 +24,7 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
     GfActivitiesTableLazyModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
+    GfHoldingsTableModule,
     GfInvestmentChartModule,
     GfValueModule,
     MatButtonModule,

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

@@ -344,9 +344,9 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       this.positions[symbol] = {
         value,
         assetClass: position.assetClass,
-        assetClassLabel: translate(position.assetClass),
+        assetClassLabel: position.assetClassLabel,
         assetSubClass: position.assetSubClass,
-        assetSubClassLabel: translate(position.assetSubClass),
+        assetSubClassLabel: position.assetSubClassLabel,
         currency: position.currency,
         etfProvider: this.extractEtfProvider({
           assetSubClass: position.assetSubClass,

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,20 +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({
+      this.holdings.push(holding);
-        ...position,
-        assetClassLabel: translate(position.assetClass),
-        assetSubClassLabel: translate(position.assetSubClass)
-      });
     }
   }
 

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

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

apps/client/src/app/pages/public/public-page.component.ts

@@ -28,6 +28,7 @@ export class PublicPageComponent implements OnInit {
     [code: string]: { name: string; value: number };
   };
   public deviceType: string;
+  public holdings: PortfolioPublicDetails['holdings'][string][];
   public markets: {
     [key in Market]: { name: string; value: number };
   };
@@ -37,7 +38,6 @@ export class PublicPageComponent implements OnInit {
       value: number;
     };
   };
-  public positionsArray: PortfolioPublicDetails['holdings'][string][];
   public sectors: {
     [name: string]: { name: string; value: number };
   };
@@ -99,6 +99,7 @@ export class PublicPageComponent implements OnInit {
         value: 0
       }
     };
+    this.holdings = [];
     this.markets = {
       [UNKNOWN_KEY]: {
         name: UNKNOWN_KEY,
@@ -118,7 +119,6 @@ export class PublicPageComponent implements OnInit {
       }
     };
     this.positions = {};
-    this.positionsArray = [];
     this.sectors = {
       [UNKNOWN_KEY]: {
         name: UNKNOWN_KEY,
@@ -136,14 +136,13 @@ export class PublicPageComponent implements OnInit {
     for (const [symbol, position] of Object.entries(
       this.portfolioPublicDetails.holdings
     )) {
-      const value = position.allocationInPercentage;
+      this.holdings.push(position);
 
       this.positions[symbol] = {
-        value,
         currency: position.currency,
-        name: position.name
+        name: position.name,
+        value: position.allocationInPercentage
       };
-      this.positionsArray.push(position);
 
       if (position.countries.length > 0) {
         this.markets.developedMarkets.value +=

apps/client/src/app/pages/public/public-page.html

@@ -133,8 +133,8 @@
       <gf-holdings-table
         [deviceType]="deviceType"
         [hasPermissionToShowValues]="false"
+        [holdings]="holdings"
         [pageSize]="7"
-        [positions]="positionsArray"
       ></gf-holdings-table>
     </div>
   </div>

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

@@ -39,6 +39,7 @@ 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';
@@ -399,6 +400,14 @@ export class DataService {
 
           if (response.holdings) {
             for (const symbol of Object.keys(response.holdings)) {
+              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

libs/ui/src/lib/holdings-table/holdings-table.component.ts

@@ -1,12 +1,10 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
-  Output,
   ViewChild
 } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
@@ -14,7 +12,7 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
-import { AssetClass, Order as OrderModel } from '@prisma/client';
+import { AssetClass } from '@prisma/client';
 import { Subject, Subscription } from 'rxjs';
 
 @Component({
@@ -28,12 +26,9 @@ export class HoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() deviceType: string;
   @Input() hasPermissionToCreateActivity: boolean;
   @Input() hasPermissionToShowValues = true;
+  @Input() holdings: PortfolioPosition[];
   @Input() locale: string;
   @Input() pageSize = Number.MAX_SAFE_INTEGER;
-  @Input() positions: PortfolioPosition[];
-
-  @Output() transactionDeleted = new EventEmitter<string>();
-  @Output() transactionToUpdate = new EventEmitter<OrderModel>();
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -63,8 +58,8 @@ export class HoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
 
     this.isLoading = true;
 
-    if (this.positions) {
+    if (this.holdings) {
-      this.dataSource = new MatTableDataSource(this.positions);
+      this.dataSource = new MatTableDataSource(this.holdings);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;