Feature/refactor position detail dialog (#355)

* Add name to portfolio position endpoint

* 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).
 
+## 1.51.0 - 11.09.2021
+
+### Changed
+
+- Provided the name in the portfolio position endpoint
+
 ## 1.50.0 - 11.09.2021
 
 ### Fixed

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

@@ -11,6 +11,7 @@ export interface PortfolioPositionDetail {
   marketPrice: number;
   maxPrice: number;
   minPrice: number;
+  name: string;
   netPerformance: number;
   netPerformancePercent: number;
   quantity: number;

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

@@ -282,6 +282,7 @@ export class PortfolioService {
         marketPrice: undefined,
         maxPrice: undefined,
         minPrice: undefined,
+        name: undefined,
         netPerformance: undefined,
         netPerformancePercent: undefined,
         quantity: undefined,
@@ -291,6 +292,7 @@ export class PortfolioService {
     }
 
     const positionCurrency = orders[0].currency;
+    const name = orders[0].SymbolProfile?.name ?? '';
 
     const portfolioOrders: PortfolioOrder[] = orders.map((order) => ({
       currency: order.currency,
@@ -407,6 +409,7 @@ export class PortfolioService {
         marketPrice,
         maxPrice,
         minPrice,
+        name,
         netPerformance,
         transactionCount,
         averagePrice: averagePrice.toNumber(),
@@ -455,6 +458,7 @@ export class PortfolioService {
         marketPrice,
         maxPrice,
         minPrice,
+        name,
         averagePrice: 0,
         currency: currentData[aSymbol]?.currency,
         firstBuyDate: undefined,

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

@@ -3,5 +3,4 @@ export interface PositionDetailDialogParams {
   deviceType: string;
   locale: string;
   symbol: string;
-  title: string;
 }

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

@@ -34,9 +34,11 @@ export class PositionDetailDialog implements OnDestroy {
   public marketPrice: number;
   public maxPrice: number;
   public minPrice: number;
+  public name: string;
   public netPerformance: number;
   public netPerformancePercent: number;
   public quantity: number;
+  public symbol: string;
   public transactionCount: number;
 
   private unsubscribeSubject = new Subject<void>();
@@ -62,9 +64,11 @@ export class PositionDetailDialog implements OnDestroy {
           marketPrice,
           maxPrice,
           minPrice,
+          name,
           netPerformance,
           netPerformancePercent,
           quantity,
+          symbol,
           transactionCount
         }) => {
           this.averagePrice = averagePrice;
@@ -90,9 +94,11 @@ export class PositionDetailDialog implements OnDestroy {
           this.marketPrice = marketPrice;
           this.maxPrice = maxPrice;
           this.minPrice = minPrice;
+          this.name = name;
           this.netPerformance = netPerformance;
           this.netPerformancePercent = netPerformancePercent;
           this.quantity = quantity;
+          this.symbol = symbol;
           this.transactionCount = transactionCount;
 
           if (isToday(parseISO(this.firstBuyDate))) {

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

@@ -1,7 +1,7 @@
 <gf-dialog-header
   mat-dialog-title
   [deviceType]="data.deviceType"
-  [title]="data.title ?? data.symbol"
+  [title]="name ?? symbol"
   (closeButtonClicked)="onClose()"
 ></gf-dialog-header>
 

apps/client/src/app/components/position/position.component.ts

@@ -64,8 +64,7 @@ export class PositionComponent implements OnDestroy, OnInit {
         baseCurrency: this.baseCurrency,
         deviceType: this.deviceType,
         locale: this.locale,
-        symbol: this.position?.symbol,
-        title: this.position?.name
+        symbol: this.position?.symbol
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'

apps/client/src/app/components/positions-table/positions-table.component.html

@@ -87,7 +87,7 @@
     }"
     (click)="
       !this.ignoreAssetClasses.includes(row.assetClass) &&
-        onOpenPositionDialog({ symbol: row.symbol, title: row.name })
+        onOpenPositionDialog({ symbol: row.symbol })
     "
   ></tr>
 </table>

apps/client/src/app/components/positions-table/positions-table.component.ts

@@ -57,14 +57,9 @@ export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
     this.routeQueryParams = route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (
-          params['positionDetailDialog'] &&
-          params['symbol'] &&
-          params['title']
-        ) {
+        if (params['positionDetailDialog'] && params['symbol']) {
           this.openPositionDialog({
-            symbol: params['symbol'],
-            title: params['title']
+            symbol: params['symbol']
           });
         }
       });
@@ -96,15 +91,9 @@ export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }*/
 
-  public onOpenPositionDialog({
-    symbol,
-    title
-  }: {
-    symbol: string;
-    title: string;
-  }): void {
+  public onOpenPositionDialog({ symbol }: { symbol: string }): void {
     this.router.navigate([], {
-      queryParams: { positionDetailDialog: true, symbol, title }
+      queryParams: { positionDetailDialog: true, symbol }
     });
   }
 
@@ -116,18 +105,11 @@ export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
     });
   }
 
-  public openPositionDialog({
-    symbol,
-    title
-  }: {
-    symbol: string;
-    title: string;
-  }): void {
+  public openPositionDialog({ symbol }: { symbol: string }): void {
     const dialogRef = this.dialog.open(PositionDetailDialog, {
       autoFocus: false,
       data: {
         symbol,
-        title,
         baseCurrency: this.baseCurrency,
         deviceType: this.deviceType,
         locale: this.locale

apps/client/src/app/components/transactions-table/transactions-table.component.html

@@ -255,8 +255,7 @@
     mat-row
     (click)="
       onOpenPositionDialog({
-        symbol: row.symbol,
-        title: row.SymbolProfile?.name
+        symbol: row.symbol
       })
     "
   ></tr>

apps/client/src/app/components/transactions-table/transactions-table.component.ts

@@ -86,8 +86,7 @@ export class TransactionsTableComponent
       .subscribe((params) => {
         if (params['positionDetailDialog'] && params['symbol']) {
           this.openPositionDialog({
-            symbol: params['symbol'],
-            title: params['title']
+            symbol: params['symbol']
           });
         }
       });
@@ -196,15 +195,9 @@ export class TransactionsTableComponent
     this.import.emit();
   }
 
-  public onOpenPositionDialog({
-    symbol,
-    title
-  }: {
-    symbol: string;
-    title: string;
-  }): void {
+  public onOpenPositionDialog({ symbol }: { symbol: string }): void {
     this.router.navigate([], {
-      queryParams: { positionDetailDialog: true, symbol, title }
+      queryParams: { positionDetailDialog: true, symbol }
     });
   }
 
@@ -216,18 +209,11 @@ export class TransactionsTableComponent
     this.transactionToClone.emit(aTransaction);
   }
 
-  public openPositionDialog({
-    symbol,
-    title
-  }: {
-    symbol: string;
-    title: string;
-  }): void {
+  public openPositionDialog({ symbol }: { symbol: string }): void {
     const dialogRef = this.dialog.open(PositionDetailDialog, {
       autoFocus: false,
       data: {
         symbol,
-        title,
         baseCurrency: this.baseCurrency,
         deviceType: this.deviceType,
         locale: this.locale