From a4efbc0131d839fb44e38126bdb98316315637de Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 26 Apr 2024 17:40:00 +0200
Subject: [PATCH] Feature/migrate UI components to control flow (#3324)
* Migrate to control flow
* Update changelog
---
CHANGELOG.md | 1 +
.../account-balances.component.ts | 2 -
.../assistant-list-item.component.ts | 3 +-
.../assistant-list-item.html | 10 +--
.../ui/src/lib/carousel/carousel.component.ts | 3 +-
.../currency-selector.component.ts | 2 -
.../no-transactions-info.component.ts | 3 +-
.../symbol-autocomplete.component.ts | 2 -
.../trend-indicator.component.html | 76 ++++++++-----------
9 files changed, 40 insertions(+), 62 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7bdafc2b3..8d614067d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
+- Migrated the `@ghostfolio/ui` components to control flow
- Upgraded `prisma` from version `5.12.1` to `5.13.0`
### Fixed
diff --git a/libs/ui/src/lib/account-balances/account-balances.component.ts b/libs/ui/src/lib/account-balances/account-balances.component.ts
index c4fd379c8..996b513e6 100644
--- a/libs/ui/src/lib/account-balances/account-balances.component.ts
+++ b/libs/ui/src/lib/account-balances/account-balances.component.ts
@@ -1,7 +1,6 @@
import { getLocale } from '@ghostfolio/common/helper';
import { AccountBalancesResponse } from '@ghostfolio/common/interfaces';
-import { CommonModule } from '@angular/common';
import {
CUSTOM_ELEMENTS_SCHEMA,
ChangeDetectionStrategy,
@@ -36,7 +35,6 @@ import { GfValueComponent } from '../value';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
- CommonModule,
GfValueComponent,
MatButtonModule,
MatDatepickerModule,
diff --git a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.component.ts b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.component.ts
index b909145c7..4b3908369 100644
--- a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.component.ts
+++ b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.component.ts
@@ -2,7 +2,6 @@ import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
import { ISearchResultItem } from '@ghostfolio/ui/assistant/interfaces/interfaces';
import { FocusableOption } from '@angular/cdk/a11y';
-import { CommonModule } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@@ -19,7 +18,7 @@ import { Params, RouterModule } from '@angular/router';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [CommonModule, GfSymbolModule, RouterModule],
+ imports: [GfSymbolModule, RouterModule],
selector: 'gf-assistant-list-item',
standalone: true,
styleUrls: ['./assistant-list-item.scss'],
diff --git a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html
index 53bf60680..46c8a4c24 100644
--- a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html
+++ b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html
@@ -9,9 +9,9 @@
>
{{ item?.symbol | gfSymbol }} · {{ item?.currency
- }}
- · {{ item?.assetSubClassString }}{{ item?.symbol | gfSymbol }} · {{ item?.currency }}
+ @if (item?.assetSubClassString) {
+ · {{ item.assetSubClassString }}
+ }
+
diff --git a/libs/ui/src/lib/carousel/carousel.component.ts b/libs/ui/src/lib/carousel/carousel.component.ts
index 33f68b249..7f93297dd 100644
--- a/libs/ui/src/lib/carousel/carousel.component.ts
+++ b/libs/ui/src/lib/carousel/carousel.component.ts
@@ -1,6 +1,5 @@
import { FocusKeyManager } from '@angular/cdk/a11y';
import { LEFT_ARROW, RIGHT_ARROW, TAB } from '@angular/cdk/keycodes';
-import { CommonModule } from '@angular/common';
import {
AfterContentInit,
CUSTOM_ELEMENTS_SCHEMA,
@@ -22,7 +21,7 @@ import { CarouselItem } from './carousel-item.directive';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [CommonModule, MatButtonModule],
+ imports: [MatButtonModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
selector: 'gf-carousel',
standalone: true,
diff --git a/libs/ui/src/lib/currency-selector/currency-selector.component.ts b/libs/ui/src/lib/currency-selector/currency-selector.component.ts
index a0ed3c88a..046af1cf8 100644
--- a/libs/ui/src/lib/currency-selector/currency-selector.component.ts
+++ b/libs/ui/src/lib/currency-selector/currency-selector.component.ts
@@ -2,7 +2,6 @@ import { Currency } from '@ghostfolio/common/interfaces';
import { AbstractMatFormField } from '@ghostfolio/ui/shared/abstract-mat-form-field';
import { FocusMonitor } from '@angular/cdk/a11y';
-import { CommonModule } from '@angular/common';
import {
CUSTOM_ELEMENTS_SCHEMA,
ChangeDetectionStrategy,
@@ -41,7 +40,6 @@ import { map, startWith, takeUntil } from 'rxjs/operators';
'[id]': 'id'
},
imports: [
- CommonModule,
FormsModule,
MatAutocompleteModule,
MatFormFieldModule,
diff --git a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts
index 0c30041b6..7fc8830a8 100644
--- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts
+++ b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
import {
CUSTOM_ELEMENTS_SCHEMA,
ChangeDetectionStrategy,
@@ -13,7 +12,7 @@ import { GfLogoComponent } from '../logo';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [CommonModule, GfLogoComponent, MatButtonModule, RouterModule],
+ imports: [GfLogoComponent, MatButtonModule, RouterModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
selector: 'gf-no-transactions-info-indicator',
standalone: true,
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
index 7da62d9df..8e07ed674 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.ts
@@ -5,7 +5,6 @@ import { translate } from '@ghostfolio/ui/i18n';
import { AbstractMatFormField } from '@ghostfolio/ui/shared/abstract-mat-form-field';
import { FocusMonitor } from '@angular/cdk/a11y';
-import { CommonModule } from '@angular/common';
import {
CUSTOM_ELEMENTS_SCHEMA,
ChangeDetectionStrategy,
@@ -53,7 +52,6 @@ import { GfPremiumIndicatorComponent } from '../premium-indicator';
'[id]': 'id'
},
imports: [
- CommonModule,
FormsModule,
GfPremiumIndicatorComponent,
GfSymbolModule,
diff --git a/libs/ui/src/lib/trend-indicator/trend-indicator.component.html b/libs/ui/src/lib/trend-indicator/trend-indicator.component.html
index 81ce57bfc..761b3f232 100644
--- a/libs/ui/src/lib/trend-indicator/trend-indicator.component.html
+++ b/libs/ui/src/lib/trend-indicator/trend-indicator.component.html
@@ -1,50 +1,36 @@
-
-
-
-
-
+} @else {
+ @if (marketState === 'closed' && range === '1d') {
+
+ } @else if (marketState === 'delayed' && range === '1d') {
+
+ } @else if (value <= -0.0005) {
+ -0.01 }"
+ [size]="size"
+ />
+ } @else if (value > -0.0005 && value < 0.0005) {
+ } @else {
+
-
-
-
- -0.01 }"
- [size]="size"
- />
- -0.0005 && value < 0.0005"
- class="text-muted"
- name="arrow-forward-circle-outline"
- [size]="size"
- />
- = 0.0005"
- class="text-success"
- name="arrow-up-circle-outline"
- [ngClass]="{ 'rotate-45-up': value < 0.01 }"
- [size]="size"
- />
-
-
-
+ }
+}