Task/improve usability of account selectors in transfer cash balance dialog (#7662)

* Improve usability

* Update changelog

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

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(
+  protected readonly toAccounts = computed(() => {
-    {
+    const fromAccountId = this.fromAccountId();
-      balance: new FormControl<number | string | null>('', Validators.required),
+
-      fromAccount: new FormControl<string | null>('', Validators.required),
+    return this.accounts.filter(({ id }) => {
-      toAccount: new FormControl<string | null>('', Validators.required)
+      return id !== fromAccountId;
-    },
+    });
-    {
+  });
-      validators: this.compareAccounts
+
-    }
+  protected readonly transferBalanceForm: TransferBalanceForm = new FormGroup({
-  );
+    balance: new FormControl<number | string | null>('', Validators.required),
+    fromAccount: new FormControl<string | null>(null, Validators.required),
+    toAccount: new FormControl<string | null>(null, Validators.required)
+  });
 
   private readonly dialogRef =
     inject<MatDialogRef<GfTransferBalanceDialogComponent>>(MatDialogRef);
 
+  private readonly fromAccountId = signal<string | null>(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;

apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.html

@@ -16,7 +16,7 @@
     <div>
       <gf-account-selector
         formControlName="toAccount"
-        [accounts]="accounts"
+        [accounts]="toAccounts()"
         [label]="labelTo"
       />
     </div>