From ec1f552dfabc1d763bedd83cc1b862ae25777e7f Mon Sep 17 00:00:00 2001 From: csehatt741 <77381875+csehatt741@users.noreply.github.com> Date: Sun, 6 Jul 2025 13:12:58 +0200 Subject: [PATCH] Feature/migrate portfolio page components to standalone (#5086) * Migrate portfolio page components to standalone * Update changelog --- CHANGELOG.md | 1 + apps/client/src/app/app-routing.module.ts | 4 +- .../activities/activities-page.component.ts | 16 +++++-- .../activities/activities-page.module.ts | 32 ------------- ...ng.module.ts => activities-page.routes.ts} | 11 +---- ...ate-or-update-activity-dialog.component.ts | 46 +++++++++++++++++-- ...create-or-update-activity-dialog.module.ts | 41 ----------------- .../import-activities-dialog.component.ts | 45 ++++++++++++++++-- .../import-activities-dialog.html | 4 +- .../import-activities-dialog.module.ts | 43 ----------------- .../allocations/allocations-page.component.ts | 21 ++++++++- .../allocations/allocations-page.module.ts | 32 ------------- ...g.module.ts => allocations-page.routes.ts} | 11 +---- .../analysis/analysis-page.component.ts | 28 +++++++++-- .../analysis/analysis-page.module.ts | 40 ---------------- ...ting.module.ts => analysis-page.routes.ts} | 11 +---- .../fire/fire-page-routing.module.ts | 21 --------- .../portfolio/fire/fire-page.component.ts | 15 +++++- .../pages/portfolio/fire/fire-page.module.ts | 24 ---------- .../pages/portfolio/fire/fire-page.routes.ts | 14 ++++++ .../portfolio/portfolio-page.component.ts | 6 ++- .../pages/portfolio/portfolio-page.module.ts | 21 --------- ...ing.module.ts => portfolio-page.routes.ts} | 27 +++-------- .../x-ray/x-ray-page-routing.module.ts | 21 --------- .../portfolio/x-ray/x-ray-page.component.ts | 15 +++++- .../portfolio/x-ray/x-ray-page.module.ts | 24 ---------- .../portfolio/x-ray/x-ray-page.routes.ts | 14 ++++++ 27 files changed, 213 insertions(+), 375 deletions(-) delete mode 100644 apps/client/src/app/pages/portfolio/activities/activities-page.module.ts rename apps/client/src/app/pages/portfolio/activities/{activities-page-routing.module.ts => activities-page.routes.ts} (58%) delete mode 100644 apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts delete mode 100644 apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts delete mode 100644 apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts rename apps/client/src/app/pages/portfolio/allocations/{allocations-page-routing.module.ts => allocations-page.routes.ts} (51%) delete mode 100644 apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts rename apps/client/src/app/pages/portfolio/analysis/{analysis-page-routing.module.ts => analysis-page.routes.ts} (58%) delete mode 100644 apps/client/src/app/pages/portfolio/fire/fire-page-routing.module.ts delete mode 100644 apps/client/src/app/pages/portfolio/fire/fire-page.module.ts create mode 100644 apps/client/src/app/pages/portfolio/fire/fire-page.routes.ts delete mode 100644 apps/client/src/app/pages/portfolio/portfolio-page.module.ts rename apps/client/src/app/pages/portfolio/{portfolio-page-routing.module.ts => portfolio-page.routes.ts} (53%) delete mode 100644 apps/client/src/app/pages/portfolio/x-ray/x-ray-page-routing.module.ts delete mode 100644 apps/client/src/app/pages/portfolio/x-ray/x-ray-page.module.ts create mode 100644 apps/client/src/app/pages/portfolio/x-ray/x-ray-page.routes.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index d39cc6d47..0d5f4130c 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 portfolio pages to standalone - Renamed `Settings` to `settings` in the `User` database schema - Improved the language localization for Dutch (`nl`) - Improved the language localization for Español (`es`) diff --git a/apps/client/src/app/app-routing.module.ts b/apps/client/src/app/app-routing.module.ts index 40dbceb1a..d93920a6f 100644 --- a/apps/client/src/app/app-routing.module.ts +++ b/apps/client/src/app/app-routing.module.ts @@ -103,9 +103,7 @@ const routes: Routes = [ { path: internalRoutes.portfolio.path, loadChildren: () => - import('./pages/portfolio/portfolio-page.module').then( - (m) => m.PortfolioPageModule - ) + import('./pages/portfolio/portfolio-page.routes').then((m) => m.routes) }, { path: publicRoutes.pricing.path, diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts index 967255aa8..38e24dbf6 100644 --- a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts +++ b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts @@ -9,13 +9,17 @@ import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config'; import { downloadAsFile } from '@ghostfolio/common/helper'; import { AssetProfileIdentifier, User } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; +import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table'; import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; import { MatDialog } from '@angular/material/dialog'; import { PageEvent } from '@angular/material/paginator'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; import { Sort, SortDirection } from '@angular/material/sort'; import { MatTableDataSource } from '@angular/material/table'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute, Router, RouterModule } from '@angular/router'; +import { IonIcon } from '@ionic/angular/standalone'; import { format, parseISO } from 'date-fns'; import { addIcons } from 'ionicons'; import { addOutline } from 'ionicons/icons'; @@ -29,10 +33,16 @@ import { ImportActivitiesDialogParams } from './import-activities-dialog/interfa @Component({ host: { class: 'has-fab' }, + imports: [ + GfActivitiesTableComponent, + IonIcon, + MatButtonModule, + MatSnackBarModule, + RouterModule + ], selector: 'gf-activities-page', styleUrls: ['./activities-page.scss'], - templateUrl: './activities-page.html', - standalone: false + templateUrl: './activities-page.html' }) export class ActivitiesPageComponent implements OnDestroy, OnInit { public dataSource: MatTableDataSource; diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.module.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.module.ts deleted file mode 100644 index d69178c32..000000000 --- a/apps/client/src/app/pages/portfolio/activities/activities-page.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { ImportActivitiesService } from '@ghostfolio/client/services/import-activities.service'; -import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table'; - -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { MatButtonModule } from '@angular/material/button'; -import { MatSnackBarModule } from '@angular/material/snack-bar'; -import { RouterModule } from '@angular/router'; -import { IonIcon } from '@ionic/angular/standalone'; - -import { ActivitiesPageRoutingModule } from './activities-page-routing.module'; -import { ActivitiesPageComponent } from './activities-page.component'; -import { GfCreateOrUpdateActivityDialogModule } from './create-or-update-activity-dialog/create-or-update-activity-dialog.module'; -import { GfImportActivitiesDialogModule } from './import-activities-dialog/import-activities-dialog.module'; - -@NgModule({ - declarations: [ActivitiesPageComponent], - imports: [ - ActivitiesPageRoutingModule, - CommonModule, - GfActivitiesTableComponent, - GfCreateOrUpdateActivityDialogModule, - GfImportActivitiesDialogModule, - IonIcon, - MatButtonModule, - MatSnackBarModule, - RouterModule - ], - providers: [ImportActivitiesService], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class ActivitiesPageModule {} diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page-routing.module.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.routes.ts similarity index 58% rename from apps/client/src/app/pages/portfolio/activities/activities-page-routing.module.ts rename to apps/client/src/app/pages/portfolio/activities/activities-page.routes.ts index 3d1d0597a..11a3e8a2a 100644 --- a/apps/client/src/app/pages/portfolio/activities/activities-page-routing.module.ts +++ b/apps/client/src/app/pages/portfolio/activities/activities-page.routes.ts @@ -1,12 +1,11 @@ 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 { Routes } from '@angular/router'; import { ActivitiesPageComponent } from './activities-page.component'; -const routes: Routes = [ +export const routes: Routes = [ { canActivate: [AuthGuard], component: ActivitiesPageComponent, @@ -14,9 +13,3 @@ const routes: Routes = [ title: internalRoutes.portfolio.subRoutes.activities.title } ]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class ActivitiesPageRoutingModule {} diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts index 7db8e16e6..937a01086 100644 --- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts +++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts @@ -4,8 +4,13 @@ import { UserService } from '@ghostfolio/client/services/user/user.service'; import { getDateFormatString } from '@ghostfolio/common/helper'; import { LookupItem } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; +import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo'; import { translate } from '@ghostfolio/ui/i18n'; +import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete'; +import { GfTagsSelectorComponent } from '@ghostfolio/ui/tags-selector'; +import { GfValueComponent } from '@ghostfolio/ui/value'; +import { NgClass } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, @@ -13,9 +18,25 @@ import { Inject, OnDestroy } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { + FormBuilder, + FormGroup, + ReactiveFormsModule, + Validators +} from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCheckboxModule } from '@angular/material/checkbox'; import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +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 { IonIcon } from '@ionic/angular/standalone'; import { AssetClass, AssetSubClass, Tag, Type } from '@prisma/client'; import { isAfter, isToday } from 'date-fns'; import { addIcons } from 'ionicons'; @@ -28,12 +49,27 @@ import { validateObjectForForm } from '../../../../util/form.util'; import { CreateOrUpdateActivityDialogParams } from './interfaces/interfaces'; @Component({ + changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'h-100' }, + imports: [ + GfEntityLogoComponent, + GfSymbolAutocompleteComponent, + GfTagsSelectorComponent, + GfValueComponent, + IonIcon, + MatButtonModule, + MatCheckboxModule, + MatDatepickerModule, + MatDialogModule, + MatFormFieldModule, + MatInputModule, + MatSelectModule, + NgClass, + ReactiveFormsModule + ], selector: 'gf-create-or-update-activity-dialog', - changeDetection: ChangeDetectionStrategy.OnPush, styleUrls: ['./create-or-update-activity-dialog.scss'], - templateUrl: 'create-or-update-activity-dialog.html', - standalone: false + templateUrl: 'create-or-update-activity-dialog.html' }) export class CreateOrUpdateActivityDialog implements OnDestroy { public activityForm: FormGroup; diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts deleted file mode 100644 index 4a2b9b1c9..000000000 --- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo'; -import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete'; -import { GfTagsSelectorComponent } from '@ghostfolio/ui/tags-selector'; -import { GfValueComponent } from '@ghostfolio/ui/value'; - -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCheckboxModule } from '@angular/material/checkbox'; -import { MatDatepickerModule } from '@angular/material/datepicker'; -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 { IonIcon } from '@ionic/angular/standalone'; - -import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog.component'; - -@NgModule({ - declarations: [CreateOrUpdateActivityDialog], - imports: [ - CommonModule, - FormsModule, - GfEntityLogoComponent, - GfSymbolAutocompleteComponent, - GfTagsSelectorComponent, - GfValueComponent, - IonIcon, - MatButtonModule, - MatCheckboxModule, - MatDatepickerModule, - MatDialogModule, - MatFormFieldModule, - MatInputModule, - MatSelectModule, - ReactiveFormsModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class GfCreateOrUpdateActivityDialogModule {} 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 ed99ee4fd..3ffad35aa 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 @@ -1,8 +1,13 @@ import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.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 { 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'; import { ImportActivitiesService } from '@ghostfolio/client/services/import-activities.service'; import { PortfolioPosition } from '@ghostfolio/common/interfaces'; +import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table'; import { StepperOrientation, @@ -15,12 +20,27 @@ import { Inject, OnDestroy } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { + FormBuilder, + FormGroup, + ReactiveFormsModule, + Validators +} from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { + MAT_DIALOG_DATA, + MatDialogModule, + MatDialogRef +} from '@angular/material/dialog'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatSelectModule } from '@angular/material/select'; import { MatSnackBar } from '@angular/material/snack-bar'; import { SortDirection } from '@angular/material/sort'; -import { MatStepper } from '@angular/material/stepper'; +import { MatStepper, MatStepperModule } from '@angular/material/stepper'; import { MatTableDataSource } from '@angular/material/table'; +import { IonIcon } from '@ionic/angular/standalone'; import { AssetClass } from '@prisma/client'; import { addIcons } from 'ionicons'; import { cloudUploadOutline, warningOutline } from 'ionicons/icons'; @@ -34,10 +54,25 @@ import { ImportActivitiesDialogParams } from './interfaces/interfaces'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ + GfActivitiesTableComponent, + GfDialogFooterModule, + GfDialogHeaderModule, + GfFileDropModule, + GfSymbolModule, + IonIcon, + MatButtonModule, + MatDialogModule, + MatExpansionModule, + MatFormFieldModule, + MatProgressSpinnerModule, + MatSelectModule, + MatStepperModule, + ReactiveFormsModule + ], selector: 'gf-import-activities-dialog', styleUrls: ['./import-activities-dialog.scss'], - templateUrl: 'import-activities-dialog.html', - standalone: false + templateUrl: 'import-activities-dialog.html' }) export class ImportActivitiesDialog implements OnDestroy { public accounts: CreateAccountDto[] = []; diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html index f5a3612ac..9e7f7a923 100644 --- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html +++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html @@ -14,7 +14,7 @@ [selectedIndex]="importStep" (selectionChange)="onImportStepChange($event)" > - + @if (mode === 'DIVIDEND') { Select Holding @@ -107,7 +107,7 @@ - + @if (mode === 'DIVIDEND') { Select Dividends diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts deleted file mode 100644 index 24b83a7e8..000000000 --- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module'; -import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module'; -import { GfFileDropModule } from '@ghostfolio/client/directives/file-drop/file-drop.module'; -import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module'; -import { GfActivitiesTableComponent } from '@ghostfolio/ui/activities-table'; - -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatButtonModule } from '@angular/material/button'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatExpansionModule } from '@angular/material/expansion'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { MatSelectModule } from '@angular/material/select'; -import { MatStepperModule } from '@angular/material/stepper'; -import { IonIcon } from '@ionic/angular/standalone'; - -import { ImportActivitiesDialog } from './import-activities-dialog.component'; - -@NgModule({ - declarations: [ImportActivitiesDialog], - imports: [ - CommonModule, - FormsModule, - GfActivitiesTableComponent, - GfDialogFooterModule, - GfDialogHeaderModule, - GfFileDropModule, - GfSymbolModule, - IonIcon, - MatButtonModule, - MatDialogModule, - MatExpansionModule, - MatFormFieldModule, - MatProgressSpinnerModule, - MatSelectModule, - MatStepperModule, - ReactiveFormsModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class GfImportActivitiesDialogModule {} 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 54ea88548..46d6cd4c6 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,5 +1,6 @@ import { AccountDetailDialog } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component'; import { AccountDetailDialogParams } from '@ghostfolio/client/components/account-detail-dialog/interfaces/interfaces'; +import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module'; import { DataService } from '@ghostfolio/client/services/data.service'; import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; @@ -15,9 +16,16 @@ import { import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import { Market, MarketAdvanced } from '@ghostfolio/common/types'; import { translate } from '@ghostfolio/ui/i18n'; +import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart'; +import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; +import { GfTopHoldingsComponent } from '@ghostfolio/ui/top-holdings'; +import { GfValueComponent } from '@ghostfolio/ui/value'; +import { NgClass } from '@angular/common'; import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { MatCardModule } from '@angular/material/card'; import { MatDialog } from '@angular/material/dialog'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; import { ActivatedRoute, Router } from '@angular/router'; import { Account, AssetClass, DataSource, Platform } from '@prisma/client'; import { isNumber } from 'lodash'; @@ -26,10 +34,19 @@ import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @Component({ + imports: [ + GfPortfolioProportionChartComponent, + GfPremiumIndicatorComponent, + GfTopHoldingsComponent, + GfValueComponent, + GfWorldMapChartModule, + MatCardModule, + MatProgressBarModule, + NgClass + ], selector: 'gf-allocations-page', styleUrls: ['./allocations-page.scss'], - templateUrl: './allocations-page.html', - standalone: false + templateUrl: './allocations-page.html' }) export class AllocationsPageComponent implements OnDestroy, OnInit { public accounts: { diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts deleted file mode 100644 index 263c34e49..000000000 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module'; -import { GfPortfolioProportionChartComponent } from '@ghostfolio/ui/portfolio-proportion-chart'; -import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; -import { GfTopHoldingsComponent } from '@ghostfolio/ui/top-holdings'; -import { GfValueComponent } from '@ghostfolio/ui/value'; - -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { MatCardModule } from '@angular/material/card'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatProgressBarModule } from '@angular/material/progress-bar'; - -import { AllocationsPageRoutingModule } from './allocations-page-routing.module'; -import { AllocationsPageComponent } from './allocations-page.component'; - -@NgModule({ - declarations: [AllocationsPageComponent], - imports: [ - AllocationsPageRoutingModule, - CommonModule, - GfPortfolioProportionChartComponent, - GfPremiumIndicatorComponent, - GfTopHoldingsComponent, - GfValueComponent, - GfWorldMapChartModule, - MatCardModule, - MatDialogModule, - MatProgressBarModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class AllocationsPageModule {} diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page-routing.module.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.routes.ts similarity index 51% rename from apps/client/src/app/pages/portfolio/allocations/allocations-page-routing.module.ts rename to apps/client/src/app/pages/portfolio/allocations/allocations-page.routes.ts index bb5833442..351372a23 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page-routing.module.ts +++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.routes.ts @@ -1,11 +1,10 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import { Routes } from '@angular/router'; import { AllocationsPageComponent } from './allocations-page.component'; -const routes: Routes = [ +export const routes: Routes = [ { canActivate: [AuthGuard], component: AllocationsPageComponent, @@ -13,9 +12,3 @@ const routes: Routes = [ title: $localize`Allocations` } ]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class AllocationsPageRoutingModule {} diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts index 192ba152a..ebeff244c 100644 --- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts +++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts @@ -1,4 +1,7 @@ +import { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module'; +import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module'; import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component'; +import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module'; import { DataService } from '@ghostfolio/client/services/data.service'; import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; @@ -14,6 +17,8 @@ import { import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import type { AiPromptMode, GroupBy } from '@ghostfolio/common/types'; import { translate } from '@ghostfolio/ui/i18n'; +import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; +import { GfValueComponent } from '@ghostfolio/ui/value'; import { Clipboard } from '@angular/cdk/clipboard'; import { @@ -23,22 +28,39 @@ import { OnInit, ViewChild } from '@angular/core'; -import { MatMenuTrigger } from '@angular/material/menu'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatSnackBar } from '@angular/material/snack-bar'; +import { IonIcon } from '@ionic/angular/standalone'; import { SymbolProfile } from '@prisma/client'; import { addIcons } from 'ionicons'; import { copyOutline, ellipsisVertical } from 'ionicons/icons'; import { isNumber, sortBy } from 'lodash'; import ms from 'ms'; import { DeviceDetectorService } from 'ngx-device-detector'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @Component({ + imports: [ + GfBenchmarkComparatorModule, + GfInvestmentChartModule, + GfPremiumIndicatorComponent, + GfToggleModule, + GfValueComponent, + IonIcon, + MatButtonModule, + MatCardModule, + MatMenuModule, + MatProgressSpinnerModule, + NgxSkeletonLoaderModule + ], selector: 'gf-analysis-page', styleUrls: ['./analysis-page.scss'], - templateUrl: './analysis-page.html', - standalone: false + templateUrl: './analysis-page.html' }) export class AnalysisPageComponent implements OnDestroy, OnInit { @ViewChild(MatMenuTrigger) actionsMenuButton!: MatMenuTrigger; diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts deleted file mode 100644 index 7aad72b1f..000000000 --- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module'; -import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module'; -import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module'; -import { GfActivitiesFilterComponent } from '@ghostfolio/ui/activities-filter'; -import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; -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 { MatCardModule } from '@angular/material/card'; -import { MatMenuModule } from '@angular/material/menu'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { IonIcon } from '@ionic/angular/standalone'; -import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; - -import { AnalysisPageRoutingModule } from './analysis-page-routing.module'; -import { AnalysisPageComponent } from './analysis-page.component'; - -@NgModule({ - declarations: [AnalysisPageComponent], - imports: [ - AnalysisPageRoutingModule, - CommonModule, - GfActivitiesFilterComponent, - GfBenchmarkComparatorModule, - GfInvestmentChartModule, - GfPremiumIndicatorComponent, - GfToggleModule, - GfValueComponent, - IonIcon, - MatButtonModule, - MatCardModule, - MatMenuModule, - MatProgressSpinnerModule, - NgxSkeletonLoaderModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class AnalysisPageModule {} diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page-routing.module.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.routes.ts similarity index 58% rename from apps/client/src/app/pages/portfolio/analysis/analysis-page-routing.module.ts rename to apps/client/src/app/pages/portfolio/analysis/analysis-page.routes.ts index e853a70f6..81ea8f64e 100644 --- a/apps/client/src/app/pages/portfolio/analysis/analysis-page-routing.module.ts +++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.routes.ts @@ -1,12 +1,11 @@ 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 { Routes } from '@angular/router'; import { AnalysisPageComponent } from './analysis-page.component'; -const routes: Routes = [ +export const routes: Routes = [ { canActivate: [AuthGuard], component: AnalysisPageComponent, @@ -14,9 +13,3 @@ const routes: Routes = [ title: internalRoutes.portfolio.subRoutes.analysis.title } ]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class AnalysisPageRoutingModule {} diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page-routing.module.ts b/apps/client/src/app/pages/portfolio/fire/fire-page-routing.module.ts deleted file mode 100644 index 96260adda..000000000 --- a/apps/client/src/app/pages/portfolio/fire/fire-page-routing.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; - -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { FirePageComponent } from './fire-page.component'; - -const routes: Routes = [ - { - canActivate: [AuthGuard], - component: FirePageComponent, - path: '', - title: 'FIRE' - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class FirePageRoutingModule {} diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts index 98a73637f..154c047bd 100644 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts +++ b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts @@ -3,18 +3,29 @@ import { ImpersonationStorageService } from '@ghostfolio/client/services/imperso import { UserService } from '@ghostfolio/client/services/user/user.service'; import { User } from '@ghostfolio/common/interfaces'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; +import { GfFireCalculatorComponent } from '@ghostfolio/ui/fire-calculator'; +import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; +import { GfValueComponent } from '@ghostfolio/ui/value'; +import { NgStyle } from '@angular/common'; import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; import { Big } from 'big.js'; import { DeviceDetectorService } from 'ngx-device-detector'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @Component({ + imports: [ + GfFireCalculatorComponent, + GfPremiumIndicatorComponent, + GfValueComponent, + NgStyle, + NgxSkeletonLoaderModule + ], selector: 'gf-fire-page', styleUrls: ['./fire-page.scss'], - templateUrl: './fire-page.html', - standalone: false + templateUrl: './fire-page.html' }) export class FirePageComponent implements OnDestroy, OnInit { public deviceType: string; diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.module.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.module.ts deleted file mode 100644 index a606ae1b4..000000000 --- a/apps/client/src/app/pages/portfolio/fire/fire-page.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { GfFireCalculatorComponent } from '@ghostfolio/ui/fire-calculator'; -import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; -import { GfValueComponent } from '@ghostfolio/ui/value'; - -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; - -import { FirePageRoutingModule } from './fire-page-routing.module'; -import { FirePageComponent } from './fire-page.component'; - -@NgModule({ - declarations: [FirePageComponent], - imports: [ - CommonModule, - FirePageRoutingModule, - GfFireCalculatorComponent, - GfPremiumIndicatorComponent, - GfValueComponent, - NgxSkeletonLoaderModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class FirePageModule {} diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.routes.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.routes.ts new file mode 100644 index 000000000..2cf8628cf --- /dev/null +++ b/apps/client/src/app/pages/portfolio/fire/fire-page.routes.ts @@ -0,0 +1,14 @@ +import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; + +import { Routes } from '@angular/router'; + +import { FirePageComponent } from './fire-page.component'; + +export const routes: Routes = [ + { + canActivate: [AuthGuard], + component: FirePageComponent, + path: '', + title: 'FIRE' + } +]; diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts index e8e072890..387e3fd0f 100644 --- a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts +++ b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts @@ -3,6 +3,8 @@ import { TabConfiguration, User } from '@ghostfolio/common/interfaces'; import { internalRoutes } from '@ghostfolio/common/routes/routes'; import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { MatTabsModule } from '@angular/material/tabs'; +import { RouterModule } from '@angular/router'; import { addIcons } from 'ionicons'; import { analyticsOutline, @@ -17,10 +19,10 @@ import { takeUntil } from 'rxjs/operators'; @Component({ host: { class: 'page has-tabs' }, + imports: [MatTabsModule, RouterModule], selector: 'gf-portfolio-page', styleUrls: ['./portfolio-page.scss'], - templateUrl: './portfolio-page.html', - standalone: false + templateUrl: './portfolio-page.html' }) export class PortfolioPageComponent implements OnDestroy, OnInit { public deviceType: string; diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.module.ts b/apps/client/src/app/pages/portfolio/portfolio-page.module.ts deleted file mode 100644 index 4a26c57b4..000000000 --- a/apps/client/src/app/pages/portfolio/portfolio-page.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { MatTabsModule } from '@angular/material/tabs'; -import { RouterModule } from '@angular/router'; -import { IonIcon } from '@ionic/angular/standalone'; - -import { PortfolioPageRoutingModule } from './portfolio-page-routing.module'; -import { PortfolioPageComponent } from './portfolio-page.component'; - -@NgModule({ - declarations: [PortfolioPageComponent], - imports: [ - CommonModule, - IonIcon, - MatTabsModule, - PortfolioPageRoutingModule, - RouterModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class PortfolioPageModule {} diff --git a/apps/client/src/app/pages/portfolio/portfolio-page-routing.module.ts b/apps/client/src/app/pages/portfolio/portfolio-page.routes.ts similarity index 53% rename from apps/client/src/app/pages/portfolio/portfolio-page-routing.module.ts rename to apps/client/src/app/pages/portfolio/portfolio-page.routes.ts index c2492a104..aeebf4a6b 100644 --- a/apps/client/src/app/pages/portfolio/portfolio-page-routing.module.ts +++ b/apps/client/src/app/pages/portfolio/portfolio-page.routes.ts @@ -1,45 +1,38 @@ 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 { Routes } from '@angular/router'; import { PortfolioPageComponent } from './portfolio-page.component'; -const routes: Routes = [ +export const routes: Routes = [ { canActivate: [AuthGuard], children: [ { path: '', loadChildren: () => - import('./analysis/analysis-page.module').then( - (m) => m.AnalysisPageModule - ) + import('./analysis/analysis-page.routes').then((m) => m.routes) }, { path: internalRoutes.portfolio.subRoutes.activities.path, loadChildren: () => - import('./activities/activities-page.module').then( - (m) => m.ActivitiesPageModule - ) + import('./activities/activities-page.routes').then((m) => m.routes) }, { path: internalRoutes.portfolio.subRoutes.allocations.path, loadChildren: () => - import('./allocations/allocations-page.module').then( - (m) => m.AllocationsPageModule - ) + import('./allocations/allocations-page.routes').then((m) => m.routes) }, { path: internalRoutes.portfolio.subRoutes.fire.path, loadChildren: () => - import('./fire/fire-page.module').then((m) => m.FirePageModule) + import('./fire/fire-page.routes').then((m) => m.routes) }, { path: internalRoutes.portfolio.subRoutes.xRay.path, loadChildren: () => - import('./x-ray/x-ray-page.module').then((m) => m.XRayPageModule) + import('./x-ray/x-ray-page.routes').then((m) => m.routes) } ], component: PortfolioPageComponent, @@ -47,9 +40,3 @@ const routes: Routes = [ title: internalRoutes.portfolio.title } ]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class PortfolioPageRoutingModule {} diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page-routing.module.ts b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page-routing.module.ts deleted file mode 100644 index 091cbc49f..000000000 --- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page-routing.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; - -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { XRayPageComponent } from './x-ray-page.component'; - -const routes: Routes = [ - { - canActivate: [AuthGuard], - component: XRayPageComponent, - path: '', - title: 'X-ray' - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class XRayPageRoutingModule {} diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts index 393bf0ed1..99c5d21c6 100644 --- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts +++ b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts @@ -1,4 +1,5 @@ import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto'; +import { GfRulesModule } from '@ghostfolio/client/components/rules/rules.module'; import { DataService } from '@ghostfolio/client/services/data.service'; import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; @@ -8,21 +9,31 @@ import { } from '@ghostfolio/common/interfaces'; import { User } from '@ghostfolio/common/interfaces/user.interface'; import { hasPermission, permissions } from '@ghostfolio/common/permissions'; +import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; +import { NgClass } from '@angular/common'; import { ChangeDetectorRef, Component } from '@angular/core'; +import { IonIcon } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; import { checkmarkCircleOutline, removeCircleOutline, warningOutline } from 'ionicons/icons'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { Subject, takeUntil } from 'rxjs'; @Component({ + imports: [ + GfPremiumIndicatorComponent, + GfRulesModule, + IonIcon, + NgClass, + NgxSkeletonLoaderModule + ], selector: 'gf-x-ray-page', styleUrl: './x-ray-page.component.scss', - templateUrl: './x-ray-page.component.html', - standalone: false + templateUrl: './x-ray-page.component.html' }) export class XRayPageComponent { public accountClusterRiskRules: PortfolioReportRule[]; diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.module.ts b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.module.ts deleted file mode 100644 index 5d16ca103..000000000 --- a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { GfRulesModule } from '@ghostfolio/client/components/rules/rules.module'; -import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; - -import { CommonModule } from '@angular/common'; -import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; -import { IonIcon } from '@ionic/angular/standalone'; -import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; - -import { XRayPageRoutingModule } from './x-ray-page-routing.module'; -import { XRayPageComponent } from './x-ray-page.component'; - -@NgModule({ - declarations: [XRayPageComponent], - imports: [ - CommonModule, - GfPremiumIndicatorComponent, - GfRulesModule, - IonIcon, - NgxSkeletonLoaderModule, - XRayPageRoutingModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA] -}) -export class XRayPageModule {} diff --git a/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.routes.ts b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.routes.ts new file mode 100644 index 000000000..664df261c --- /dev/null +++ b/apps/client/src/app/pages/portfolio/x-ray/x-ray-page.routes.ts @@ -0,0 +1,14 @@ +import { AuthGuard } from '@ghostfolio/client/core/auth.guard'; + +import { Routes } from '@angular/router'; + +import { XRayPageComponent } from './x-ray-page.component'; + +export const routes: Routes = [ + { + canActivate: [AuthGuard], + component: XRayPageComponent, + path: '', + title: 'X-ray' + } +];