From 60ef46accf1d400ac5f64a62e0a69c094364aa14 Mon Sep 17 00:00:00 2001 From: Eduardo Marinho <87383586+SirZemar@users.noreply.github.com> Date: Sat, 1 Jun 2024 09:53:02 +0100 Subject: [PATCH] Bugfix/fix state handling of currency selector component (#2795) (#3429) * Fix state handling of currency selector component * Update changelog --- CHANGELOG.md | 1 + .../asset-profile-dialog.component.ts | 15 ++----- ...eate-or-update-account-dialog.component.ts | 10 ++--- .../src/lib/interfaces/currency.interface.ts | 4 -- libs/common/src/lib/interfaces/index.ts | 2 - .../currency-selector.component.html | 7 ++- .../currency-selector.component.ts | 43 ++++++------------- 7 files changed, 25 insertions(+), 57 deletions(-) delete mode 100644 libs/common/src/lib/interfaces/currency.interface.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ad4dd2fc..855ecaa05 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Fixed an issue with the initial annual interest rate in the _FIRE_ calculator +- Fixed the state handling in the currency selector ## 2.83.0 - 2024-05-30 diff --git a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts index 5016a4205..bf8de8ca9 100644 --- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts +++ b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts @@ -8,7 +8,6 @@ import { ghostfolioScraperApiSymbolPrefix } from '@ghostfolio/common/config'; import { DATE_FORMAT } from '@ghostfolio/common/helper'; import { AdminMarketDataDetails, - Currency, UniqueAsset } from '@ghostfolio/common/interfaces'; import { translate } from '@ghostfolio/ui/i18n'; @@ -73,7 +72,7 @@ export class AssetProfileDialog implements OnDestroy, OnInit { public countries: { [code: string]: { name: string; value: number }; }; - public currencies: Currency[] = []; + public currencies: string[] = []; public ghostfolioScraperApiSymbolPrefix = ghostfolioScraperApiSymbolPrefix; public isBenchmark = false; public marketDataDetails: MarketData[] = []; @@ -102,10 +101,7 @@ export class AssetProfileDialog implements OnDestroy, OnInit { const { benchmarks, currencies } = this.dataService.fetchInfo(); this.benchmarks = benchmarks; - this.currencies = currencies.map((currency) => ({ - label: currency, - value: currency - })); + this.currencies = currencies; this.initialize(); } @@ -293,9 +289,7 @@ export class AssetProfileDialog implements OnDestroy, OnInit { assetClass: this.assetProfileForm.get('assetClass').value, assetSubClass: this.assetProfileForm.get('assetSubClass').value, comment: this.assetProfileForm.get('comment').value || null, - currency: (( - (this.assetProfileForm.get('currency').value) - ))?.value, + currency: this.assetProfileForm.get('currency').value, name: this.assetProfileForm.get('name').value, url: this.assetProfileForm.get('url').value || null }; @@ -343,8 +337,7 @@ export class AssetProfileDialog implements OnDestroy, OnInit { ' ' + price + ' ' + - ((this.assetProfileForm.get('currency').value)) - ?.value + this.assetProfileForm.get('currency').value ); }); } diff --git a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts index 91e0769fc..da2ea725a 100644 --- a/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts +++ b/apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts @@ -2,7 +2,6 @@ import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto'; import { DataService } from '@ghostfolio/client/services/data.service'; import { validateObjectForForm } from '@ghostfolio/client/util/form.util'; -import { Currency } from '@ghostfolio/common/interfaces'; import { ChangeDetectionStrategy, @@ -33,7 +32,7 @@ import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces'; }) export class CreateOrUpdateAccountDialog implements OnDestroy { public accountForm: FormGroup; - public currencies: Currency[] = []; + public currencies: string[] = []; public filteredPlatforms: Observable; public platforms: Platform[]; @@ -49,10 +48,7 @@ export class CreateOrUpdateAccountDialog implements OnDestroy { public ngOnInit() { const { currencies, platforms } = this.dataService.fetchInfo(); - this.currencies = currencies.map((currency) => ({ - label: currency, - value: currency - })); + this.currencies = currencies; this.platforms = platforms; this.accountForm = this.formBuilder.group({ @@ -107,7 +103,7 @@ export class CreateOrUpdateAccountDialog implements OnDestroy { const account: CreateAccountDto | UpdateAccountDto = { balance: this.accountForm.get('balance').value, comment: this.accountForm.get('comment').value || null, - currency: this.accountForm.get('currency').value?.value, + currency: this.accountForm.get('currency').value, id: this.accountForm.get('accountId').value, isExcluded: this.accountForm.get('isExcluded').value, name: this.accountForm.get('name').value, diff --git a/libs/common/src/lib/interfaces/currency.interface.ts b/libs/common/src/lib/interfaces/currency.interface.ts deleted file mode 100644 index 619144c0f..000000000 --- a/libs/common/src/lib/interfaces/currency.interface.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface Currency { - label: string; - value: string; -} diff --git a/libs/common/src/lib/interfaces/index.ts b/libs/common/src/lib/interfaces/index.ts index c2c9ce619..1f6bf99eb 100644 --- a/libs/common/src/lib/interfaces/index.ts +++ b/libs/common/src/lib/interfaces/index.ts @@ -11,7 +11,6 @@ import type { BenchmarkMarketDataDetails } from './benchmark-market-data-details import type { BenchmarkProperty } from './benchmark-property.interface'; import type { Benchmark } from './benchmark.interface'; import type { Coupon } from './coupon.interface'; -import type { Currency } from './currency.interface'; import type { DataProviderInfo } from './data-provider-info.interface'; import type { EnhancedSymbolProfile } from './enhanced-symbol-profile.interface'; import type { Export } from './export.interface'; @@ -66,7 +65,6 @@ export { BenchmarkProperty, BenchmarkResponse, Coupon, - Currency, DataProviderInfo, EnhancedSymbolProfile, Export, diff --git a/libs/ui/src/lib/currency-selector/currency-selector.component.html b/libs/ui/src/lib/currency-selector/currency-selector.component.html index 76fe8fef0..e07101f9a 100644 --- a/libs/ui/src/lib/currency-selector/currency-selector.component.html +++ b/libs/ui/src/lib/currency-selector/currency-selector.component.html @@ -8,12 +8,11 @@ - @for (currencyItem of filteredCurrencies; track currencyItem) { - - {{ currencyItem.label }} + @for (currency of filteredCurrencies; track currency) { + + {{ currency }} } 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 046af1cf8..c01df950f 100644 --- a/libs/ui/src/lib/currency-selector/currency-selector.component.ts +++ b/libs/ui/src/lib/currency-selector/currency-selector.component.ts @@ -1,4 +1,3 @@ -import { Currency } from '@ghostfolio/common/interfaces'; import { AbstractMatFormField } from '@ghostfolio/ui/shared/abstract-mat-form-field'; import { FocusMonitor } from '@angular/cdk/a11y'; @@ -59,10 +58,10 @@ import { map, startWith, takeUntil } from 'rxjs/operators'; templateUrl: 'currency-selector.component.html' }) export class GfCurrencySelectorComponent - extends AbstractMatFormField + extends AbstractMatFormField implements OnInit, OnDestroy { - @Input() private currencies: Currency[] = []; + @Input() private currencies: string[] = []; @Input() private formControlName: string; @ViewChild(MatInput) private input: MatInput; @@ -71,7 +70,7 @@ export class GfCurrencySelectorComponent public currencyAutocomplete: MatAutocomplete; public control = new FormControl(); - public filteredCurrencies: Currency[] = []; + public filteredCurrencies: string[] = []; private unsubscribeSubject = new Subject(); @@ -98,7 +97,7 @@ export class GfCurrencySelectorComponent const control = formGroup.get(this.formControlName); if (control) { - this.value = this.currencies.find(({ value }) => { + this.value = this.currencies.find((value) => { return value === control.value; }); } @@ -107,8 +106,8 @@ export class GfCurrencySelectorComponent this.control.valueChanges .pipe(takeUntil(this.unsubscribeSubject)) .subscribe(() => { - if (super.value?.value) { - super.value.value = null; + if (super.value) { + super.value = null; } }); @@ -125,10 +124,6 @@ export class GfCurrencySelectorComponent }); } - public displayFn(currency: Currency) { - return currency?.label ?? ''; - } - public get empty() { return this.input?.empty; } @@ -146,17 +141,12 @@ export class GfCurrencySelectorComponent } public onUpdateCurrency(event: MatAutocompleteSelectedEvent) { - super.value = { - label: event.option.value.label, - value: event.option.value.value - } as Currency; + super.value = event.option.value; } - public set value(value: Currency) { - const newValue = - typeof value === 'object' && value !== null ? { ...value } : value; - this.control.setValue(newValue); - super.value = newValue; + public set value(value: string) { + this.control.setValue(value); + super.value = value; } public ngOnDestroy() { @@ -166,21 +156,16 @@ export class GfCurrencySelectorComponent this.unsubscribeSubject.complete(); } - private filter(value: Currency | string) { - const filterValue = - typeof value === 'string' - ? value?.toLowerCase() - : value?.value.toLowerCase(); + private filter(value: string) { + const filterValue = value?.toLowerCase(); return this.currencies.filter((currency) => { - return currency.value.toLowerCase().startsWith(filterValue); + return currency.toLowerCase().startsWith(filterValue); }); } private validateRequired() { - const requiredCheck = super.required - ? !super.value?.label || !super.value?.value - : false; + const requiredCheck = super.required ? !super.value : false; if (requiredCheck) { this.ngControl.control.setErrors({ invalidData: true });