feat: add transfer cash balance dialog

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

@@ -0,0 +1,64 @@
+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 transferCashBalanceForm: FormGroup;
+    public accounts: AccountModel[] = [];
+
+    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],
+        });
+    }
+
+    public onCancel() {
+        this.dialogRef.close();
+    }
+
+    public onSubmit() {
+        const account: TransferCashBalanceDto = {
+            balance: this.transferCashBalanceForm.controls['balance'].value,
+            fromAccount: this.transferCashBalanceForm.controls['fromAccount'].value,
+            toAccount: this.transferCashBalanceForm.controls['toAccount'].value,
+        };
+
+        console.log(`Transfer cash balance of ${account.balance} from account ${account.fromAccount} to account ${account.toAccount}`)
+
+        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

@@ -0,0 +1,48 @@
+<form
+  class="d-flex flex-column h-100"
+  [formGroup]="transferCashBalanceForm"
+  (keyup.enter)="transferCashBalanceForm.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" />
+          <span class="ml-2" matTextSuffix>CHF</span>
+        </mat-form-field>
+      </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>From</mat-label>
+        <mat-select formControlName="fromAccount">
+          <mat-option *ngFor="let account of accounts" [value]="account.id"
+            >{{ account.name }}</mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>    
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>To</mat-label>
+        <mat-select formControlName="toAccount">
+          <mat-option *ngFor="let account of accounts" [value]="account.id"
+            >{{ account.name }}</mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="justify-content-end" mat-dialog-actions>
+    <button i18n mat-button (click)="onCancel()">Cancel</button>
+    <button
+      color="primary"
+      mat-flat-button
+      type="submit"
+      [disabled]="!transferCashBalanceForm.valid"
+    >
+      <ng-container i18n>Transfer</ng-container>
+    </button>
+  </div>
+</form>

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

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+
+  .mat-mdc-dialog-content {
+    max-height: unset;
+  }
+}

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

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+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';
+
+@NgModule({
+    declarations: [TransferCashBalanceDialog],
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        ReactiveFormsModule
+    ]
+})
+export class GfTransferCashBalanceDialogModule { }