feat(client): refactor home page components

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,10 +34,22 @@ 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 {
   public static DEFAULT_HOLDINGS_VIEW_MODE: HoldingsViewMode = 'TABLE';

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,32 @@ 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 { CommonModule } from '@angular/common';
+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: [
+    CommonModule,
+    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,17 +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 { GfNoTransactionsInfoComponent } from '@ghostfolio/ui/no-transactions-info';
 
-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,
+    GfNoTransactionsInfoComponent,
+    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 {
   public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;

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,16 +9,25 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
-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 { MatCardModule } from '@angular/material/card';
 import { MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
+  imports: [CommonModule, 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 {
   public hasImpersonationId: 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,10 +28,11 @@ 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 {
   public deviceType: string;

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

@@ -7,12 +7,11 @@ import { MarketsComponent } from '@ghostfolio/client/components/markets/markets.
 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';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     canActivate: [AuthGuard],
     children: [
@@ -51,9 +50,3 @@ const routes: Routes = [
     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.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 { HomeHoldingsComponent } from '@ghostfolio/client/components/home-holdings/home-holdings.component';
+import { HomeOverviewComponent } 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,
+    HomeHoldingsComponent,
+    HomeOverviewComponent,
     IonIcon,
     MatTabsModule,
     RouterModule,