Refactoring

apps/api/src/app/account/transfer-balance.dto.ts

@@ -0,0 +1,12 @@
+import { IsNumber, IsString } from 'class-validator';
+
+export class TransferBalanceDto {
+  @IsString()
+  accountIdFrom: string;
+
+  @IsString()
+  accountIdTo: string;
+
+  @IsNumber()
+  balance: number;
+}

apps/api/src/app/account/transfer-cash-balance.dto.ts

@@ -1,15 +0,0 @@
-import {
-    IsNumber,
-    IsString,
-} from 'class-validator';
-
-export class TransferCashBalanceDto {
-    @IsString()
-    accountIdFrom: string;
-
-    @IsString()
-    accountIdTo: string;
-
-    @IsNumber()
-    balance: number;
-}

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -1,3 +1,14 @@
+<div *ngIf="false" class="d-flex justify-content-end">
+  <button
+    class="align-items-center d-flex"
+    mat-stroked-button
+    (click)="onTransferBalance()"
+  >
+    <ion-icon class="mr-2" name="arrow-redo-outline"></ion-icon>
+    <ng-container i18n>Transfer Cash Balance</ng-container>...
+  </button>
+</div>
+
 <table class="gf-table w-100" mat-table matSort [dataSource]="dataSource">
   <ng-container matColumnDef="status">
     <th

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -34,6 +34,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
 
   @Output() accountDeleted = new EventEmitter<string>();
   @Output() accountToUpdate = new EventEmitter<AccountModel>();
+  @Output() transferBalance = new EventEmitter<void>();
 
   @ViewChild(MatSort) sort: MatSort;
 
@@ -97,6 +98,10 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
     alert(aComment);
   }
 
+  public onTransferBalance() {
+    this.transferBalance.emit();
+  }
+
   public onUpdateAccount(aAccount: AccountModel) {
     this.accountToUpdate.emit(aAccount);
   }

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
+import { TransferBalanceDto } from '@ghostfolio/api/app/account/transfer-balance.dto';
 import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';
 import { AccountDetailDialog } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.component';
 import { AccountDetailDialogParams } from '@ghostfolio/client/components/account-detail-dialog/interfaces/interfaces';
@@ -16,7 +17,7 @@ import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog/create-or-update-account-dialog.component';
-import { TransferCashBalanceDialog } from './transfer-cash-balance/transfer-cash-balance-dialog.component';
+import { TransferBalanceDialog } from './transfer-balance/transfer-balance-dialog.component';
 
 @Component({
   host: { class: 'page' },
@@ -68,9 +69,8 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
           } else {
             this.router.navigate(['.'], { relativeTo: this.route });
           }
-        }
+        } else if (params['transferBalanceDialog']) {
-        else if (params['transferBalanceDialog']) {
+          this.openTransferBalanceDialog();
-          this.openTransferCashBalanceDialog();
         }
       });
   }
