From 1112048c45abb4c5243fc80a606e5c4074bdf780 Mon Sep 17 00:00:00 2001 From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com> Date: Sun, 24 Aug 2025 04:17:22 +0700 Subject: [PATCH] Task/migrate dialog header and footer components to standalone (#5401) * Migrate dialog footer component to standalone * Migrate dialog header component to standalone * Update changelog --- CHANGELOG.md | 2 ++ .../account-detail-dialog.module.ts | 8 ++++---- .../dialog-footer/dialog-footer.component.ts | 10 ++++++---- .../dialog-footer/dialog-footer.module.ts | 14 -------------- .../dialog-header/dialog-header.component.ts | 11 +++++++---- .../dialog-header/dialog-header.module.ts | 14 -------------- .../holding-detail-dialog.component.ts | 8 ++++---- .../login-with-access-token-dialog.module.ts | 4 ++-- .../import-activities-dialog.component.ts | 8 ++++---- .../benchmark-detail-dialog.component.ts | 8 ++++---- 10 files changed, 33 insertions(+), 54 deletions(-) delete mode 100644 apps/client/src/app/components/dialog-footer/dialog-footer.module.ts delete mode 100644 apps/client/src/app/components/dialog-header/dialog-header.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 757029e19..45a096209 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Refactored the dialog footer component to standalone +- Refactored the dialog header component to standalone - Refactored the register page to standalone - Migrated the login with access token dialog from `ngModel` to form control - Upgraded `prisma` from version `6.12.0` to `6.14.0` 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 index 46c4cb40f..537643ac2 100644 --- 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 @@ -1,5 +1,5 @@ -import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module'; -import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module'; +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'; @@ -22,8 +22,8 @@ import { AccountDetailDialog } from './account-detail-dialog.component'; CommonModule, GfAccountBalancesComponent, GfActivitiesTableComponent, - GfDialogFooterModule, - GfDialogHeaderModule, + GfDialogFooterComponent, + GfDialogHeaderComponent, GfHoldingsTableComponent, GfInvestmentChartModule, GfValueComponent, diff --git a/apps/client/src/app/components/dialog-footer/dialog-footer.component.ts b/apps/client/src/app/components/dialog-footer/dialog-footer.component.ts index 923b153b3..92ffc71b3 100644 --- a/apps/client/src/app/components/dialog-footer/dialog-footer.component.ts +++ b/apps/client/src/app/components/dialog-footer/dialog-footer.component.ts @@ -5,18 +5,20 @@ import { Input, Output } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { close } from 'ionicons/icons'; @Component({ + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'justify-content-center' }, + imports: [IonIcon, MatButtonModule], selector: 'gf-dialog-footer', - changeDetection: ChangeDetectionStrategy.OnPush, - templateUrl: './dialog-footer.component.html', styleUrls: ['./dialog-footer.component.scss'], - standalone: false + templateUrl: './dialog-footer.component.html' }) -export class DialogFooterComponent { +export class GfDialogFooterComponent { @Input() deviceType: string; @Output() closeButtonClicked = new EventEmitter(); diff --git a/apps/client/src/app/components/dialog-footer/dialog-footer.module.ts b/apps/client/src/app/components/dialog-footer/dialog-footer.module.ts deleted file mode 100644 index 486068f72..000000000 --- a/apps/client/src/app/components/dialog-footer/dialog-footer.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { IonIcon } from '@ionic/angular/standalone'; - -import { DialogFooterComponent } from './dialog-footer.component'; - -@NgModule({ - declarations: [DialogFooterComponent], - exports: [DialogFooterComponent], - imports: [CommonModule, IonIcon, MatButtonModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class GfDialogFooterModule {} diff --git a/apps/client/src/app/components/dialog-header/dialog-header.component.ts b/apps/client/src/app/components/dialog-header/dialog-header.component.ts index 03a5357b5..0487034e9 100644 --- a/apps/client/src/app/components/dialog-header/dialog-header.component.ts +++ b/apps/client/src/app/components/dialog-header/dialog-header.component.ts @@ -1,3 +1,4 @@ +import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -5,18 +6,20 @@ import { Input, Output } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { close } from 'ionicons/icons'; @Component({ + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'justify-content-center' }, + imports: [CommonModule, IonIcon, MatButtonModule], selector: 'gf-dialog-header', - changeDetection: ChangeDetectionStrategy.OnPush, - templateUrl: './dialog-header.component.html', styleUrls: ['./dialog-header.component.scss'], - standalone: false + templateUrl: './dialog-header.component.html' }) -export class DialogHeaderComponent { +export class GfDialogHeaderComponent { @Input() deviceType: string; @Input() position: 'center' | 'left' = 'left'; @Input() title: string; diff --git a/apps/client/src/app/components/dialog-header/dialog-header.module.ts b/apps/client/src/app/components/dialog-header/dialog-header.module.ts deleted file mode 100644 index da5c2ec28..000000000 --- a/apps/client/src/app/components/dialog-header/dialog-header.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { IonIcon } from '@ionic/angular/standalone'; - -import { DialogHeaderComponent } from './dialog-header.component'; - -@NgModule({ - declarations: [DialogHeaderComponent], - exports: [DialogHeaderComponent], - imports: [CommonModule, IonIcon, MatButtonModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class GfDialogHeaderModule {} diff --git a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts index 203bbb123..8f6616174 100644 --- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts +++ b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts @@ -1,6 +1,6 @@ import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface'; -import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module'; -import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module'; +import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component'; +import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component'; import { DataService } from '@ghostfolio/client/services/data.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; import { @@ -78,8 +78,8 @@ import { HoldingDetailDialogParams } from './interfaces/interfaces'; GfAccountsTableComponent, GfActivitiesTableComponent, GfDataProviderCreditsComponent, - GfDialogFooterModule, - GfDialogHeaderModule, + GfDialogFooterComponent, + GfDialogHeaderComponent, GfHistoricalMarketDataEditorComponent, GfLineChartComponent, GfPortfolioProportionChartComponent, diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts index fcced81aa..355ae58f8 100644 --- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts +++ b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts @@ -9,14 +9,14 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { IonIcon } from '@ionic/angular/standalone'; -import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module'; +import { GfDialogHeaderComponent } from '../dialog-header/dialog-header.component'; import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.component'; @NgModule({ declarations: [LoginWithAccessTokenDialog], imports: [ CommonModule, - GfDialogHeaderModule, + GfDialogHeaderComponent, IonIcon, MatButtonModule, MatCheckboxModule, diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts index 41e366253..8f7130a10 100644 --- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts +++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts @@ -2,8 +2,8 @@ import { CreateTagDto } from '@ghostfolio/api/app/endpoints/tags/create-tag.dto' import { CreateAccountWithBalancesDto } from '@ghostfolio/api/app/import/create-account-with-balances.dto'; import { CreateAssetProfileWithMarketDataDto } from '@ghostfolio/api/app/import/create-asset-profile-with-market-data.dto'; import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface'; -import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module'; -import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module'; +import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component'; +import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component'; import { GfFileDropModule } from '@ghostfolio/client/directives/file-drop/file-drop.module'; import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module'; import { DataService } from '@ghostfolio/client/services/data.service'; @@ -58,8 +58,8 @@ import { ImportActivitiesDialogParams } from './interfaces/interfaces'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [ GfActivitiesTableComponent, - GfDialogFooterModule, - GfDialogHeaderModule, + GfDialogFooterComponent, + GfDialogHeaderComponent, GfFileDropModule, GfSymbolModule, IonIcon, diff --git a/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts b/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts index 45f116358..8f7d30847 100644 --- a/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts +++ b/libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts @@ -1,5 +1,5 @@ -import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module'; -import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module'; +import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component'; +import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component'; import { DataService } from '@ghostfolio/client/services/data.service'; import { DATE_FORMAT } from '@ghostfolio/common/helper'; import { @@ -33,8 +33,8 @@ import { BenchmarkDetailDialogParams } from './interfaces/interfaces'; changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'd-flex flex-column h-100' }, imports: [ - GfDialogFooterModule, - GfDialogHeaderModule, + GfDialogFooterComponent, + GfDialogHeaderComponent, GfLineChartComponent, GfValueComponent, MatDialogModule