From db090229ce94f3bfc4c7e4857cae0ec57c52933b Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 7 Jul 2021 21:14:01 +0200
Subject: [PATCH] Feature/add total value in the create or edit transaction
 dialog (#192)

* Display total value

* Update changelog
---
 CHANGELOG.md                                  |  4 ++
 .../pages/account/account-page.component.ts   |  2 +-
 ...-or-update-transaction-dialog.component.ts |  2 +-
 .../create-or-update-transaction-dialog.html  | 60 +++++++++++--------
 ...ate-or-update-transaction-dialog.module.ts |  2 +
 .../create-or-update-transaction-dialog.scss  |  6 ++
 .../interfaces/interfaces.ts                  |  3 +-
 .../transactions-page.component.ts            |  8 +--
 8 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 26f436279..e95a21f0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added the total value in the create or edit transaction dialog
+
 ### Changed
 
 - Upgraded `@angular/cdk` and `@angular/material` from version `11.0.4` to `12.0.6`
diff --git a/apps/client/src/app/pages/account/account-page.component.ts b/apps/client/src/app/pages/account/account-page.component.ts
index 1cca28ef4..9ae85c5e0 100644
--- a/apps/client/src/app/pages/account/account-page.component.ts
+++ b/apps/client/src/app/pages/account/account-page.component.ts
@@ -12,7 +12,7 @@ import {
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
-import { baseCurrency, DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
+import { DEFAULT_DATE_FORMAT, baseCurrency } from '@ghostfolio/common/config';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Currency } from '@prisma/client';
diff --git a/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts b/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts
index cf942cc9c..d6fc7e8c8 100644
--- a/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts
+++ b/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts
@@ -23,7 +23,7 @@ import { CreateOrUpdateTransactionDialogParams } from './interfaces/interfaces';
 
 @Component({
   host: { class: 'h-100' },
-  selector: 'create-or-update-transaction-dialog',
+  selector: 'gf-create-or-update-transaction-dialog',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./create-or-update-transaction-dialog.scss'],
   templateUrl: 'create-or-update-transaction-dialog.html'
diff --git a/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html b/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html
index 738fc68f5..eb4205a73 100644
--- a/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html
+++ b/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html
@@ -2,6 +2,22 @@
   <h1 *ngIf="data.transaction.id" mat-dialog-title i18n>Update transaction</h1>
   <h1 *ngIf="!data.transaction.id" mat-dialog-title i18n>Add transaction</h1>
   <div class="flex-grow-1" mat-dialog-content>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Account</mat-label>
+        <mat-select
+          name="accountId"
+          required
+          [(value)]="data.transaction.accountId"
+        >
+          <mat-option
+            *ngFor="let account of data.user?.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>Symbol or ISIN</mat-label>
@@ -42,7 +58,7 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div>
+    <div class="d-none">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Currency</mat-label>
         <mat-select
@@ -136,31 +152,25 @@
         </button>
       </mat-form-field>
     </div>
+  </div>
+  <div class="d-flex" mat-dialog-actions>
+    <gf-value
+      class="flex-grow-1"
+      [currency]="data.transaction.currency"
+      [locale]="data.user?.settings?.locale"
+      [value]="data.transaction.fee + (data.transaction.quantity * data.transaction.unitPrice)"
+    ></gf-value>
     <div>
-      <mat-form-field appearance="outline" class="w-100">
-        <mat-label i18n>Account</mat-label>
-        <mat-select
-          name="accountId"
-          required
-          [(value)]="data.transaction.accountId"
-        >
-          <mat-option *ngFor="let account of data.accounts" [value]="account.id"
-            >{{ account.name }}</mat-option
-          >
-        </mat-select>
-      </mat-form-field>
+      <button i18n mat-button (click)="onCancel()">Cancel</button>
+      <button
+        color="primary"
+        i18n
+        mat-flat-button
+        [disabled]="!(addTransactionForm.form.valid && data.transaction.symbol)"
+        [mat-dialog-close]="data"
+      >
+        Save
+      </button>
     </div>
   </div>
-  <div class="justify-content-end" mat-dialog-actions>
-    <button i18n mat-button (click)="onCancel()">Cancel</button>
-    <button
-      color="primary"
-      i18n
-      mat-flat-button
-      [disabled]="!(addTransactionForm.form.valid && data.transaction.symbol)"
-      [mat-dialog-close]="data"
-    >
-      Save
-    </button>
-  </div>
 </form>
diff --git a/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts b/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts
index b9a3c08ee..72d6d687b 100644
--- a/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts
+++ b/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts
@@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
+import { GfValueModule } from '@ghostfolio/client/components/value/value.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 
 import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-dialog.component';
@@ -19,6 +20,7 @@ import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-
   imports: [
     CommonModule,
     GfSymbolModule,
+    GfValueModule,
     FormsModule,
     MatAutocompleteModule,
     MatButtonModule,
diff --git a/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.scss b/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.scss
index fb2501ff3..b5f424dcf 100644
--- a/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.scss
+++ b/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.scss
@@ -1,6 +1,12 @@
 :host {
   display: block;
 
+  .mat-dialog-actions {
+    gf-value {
+      font-size: 0.9rem;
+    }
+  }
+
   .mat-dialog-content {
     max-height: unset;
 
diff --git a/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/interfaces/interfaces.ts b/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/interfaces/interfaces.ts
index 89223e404..291b488cb 100644
--- a/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/interfaces/interfaces.ts
+++ b/apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/interfaces/interfaces.ts
@@ -1,7 +1,8 @@
+import { User } from '@ghostfolio/common/interfaces';
 import { Account, Order } from '@prisma/client';
 
 export interface CreateOrUpdateTransactionDialogParams {
   accountId: string;
-  accounts: Account[];
   transaction: Order;
+  user: User;
 }
diff --git a/apps/client/src/app/pages/transactions/transactions-page.component.ts b/apps/client/src/app/pages/transactions/transactions-page.component.ts
index 684535d6b..79888ca51 100644
--- a/apps/client/src/app/pages/transactions/transactions-page.component.ts
+++ b/apps/client/src/app/pages/transactions/transactions-page.component.ts
@@ -141,7 +141,6 @@ export class TransactionsPageComponent implements OnInit {
   }: OrderModel): void {
     const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
       data: {
-        accounts: this.user.accounts,
         transaction: {
           accountId,
           currency,
@@ -153,7 +152,8 @@ export class TransactionsPageComponent implements OnInit {
           symbol,
           type,
           unitPrice
-        }
+        },
+        user: this.user
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
@@ -182,7 +182,6 @@ export class TransactionsPageComponent implements OnInit {
   private openCreateTransactionDialog(aTransaction?: OrderModel): void {
     const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
       data: {
-        accounts: this.user?.accounts,
         transaction: {
           accountId:
             aTransaction?.accountId ??
@@ -197,7 +196,8 @@ export class TransactionsPageComponent implements OnInit {
           symbol: aTransaction?.symbol ?? null,
           type: aTransaction?.type ?? 'BUY',
           unitPrice: null
-        }
+        },
+        user: this.user
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'