Feature/migrate accounts page components standalone (#5117)

* Migrate accounts page components standalone

* Update changelog

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`)

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,

apps/client/src/app/pages/accounts/accounts-page-routing.module.ts

@@ -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 {}

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
       },

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

@@ -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 {}

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
+  }
+];

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<Platform[]>;
@@ -42,7 +67,7 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccountDialogParams,
     private dataService: DataService,
-    public dialogRef: MatDialogRef<CreateOrUpdateAccountDialog>,
+    public dialogRef: MatDialogRef<GfCreateOrUpdateAccountDialogComponent>,
     private formBuilder: FormBuilder
   ) {}
 

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts

@@ -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 {}

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<TransferBalanceDialog>,
+    public dialogRef: MatDialogRef<GfTransferBalanceDialogComponent>,
     private formBuilder: FormBuilder
   ) {}
 

apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.module.ts

@@ -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 {}