Improve form in account dialog (#2408)

* Improve form in account dialog

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Supported enter key press to submit the form of the create or update account dialog
 - Added the version to the admin control panel
 - Added pagination parameters (`skip`, `take`) to the endpoint `GET api/v1/order`
 

apps/api/src/app/account/create-account.dto.ts

@@ -12,7 +12,7 @@ import { isString } from 'lodash';
 export class CreateAccountDto {
   @IsOptional()
   @IsString()
-  accountType: AccountType;
+  accountType?: AccountType;
 
   @IsNumber()
   balance: number;

apps/api/src/app/account/update-account.dto.ts

@@ -12,7 +12,7 @@ import { isString } from 'lodash';
 export class UpdateAccountDto {
   @IsOptional()
   @IsString()
-  accountType: AccountType;
+  accountType?: AccountType;
 
   @IsNumber()
   balance: number;

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.component.ts

@@ -4,7 +4,10 @@ import {
   Inject,
   OnDestroy
 } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
+import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { Subject } from 'rxjs';
 
@@ -18,15 +21,17 @@ import { CreateOrUpdateAccountDialogParams } from './interfaces/interfaces';
   templateUrl: 'create-or-update-account-dialog.html'
 })
 export class CreateOrUpdateAccountDialog implements OnDestroy {
+  public accountForm: FormGroup;
   public currencies: string[] = [];
   public platforms: { id: string; name: string }[];
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
+    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccountDialogParams,
     private dataService: DataService,
     public dialogRef: MatDialogRef<CreateOrUpdateAccountDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccountDialogParams
+    private formBuilder: FormBuilder
   ) {}
 
   ngOnInit() {
@@ -34,12 +39,42 @@ export class CreateOrUpdateAccountDialog implements OnDestroy {
 
     this.currencies = currencies;
     this.platforms = platforms;
+
+    this.accountForm = this.formBuilder.group({
+      accountId: [{ disabled: true, value: this.data.account.id }],
+      balance: [this.data.account.balance, Validators.required],
+      comment: [this.data.account.comment],
+      currency: [this.data.account.currency, Validators.required],
+      isExcluded: [this.data.account.isExcluded],
+      name: [this.data.account.name, Validators.required],
+      platformId: [this.data.account.platformId]
+    });
   }
 
   public onCancel() {
     this.dialogRef.close();
   }
 
+  public onSubmit() {
+    const account: CreateAccountDto | UpdateAccountDto = {
+      balance: this.accountForm.controls['balance'].value,
+      comment: this.accountForm.controls['comment'].value,
+      currency: this.accountForm.controls['currency'].value,
+      id: this.accountForm.controls['accountId'].value,
+      isExcluded: this.accountForm.controls['isExcluded'].value,
+      name: this.accountForm.controls['name'].value,
+      platformId: this.accountForm.controls['platformId'].value
+    };
+
+    if (this.data.account.id) {
+      (account as UpdateAccountDto).id = this.data.account.id;
+    } else {
+      delete (account as CreateAccountDto).id;
+    }
+
+    this.dialogRef.close({ account });
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -1,17 +1,22 @@
-<form #addAccountForm="ngForm" class="d-flex flex-column h-100">
+<form
+  class="d-flex flex-column h-100"
+  [formGroup]="accountForm"
+  (keyup.enter)="accountForm.valid && onSubmit()"
+  (ngSubmit)="onSubmit()"
+>
   <h1 *ngIf="data.account.id" i18n mat-dialog-title>Update account</h1>
   <h1 *ngIf="!data.account.id" i18n mat-dialog-title>Add account</h1>
   <div class="flex-grow-1 py-3" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Name</mat-label>
-        <input matInput name="name" required [(ngModel)]="data.account.name" />
+        <input formControlName="name" matInput />
       </mat-form-field>
     </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Currency</mat-label>
-        <mat-select name="currency" required [(value)]="data.account.currency">
+        <mat-select formControlName="currency">
           <mat-option *ngFor="let currency of currencies" [value]="currency"
             >{{ currency }}</mat-option
           >
@@ -21,20 +26,14 @@
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Cash Balance</mat-label>
-        <input
+        <input formControlName="balance" matInput type="number" />
-          matInput
-          name="balance"
-          required
-          type="number"
-          [(ngModel)]="data.account.balance"
-        />
         <span class="ml-2" matTextSuffix>{{ data.account.currency }}</span>
       </mat-form-field>
     </div>
     <div [ngClass]="{ 'd-none': platforms?.length < 1 }">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Platform</mat-label>
-        <mat-select name="platformId" [(value)]="data.account.platformId">
+        <mat-select formControlName="platformId">
           <mat-option [value]="null"></mat-option>
           <mat-option *ngFor="let platform of platforms" [value]="platform.id"
             >{{ platform.name }}</mat-option
@@ -48,30 +47,21 @@
         <textarea
           cdkAutosizeMinRows="2"
           cdkTextareaAutosize
+          formControlName="comment"
           matInput
-          name="comment"
-          [(ngModel)]="data.account.comment"
           (keyup.enter)="$event.stopPropagation()"
         ></textarea>
       </mat-form-field>
     </div>
     <div class="mb-3 px-2">
-      <mat-checkbox
+      <mat-checkbox color="primary" formControlName="isExcluded"
-        color="primary"
-        name="isExcluded"
-        [(ngModel)]="data.account.isExcluded"
         >Exclude from Analysis</mat-checkbox
       >
     </div>
     <div *ngIf="data.account.id">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Account ID</mat-label>
-        <input
+        <input formControlName="accountId" matInput />
-          disabled
-          matInput
-          name="accountId"
-          [(ngModel)]="data.account.id"
-        />
       </mat-form-field>
     </div>
   </div>
@@ -80,8 +70,8 @@
     <button
       color="primary"
       mat-flat-button
-      [disabled]="!addAccountForm.form.valid"
+      type="submit"
-      [mat-dialog-close]="data"
+      [disabled]="!accountForm.valid"
     >
       <ng-container i18n>Save</ng-container>
     </button>