Feature/support manual currency for fee (#1490)

* Support manual currency for fee

* Update changelog

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

@@ -18,7 +18,7 @@ import { translate } from '@ghostfolio/ui/i18n';
 import { AssetClass, AssetSubClass, Type } from '@prisma/client';
 import { isUUID } from 'class-validator';
 import { isString } from 'lodash';
-import { EMPTY, Observable, Subject } from 'rxjs';
+import { EMPTY, Observable, Subject, lastValueFrom } from 'rxjs';
 import {
   catchError,
   debounceTime,
@@ -86,12 +86,17 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
         this.data.activity?.SymbolProfile?.currency,
         Validators.required
       ],
+      currencyOfFee: [
+        this.data.activity?.SymbolProfile?.currency,
+        Validators.required
+      ],
       dataSource: [
         this.data.activity?.SymbolProfile?.dataSource,
         Validators.required
       ],
       date: [this.data.activity?.date, Validators.required],
       fee: [this.data.activity?.fee, Validators.required],
+      feeInCustomCurrency: [this.data.activity?.fee, Validators.required],
       name: [this.data.activity?.SymbolProfile?.name, Validators.required],
       quantity: [this.data.activity?.quantity, Validators.required],
       searchSymbol: [
@@ -108,7 +113,36 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
 
     this.activityForm.valueChanges
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
+      .subscribe(async () => {
+        let exchangeRate = 1;
+
+        const currency = this.activityForm.controls['currency'].value;
+        const currencyOfFee = this.activityForm.controls['currencyOfFee'].value;
+        const date = this.activityForm.controls['date'].value;
+
+        if (currency && currencyOfFee && currency !== currencyOfFee && date) {
+          try {
+            const { marketPrice } = await lastValueFrom(
+              this.dataService
+                .fetchExchangeRateForDate({
+                  date,
+                  symbol: `${currencyOfFee}-${currency}`
+                })
+                .pipe(takeUntil(this.unsubscribeSubject))
+            );
+
+            exchangeRate = marketPrice;
+          } catch {}
+        }
+
+        const feeInCustomCurrency =
+          this.activityForm.controls['feeInCustomCurrency'].value *
+          exchangeRate;
+
+        this.activityForm.controls['fee'].setValue(feeInCustomCurrency, {
+          emitEvent: false
+        });
+
         if (
           this.activityForm.controls['type'].value === 'BUY' ||
           this.activityForm.controls['type'].value === 'ITEM'
@@ -123,6 +157,8 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
               this.activityForm.controls['unitPrice'].value -
               this.activityForm.controls['fee'].value ?? 0;
         }
+
+        this.changeDetectorRef.markForCheck();
       });
 
     this.filteredLookupItemsObservable = this.activityForm.controls[
@@ -160,6 +196,9 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
           this.activityForm.controls['currency'].setValue(
             this.data.user.settings.baseCurrency
           );
+          this.activityForm.controls['currencyOfFee'].setValue(
+            this.data.user.settings.baseCurrency
+          );
           this.activityForm.controls['dataSource'].removeValidators(
             Validators.required
           );
@@ -189,6 +228,8 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
           );
           this.activityForm.controls['searchSymbol'].updateValueAndValidity();
         }
+
+        this.changeDetectorRef.markForCheck();
       });
 
     this.activityForm.controls['type'].setValue(this.data.activity?.type);
@@ -313,6 +354,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['dataSource'].setValue(dataSource);
 
         this.currentMarketPrice = marketPrice;

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

@@ -127,6 +127,23 @@
       </mat-form-field>
     </div>
     <div>
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Fee</mat-label>
+        <input formControlName="feeInCustomCurrency" matInput type="number" />
+        <div
+          class="ml-2"
+          matSuffix
+          [ngClass]="{ 'd-none': !activityForm.controls['currency']?.value }"
+        >
+          <mat-select formControlName="currencyOfFee">
+            <mat-option *ngFor="let currency of currencies" [value]="currency">
+              {{ currency }}
+            </mat-option>
+          </mat-select>
+        </div>
+      </mat-form-field>
+    </div>
+    <div class="d-none">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Fee</mat-label>
         <input formControlName="fee" matInput type="number" />

apps/client/src/app/services/admin.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { UpdateMarketDataDto } from '@ghostfolio/api/app/admin/update-market-data.dto';
 import { UpdateAssetProfileDto } from '@ghostfolio/api/app/admin/update-asset-profile.dto';
+import { UpdateMarketDataDto } from '@ghostfolio/api/app/admin/update-market-data.dto';
 import { IDataProviderHistoricalResponse } from '@ghostfolio/api/services/interfaces/interfaces';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import {

apps/client/src/app/services/data.service.ts

@@ -12,6 +12,7 @@ import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.in
 import { SymbolItem } from '@ghostfolio/api/app/symbol/interfaces/symbol-item.interface';
 import { UserItem } from '@ghostfolio/api/app/user/interfaces/user-item.interface';
 import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
+import { IDataProviderHistoricalResponse } from '@ghostfolio/api/services/interfaces/interfaces';
 import { PropertyDto } from '@ghostfolio/api/services/property/property.dto';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import {
@@ -36,12 +37,7 @@ import {
 import { filterGlobalPermissions } from '@ghostfolio/common/permissions';
 import { AccountWithValue, DateRange } from '@ghostfolio/common/types';
 import { translate } from '@ghostfolio/ui/i18n';
-import {
-  AssetClass,
-  AssetSubClass,
-  DataSource,
-  Order as OrderModel
-} from '@prisma/client';
+import { DataSource, Order as OrderModel } from '@prisma/client';
 import { format, parseISO } from 'date-fns';
 import { cloneDeep, groupBy } from 'lodash';
 import { Observable } from 'rxjs';
@@ -104,6 +100,18 @@ export class DataService {
     });
   }
 
+  public fetchExchangeRateForDate({
+    date,
+    symbol
+  }: {
+    date: Date;
+    symbol: string;
+  }) {
+    return this.http.get<IDataProviderHistoricalResponse>(
+      `/api/v1/exchange-rate/${symbol}/${format(date, DATE_FORMAT)}`
+    );
+  }
+
   public deleteAccess(aId: string) {
     return this.http.delete<any>(`/api/v1/access/${aId}`);
   }