From f7efc54666ceb133dcaf868cace79e18dc99cd38 Mon Sep 17 00:00:00 2001 From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com> Date: Thu, 24 Jul 2025 00:51:17 +0700 Subject: [PATCH] Feature/migrate toggle component to standalone (#5237) * Migrate toggle component to standalone * Update changelog --- CHANGELOG.md | 6 ++++++ .../home-holdings/home-holdings.component.ts | 4 ++-- .../home-overview/home-overview.component.ts | 4 ++-- .../src/app/components/markets/markets.component.ts | 4 ++-- .../src/app/components/toggle/toggle.component.ts | 12 +++++++----- .../src/app/components/toggle/toggle.module.ts | 13 ------------- .../portfolio/analysis/analysis-page.component.ts | 7 +++---- 7 files changed, 22 insertions(+), 28 deletions(-) delete mode 100644 apps/client/src/app/components/toggle/toggle.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 6dac26d56..ccbf97201 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## Unreleased + +### Changed + +- Refactored the toggle component to standalone + ## 2.184.0 - 2025-07-22 ### Added diff --git a/apps/client/src/app/components/home-holdings/home-holdings.component.ts b/apps/client/src/app/components/home-holdings/home-holdings.component.ts index 54202feba..4388c0c72 100644 --- a/apps/client/src/app/components/home-holdings/home-holdings.component.ts +++ b/apps/client/src/app/components/home-holdings/home-holdings.component.ts @@ -1,4 +1,4 @@ -import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module'; +import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component'; 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'; @@ -38,7 +38,7 @@ import { takeUntil } from 'rxjs/operators'; CommonModule, FormsModule, GfHoldingsTableComponent, - GfToggleModule, + GfToggleComponent, GfTreemapChartComponent, IonIcon, MatButtonModule, diff --git a/apps/client/src/app/components/home-overview/home-overview.component.ts b/apps/client/src/app/components/home-overview/home-overview.component.ts index cda7d9e1d..abf7017a6 100644 --- a/apps/client/src/app/components/home-overview/home-overview.component.ts +++ b/apps/client/src/app/components/home-overview/home-overview.component.ts @@ -1,5 +1,5 @@ import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module'; -import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component'; +import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component'; import { LayoutService } from '@ghostfolio/client/core/layout.service'; import { DataService } from '@ghostfolio/client/services/data.service'; import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service'; @@ -43,7 +43,7 @@ import { takeUntil } from 'rxjs/operators'; templateUrl: './home-overview.html' }) export class GfHomeOverviewComponent implements OnDestroy, OnInit { - public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS; + public dateRangeOptions = GfToggleComponent.DEFAULT_DATE_RANGE_OPTIONS; public deviceType: string; public errors: AssetProfileIdentifier[]; public hasError: boolean; diff --git a/apps/client/src/app/components/markets/markets.component.ts b/apps/client/src/app/components/markets/markets.component.ts index 2dc1eb3d3..df0de7c94 100644 --- a/apps/client/src/app/components/markets/markets.component.ts +++ b/apps/client/src/app/components/markets/markets.component.ts @@ -1,5 +1,5 @@ import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module'; -import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module'; +import { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component'; import { DataService } from '@ghostfolio/client/services/data.service'; import { UserService } from '@ghostfolio/client/services/user/user.service'; import { resetHours } from '@ghostfolio/common/helper'; @@ -34,7 +34,7 @@ import { takeUntil } from 'rxjs/operators'; GfBenchmarkComponent, GfFearAndGreedIndexModule, GfLineChartComponent, - GfToggleModule + GfToggleComponent ], schemas: [CUSTOM_ELEMENTS_SCHEMA], selector: 'gf-markets', diff --git a/apps/client/src/app/components/toggle/toggle.component.ts b/apps/client/src/app/components/toggle/toggle.component.ts index d5f451aaa..8f1a13df3 100644 --- a/apps/client/src/app/components/toggle/toggle.component.ts +++ b/apps/client/src/app/components/toggle/toggle.component.ts @@ -1,5 +1,6 @@ import { ToggleOption } from '@ghostfolio/common/interfaces'; +import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -8,16 +9,17 @@ import { OnChanges, Output } from '@angular/core'; -import { FormControl } from '@angular/forms'; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { MatRadioModule } from '@angular/material/radio'; @Component({ - selector: 'gf-toggle', changeDetection: ChangeDetectionStrategy.OnPush, - templateUrl: './toggle.component.html', + imports: [CommonModule, MatRadioModule, ReactiveFormsModule], + selector: 'gf-toggle', styleUrls: ['./toggle.component.scss'], - standalone: false + templateUrl: './toggle.component.html' }) -export class ToggleComponent implements OnChanges { +export class GfToggleComponent implements OnChanges { public static DEFAULT_DATE_RANGE_OPTIONS: ToggleOption[] = [ { label: $localize`Today`, value: '1d' }, { label: $localize`YTD`, value: 'ytd' }, diff --git a/apps/client/src/app/components/toggle/toggle.module.ts b/apps/client/src/app/components/toggle/toggle.module.ts deleted file mode 100644 index d27ff4a16..000000000 --- a/apps/client/src/app/components/toggle/toggle.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { ReactiveFormsModule } from '@angular/forms'; -import { MatRadioModule } from '@angular/material/radio'; - -import { ToggleComponent } from './toggle.component'; - -@NgModule({ - declarations: [ToggleComponent], - exports: [ToggleComponent], - imports: [CommonModule, MatRadioModule, ReactiveFormsModule] -}) -export class GfToggleModule {} 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 ce571ac91..b56a1fe5a 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,7 +1,6 @@ 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 { GfToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component'; 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'; @@ -49,7 +48,7 @@ import { takeUntil } from 'rxjs/operators'; GfBenchmarkComparatorModule, GfInvestmentChartModule, GfPremiumIndicatorComponent, - GfToggleModule, + GfToggleComponent, GfValueComponent, IonIcon, MatButtonModule, @@ -69,7 +68,7 @@ export class GfAnalysisPageComponent implements OnDestroy, OnInit { public benchmarkDataItems: HistoricalDataItem[] = []; public benchmarks: Partial[]; public bottom3: PortfolioPosition[]; - public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS; + public dateRangeOptions = GfToggleComponent.DEFAULT_DATE_RANGE_OPTIONS; public deviceType: string; public dividendsByGroup: InvestmentItem[]; public dividendTimelineDataLabel = $localize`Dividend`;