From a25ec0c15a64ece5054f32de5c48f2fa17cb99c4 Mon Sep 17 00:00:00 2001 From: Akito Yamaguchi <113779946+akito0120@users.noreply.github.com> Date: Thu, 4 Sep 2025 20:01:41 +0200 Subject: [PATCH] Task/migrate account detail dialog to standalone (#5458) * Migrate account detail dialog to standalone * Update changelog --- CHANGELOG.md | 1 + .../account-detail-dialog.component.ts | 39 ++++++++++++++++--- .../account-detail-dialog.module.ts | 38 ------------------ .../pages/accounts/accounts-page.component.ts | 12 ++---- .../allocations/allocations-page.component.ts | 4 +- 5 files changed, 40 insertions(+), 54 deletions(-) delete mode 100644 apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 20250acba..f66a1875e 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts index 2886910c4..954bcd27b 100644 --- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts +++ b/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, + public dialogRef: MatDialogRef, private router: Router, private userService: UserService ) { diff --git a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts b/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts deleted file mode 100644 index 537643ac2..000000000 --- a/apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts +++ /dev/null @@ -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 {} diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts index f7030173d..f09901e45 100644 --- a/apps/client/src/app/pages/accounts/accounts-page.component.ts +++ b/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 { GfAccountDetailDialogModule } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.module'; +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 { 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: [ - GfAccountDetailDialogModule, - GfAccountsTableComponent, - MatButtonModule, - RouterModule - ], + imports: [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, diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts index 27bf0036c..081e96b99 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts +++ b/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,