Feature/migrate home page components to standalone (#5206)

* Migrate home page components to standalone

* Update changelog

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the platform icon in the create or update platform dialog of the admin control
 - Localized the durations of the coupon system
 - Refactored the Frequently Asked Questions (FAQ) pages to standalone
+- Refactored the home pages to standalone
 - Refactored the resources pages to standalone
 - Refactored the accounts table component to standalone
 - Improved the language localization for Catalan (`ca`)

apps/client/src/app/app-routing.module.ts

@@ -75,7 +75,7 @@ const routes: Routes = [
   {
     path: internalRoutes.home.path,
     loadChildren: () =>
-      import('./pages/home/home-page.module').then((m) => m.HomePageModule)
+      import('./pages/home/home-page.routes').then((m) => m.routes)
   },
   {
     canActivate: [AuthGuard],

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -1,3 +1,4 @@
+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';
@@ -10,10 +11,22 @@ import {
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 import { HoldingType, HoldingsViewMode } from '@ghostfolio/common/types';
+import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
+import { GfTreemapChartComponent } from '@ghostfolio/ui/treemap-chart';
 
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
-import { Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { Router, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { gridOutline, reorderFourOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -21,12 +34,24 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  imports: [
+    CommonModule,
+    FormsModule,
+    GfHoldingsTableComponent,
+    GfToggleModule,
+    GfTreemapChartComponent,
+    IonIcon,
+    MatButtonModule,
+    MatButtonToggleModule,
+    ReactiveFormsModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-home-holdings',
   styleUrls: ['./home-holdings.scss'],
-  templateUrl: './home-holdings.html',
-  standalone: false
+  templateUrl: './home-holdings.html'
 })
-export class HomeHoldingsComponent implements OnDestroy, OnInit {
+export class GfHomeHoldingsComponent implements OnDestroy, OnInit {
   public static DEFAULT_HOLDINGS_VIEW_MODE: HoldingsViewMode = 'TABLE';
 
   public deviceType: string;
@@ -43,7 +68,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
     internalRoutes.portfolio.subRoutes.activities.routerLink;
   public user: User;
   public viewModeFormControl = new FormControl<HoldingsViewMode>(
-    HomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE
+    GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE
   );
 
   private unsubscribeSubject = new Subject<void>();
@@ -153,14 +178,14 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
 
       this.viewModeFormControl.setValue(
         this.deviceType === 'mobile'
-          ? HomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE
+          ? GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE
           : this.user?.settings?.holdingsViewMode ||
-              HomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE,
+              GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE,
         { emitEvent: false }
       );
     } else if (this.holdingType === 'CLOSED') {
       this.viewModeFormControl.setValue(
-        HomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE,
+        GfHomeHoldingsComponent.DEFAULT_HOLDINGS_VIEW_MODE,
         { emitEvent: false }
       );
     }

apps/client/src/app/components/home-holdings/home-holdings.module.ts

@@ -1,31 +0,0 @@
-import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
-import { GfHoldingsTableComponent } from '@ghostfolio/ui/holdings-table';
-import { GfTreemapChartComponent } from '@ghostfolio/ui/treemap-chart';
-
-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 { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { HomeHoldingsComponent } from './home-holdings.component';
-
-@NgModule({
-  declarations: [HomeHoldingsComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    GfHoldingsTableComponent,
-    GfToggleModule,
-    GfTreemapChartComponent,
-    IonIcon,
-    MatButtonModule,
-    MatButtonToggleModule,
-    ReactiveFormsModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfHomeHoldingsModule {}

apps/client/src/app/components/home-market/home-market.component.ts

@@ -1,3 +1,4 @@
+import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { ghostfolioFearAndGreedIndexSymbol } from '@ghostfolio/common/config';
@@ -9,17 +10,30 @@ import {
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
+import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  imports: [
+    GfBenchmarkComponent,
+    GfFearAndGreedIndexModule,
+    GfLineChartComponent
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-home-market',
   styleUrls: ['./home-market.scss'],
-  templateUrl: './home-market.html',
-  standalone: false
+  templateUrl: './home-market.html'
 })
 export class HomeMarketComponent implements OnDestroy, OnInit {
   public benchmarks: Benchmark[];

apps/client/src/app/components/home-market/home-market.module.ts

@@ -1,21 +0,0 @@
-import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module';
-import { GfBenchmarkComponent } from '@ghostfolio/ui/benchmark';
-import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-
-import { HomeMarketComponent } from './home-market.component';
-
-@NgModule({
-  declarations: [HomeMarketComponent],
-  exports: [HomeMarketComponent],
-  imports: [
-    CommonModule,
-    GfBenchmarkComponent,
-    GfFearAndGreedIndexModule,
-    GfLineChartComponent
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfHomeMarketModule {}

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -1,3 +1,4 @@
+import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
 import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { LayoutService } from '@ghostfolio/client/core/layout.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -12,19 +13,36 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
+import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
 
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  imports: [
+    CommonModule,
+    GfLineChartComponent,
+    GfPortfolioPerformanceModule,
+    MatButtonModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-home-overview',
   styleUrls: ['./home-overview.scss'],
-  templateUrl: './home-overview.html',
-  standalone: false
+  templateUrl: './home-overview.html'
 })
-export class HomeOverviewComponent implements OnDestroy, OnInit {
+export class GfHomeOverviewComponent implements OnDestroy, OnInit {
   public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public deviceType: string;
   public errors: AssetProfileIdentifier[];

apps/client/src/app/components/home-overview/home-overview.module.ts

@@ -1,24 +0,0 @@
-import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
-import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
-import { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
-
-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 { HomeOverviewComponent } from './home-overview.component';
-
-@NgModule({
-  declarations: [HomeOverviewComponent],
-  imports: [
-    CommonModule,
-    GfLineChartComponent,
-    GfNoTransactionsInfoComponent,
-    GfPortfolioPerformanceModule,
-    MatButtonModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfHomeOverviewModule {}

apps/client/src/app/components/home-summary/home-summary.component.ts

@@ -1,3 +1,4 @@
+import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.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,18 +9,26 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
 import { MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  imports: [GfPortfolioSummaryModule, MatCardModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-home-summary',
   styleUrls: ['./home-summary.scss'],
-  templateUrl: './home-summary.html',
-  standalone: false
+  templateUrl: './home-summary.html'
 })
-export class HomeSummaryComponent implements OnDestroy, OnInit {
+export class GfHomeSummaryComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToUpdateUserSettings: boolean;

apps/client/src/app/components/home-summary/home-summary.module.ts

@@ -1,14 +0,0 @@
-import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
-
-import { HomeSummaryComponent } from './home-summary.component';
-
-@NgModule({
-  declarations: [HomeSummaryComponent],
-  imports: [CommonModule, GfPortfolioSummaryModule, MatCardModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfHomeSummaryModule {}

apps/client/src/app/pages/home/home-page.component.ts

@@ -4,7 +4,16 @@ import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import {
   analyticsOutline,
@@ -19,12 +28,13 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
   host: { class: 'page has-tabs' },
+  imports: [IonIcon, MatTabsModule, RouterModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-home-page',
   styleUrls: ['./home-page.scss'],
-  templateUrl: './home-page.html',
-  standalone: false
+  templateUrl: './home-page.html'
 })
-export class HomePageComponent implements OnDestroy, OnInit {
+export class GfHomePageComponent implements OnDestroy, OnInit {
   public deviceType: string;
   public hasImpersonationId: boolean;
   public tabs: TabConfiguration[] = [];

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

@@ -1,32 +0,0 @@
-import { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.module';
-import { GfHomeMarketModule } from '@ghostfolio/client/components/home-market/home-market.module';
-import { GfHomeOverviewModule } from '@ghostfolio/client/components/home-overview/home-overview.module';
-import { GfHomeSummaryModule } from '@ghostfolio/client/components/home-summary/home-summary.module';
-import { HomeWatchlistComponent } from '@ghostfolio/client/components/home-watchlist/home-watchlist.component';
-
-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 { HomePageRoutingModule } from './home-page-routing.module';
-import { HomePageComponent } from './home-page.component';
-
-@NgModule({
-  declarations: [HomePageComponent],
-  imports: [
-    CommonModule,
-    GfHomeHoldingsModule,
-    GfHomeMarketModule,
-    GfHomeOverviewModule,
-    GfHomeSummaryModule,
-    IonIcon,
-    HomePageRoutingModule,
-    HomeWatchlistComponent,
-    MatTabsModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class HomePageModule {}

apps/client/src/app/pages/home/home-page-routing.module.ts → apps/client/src/app/pages/home/home-page.routes.ts

@@ -1,33 +1,32 @@
-import { HomeHoldingsComponent } from '@ghostfolio/client/components/home-holdings/home-holdings.component';
+import { GfHomeHoldingsComponent } from '@ghostfolio/client/components/home-holdings/home-holdings.component';
 import { HomeMarketComponent } from '@ghostfolio/client/components/home-market/home-market.component';
-import { HomeOverviewComponent } from '@ghostfolio/client/components/home-overview/home-overview.component';
-import { HomeSummaryComponent } from '@ghostfolio/client/components/home-summary/home-summary.component';
+import { GfHomeOverviewComponent } from '@ghostfolio/client/components/home-overview/home-overview.component';
+import { GfHomeSummaryComponent } from '@ghostfolio/client/components/home-summary/home-summary.component';
 import { HomeWatchlistComponent } from '@ghostfolio/client/components/home-watchlist/home-watchlist.component';
 import { MarketsComponent } from '@ghostfolio/client/components/markets/markets.component';
 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 { HomePageComponent } from './home-page.component';
+import { GfHomePageComponent } from './home-page.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     canActivate: [AuthGuard],
     children: [
       {
         path: '',
-        component: HomeOverviewComponent
+        component: GfHomeOverviewComponent
       },
       {
         path: internalRoutes.home.subRoutes.holdings.path,
-        component: HomeHoldingsComponent,
+        component: GfHomeHoldingsComponent,
         title: internalRoutes.home.subRoutes.holdings.title
       },
       {
         path: internalRoutes.home.subRoutes.summary.path,
-        component: HomeSummaryComponent,
+        component: GfHomeSummaryComponent,
         title: internalRoutes.home.subRoutes.summary.title
       },
       {
@@ -46,14 +45,8 @@ const routes: Routes = [
         title: internalRoutes.home.subRoutes.watchlist.title
       }
     ],
-    component: HomePageComponent,
+    component: GfHomePageComponent,
     path: '',
     title: internalRoutes.home.title
   }
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class HomePageRoutingModule {}

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

@@ -1,4 +1,4 @@
-import { GfHomeMarketModule } from '@ghostfolio/client/components/home-market/home-market.module';
+import { HomeMarketComponent } from '@ghostfolio/client/components/home-market/home-market.component';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -8,7 +8,7 @@ import { MarketsPageComponent } from './markets-page.component';
 
 @NgModule({
   declarations: [MarketsPageComponent],
-  imports: [CommonModule, GfHomeMarketModule, MarketsPageRoutingModule],
+  imports: [CommonModule, HomeMarketComponent, MarketsPageRoutingModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class MarketsPageModule {}

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

@@ -1,5 +1,5 @@
-import { HomeHoldingsComponent } from '@ghostfolio/client/components/home-holdings/home-holdings.component';
-import { HomeOverviewComponent } from '@ghostfolio/client/components/home-overview/home-overview.component';
+import { GfHomeHoldingsComponent } from '@ghostfolio/client/components/home-holdings/home-holdings.component';
+import { GfHomeOverviewComponent } from '@ghostfolio/client/components/home-overview/home-overview.component';
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
@@ -14,11 +14,11 @@ const routes: Routes = [
     children: [
       {
         path: '',
-        component: HomeOverviewComponent
+        component: GfHomeOverviewComponent
       },
       {
         path: internalRoutes.zen.subRoutes.holdings.path,
-        component: HomeHoldingsComponent,
+        component: GfHomeHoldingsComponent,
         title: internalRoutes.home.subRoutes.holdings.title
       }
     ],

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

@@ -1,5 +1,5 @@
-import { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.module';
-import { GfHomeOverviewModule } from '@ghostfolio/client/components/home-overview/home-overview.module';
+import { GfHomeHoldingsComponent } from '@ghostfolio/client/components/home-holdings/home-holdings.component';
+import { GfHomeOverviewComponent } from '@ghostfolio/client/components/home-overview/home-overview.component';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@@ -14,8 +14,8 @@ import { ZenPageComponent } from './zen-page.component';
   declarations: [ZenPageComponent],
   imports: [
     CommonModule,
-    GfHomeHoldingsModule,
-    GfHomeOverviewModule,
+    GfHomeHoldingsComponent,
+    GfHomeOverviewComponent,
     IonIcon,
     MatTabsModule,
     RouterModule,