Improve usability

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

@@ -2,7 +2,13 @@ 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,
@@ -48,11 +54,22 @@ export class GfTransferBalanceDialogComponent {
   protected readonly labelFrom = $localize`From`;
   protected readonly labelTo = $localize`To`;
 
+  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<number | string | null>('', Validators.required),
       fromAccount: new FormControl<string | null>('', Validators.required),
-      toAccount: new FormControl<string | null>('', Validators.required)
+      toAccount: new FormControl<string | null>(
+        { disabled: true, value: '' },
+        Validators.required
+      )
     },
     {
       validators: this.compareAccounts
@@ -62,14 +79,30 @@ export class GfTransferBalanceDialogComponent {
   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) {
+          if (toAccountControl.value === id) {
+            toAccountControl.setValue(null);
+          }
+
+          toAccountControl.enable();
+        } else {
+          toAccountControl.disable();
+        }
       }
     );
   }

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>