@@ -148,6 +148,12 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public onTransferBalance() {
+    this.router.navigate([], {
+      queryParams: { transferBalanceDialog: true }
+    });
+  }
+
   public onUpdateAccount(aAccount: AccountModel) {
     this.router.navigate([], {
       queryParams: { accountId: aAccount.id, editDialog: true }
@@ -272,8 +278,8 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  private openTransferCashBalanceDialog(): void {
+  private openTransferBalanceDialog(): void {
-    const dialogRef = this.dialog.open(TransferCashBalanceDialog, {
+    const dialogRef = this.dialog.open(TransferBalanceDialog, {
       data: {
         accounts: this.accounts
       },
@@ -285,6 +291,15 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((data: any) => {
+        if (data) {
+          const { accountIdFrom, accountIdTo, balance }: TransferBalanceDto =
+            data?.account;
+
+          console.log(
+            `Transfer cash balance of ${balance} from account ${accountIdFrom} to account ${accountIdTo}`
+          );
+        }
+
         this.router.navigate(['.'], { relativeTo: this.route });
       });
   }

apps/client/src/app/pages/accounts/accounts-page.html

@@ -14,6 +14,7 @@
           [transactionCount]="transactionCount"
           (accountDeleted)="onDeleteAccount($event)"
           (accountToUpdate)="onUpdateAccount($event)"
+          (transferBalance)="onTransferBalance()"
         ></gf-accounts-table>
       </div>
     </div>
@@ -32,14 +33,5 @@
     >
       <ion-icon name="add-outline" size="large"></ion-icon>
     </a>
-    <a
-    class="align-items-center d-flex justify-content-center mt-2"
-    color="primary"
-    mat-fab
-    [queryParams]="{ transferBalanceDialog: true }"
-    [routerLink]="[]"
-  >
-  <ion-icon name="wallet-outline" size="large"></ion-icon>
-  </a>
   </div>
 </div>

apps/client/src/app/pages/accounts/accounts-page.module.ts

@@ -8,7 +8,7 @@ import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-ta
 import { AccountsPageRoutingModule } from './accounts-page-routing.module';
 import { AccountsPageComponent } from './accounts-page.component';
 import { GfCreateOrUpdateAccountDialogModule } from './create-or-update-account-dialog/create-or-update-account-dialog.module';
-import { GfTransferCashBalanceDialogModule } from './transfer-cash-balance/transfer-cash-balance-dialog.module';
+import { GfTransferBalanceDialogModule } from './transfer-balance/transfer-balance-dialog.module';
 
 @NgModule({
   declarations: [AccountsPageComponent],
@@ -18,10 +18,10 @@ import { GfTransferCashBalanceDialogModule } from './transfer-cash-balance/trans
     GfAccountDetailDialogModule,
     GfAccountsTableModule,
     GfCreateOrUpdateAccountDialogModule,
-    GfTransferCashBalanceDialogModule,
+    GfTransferBalanceDialogModule,
     MatButtonModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class AccountsPageModule { }
+export class AccountsPageModule {}

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

@@ -0,0 +1,5 @@
+import { Account } from '@prisma/client';
+
+export interface TransferBalanceDialogParams {
+  accounts: Account[];
+}

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

@@ -0,0 +1,69 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  OnDestroy
+} from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { TransferBalanceDto } from '@ghostfolio/api/app/account/transfer-balance.dto';
+import { Account as AccountModel } from '@prisma/client';
+import { Subject } from 'rxjs';
+
+import { TransferBalanceDialogParams } from './interfaces/interfaces';
+
+@Component({
+  host: { class: 'h-100' },
+  selector: 'gf-transfer-balance-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./transfer-balance-dialog.scss'],
+  templateUrl: 'transfer-balance-dialog.html'
+})
+export class TransferBalanceDialog implements OnDestroy {
+  public accounts: AccountModel[] = [];
+  public currency: string;
+  public transferBalanceForm: FormGroup;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    @Inject(MAT_DIALOG_DATA) public data: TransferBalanceDialogParams,
+    public dialogRef: MatDialogRef<TransferBalanceDialog>,
+    private formBuilder: FormBuilder
+  ) {}
+
+  ngOnInit() {
+    this.accounts = this.data.accounts;
+
+    this.transferBalanceForm = this.formBuilder.group({
+      balance: [0, Validators.required],
+      fromAccount: ['', Validators.required],
+      toAccount: ['', Validators.required]
+    });
+
+    this.transferBalanceForm.get('fromAccount').valueChanges.subscribe((id) => {
+      this.currency = this.accounts.find((account) => {
+        return account.id === id;
+      }).currency;
+    });
+  }
+
+  public onCancel() {
+    this.dialogRef.close();
+  }
+
+  public onSubmit() {
+    const account: TransferBalanceDto = {
+      accountIdFrom: this.transferBalanceForm.controls['fromAccount'].value,
+      accountIdTo: this.transferBalanceForm.controls['toAccount'].value,
+      balance: this.transferBalanceForm.controls['balance'].value
+    };
+
+    this.dialogRef.close({ account });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -1,18 +1,11 @@
 <form
   class="d-flex flex-column h-100"
-  [formGroup]="transferCashBalanceForm"
+  [formGroup]="transferBalanceForm"
-  (keyup.enter)="transferCashBalanceForm.valid && onSubmit()"
+  (keyup.enter)="transferBalanceForm.valid && onSubmit()"
   (ngSubmit)="onSubmit()"
 >
   <h1 i18n mat-dialog-title>Transfer Cash Balance</h1>
   <div class="flex-grow-1 py-3" mat-dialog-content>
-    <div>
-        <mat-form-field appearance="outline" class="w-100">
-          <mat-label i18n>Value</mat-label>
-          <input formControlName="balance" matInput type="number" (keydown.enter)="$event.stopPropagation()" />
-          <span class="ml-2" matTextSuffix>{{ currency }}</span>
-        </mat-form-field>
-      </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>From</mat-label>
@@ -33,14 +26,26 @@
         </mat-select>
       </mat-form-field>
     </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Value</mat-label>
+        <input
+          formControlName="balance"
+          matInput
+          type="number"
+          (keydown.enter)="$event.stopPropagation()"
+        />
+        <span class="ml-2" matTextSuffix>{{ currency }}</span>
+      </mat-form-field>
+    </div>
   </div>
   <div class="justify-content-end" mat-dialog-actions>
-    <button i18n mat-button (click)="onCancel()" type="button">Cancel</button>
+    <button i18n mat-button type="button" (click)="onCancel()">Cancel</button>
     <button
       color="primary"
       mat-flat-button
       type="submit"
-      [disabled]="!transferCashBalanceForm.valid"
+      [disabled]="!transferBalanceForm.valid"
     >
       <ng-container i18n>Transfer</ng-container>
     </button>

apps/client/src/app/pages/accounts/transfer-cash-balance/transfer-cash-balance-dialog.module.ts → apps/client/src/app/pages/accounts/transfer-balance/transfer-balance-dialog.module.ts

@@ -1,24 +1,24 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 
-import { TransferCashBalanceDialog } from './transfer-cash-balance-dialog.component';
+import { TransferBalanceDialog } from './transfer-balance-dialog.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
-    declarations: [TransferCashBalanceDialog],
+  declarations: [TransferBalanceDialog],
-    imports: [
+  imports: [
-        CommonModule,
+    CommonModule,
-        MatButtonModule,
+    MatButtonModule,
-        MatDialogModule,
+    MatDialogModule,
-        MatFormFieldModule,
+    MatFormFieldModule,
-        MatInputModule,
+    MatInputModule,
-        MatSelectModule,
+    MatSelectModule,
-        ReactiveFormsModule
+    ReactiveFormsModule
-    ]
+  ]
 })
-export class GfTransferCashBalanceDialogModule { }
+export class GfTransferBalanceDialogModule {}

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

@@ -1,5 +0,0 @@
-import { Account } from '@prisma/client';
-
-export interface TransferCashBalanceDialogParams {
-    accounts: Account[];
-}

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

@@ -1,69 +0,0 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    Inject,
-    OnDestroy
-} from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { TransferCashBalanceDto } from '@ghostfolio/api/app/account/transfer-cash-balance.dto';
-import { Subject } from 'rxjs';
-import { Account as AccountModel } from '@prisma/client';
-import { TransferCashBalanceDialogParams } from './interfaces/interfaces';
-
-@Component({
-    host: { class: 'h-100' },
-    selector: 'gf-transfer-cash-balance-dialog',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    styleUrls: ['./transfer-cash-balance-dialog.scss'],
-    templateUrl: 'transfer-cash-balance-dialog.html'
-})
-export class TransferCashBalanceDialog implements OnDestroy {
-    public accounts: AccountModel[] = [];
-    public currency = '';
-    public transferCashBalanceForm: FormGroup;
-
-    private unsubscribeSubject = new Subject<void>();
-
-    public constructor(
-        @Inject(MAT_DIALOG_DATA) public data: TransferCashBalanceDialogParams,
-        public dialogRef: MatDialogRef<TransferCashBalanceDialog>,
-        private formBuilder: FormBuilder
-    ) { }
-
-    ngOnInit() {
-
-        this.accounts = this.data.accounts;
-
-        this.transferCashBalanceForm = this.formBuilder.group({
-            balance: [0, Validators.required],
-            fromAccount: ['', Validators.required],
-            toAccount: ['', Validators.required],
-        });
-
-        this.transferCashBalanceForm.get('fromAccount').valueChanges.subscribe((id) => {
-            this.currency = this.accounts.find((account) => account.id === id).currency;
-        })
-    }
-
-    public onCancel() {
-        this.dialogRef.close();
-    }
-
-    public onSubmit() {
-        const account: TransferCashBalanceDto = {
-            balance: this.transferCashBalanceForm.controls['balance'].value,
-            accountIdFrom: this.transferCashBalanceForm.controls['fromAccount'].value,
-            accountIdTo: this.transferCashBalanceForm.controls['toAccount'].value,
-        };
-
-        console.log(`Transfer cash balance of ${account.balance} from account ${account.accountIdFrom} to account ${account.accountIdTo}`)
-
-        this.dialogRef.close({ account });
-    }
-
-    public ngOnDestroy() {
-        this.unsubscribeSubject.next();
-        this.unsubscribeSubject.complete();
-    }
-}