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

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';
@@ -23,10 +24,11 @@ import { OrderWithAccount } from '@ghostfolio/common/types';
 import Big from 'big.js';
 import { format, parseISO } from 'date-fns';
 import { isNumber } from 'lodash';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 
 import { AccountDetailDialogParams } from './interfaces/interfaces';
+import { translate } from '@ghostfolio/ui/i18n';
 
 @Component({
   host: { class: 'd-flex flex-column h-100' },
@@ -55,6 +57,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
   public transactionCount: number;
   public user: User;
   public valueInBaseCurrency: number;
+  public holdings$: Observable<PortfolioPosition[]>;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -83,6 +86,26 @@ 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).map(function (x) {
+            return {
+              ...x,
+              assetClassLabel: translate(x.assetClass),
+              assetSubClassLabel: translate(x.assetSubClass)
+            };
+          })
+        )
+      );
     this.dataService
       .fetchAccount(this.data.accountId)
       .pipe(takeUntil(this.unsubscribeSubject))

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

@@ -69,6 +69,14 @@
       [mat-stretch-tabs]="false"
       [ngClass]="{ 'd-none': isLoadingActivities }"
     >
+      <mat-tab>
+        <ng-template i18n mat-tab-label>Holdings</ng-template>
+        <gf-holdings-table
+          [baseCurrency]="user?.settings?.baseCurrency"
+          [locale]="user?.settings?.locale"
+          [positions]="holdings$ | async"
+        ></gf-holdings-table>
+      </mat-tab>
       <mat-tab>
         <ng-template i18n mat-tab-label>Activities</ng-template>
         <gf-activities-table-lazy

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

@@ -13,6 +13,7 @@ import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AccountDetailDialog } from './account-detail-dialog.component';
+import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
 
 @NgModule({
   declarations: [AccountDetailDialog],
@@ -28,7 +29,8 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
     MatButtonModule,
     MatDialogModule,
     MatTabsModule,
-    NgxSkeletonLoaderModule
+    NgxSkeletonLoaderModule,
+    GfHoldingsTableModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })