diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a4c68ec7..d45b3a7c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Improved the usability of the account selectors in the transfer cash balance dialog - Improved the performance of the portfolio snapshot calculation by indexing the activities - Improved the language localization for Spanish (`es`) - Updated `angular-developer` skills diff --git a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts index 335ebd453..75f6f076a 100644 --- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts +++ b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.component.ts @@ -2,12 +2,17 @@ import { TransferBalanceDto } from '@ghostfolio/common/dtos'; import { AccountWithPlatform } from '@ghostfolio/common/types'; import { GfAccountSelectorComponent } from '@ghostfolio/ui/account-selector'; -import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + computed, + inject, + signal +} from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule, - ValidationErrors, Validators } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; @@ -48,28 +53,43 @@ export class GfTransferBalanceDialogComponent { protected readonly labelFrom = $localize`From`; protected readonly labelTo = $localize`To`; - protected readonly transferBalanceForm: TransferBalanceForm = new FormGroup( - { - balance: new FormControl('', Validators.required), - fromAccount: new FormControl('', Validators.required), - toAccount: new FormControl('', Validators.required) - }, - { - validators: this.compareAccounts - } - ); + protected readonly toAccounts = computed(() => { + const fromAccountId = this.fromAccountId(); + + return this.accounts.filter(({ id }) => { + return id !== fromAccountId; + }); + }); + + protected readonly transferBalanceForm: TransferBalanceForm = new FormGroup({ + balance: new FormControl('', Validators.required), + fromAccount: new FormControl(null, Validators.required), + toAccount: new FormControl(null, Validators.required) + }); private readonly dialogRef = inject>(MatDialogRef); + private readonly fromAccountId = signal(null); + public ngOnInit() { this.transferBalanceForm.controls.fromAccount.valueChanges.subscribe( (id) => { + this.fromAccountId.set(id); + const currency = this.getAccountById(id)?.currency; if (currency) { this.currency = currency; } + + const toAccountControl = this.transferBalanceForm.controls.toAccount; + + if (id && toAccountControl.value === id) { + toAccountControl.setValue(null); + toAccountControl.markAsPristine(); + toAccountControl.markAsUntouched(); + } } ); } @@ -88,19 +108,6 @@ export class GfTransferBalanceDialogComponent { this.dialogRef.close({ account }); } - private compareAccounts( - formGroup: TransferBalanceForm - ): ValidationErrors | null { - const accountFrom = formGroup.controls.fromAccount; - const accountTo = formGroup.controls.toAccount; - - if (accountFrom.value === accountTo.value) { - return { invalid: true }; - } - - return null; - } - private getAccountById(aId: string | null) { return this.accounts.find(({ id }) => { return id === aId; diff --git a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html index 0b0f88805..2e9f60523 100644 --- a/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html +++ b/apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html @@ -16,7 +16,7 @@