Feature/add total value in the create or edit transaction dialog (#192)

* Display total value

* Update changelog

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`

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';

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'

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,22 +152,15 @@
         </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>
-    </div>
-  </div>
-  <div class="justify-content-end" mat-dialog-actions>
       <button i18n mat-button (click)="onCancel()">Cancel</button>
       <button
         color="primary"
@@ -163,4 +172,5 @@
         Save
       </button>
     </div>
+  </div>
 </form>

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,

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;
 

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;
 }

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'