Task/improve type safety in transfer balance dialog component (#7080)

Improve type safety

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

@@ -1,5 +1,12 @@
+import { FormControl, FormGroup } from '@angular/forms';
 import { Account } from '@prisma/client';
 
 export interface TransferBalanceDialogParams {
   accounts: Account[];
 }
+
+export type TransferBalanceForm = FormGroup<{
+  balance: FormControl<number | string | null>;
+  fromAccount: FormControl<string | null>;
+  toAccount: FormControl<string | null>;
+}>;

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

@@ -1,10 +1,9 @@
 import { TransferBalanceDto } from '@ghostfolio/common/dtos';
 import { GfEntityLogoComponent } from '@ghostfolio/ui/entity-logo';
 
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import {
-  AbstractControl,
+  FormControl,
-  FormBuilder,
   FormGroup,
   ReactiveFormsModule,
   ValidationErrors,
@@ -21,7 +20,10 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { Account } from '@prisma/client';
 
-import { TransferBalanceDialogParams } from './interfaces/interfaces';
+import {
+  TransferBalanceDialogParams,
+  TransferBalanceForm
+} from './interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,57 +42,63 @@ import { TransferBalanceDialogParams } from './interfaces/interfaces';
   templateUrl: 'transfer-balance-dialog.html'
 })
 export class GfTransferBalanceDialogComponent {
-  public accounts: Account[] = [];
+  protected readonly accounts: Account[] =
-  public currency: string;
+    inject<TransferBalanceDialogParams>(MAT_DIALOG_DATA).accounts;
-  public transferBalanceForm: FormGroup;
+
+  protected currency: string;
+
+  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)
+    },
+    {
+      validators: this.compareAccounts
+    }
+  );
 
-  public constructor(
+  private readonly dialogRef =
-    @Inject(MAT_DIALOG_DATA) public data: TransferBalanceDialogParams,
+    inject<MatDialogRef<GfTransferBalanceDialogComponent>>(MatDialogRef);
-    public dialogRef: MatDialogRef<GfTransferBalanceDialogComponent>,
-    private formBuilder: FormBuilder
-  ) {}
 
   public ngOnInit() {
-    this.accounts = this.data.accounts;
+    this.transferBalanceForm.controls.fromAccount.valueChanges.subscribe(
+      (id) => {
+        const currency = this.accounts.find((account) => {
+          return account.id === id;
+        })?.currency;
 
-    this.transferBalanceForm = this.formBuilder.group(
+        if (currency) {
-      {
+          this.currency = currency;
-        balance: ['', Validators.required],
+        }
-        fromAccount: ['', Validators.required],
-        toAccount: ['', Validators.required]
-      },
-      {
-        validators: this.compareAccounts
       }
     );
-
-    this.transferBalanceForm.get('fromAccount').valueChanges.subscribe((id) => {
-      this.currency = this.accounts.find((account) => {
-        return account.id === id;
-      }).currency;
-    });
   }
 
-  public onCancel() {
+  protected onCancel() {
     this.dialogRef.close();
   }
 
-  public onSubmit() {
+  protected onSubmit() {
     const account: TransferBalanceDto = {
-      accountIdFrom: this.transferBalanceForm.get('fromAccount').value,
+      accountIdFrom: this.transferBalanceForm.controls.fromAccount.value ?? '',
-      accountIdTo: this.transferBalanceForm.get('toAccount').value,
+      accountIdTo: this.transferBalanceForm.controls.toAccount.value ?? '',
-      balance: this.transferBalanceForm.get('balance').value
+      balance: Number(this.transferBalanceForm.controls.balance.value)
     };
 
     this.dialogRef.close({ account });
   }
 
-  private compareAccounts(control: AbstractControl): ValidationErrors {
+  private compareAccounts(
-    const accountFrom = control.get('fromAccount');
+    formGroup: TransferBalanceForm
-    const accountTo = control.get('toAccount');
+  ): ValidationErrors | null {
+    const accountFrom = formGroup.controls.fromAccount;
+    const accountTo = formGroup.controls.toAccount;
 
     if (accountFrom.value === accountTo.value) {
       return { invalid: true };
     }
+
+    return null;
   }
 }