Add value to position detail dialog

apps/api/src/app/portfolio/interfaces/portfolio-position-detail.interface.ts

@@ -19,6 +19,7 @@ export interface PortfolioPositionDetail {
   quantity: number;
   symbol: string;
   transactionCount: number;
+  value: number;
 }
 
 export interface HistoricalDataContainer {

apps/api/src/app/portfolio/portfolio.controller.ts

@@ -370,7 +370,8 @@ export class PortfolioController {
           'grossPerformance',
           'investment',
           'netPerformance',
-          'quantity'
+          'quantity',
+          'value'
         ]);
       }
 

apps/api/src/app/portfolio/portfolio.service.ts

@@ -391,7 +391,8 @@ export class PortfolioService {
         netPerformancePercent: undefined,
         quantity: undefined,
         symbol: aSymbol,
-        transactionCount: undefined
+        transactionCount: undefined,
+        value: undefined
       };
     }
 
@@ -527,7 +528,12 @@ export class PortfolioService {
         historicalData: historicalDataArray,
         netPerformancePercent: position.netPerformancePercentage.toNumber(),
         quantity: quantity.toNumber(),
-        symbol: aSymbol
+        symbol: aSymbol,
+        value: this.exchangeRateDataService.toCurrency(
+          quantity.mul(marketPrice).toNumber(),
+          currency,
+          userCurrency
+        )
       };
     } else {
       const currentData = await this.dataProviderService.get([
@@ -584,7 +590,8 @@ export class PortfolioService {
         netPerformancePercent: undefined,
         quantity: 0,
         symbol: aSymbol,
-        transactionCount: undefined
+        transactionCount: undefined,
+        value: 0
       };
     }
   }

apps/client/src/app/components/dialog-header/dialog-header.component.html

@@ -1,4 +1,8 @@
-<span class="flex-grow-1 text-truncate">{{ title }}</span>
+<span
+  class="flex-grow-1 text-truncate"
+  [ngClass]="{ 'text-center': position === 'center' }"
+  >{{ title }}</span
+>
 <button
   *ngIf="deviceType !== 'mobile'"
   class="no-min-width px-0"

apps/client/src/app/components/dialog-header/dialog-header.component.ts

@@ -16,6 +16,7 @@ import {
 })
 export class DialogHeaderComponent implements OnInit {
   @Input() deviceType: string;
+  @Input() position: 'center' | 'left' = 'left';
   @Input() title: string;
 
   @Output() closeButtonClicked = new EventEmitter<void>();

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts

@@ -43,6 +43,7 @@ export class PositionDetailDialog implements OnDestroy {
   public quantityPrecision = 2;
   public symbol: string;
   public transactionCount: number;
+  public value: number;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -73,7 +74,8 @@ export class PositionDetailDialog implements OnDestroy {
           netPerformancePercent,
           quantity,
           symbol,
-          transactionCount
+          transactionCount,
+          value
         }) => {
           this.assetSubClass = assetSubClass;
           this.averagePrice = averagePrice;
@@ -105,6 +107,7 @@ export class PositionDetailDialog implements OnDestroy {
           this.quantity = quantity;
           this.symbol = symbol;
           this.transactionCount = transactionCount;
+          this.value = value;
 
           if (isToday(parseISO(this.firstBuyDate))) {
             // Add average price

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html

@@ -1,5 +1,6 @@
 <gf-dialog-header
   mat-dialog-title
+  position="center"
   [deviceType]="data.deviceType"
   [title]="name ?? symbol"
   (closeButtonClicked)="onClose()"
@@ -7,6 +8,17 @@
 
 <div class="flex-grow-1" mat-dialog-content>
   <div class="container p-0">
+    <div class="row">
+      <div class="col-12 d-flex justify-content-center mb-3">
+        <gf-value
+          size="large"
+          [currency]="data.baseCurrency"
+          [locale]="data.locale"
+          [value]="value"
+        ></gf-value>
+      </div>
+    </div>
+
     <gf-line-chart
       class="mb-4"
       benchmarkLabel="Buy Price"

libs/ui/src/lib/value/value.component.html

@@ -8,10 +8,18 @@
         <div *ngIf="value > 0" class="mr-1 text-success">+</div>
         <div *ngIf="value < 0" class="mr-1 text-danger">-</div>
       </ng-container>
-      <div *ngIf="isPercent" [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
+      <div
+        *ngIf="isPercent"
+        class="mb-0"
+        [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
+      >
         {{ formattedValue }}%
       </div>
-      <div *ngIf="!isPercent" [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
+      <div
+        *ngIf="!isPercent"
+        class="mb-0"
+        [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
+      >
         <ng-container *ngIf="value === null">
           <span class="text-monospace text-muted">***</span>
         </ng-container>
@@ -27,7 +35,10 @@
       </div>
     </ng-container>
     <ng-container *ngIf="isDate">
-      <div [ngClass]="size === 'medium' ? 'h4 mb-0' : ''">
+      <div
+        class="mb-0"
+        [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
+      >
         {{ formattedDate }}
       </div>
     </ng-container>
@@ -41,7 +52,7 @@
   *ngIf="value === undefined"
   animation="pulse"
   [theme]="{
-    height: '1.5rem',
+    height: size === 'large' ? '2.5rem' : '1.5rem',
     width: '5rem'
   }"
 ></ngx-skeleton-loader>

libs/ui/src/lib/value/value.component.ts

@@ -24,7 +24,7 @@ export class ValueComponent implements OnChanges {
   @Input() locale = '';
   @Input() position = '';
   @Input() precision: number | undefined;
-  @Input() size = '';
+  @Input() size: 'large' | 'medium' | 'small' = 'small';
   @Input() value: number | string = '';
 
   public absoluteValue = 0;