Task/migrate account detail dialog to standalone (#5458)

* Migrate account detail dialog to standalone

* Update changelog

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Localized the content of the about page
 - Refactored the dialog footer component
 - Refactored the dialog header component
+- Refactored the account detail dialog component to standalone
 - Refactored the benchmark comparator component to standalone
 - Refactored the portfolio summary component to standalone
 - Refactored the world map chart component to standalone

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

@@ -1,5 +1,8 @@
 import { CreateAccountBalanceDto } from '@ghostfolio/api/app/account-balance/create-account-balance.dto';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
+import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component';
+import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
+import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { NUMERICAL_PRECISION_THRESHOLD_6_FIGURES } from '@ghostfolio/common/config';
@@ -13,7 +16,12 @@ import {
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { OrderWithAccount } from '@ghostfolio/common/types';
+import { GfAccountBalancesComponent } from '@ghostfolio/ui/account-balances';
+import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
+import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -22,10 +30,15 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { Sort, SortDirection } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { Router } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { Big } from 'big.js';
 import { format, parseISO } from 'date-fns';
 import { addIcons } from 'ionicons';
@@ -35,20 +48,36 @@ import {
   walletOutline
 } from 'ionicons/icons';
 import { isNumber } from 'lodash';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { forkJoin, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { AccountDetailDialogParams } from './interfaces/interfaces';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
+  imports: [
+    CommonModule,
+    GfAccountBalancesComponent,
+    GfActivitiesTableComponent,
+    GfDialogFooterComponent,
+    GfDialogHeaderComponent,
+    GfHoldingsTableComponent,
+    GfInvestmentChartModule,
+    GfValueComponent,
+    IonIcon,
+    MatButtonModule,
+    MatDialogModule,
+    MatTabsModule,
+    NgxSkeletonLoaderModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-account-detail-dialog',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: 'account-detail-dialog.html',
   styleUrls: ['./account-detail-dialog.component.scss'],
-  standalone: false
+  templateUrl: 'account-detail-dialog.html'
 })
-export class AccountDetailDialog implements OnDestroy, OnInit {
+export class GfAccountDetailDialogComponent implements OnDestroy, OnInit {
   public accountBalances: AccountBalancesResponse['balances'];
   public activities: OrderWithAccount[];
   public balance: number;
@@ -81,7 +110,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: AccountDetailDialogParams,
     private dataService: DataService,
-    public dialogRef: MatDialogRef<AccountDetailDialog>,
+    public dialogRef: MatDialogRef<GfAccountDetailDialogComponent>,
     private router: Router,
     private userService: UserService
   ) {

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

@@ -1,38 +0,0 @@
-import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component';
-import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
-import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
-import { GfAccountBalancesComponent } from '@ghostfolio/ui/account-balances';
-import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table';
-import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
-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 { MatDialogModule } from '@angular/material/dialog';
-import { MatTabsModule } from '@angular/material/tabs';
-import { IonIcon } from '@ionic/angular/standalone';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { AccountDetailDialog } from './account-detail-dialog.component';
-
-@NgModule({
-  declarations: [AccountDetailDialog],
-  imports: [
-    CommonModule,
-    GfAccountBalancesComponent,
-    GfActivitiesTableComponent,
-    GfDialogFooterComponent,
-    GfDialogHeaderComponent,
-    GfHoldingsTableComponent,
-    GfInvestmentChartModule,
-    GfValueComponent,
-    IonIcon,
-    MatButtonModule,
-    MatDialogModule,
-    MatTabsModule,
-    NgxSkeletonLoaderModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfAccountDetailDialogModule {}

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

@@ -1,8 +1,7 @@
 import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
 import { TransferBalanceDto } from '@ghostfolio/api/app/account/transfer-balance.dto';
 import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';
-import { AccountDetailDialog } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component';
+import { GfAccountDetailDialogComponent } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component';
-import { GfAccountDetailDialogModule } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.module';
 import { AccountDetailDialogParams } from '@ghostfolio/client/components/account-detail-dialog/interfaces/interfaces';
 import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -28,12 +27,7 @@ import { GfTransferBalanceDialogComponent } from './transfer-balance/transfer-ba
 
 @Component({
   host: { class: 'has-fab page' },
-  imports: [
+  imports: [GfAccountsTableComponent, MatButtonModule, RouterModule],
-    GfAccountDetailDialogModule,
-    GfAccountsTableComponent,
-    MatButtonModule,
-    RouterModule
-  ],
   selector: 'gf-accounts-page',
   styleUrls: ['./accounts-page.scss'],
   templateUrl: './accounts-page.html'
@@ -233,7 +227,7 @@ export class GfAccountsPageComponent implements OnDestroy, OnInit {
   }
 
   private openAccountDetailDialog(aAccountId: string) {
-    const dialogRef = this.dialog.open(AccountDetailDialog, {
+    const dialogRef = this.dialog.open(GfAccountDetailDialogComponent, {
       autoFocus: false,
       data: {
         accountId: aAccountId,

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

@@ -1,4 +1,4 @@
-import { AccountDetailDialog } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component';
+import { GfAccountDetailDialogComponent } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component';
 import { AccountDetailDialogParams } from '@ghostfolio/client/components/account-detail-dialog/interfaces/interfaces';
 import { GfWorldMapChartComponent } from '@ghostfolio/client/components/world-map-chart/world-map-chart.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -558,7 +558,7 @@ export class GfAllocationsPageComponent implements OnDestroy, OnInit {
   }
 
   private openAccountDetailDialog(aAccountId: string) {
-    const dialogRef = this.dialog.open(AccountDetailDialog, {
+    const dialogRef = this.dialog.open(GfAccountDetailDialogComponent, {
       autoFocus: false,
       data: {
         accountId: aAccountId,