Feature/support manual currency for unit price (#1751)

* Support manual currency for unit price

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Supported a manual currency for the activity unit price
+
 ## 1.239.0 - 2023-02-25
 
 ### Added

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts

@@ -106,6 +106,10 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
         this.data.activity?.SymbolProfile?.currency,
         Validators.required
       ],
+      currencyOfUnitPrice: [
+        this.data.activity?.SymbolProfile?.currency,
+        Validators.required
+      ],
       dataSource: [
         this.data.activity?.SymbolProfile?.dataSource,
         Validators.required
@@ -131,16 +135,23 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
         })
       ],
       type: [undefined, Validators.required], // Set after value changes subscription
-      unitPrice: [this.data.activity?.unitPrice, Validators.required]
+      unitPrice: [this.data.activity?.unitPrice, Validators.required],
+      unitPriceInCustomCurrency: [
+        this.data.activity?.unitPrice,
+        Validators.required
+      ]
     });
 
     this.activityForm.valueChanges
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(async () => {
-        let exchangeRate = 1;
+        let exchangeRateOfFee = 1;
+        let exchangeRateOfUnitPrice = 1;
 
         const currency = this.activityForm.controls['currency'].value;
         const currencyOfFee = this.activityForm.controls['currencyOfFee'].value;
+        const currencyOfUnitPrice =
+          this.activityForm.controls['currencyOfUnitPrice'].value;
         const date = this.activityForm.controls['date'].value;
 
         if (currency && currencyOfFee && currency !== currencyOfFee && date) {
@@ -154,18 +165,49 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
                 .pipe(takeUntil(this.unsubscribeSubject))
             );
 
-            exchangeRate = marketPrice;
+            exchangeRateOfFee = marketPrice;
           } catch {}
         }
 
         const feeInCustomCurrency =
           this.activityForm.controls['feeInCustomCurrency'].value *
-          exchangeRate;
+          exchangeRateOfFee;
 
         this.activityForm.controls['fee'].setValue(feeInCustomCurrency, {
           emitEvent: false
         });
 
+        if (
+          currency &&
+          currencyOfUnitPrice &&
+          currency !== currencyOfUnitPrice &&
+          date
+        ) {
+          try {
+            const { marketPrice } = await lastValueFrom(
+              this.dataService
+                .fetchExchangeRateForDate({
+                  date,
+                  symbol: `${currencyOfUnitPrice}-${currency}`
+                })
+                .pipe(takeUntil(this.unsubscribeSubject))
+            );
+
+            exchangeRateOfUnitPrice = marketPrice;
+          } catch {}
+        }
+
+        const unitPriceInCustomCurrency =
+          this.activityForm.controls['unitPriceInCustomCurrency'].value *
+          exchangeRateOfUnitPrice;
+
+        this.activityForm.controls['unitPrice'].setValue(
+          unitPriceInCustomCurrency,
+          {
+            emitEvent: false
+          }
+        );
+
         if (
           this.activityForm.controls['type'].value === 'BUY' ||
           this.activityForm.controls['type'].value === 'ITEM'
@@ -231,6 +273,9 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
           this.activityForm.controls['currencyOfFee'].setValue(
             this.data.user.settings.baseCurrency
           );
+          this.activityForm.controls['currencyOfUnitPrice'].setValue(
+            this.data.user.settings.baseCurrency
+          );
           this.activityForm.controls['dataSource'].removeValidators(
             Validators.required
           );
@@ -288,7 +333,8 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
 
   public applyCurrentMarketPrice() {
     this.activityForm.patchValue({
-      unitPrice: this.currentMarketPrice
+      currencyOfUnitPrice: this.activityForm.controls['currency'].value,
+      unitPriceInCustomCurrency: this.currentMarketPrice
     });
   }
 
@@ -415,6 +461,7 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
       .subscribe(({ currency, dataSource, marketPrice }) => {
         this.activityForm.controls['currency'].setValue(currency);
         this.activityForm.controls['currencyOfFee'].setValue(currency);
+        this.activityForm.controls['currencyOfUnitPrice'].setValue(currency);
         this.activityForm.controls['dataSource'].setValue(dataSource);
 
         this.currentMarketPrice = marketPrice;

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html

@@ -123,10 +123,22 @@
             <ng-container *ngSwitchDefault i18n>Unit Price</ng-container>
           </ng-container>
         </mat-label>
-        <input formControlName="unitPrice" matInput type="number" />
-        <span class="ml-2" matTextSuffix
-          >{{ activityForm.controls['currency'].value }}</span
+        <input
+          formControlName="unitPriceInCustomCurrency"
+          matInput
+          type="number"
+        />
+        <div
+          class="ml-2"
+          matTextSuffix
+          [ngClass]="{ 'd-none': !activityForm.controls['currency']?.value }"
         >
+          <mat-select formControlName="currencyOfUnitPrice">
+            <mat-option *ngFor="let currency of currencies" [value]="currency">
+              {{ currency }}
+            </mat-option>
+          </mat-select>
+        </div>
       </mat-form-field>
       <button
         *ngIf="currentMarketPrice && (data.activity.type === 'BUY' || data.activity.type === 'SELL')"
@@ -139,6 +151,23 @@
         <ion-icon class="text-muted" name="refresh-outline"></ion-icon>
       </button>
     </div>
+    <div class="d-none">
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label
+          ><ng-container [ngSwitch]="activityForm.controls['type']?.value">
+            <ng-container *ngSwitchCase="'DIVIDEND'" i18n
+              >Dividend</ng-container
+            >
+            <ng-container *ngSwitchCase="'ITEM'" i18n>Value</ng-container>
+            <ng-container *ngSwitchDefault i18n>Unit Price</ng-container>
+          </ng-container>
+        </mat-label>
+        <input formControlName="unitPrice" matInput type="number" />
+        <span class="ml-2" matTextSuffix
+          >{{ activityForm.controls['currency'].value }}</span
+        >
+      </mat-form-field>
+    </div>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Fee</mat-label>