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

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

@@ -32,6 +32,7 @@ export class CreateOrUpdateTransactionDialog {
   public currencies: Currency[] = [];
   public filteredLookupItems: Observable<LookupItem[]>;
   public isLoading = false;
+  public currentMarketPrice = null;
   public platforms: { id: string; name: string }[];
   public searchSymbolCtrl = new FormControl(
     this.data.transaction.symbol,
@@ -65,6 +66,21 @@ 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;
+    this.cd.markForCheck();
   }
 
   public onCancel(): void {
@@ -81,7 +97,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

@@ -110,7 +110,7 @@
       </mat-form-field>
     </div>
     <div>
-      <mat-form-field appearance="outline" class="w-100">
+      <mat-form-field appearance="outline" class="w-100 mb-4">
         <mat-label i18n>Unit Price</mat-label>
         <input
           matInput
@@ -119,6 +119,14 @@
           type="number"
           [(ngModel)]="data.transaction.unitPrice"
         />
+        <mat-hint
+          *ngIf="currentMarketPrice"
+          align="start"
+          class="hint-action"
+          (click)="applyCurrentMarketPrice()"
+          >Use current market price from {{ data.transaction.dataSource
+          }}</mat-hint
+        >
       </mat-form-field>
     </div>
     <div>

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

@@ -29,6 +29,14 @@
         color: var(--dark-primary-text);
       }
     }
+
+    .hint-action {
+      color: var(--dark-primary-text);
+      text-decoration: underline;
+      &:hover {
+        cursor: pointer;
+      }
+    }
   }
 }