From bec7b37df91cdabf5d228328fcb10e82208d53e6 Mon Sep 17 00:00:00 2001 From: Attila Cseh <77381875+csehatt741@users.noreply.github.com> Date: Mon, 7 Jul 2025 20:12:01 +0200 Subject: [PATCH] Feature/migrate accounts page components standalone (#5117) * Migrate accounts page components standalone * Update changelog --- CHANGELOG.md | 1 + apps/client/src/app/app-routing.module.ts | 4 +- .../accounts/accounts-page-routing.module.ts | 22 ----------- .../pages/accounts/accounts-page.component.ts | 26 ++++++++----- .../pages/accounts/accounts-page.module.ts | 30 --------------- .../pages/accounts/accounts-page.routes.ts | 15 ++++++++ ...eate-or-update-account-dialog.component.ts | 37 ++++++++++++++++--- .../create-or-update-account-dialog.module.ts | 32 ---------------- .../transfer-balance-dialog.component.ts | 30 ++++++++++++--- .../transfer-balance-dialog.module.ts | 27 -------------- 10 files changed, 89 insertions(+), 135 deletions(-) delete mode 100644 apps/client/src/app/pages/accounts/accounts-page-routing.module.ts delete mode 100644 apps/client/src/app/pages/accounts/accounts-page.module.ts create mode 100644 apps/client/src/app/pages/accounts/accounts-page.routes.ts delete mode 100644 apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts delete mode 100644 apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index dc4079612..3d126b4e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - Improved the language localization in the users table of the admin control panel +- Refactored the accounts pages to standalone - Refactored the portfolio pages to standalone - Renamed `Settings` to `settings` in the `User` database schema - Improved the language localization for Catalan (`ca`) diff --git a/apps/client/src/app/app-routing.module.ts b/apps/client/src/app/app-routing.module.ts index d93920a6f..9b8b32c36 100644 --- a/apps/client/src/app/app-routing.module.ts +++ b/apps/client/src/app/app-routing.module.ts @@ -23,9 +23,7 @@ const routes: Routes = [ { path: internalRoutes.accounts.path, loadChildren: () => - import('./pages/accounts/accounts-page.module').then( - (m) => m.AccountsPageModule - ) + import('./pages/accounts/accounts-page.routes').then((m) => m.routes) }, { path: internalRoutes.adminControl.path, diff --git a/apps/client/src/app/pages/accounts/accounts-page-routing.module.ts b/apps/client/src/app/pages/accounts/accounts-page-routing.module.ts deleted file mode 100644 index 8d3da2c35..000000000 --- a/apps/client/src/app/pages/accounts/accounts-page-routing.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; -import { internalRoutes } from '@ghostfolio/common/routes/routes'; - -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { AccountsPageComponent } from './accounts-page.component'; - -const routes: Routes = [ - { - canActivate: [AuthGuard], - component: AccountsPageComponent, - path: '', - title: internalRoutes.accounts.title - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class AccountsPageRoutingModule {} 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 8d1db08b5..7d139bd5d 100644 --- a/apps/client/src/app/pages/accounts/accounts-page.component.ts +++ b/apps/client/src/app/pages/accounts/accounts-page.component.ts @@ -2,7 +2,9 @@ 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 { AccountDetailDialogParams } from '@ghostfolio/client/components/account-detail-dialog/interfaces/interfaces'; +import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-table/accounts-table.module'; import { NotificationService } from '@ghostfolio/client/core/notification/notification.service'; import { DataService } from '@ghostfolio/client/services/data.service'; import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; @@ -11,8 +13,9 @@ import { User } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; import { MatDialog } from '@angular/material/dialog'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute, Router, RouterModule } from '@angular/router'; import { Account as AccountModel } from '@prisma/client'; import { addIcons } from 'ionicons'; import { addOutline } from 'ionicons/icons'; @@ -20,17 +23,22 @@ import { DeviceDetectorService } from 'ngx-device-detector'; import { EMPTY, Subject, Subscription } from 'rxjs'; import { catchError, takeUntil } from 'rxjs/operators'; -import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog/create-or-update-account-dialog.component'; -import { TransferBalanceDialog } from './transfer-balance/transfer-balance-dialog.component'; +import { GfCreateOrUpdateAccountDialogComponent } from './create-or-update-account-dialog/create-or-update-account-dialog.component'; +import { GfTransferBalanceDialogComponent } from './transfer-balance/transfer-balance-dialog.component'; @Component({ host: { class: 'has-fab page' }, + imports: [ + GfAccountDetailDialogModule, + GfAccountsTableModule, + MatButtonModule, + RouterModule + ], selector: 'gf-accounts-page', styleUrls: ['./accounts-page.scss'], - templateUrl: './accounts-page.html', - standalone: false + templateUrl: './accounts-page.html' }) -export class AccountsPageComponent implements OnDestroy, OnInit { +export class GfAccountsPageComponent implements OnDestroy, OnInit { public accounts: AccountModel[]; public deviceType: string; public hasImpersonationId: boolean; @@ -177,7 +185,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit { name, platformId }: AccountModel) { - const dialogRef = this.dialog.open(CreateOrUpdateAccountDialog, { + const dialogRef = this.dialog.open(GfCreateOrUpdateAccountDialogComponent, { data: { account: { balance, @@ -251,7 +259,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit { } private openCreateAccountDialog() { - const dialogRef = this.dialog.open(CreateOrUpdateAccountDialog, { + const dialogRef = this.dialog.open(GfCreateOrUpdateAccountDialogComponent, { data: { account: { balance: 0, @@ -293,7 +301,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit { } private openTransferBalanceDialog() { - const dialogRef = this.dialog.open(TransferBalanceDialog, { + const dialogRef = this.dialog.open(GfTransferBalanceDialogComponent, { data: { accounts: this.accounts }, diff --git a/apps/client/src/app/pages/accounts/accounts-page.module.ts b/apps/client/src/app/pages/accounts/accounts-page.module.ts deleted file mode 100644 index 5315ddbf8..000000000 --- a/apps/client/src/app/pages/accounts/accounts-page.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { GfAccountDetailDialogModule } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.module'; -import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-table/accounts-table.module'; - -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { RouterModule } from '@angular/router'; -import { IonIcon } from '@ionic/angular/standalone'; - -import { AccountsPageRoutingModule } from './accounts-page-routing.module'; -import { AccountsPageComponent } from './accounts-page.component'; -import { GfCreateOrUpdateAccountDialogModule } from './create-or-update-account-dialog/create-or-update-account-dialog.module'; -import { GfTransferBalanceDialogModule } from './transfer-balance/transfer-balance-dialog.module'; - -@NgModule({ - declarations: [AccountsPageComponent], - imports: [ - AccountsPageRoutingModule, - CommonModule, - GfAccountDetailDialogModule, - GfAccountsTableModule, - GfCreateOrUpdateAccountDialogModule, - GfTransferBalanceDialogModule, - IonIcon, - MatButtonModule, - RouterModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class AccountsPageModule {} diff --git a/apps/client/src/app/pages/accounts/accounts-page.routes.ts b/apps/client/src/app/pages/accounts/accounts-page.routes.ts new file mode 100644 index 000000000..e4edc39c1 --- /dev/null +++ b/apps/client/src/app/pages/accounts/accounts-page.routes.ts @@ -0,0 +1,15 @@ +import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; +import { internalRoutes } from '@ghostfolio/common/routes/routes'; + +import { Routes } from '@angular/router'; + +import { GfAccountsPageComponent } from './accounts-page.component'; + +export const routes: Routes = [ + { + canActivate: [AuthGuard], + component: GfAccountsPageComponent, + path: '', + title: internalRoutes.accounts.title + } +]; diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts index 15f4c35ee..beb815e0c 100644 --- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts +++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts @@ -2,7 +2,10 @@ import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto'; import { DataService } from '@ghostfolio/client/services/data.service'; import { validateObjectForForm } from '@ghostfolio/client/util/form.util'; +import { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector'; +import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo'; +import { CommonModule, NgClass } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -13,10 +16,20 @@ import { AbstractControl, FormBuilder, FormGroup, + ReactiveFormsModule, ValidatorFn, Validators } from '@angular/forms'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { + MAT_DIALOG_DATA, + MatDialogModule, + MatDialogRef +} from '@angular/material/dialog'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; import { Platform } from '@prisma/client'; import { Observable, Subject } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; @@ -24,14 +37,26 @@ import { map, startWith } from 'rxjs/operators'; import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces'; @Component({ + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'h-100' }, + imports: [ + CommonModule, + GfCurrencySelectorComponent, + GfEntityLogoComponent, + MatAutocompleteModule, + MatButtonModule, + MatCheckboxModule, + MatDialogModule, + MatFormFieldModule, + MatInputModule, + NgClass, + ReactiveFormsModule + ], selector: 'gf-create-or-update-account-dialog', - changeDetection: ChangeDetectionStrategy.OnPush, styleUrls: ['./create-or-update-account-dialog.scss'], - templateUrl: 'create-or-update-account-dialog.html', - standalone: false + templateUrl: 'create-or-update-account-dialog.html' }) -export class CreateOrUpdateAccountDialog implements OnDestroy { +export class GfCreateOrUpdateAccountDialogComponent implements OnDestroy { public accountForm: FormGroup; public currencies: string[] = []; public filteredPlatforms: Observable; @@ -42,7 +67,7 @@ export class CreateOrUpdateAccountDialog implements OnDestroy { public constructor( @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccountDialogParams, private dataService: DataService, - public dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private formBuilder: FormBuilder ) {} diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts deleted file mode 100644 index 8543d37f4..000000000 --- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { GfCurrencySelectorComponent } from '@ghostfolio/ui/currency-selector'; -import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo'; - -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatAutocompleteModule } from '@angular/material/autocomplete'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCheckboxModule } from '@angular/material/checkbox'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatInputModule } from '@angular/material/input'; - -import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.component'; - -@NgModule({ - declarations: [CreateOrUpdateAccountDialog], - imports: [ - CommonModule, - FormsModule, - GfCurrencySelectorComponent, - GfEntityLogoComponent, - MatAutocompleteModule, - MatButtonModule, - MatCheckboxModule, - MatDialogModule, - MatFormFieldModule, - MatInputModule, - ReactiveFormsModule - ] -}) -export class GfCreateOrUpdateAccountDialogModule {} diff --git a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts index e74ad1193..368c7f2f0 100644 --- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts +++ b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts @@ -1,4 +1,5 @@ import { TransferBalanceDto } from '@ghostfolio/api/app/account/transfer-balance.dto'; +import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo'; import { ChangeDetectionStrategy, @@ -10,24 +11,41 @@ import { AbstractControl, FormBuilder, FormGroup, + ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { MatButtonModule } from '@angular/material/button'; +import { + MAT_DIALOG_DATA, + MatDialogModule, + MatDialogRef +} from '@angular/material/dialog'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; import { Account } from '@prisma/client'; import { Subject } from 'rxjs'; import { TransferBalanceDialogParams } from './interfaces/interfaces'; @Component({ + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'h-100' }, + imports: [ + GfEntityLogoComponent, + MatButtonModule, + MatDialogModule, + MatFormFieldModule, + MatInputModule, + MatSelectModule, + ReactiveFormsModule + ], selector: 'gf-transfer-balance-dialog', - changeDetection: ChangeDetectionStrategy.OnPush, styleUrls: ['./transfer-balance-dialog.scss'], - templateUrl: 'transfer-balance-dialog.html', - standalone: false + templateUrl: 'transfer-balance-dialog.html' }) -export class TransferBalanceDialog implements OnDestroy { +export class GfTransferBalanceDialogComponent implements OnDestroy { public accounts: Account[] = []; public currency: string; public transferBalanceForm: FormGroup; @@ -36,7 +54,7 @@ export class TransferBalanceDialog implements OnDestroy { public constructor( @Inject(MAT_DIALOG_DATA) public data: TransferBalanceDialogParams, - public dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private formBuilder: FormBuilder ) {} diff --git a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.module.ts b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.module.ts deleted file mode 100644 index 19bd98a7f..000000000 --- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo'; - -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { ReactiveFormsModule } from '@angular/forms'; -import { MatButtonModule } from '@angular/material/button'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatInputModule } from '@angular/material/input'; -import { MatSelectModule } from '@angular/material/select'; - -import { TransferBalanceDialog } from './transfer-balance-dialog.component'; - -@NgModule({ - declarations: [TransferBalanceDialog], - imports: [ - CommonModule, - GfEntityLogoComponent, - MatButtonModule, - MatDialogModule, - MatFormFieldModule, - MatInputModule, - MatSelectModule, - ReactiveFormsModule - ] -}) -export class GfTransferBalanceDialogModule {}