From 72067459d621f8cda85e6049d59bce9b0f85e5a6 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 27 Nov 2021 09:51:08 +0100
Subject: [PATCH] Feature/add value to position detail dialog (#492)

* Add value to position detail dialog

* Update changelog
---
 CHANGELOG.md                                  |  4 ++++
 .../portfolio-position-detail.interface.ts    |  1 +
 .../src/app/portfolio/portfolio.controller.ts |  3 ++-
 .../src/app/portfolio/portfolio.service.ts    | 13 ++++++++++---
 .../dialog-header.component.html              |  6 +++++-
 .../dialog-header/dialog-header.component.ts  |  1 +
 .../position-detail-dialog.component.ts       |  5 ++++-
 .../position-detail-dialog.html               | 12 ++++++++++++
 libs/ui/src/lib/value/value.component.html    | 19 +++++++++++++++----
 libs/ui/src/lib/value/value.component.ts      |  2 +-
 10 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46a940772..3bdae6e2d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added the value to the position detail dialog
+
 ### Changed
 
 - Upgraded `angular` from version `12.2.4` to `13.0.2`
diff --git a/apps/api/src/app/portfolio/interfaces/portfolio-position-detail.interface.ts b/apps/api/src/app/portfolio/interfaces/portfolio-position-detail.interface.ts
index 336e5a2d4..069230983 100644
--- a/apps/api/src/app/portfolio/interfaces/portfolio-position-detail.interface.ts
+++ b/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 {
diff --git a/apps/api/src/app/portfolio/portfolio.controller.ts b/apps/api/src/app/portfolio/portfolio.controller.ts
index 362badb8e..f4578e070 100644
--- a/apps/api/src/app/portfolio/portfolio.controller.ts
+++ b/apps/api/src/app/portfolio/portfolio.controller.ts
@@ -370,7 +370,8 @@ export class PortfolioController {
           'grossPerformance',
           'investment',
           'netPerformance',
-          'quantity'
+          'quantity',
+          'value'
         ]);
       }
 
diff --git a/apps/api/src/app/portfolio/portfolio.service.ts b/apps/api/src/app/portfolio/portfolio.service.ts
index e6279d1f4..76bf34f14 100644
--- a/apps/api/src/app/portfolio/portfolio.service.ts
+++ b/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
       };
     }
   }
diff --git a/apps/client/src/app/components/dialog-header/dialog-header.component.html b/apps/client/src/app/components/dialog-header/dialog-header.component.html
index 0b683f9b9..c39c2ca7b 100644
--- a/apps/client/src/app/components/dialog-header/dialog-header.component.html
+++ b/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"
diff --git a/apps/client/src/app/components/dialog-header/dialog-header.component.ts b/apps/client/src/app/components/dialog-header/dialog-header.component.ts
index 9b4c67c27..b577e7004 100644
--- a/apps/client/src/app/components/dialog-header/dialog-header.component.ts
+++ b/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>();
diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts
index 7ea82e884..f9a2127af 100644
--- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts
+++ b/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
diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
index 32e249c6d..a20f4c892 100644
--- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html
+++ b/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"
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index 68f887f8d..282a99ca7 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/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>
diff --git a/libs/ui/src/lib/value/value.component.ts b/libs/ui/src/lib/value/value.component.ts
index 7e7cd2e2c..e203d5615 100644
--- a/libs/ui/src/lib/value/value.component.ts
+++ b/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;