diff --git a/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts b/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts index 35887abb4..b948708c2 100644 --- a/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts +++ b/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/create-asset-profile-dialog.component.ts @@ -3,6 +3,7 @@ import { ghostfolioPrefix, PROPERTY_CURRENCIES } from '@ghostfolio/common/config'; +import type { AssetProfileIdentifier } from '@ghostfolio/common/interfaces'; import { AdminService, DataService } from '@ghostfolio/ui/services'; import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete'; @@ -11,6 +12,7 @@ import { ChangeDetectorRef, Component, DestroyRef, + inject, OnInit } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @@ -18,7 +20,6 @@ import { AbstractControl, FormBuilder, FormControl, - FormGroup, FormsModule, ReactiveFormsModule, ValidationErrors, @@ -34,7 +35,10 @@ import { DataSource } from '@prisma/client'; import { isISO4217CurrencyCode } from 'class-validator'; import { switchMap } from 'rxjs'; -import { CreateAssetProfileDialogMode } from './interfaces/interfaces'; +import type { + CreateAssetProfileDialogMode, + CreateAssetProfileForm +} from './interfaces/interfaces'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, @@ -54,32 +58,44 @@ import { CreateAssetProfileDialogMode } from './interfaces/interfaces'; templateUrl: 'create-asset-profile-dialog.html' }) export class GfCreateAssetProfileDialogComponent implements OnInit { - public createAssetProfileForm: FormGroup; - public ghostfolioPrefix = `${ghostfolioPrefix}_`; - public mode: CreateAssetProfileDialogMode; + protected createAssetProfileForm: CreateAssetProfileForm; + protected readonly ghostfolioPrefix = `${ghostfolioPrefix}_`; + protected mode: CreateAssetProfileDialogMode; private customCurrencies: string[]; private dataSourceForExchangeRates: DataSource; - public constructor( - public readonly adminService: AdminService, - private readonly changeDetectorRef: ChangeDetectorRef, - private readonly dataService: DataService, - private readonly destroyRef: DestroyRef, - public readonly dialogRef: MatDialogRef, - public readonly formBuilder: FormBuilder - ) {} + private readonly adminService = inject(AdminService); + private readonly changeDetectorRef = inject(ChangeDetectorRef); + private readonly dataService = inject(DataService); + private readonly destroyRef = inject(DestroyRef); + private readonly dialogRef = + inject>(MatDialogRef); + private readonly formBuilder = inject(FormBuilder); + + protected get showCurrencyErrorMessage() { + const addCurrencyFormControl = + this.createAssetProfileForm.controls.addCurrency; + + if (addCurrencyFormControl.hasError('invalidCurrency')) { + return true; + } + + return false; + } public ngOnInit() { this.initialize(); this.createAssetProfileForm = this.formBuilder.group( { - addCurrency: new FormControl(null, [ + addCurrency: new FormControl(null, [ this.iso4217CurrencyCodeValidator() ]), - addSymbol: new FormControl(null, [Validators.required]), - searchSymbol: new FormControl(null, [Validators.required]) + addSymbol: new FormControl(null, [Validators.required]), + searchSymbol: new FormControl(null, [ + Validators.required + ]) }, { validators: this.atLeastOneValid @@ -104,12 +120,11 @@ export class GfCreateAssetProfileDialogComponent implements OnInit { this.dialogRef.close({ addAssetProfile: true, dataSource: - this.createAssetProfileForm.get('searchSymbol').value.dataSource, - symbol: this.createAssetProfileForm.get('searchSymbol').value.symbol + this.createAssetProfileForm.controls.searchSymbol.value?.dataSource, + symbol: this.createAssetProfileForm.controls.searchSymbol.value?.symbol }); } else if (this.mode === 'currency') { - const currency = this.createAssetProfileForm.get('addCurrency') - .value as string; + const currency = this.createAssetProfileForm.controls.addCurrency.value; const currencies = Array.from( new Set([...this.customCurrencies, currency]) @@ -139,26 +154,15 @@ export class GfCreateAssetProfileDialogComponent implements OnInit { this.dialogRef.close({ addAssetProfile: true, dataSource: 'MANUAL', - symbol: `${this.ghostfolioPrefix}${this.createAssetProfileForm.get('addSymbol').value}` + symbol: `${this.ghostfolioPrefix}${this.createAssetProfileForm.controls.addSymbol.value}` }); } } - public get showCurrencyErrorMessage() { - const addCurrencyFormControl = - this.createAssetProfileForm.get('addCurrency'); - - if (addCurrencyFormControl.hasError('invalidCurrency')) { - return true; - } - - return false; - } - - private atLeastOneValid(control: AbstractControl): ValidationErrors { - const addCurrencyControl = control.get('addCurrency'); - const addSymbolControl = control.get('addSymbol'); - const searchSymbolControl = control.get('searchSymbol'); + private atLeastOneValid(control: CreateAssetProfileForm): ValidationErrors { + const addCurrencyControl = control.controls.addCurrency; + const addSymbolControl = control.controls.addSymbol; + const searchSymbolControl = control.controls.searchSymbol; if ( addCurrencyControl.valid && @@ -170,11 +174,8 @@ export class GfCreateAssetProfileDialogComponent implements OnInit { if ( addCurrencyControl.valid || - !addCurrencyControl || addSymbolControl.valid || - !addSymbolControl || - searchSymbolControl.valid || - !searchSymbolControl + searchSymbolControl.valid ) { return { atLeastOneValid: false }; } @@ -189,11 +190,14 @@ export class GfCreateAssetProfileDialogComponent implements OnInit { .subscribe(({ dataProviders, settings }) => { this.customCurrencies = settings[PROPERTY_CURRENCIES] as string[]; - const { dataSource } = dataProviders.find(({ useForExchangeRates }) => { - return useForExchangeRates; - }); + const { dataSource } = + dataProviders.find(({ useForExchangeRates }) => { + return useForExchangeRates; + }) ?? {}; - this.dataSourceForExchangeRates = dataSource; + if (dataSource) { + this.dataSourceForExchangeRates = dataSource; + } this.changeDetectorRef.markForCheck(); }); diff --git a/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/interfaces/interfaces.ts b/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/interfaces/interfaces.ts index 4cf24b554..4bc079115 100644 --- a/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/interfaces/interfaces.ts +++ b/apps/client/src/app/components/admin-market-data/create-asset-profile-dialog/interfaces/interfaces.ts @@ -1,6 +1,16 @@ +import type { AssetProfileIdentifier } from '@ghostfolio/common/interfaces'; + +import type { FormControl, FormGroup } from '@angular/forms'; + export interface CreateAssetProfileDialogParams { deviceType: string; locale: string; } export type CreateAssetProfileDialogMode = 'auto' | 'currency' | 'manual'; + +export type CreateAssetProfileForm = FormGroup<{ + addCurrency: FormControl; + addSymbol: FormControl; + searchSymbol: FormControl; +}>;