Feature/refactor holding detail dialog to standalone (#3407)

* Refactor holding detail dialog to standalone

* Update changelog

apps/client/src/app/app.component.ts

@@ -1,3 +1,5 @@
+import { GfHoldingDetailDialogComponent } from '@ghostfolio/client/components/holding-detail-dialog/holding-detail-dialog.component';
+import { HoldingDetailDialogParams } from '@ghostfolio/client/components/holding-detail-dialog/interfaces/interfaces';
 import { getCssVariable } from '@ghostfolio/common/helper';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
@@ -26,8 +28,6 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
-import { PositionDetailDialogParams } from './components/position-detail-dialog/interfaces/interfaces';
-import { PositionDetailDialog } from './components/position-detail-dialog/position-detail-dialog.component';
 import { DataService } from './services/data.service';
 import { ImpersonationStorageService } from './services/impersonation-storage.service';
 import { TokenStorageService } from './services/token-storage.service';
@@ -246,9 +246,9 @@ export class AppComponent implements OnDestroy, OnInit {
       .subscribe((user) => {
         this.user = user;
 
-        const dialogRef = this.dialog.open(PositionDetailDialog, {
+        const dialogRef = this.dialog.open(GfHoldingDetailDialogComponent, {
           autoFocus: false,
-          data: <PositionDetailDialogParams>{
+          data: <HoldingDetailDialogParams>{
             dataSource,
             symbol,
             baseCurrency: this.user?.settings?.baseCurrency,

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

@@ -1,4 +1,7 @@
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
+import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-table/accounts-table.module';
+import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
+import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { DATE_FORMAT, downloadAsFile } from '@ghostfolio/common/helper';
@@ -8,9 +11,16 @@ import {
   LineChartItem,
   User
 } from '@ghostfolio/common/interfaces';
+import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
+import { GfDataProviderCreditsComponent } from '@ghostfolio/ui/data-provider-credits';
 import { translate } from '@ghostfolio/ui/i18n';
+import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
+import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import { CommonModule } from '@angular/common';
 import {
+  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -18,24 +28,50 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
 import { SortDirection } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { Account, Tag } from '@prisma/client';
 import { format, isSameMonth, isToday, parseISO } from 'date-fns';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { PositionDetailDialogParams } from './interfaces/interfaces';
+import { HoldingDetailDialogParams } from './interfaces/interfaces';
 
 @Component({
-  host: { class: 'd-flex flex-column h-100' },
-  selector: 'gf-position-detail-dialog',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: 'position-detail-dialog.html',
-  styleUrls: ['./position-detail-dialog.component.scss']
+  host: { class: 'd-flex flex-column h-100' },
+  imports: [
+    CommonModule,
+    GfAccountsTableModule,
+    GfActivitiesTableComponent,
+    GfDataProviderCreditsComponent,
+    GfDialogFooterModule,
+    GfDialogHeaderModule,
+    GfLineChartComponent,
+    GfPortfolioProportionChartComponent,
+    GfValueComponent,
+    MatButtonModule,
+    MatChipsModule,
+    MatDialogModule,
+    MatTabsModule,
+    NgxSkeletonLoaderModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-holding-detail-dialog',
+  standalone: true,
+  styleUrls: ['./holding-detail-dialog.component.scss'],
+  templateUrl: 'holding-detail-dialog.html'
 })
-export class PositionDetailDialog implements OnDestroy, OnInit {
+export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
   public accounts: Account[];
   public activities: Activity[];
   public assetClass: string;
@@ -80,14 +116,14 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
-    public dialogRef: MatDialogRef<PositionDetailDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: PositionDetailDialogParams,
+    public dialogRef: MatDialogRef<GfHoldingDetailDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: HoldingDetailDialogParams,
     private userService: UserService
   ) {}
 
   public ngOnInit() {
     this.dataService
-      .fetchPositionDetail({
+      .fetchHoldingDetail({
         dataSource: this.data.dataSource,
         symbol: this.data.symbol
       })

apps/client/src/app/components/holding-detail-dialog/interfaces/interfaces.ts

@@ -2,7 +2,7 @@ import { ColorScheme } from '@ghostfolio/common/types';
 
 import { DataSource } from '@prisma/client';
 
-export interface PositionDetailDialogParams {
+export interface HoldingDetailDialogParams {
   baseCurrency: string;
   colorScheme: ColorScheme;
   dataSource: DataSource;

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

@@ -1,40 +0,0 @@
-import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-table/accounts-table.module';
-import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
-import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
-import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
-import { GfDataProviderCreditsComponent } from '@ghostfolio/ui/data-provider-credits';
-import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
-import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart';
-import { GfValueComponent } from '@ghostfolio/ui/value';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatTabsModule } from '@angular/material/tabs';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { PositionDetailDialog } from './position-detail-dialog.component';
-
-@NgModule({
-  declarations: [PositionDetailDialog],
-  imports: [
-    CommonModule,
-    GfAccountsTableModule,
-    GfActivitiesTableComponent,
-    GfDataProviderCreditsComponent,
-    GfDialogFooterModule,
-    GfDialogHeaderModule,
-    GfLineChartComponent,
-    GfPortfolioProportionChartComponent,
-    GfValueComponent,
-    MatButtonModule,
-    MatChipsModule,
-    MatDialogModule,
-    MatTabsModule,
-    NgxSkeletonLoaderModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfPositionDetailDialogModule {}

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

@@ -6,7 +6,7 @@ import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto
 import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { Activities } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto';
-import { PortfolioPositionDetail } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position-detail.interface';
+import { PortfolioHoldingDetail } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-holding-detail.interface';
 import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
 import { SymbolItem } from '@ghostfolio/api/app/symbol/interfaces/symbol-item.interface';
 import { UserItem } from '@ghostfolio/api/app/user/interfaces/user-item.interface';
@@ -325,6 +325,31 @@ export class DataService {
     });
   }
 
+  public fetchHoldingDetail({
+    dataSource,
+    symbol
+  }: {
+    dataSource: DataSource;
+    symbol: string;
+  }) {
+    return this.http
+      .get<PortfolioHoldingDetail>(
+        `/api/v1/portfolio/position/${dataSource}/${symbol}`
+      )
+      .pipe(
+        map((data) => {
+          if (data.orders) {
+            for (const order of data.orders) {
+              order.createdAt = parseISO(<string>(<unknown>order.createdAt));
+              order.date = parseISO(<string>(<unknown>order.date));
+            }
+          }
+
+          return data;
+        })
+      );
+  }
+
   public fetchInfo(): InfoItem {
     const info = cloneDeep((window as any).info);
     const utmSource = <'ios' | 'trusted-web-activity'>(
@@ -563,31 +588,6 @@ export class DataService {
     return this.http.get<PortfolioReport>('/api/v1/portfolio/report');
   }
 
-  public fetchPositionDetail({
-    dataSource,
-    symbol
-  }: {
-    dataSource: DataSource;
-    symbol: string;
-  }) {
-    return this.http
-      .get<PortfolioPositionDetail>(
-        `/api/v1/portfolio/position/${dataSource}/${symbol}`
-      )
-      .pipe(
-        map((data) => {
-          if (data.orders) {
-            for (const order of data.orders) {
-              order.createdAt = parseISO(<string>(<unknown>order.createdAt));
-              order.date = parseISO(<string>(<unknown>order.date));
-            }
-          }
-
-          return data;
-        })
-      );
-  }
-
   public loginAnonymous(accessToken: string) {
     return this.http.post<OAuthResponse>(`/api/v1/auth/anonymous`, {
       accessToken