From fe6dcdf6828014809f8ae3ccaf40ad7f1016d2f2 Mon Sep 17 00:00:00 2001 From: Shaunak Das <51281688+shaun-ak@users.noreply.github.com> Date: Mon, 17 Feb 2025 23:52:02 +0530 Subject: [PATCH] feature/migrate to Angular control flow syntax (#4321) * Migrate to Angular control flow syntax * Update changelog --- CHANGELOG.md | 5 +++++ ...ghostfolio-premium-api-dialog.component.ts | 2 -- .../asset-profile-icon.component.ts | 2 -- .../rule-settings-dialog.component.ts | 9 +-------- .../alert-dialog/alert-dialog.component.ts | 3 +-- .../confirmation-dialog.component.ts | 3 +-- .../prompt-dialog/prompt-dialog.component.ts | 2 -- .../product-page.component.ts | 3 +-- .../benchmark-detail-dialog.component.ts | 2 -- .../data-provider-credits.component.html | 19 +++++++++++++------ .../data-provider-credits.component.ts | 2 -- ...cal-market-data-editor-dialog.component.ts | 2 -- .../tags-selector/tags-selector.component.ts | 2 -- .../trend-indicator.component.ts | 3 +-- 14 files changed, 23 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cfd358244..96c90f4e7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +### Changed + +- Migrated the `@ghostfolio/client` components to control flow +- Migrated the `@ghostfolio/ui` components to control flow + ### Fixed - Added missing assets in _Storybook_ setup diff --git a/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts index 8c2907064..e42e6259e 100644 --- a/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts +++ b/apps/client/src/app/components/admin-settings/ghostfolio-premium-api-dialog/ghostfolio-premium-api-dialog.component.ts @@ -3,7 +3,6 @@ import { DataService } from '@ghostfolio/client/services/data.service'; import { PROPERTY_API_KEY_GHOSTFOLIO } from '@ghostfolio/common/config'; import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator'; -import { CommonModule } from '@angular/common'; import { Component, Inject } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { @@ -18,7 +17,6 @@ import { GhostfolioPremiumApiDialogParams } from './interfaces/interfaces'; @Component({ imports: [ - CommonModule, GfDialogFooterModule, GfDialogHeaderModule, GfPremiumIndicatorComponent, diff --git a/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts b/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts index 5db862969..179193da0 100644 --- a/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts +++ b/apps/client/src/app/components/asset-profile-icon/asset-profile-icon.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, @@ -10,7 +9,6 @@ import { DataSource } from '@prisma/client'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, - imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], selector: 'gf-asset-profile-icon', styleUrls: ['./asset-profile-icon.component.scss'], diff --git a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts index 7ee9c66cf..b57bcb0fd 100644 --- a/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts +++ b/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts @@ -1,6 +1,5 @@ import { XRayRulesSettings } from '@ghostfolio/common/interfaces'; -import { CommonModule } from '@angular/common'; import { Component, Inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; @@ -14,13 +13,7 @@ import { MatSliderModule } from '@angular/material/slider'; import { IRuleSettingsDialogParams } from './interfaces/interfaces'; @Component({ - imports: [ - CommonModule, - FormsModule, - MatButtonModule, - MatDialogModule, - MatSliderModule - ], + imports: [FormsModule, MatButtonModule, MatDialogModule, MatSliderModule], selector: 'gf-rule-settings-dialog', styleUrls: ['./rule-settings-dialog.scss'], templateUrl: './rule-settings-dialog.html' diff --git a/apps/client/src/app/core/notification/alert-dialog/alert-dialog.component.ts b/apps/client/src/app/core/notification/alert-dialog/alert-dialog.component.ts index 8aefe84cf..98b6043eb 100644 --- a/apps/client/src/app/core/notification/alert-dialog/alert-dialog.component.ts +++ b/apps/client/src/app/core/notification/alert-dialog/alert-dialog.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; @@ -6,7 +5,7 @@ import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; import { IAlertDialogParams } from './interfaces/interfaces'; @Component({ - imports: [CommonModule, MatButtonModule, MatDialogModule], + imports: [MatButtonModule, MatDialogModule], selector: 'gf-alert-dialog', styleUrls: ['./alert-dialog.scss'], templateUrl: './alert-dialog.html' diff --git a/apps/client/src/app/core/notification/confirmation-dialog/confirmation-dialog.component.ts b/apps/client/src/app/core/notification/confirmation-dialog/confirmation-dialog.component.ts index 9aced99cc..88e5113d7 100644 --- a/apps/client/src/app/core/notification/confirmation-dialog/confirmation-dialog.component.ts +++ b/apps/client/src/app/core/notification/confirmation-dialog/confirmation-dialog.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { Component, HostListener } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; @@ -7,7 +6,7 @@ import { ConfirmationDialogType } from './confirmation-dialog.type'; import { IConfirmDialogParams } from './interfaces/interfaces'; @Component({ - imports: [CommonModule, MatButtonModule, MatDialogModule], + imports: [MatButtonModule, MatDialogModule], selector: 'gf-confirmation-dialog', styleUrls: ['./confirmation-dialog.scss'], templateUrl: './confirmation-dialog.html' diff --git a/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts b/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts index 4ec634da9..6c8af4197 100644 --- a/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts +++ b/apps/client/src/app/core/notification/prompt-dialog/prompt-dialog.component.ts @@ -1,4 +1,3 @@ -import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; @@ -8,7 +7,6 @@ import { MatInputModule } from '@angular/material/input'; @Component({ imports: [ - CommonModule, FormsModule, MatButtonModule, MatDialogModule, diff --git a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts index 3a0ec4ffb..6a8543e71 100644 --- a/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts +++ b/apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts @@ -3,14 +3,13 @@ import { Product } from '@ghostfolio/common/interfaces'; import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools'; import { translate } from '@ghostfolio/ui/i18n'; -import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { ActivatedRoute, RouterModule } from '@angular/router'; @Component({ host: { class: 'page' }, - imports: [CommonModule, MatButtonModule, RouterModule], + imports: [MatButtonModule, RouterModule], selector: 'gf-product-page', styleUrls: ['./product-page.scss'], templateUrl: './product-page.html' 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 38c6252a8..96dc6800e 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 @@ -8,7 +8,6 @@ import { } from '@ghostfolio/common/interfaces'; import { GfLineChartComponent } from '@ghostfolio/ui/line-chart'; -import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, @@ -33,7 +32,6 @@ import { BenchmarkDetailDialogParams } from './interfaces/interfaces'; changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'd-flex flex-column h-100' }, imports: [ - CommonModule, GfDialogFooterModule, GfDialogHeaderModule, GfLineChartComponent, diff --git a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html b/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html index fb9f2c13b..921433620 100644 --- a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html +++ b/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.html @@ -1,9 +1,16 @@ - Market data provided by {{ + Market data provided by  + @for ( + dataProviderInfo of dataProviderInfos; + track dataProviderInfo; + let last = $last + ) { + {{ dataProviderInfo.name - }}, . + }} + @if (!last) { + ,  + } + } + . diff --git a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts b/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts index 9be034e64..2d455c0d6 100644 --- a/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts +++ b/libs/ui/src/lib/data-provider-credits/data-provider-credits.component.ts @@ -1,6 +1,5 @@ import { DataProviderInfo } from '@ghostfolio/common/interfaces'; -import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, @@ -10,7 +9,6 @@ import { @Component({ changeDetection: ChangeDetectionStrategy.OnPush, - imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], selector: 'gf-data-provider-credits', styleUrls: ['./data-provider-credits.component.scss'], diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts index 710cb4020..73f382c5e 100644 --- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts +++ b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts @@ -1,7 +1,6 @@ import { AdminService } from '@ghostfolio/client/services/admin.service'; import { DataService } from '@ghostfolio/client/services/data.service'; -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, @@ -29,7 +28,6 @@ import { HistoricalMarketDataEditorDialogParams } from './interfaces/interfaces' changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'h-100' }, imports: [ - CommonModule, FormsModule, MatButtonModule, MatDatepickerModule, diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.ts index 02b3a0a95..3c15e510c 100644 --- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts +++ b/libs/ui/src/lib/tags-selector/tags-selector.component.ts @@ -1,5 +1,4 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes'; -import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -28,7 +27,6 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, imports: [ - CommonModule, FormsModule, MatAutocompleteModule, MatChipsModule, diff --git a/libs/ui/src/lib/trend-indicator/trend-indicator.component.ts b/libs/ui/src/lib/trend-indicator/trend-indicator.component.ts index e44c41aa9..efb48c981 100644 --- a/libs/ui/src/lib/trend-indicator/trend-indicator.component.ts +++ b/libs/ui/src/lib/trend-indicator/trend-indicator.component.ts @@ -1,6 +1,5 @@ import { DateRange, MarketState } from '@ghostfolio/common/types'; -import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, @@ -11,7 +10,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, - imports: [CommonModule, NgxSkeletonLoaderModule], + imports: [NgxSkeletonLoaderModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], selector: 'gf-trend-indicator', styleUrls: ['./trend-indicator.component.scss'],