From 8bd9330accf26ef3564195e4d66ed3d371af4c51 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 1 Feb 2022 20:35:44 +0100
Subject: [PATCH] Feature/improve usability of create or edit transaction
 dialog (#661)

* Move the fee to the bottom

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../create-or-update-transaction-dialog.html  | 26 ++++++++++---------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 83df4164d..88a6d7f6b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the usability of the form in the create or edit transaction dialog
 - Improved the consistent use of `symbol` in combination with `dataSource`
 - Removed the primary data source from the client
 
diff --git a/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html b/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html
index f2dbd54f8..11f7415fb 100644
--- a/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html
+++ b/apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html
@@ -107,18 +107,6 @@
         <mat-datepicker #date disabled="false"></mat-datepicker>
       </mat-form-field>
     </div>
-    <div>
-      <mat-form-field appearance="outline" class="w-100">
-        <mat-label i18n>Fee</mat-label>
-        <input
-          matInput
-          name="fee"
-          required
-          type="number"
-          [(ngModel)]="data.transaction.fee"
-        />
-      </mat-form-field>
-    </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Quantity</mat-label>
@@ -141,6 +129,7 @@
           type="number"
           [(ngModel)]="data.transaction.unitPrice"
         />
+        <span class="ml-2" matSuffix>{{ data.transaction.currency }}</span>
         <button
           *ngIf="currentMarketPrice && (data.transaction.type === 'BUY' || data.transaction.type === 'SELL')"
           mat-icon-button
@@ -152,6 +141,19 @@
         </button>
       </mat-form-field>
     </div>
+    <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Fee</mat-label>
+        <input
+          matInput
+          name="fee"
+          required
+          type="number"
+          [(ngModel)]="data.transaction.fee"
+        />
+        <span class="ml-2" matSuffix>{{ data.transaction.currency }}</span>
+      </mat-form-field>
+    </div>
   </div>
   <div class="d-flex" mat-dialog-actions>
     <gf-value