Add link to retrieve manually the current market price (#74)

* feat: add link to retrieve manually the current market price from data source

* Add icon

* Update changelog

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a button to fetch the current market price in the create or edit transaction dialog
+
 ### Changed
 
 - Improved the transaction filtering with multi filter support

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts

@@ -30,6 +30,7 @@ import { CreateOrUpdateTransactionDialogParams } from './interfaces/interfaces';
 })
 export class CreateOrUpdateTransactionDialog {
   public currencies: Currency[] = [];
+  public currentMarketPrice = null;
   public filteredLookupItems: Observable<LookupItem[]>;
   public isLoading = false;
   public platforms: { id: string; name: string }[];
@@ -65,6 +66,20 @@ export class CreateOrUpdateTransactionDialog {
         return [];
       })
     );
+
+    if (this.data.transaction.symbol) {
+      this.dataService
+        .fetchSymbolItem(this.data.transaction.symbol)
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe(({ marketPrice }) => {
+          this.currentMarketPrice = marketPrice;
+          this.cd.markForCheck();
+        });
+    }
+  }
+
+  public applyCurrentMarketPrice() {
+    this.data.transaction.unitPrice = this.currentMarketPrice;
   }
 
   public onCancel(): void {
@@ -81,7 +96,7 @@ export class CreateOrUpdateTransactionDialog {
       .subscribe(({ currency, dataSource, marketPrice }) => {
         this.data.transaction.currency = currency;
         this.data.transaction.dataSource = dataSource;
-        this.data.transaction.unitPrice = marketPrice;
+        this.currentMarketPrice = marketPrice;
 
         this.isLoading = false;
 

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html

@@ -81,7 +81,13 @@
           [matDatepicker]="date"
           [(ngModel)]="data.transaction.date"
         />
-        <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [for]="date">
+          <ion-icon
+            class="text-muted"
+            matDatepickerToggleIcon
+            name="calendar-clear-outline"
+          ></ion-icon>
+        </mat-datepicker-toggle>
         <mat-datepicker #date disabled="false"></mat-datepicker>
       </mat-form-field>
     </div>
@@ -110,7 +116,7 @@
       </mat-form-field>
     </div>
     <div>
-      <mat-form-field appearance="outline" class="w-100">
+      <mat-form-field appearance="outline" class="unit-price w-100">
         <mat-label i18n>Unit Price</mat-label>
         <input
           matInput
@@ -119,6 +125,15 @@
           type="number"
           [(ngModel)]="data.transaction.unitPrice"
         />
+        <button
+          *ngIf="currentMarketPrice"
+          mat-icon-button
+          matSuffix
+          title="Apply current market price"
+          (click)="applyCurrentMarketPrice()"
+        >
+          <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
+        </button>
       </mat-form-field>
     </div>
     <div>

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
@@ -30,6 +30,7 @@ import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-
     MatSelectModule,
     ReactiveFormsModule
   ],
-  providers: []
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class CreateOrUpdateTransactionDialogModule {}

apps/client/src/app/pages/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.scss

@@ -14,6 +14,18 @@
       }
     }
 
+    .mat-form-field-appearance-outline {
+      ::ng-deep {
+        .mat-form-field-suffix {
+          top: -0.3rem;
+        }
+      }
+
+      ion-icon {
+        font-size: 130%;
+      }
+    }
+
     .mat-select {
       &.no-arrow {
         ::ng-deep {