From f7bf6e652bac3a33861794112c55ac1cbd3ae23c Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 25 Jun 2022 11:33:59 +0200
Subject: [PATCH] Feature/add icon and name to positions table (#1040)

* Add icon and name

* Update changelog
---
 CHANGELOG.md                                  |  4 ++
 .../src/app/portfolio/portfolio.controller.ts |  1 +
 .../src/app/portfolio/portfolio.service.ts    |  1 +
 .../positions-table.component.html            | 65 ++++++++++---------
 .../positions-table.component.ts              |  9 +--
 .../positions-table/positions-table.module.ts |  1 -
 .../enhanced-symbol-profile.interface.ts      |  1 +
 .../portfolio-public-details.interface.ts     |  1 +
 8 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eaca8f744..dfba98d14 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 an icon and name column to the positions table
+
 ### Changed
 
 - Changed the data gathering by symbol endpoint to delete data first
diff --git a/apps/api/src/app/portfolio/portfolio.controller.ts b/apps/api/src/app/portfolio/portfolio.controller.ts
index e61ab79ee..ee11e4d1b 100644
--- a/apps/api/src/app/portfolio/portfolio.controller.ts
+++ b/apps/api/src/app/portfolio/portfolio.controller.ts
@@ -346,6 +346,7 @@ export class PortfolioController {
         netPerformancePercent: portfolioPosition.netPerformancePercent,
         sectors: hasDetails ? portfolioPosition.sectors : [],
         symbol: portfolioPosition.symbol,
+        url: portfolioPosition.url,
         value: portfolioPosition.value / totalValue
       };
     }
diff --git a/apps/api/src/app/portfolio/portfolio.service.ts b/apps/api/src/app/portfolio/portfolio.service.ts
index 10d492f50..b7f9248b4 100644
--- a/apps/api/src/app/portfolio/portfolio.service.ts
+++ b/apps/api/src/app/portfolio/portfolio.service.ts
@@ -441,6 +441,7 @@ export class PortfolioService {
         sectors: symbolProfile.sectors,
         symbol: item.symbol,
         transactionCount: item.transactionCount,
+        url: symbolProfile.url,
         value: value.toNumber()
       };
     }
diff --git a/apps/client/src/app/components/positions-table/positions-table.component.html b/apps/client/src/app/components/positions-table/positions-table.component.html
index 524e54c07..3d9ac93e9 100644
--- a/apps/client/src/app/components/positions-table/positions-table.component.html
+++ b/apps/client/src/app/components/positions-table/positions-table.component.html
@@ -6,6 +6,17 @@
   mat-table
   [dataSource]="dataSource"
 >
+  <ng-container matColumnDef="icon">
+    <th *matHeaderCellDef class="px-1" mat-header-cell></th>
+    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <gf-symbol-icon
+        *ngIf="element.url"
+        [tooltip]="element.name"
+        [url]="element.url"
+      ></gf-symbol-icon>
+    </td>
+  </ng-container>
+
   <ng-container matColumnDef="symbol">
     <th *matHeaderCellDef class="px-1" i18n mat-header-cell mat-sort-header>
       Symbol
@@ -15,49 +26,45 @@
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="value">
+  <ng-container matColumnDef="name">
     <th
       *matHeaderCellDef
-      class="d-none d-lg-table-cell justify-content-end px-1"
+      class="d-none d-lg-table-cell px-1"
       i18n
       mat-header-cell
       mat-sort-header
     >
-      Value
+      Name
     </th>
-    <td class="d-none d-lg-table-cell px-1" mat-cell *matCellDef="let element">
-      <div class="d-flex justify-content-end">
-        <gf-value
-          [isCurrency]="true"
-          [locale]="locale"
-          [value]="isLoading ? undefined : element.value"
-        ></gf-value>
-      </div>
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
+      <ng-container *ngIf="element.name !== element.symbol">{{
+        element.name
+      }}</ng-container>
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="performance">
+  <ng-container matColumnDef="value">
     <th
       *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1 text-right"
+      class="d-none d-lg-table-cell justify-content-end px-1"
       i18n
       mat-header-cell
+      mat-sort-header
     >
-      Performance
+      Value
     </th>
     <td class="d-none d-lg-table-cell px-1" mat-cell *matCellDef="let element">
       <div class="d-flex justify-content-end">
         <gf-value
-          [colorizeSign]="true"
-          [isPercent]="true"
+          [isCurrency]="true"
           [locale]="locale"
-          [value]="isLoading ? undefined : element.netPerformancePercent"
+          [value]="isLoading ? undefined : element.value"
         ></gf-value>
       </div>
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="allocationInvestment">
+  <ng-container matColumnDef="allocationCurrent">
     <th
       *matHeaderCellDef
       class="justify-content-end px-1"
@@ -65,41 +72,41 @@
       mat-header-cell
       mat-sort-header
     >
-      Initial Allocation
+      Allocation
     </th>
-    <td mat-cell *matCellDef="let element">
-      <div class="d-flex justify-content-end px-1">
+    <td *matCellDef="let element" class="px-1" mat-cell>
+      <div class="d-flex justify-content-end">
         <gf-value
           [isPercent]="true"
           [locale]="locale"
-          [value]="isLoading ? undefined : element.allocationInvestment"
+          [value]="isLoading ? undefined : element.allocationCurrent"
         ></gf-value>
       </div>
     </td>
   </ng-container>
 
-  <ng-container matColumnDef="allocationCurrent">
+  <ng-container matColumnDef="performance">
     <th
       *matHeaderCellDef
-      class="justify-content-end px-1"
+      class="d-none d-lg-table-cell px-1 text-right"
       i18n
       mat-header-cell
-      mat-sort-header
     >
-      Current Allocation
+      Performance
     </th>
-    <td *matCellDef="let element" class="px-1" mat-cell>
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       <div class="d-flex justify-content-end">
         <gf-value
+          [colorizeSign]="true"
           [isPercent]="true"
           [locale]="locale"
-          [value]="isLoading ? undefined : element.allocationCurrent"
+          [value]="isLoading ? undefined : element.netPerformancePercent"
         ></gf-value>
       </div>
     </td>
   </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr
     *matRowDef="let row; columns: displayedColumns"
     mat-row
diff --git a/apps/client/src/app/components/positions-table/positions-table.component.ts b/apps/client/src/app/components/positions-table/positions-table.component.ts
index 4f8371fc0..22e9e282a 100644
--- a/apps/client/src/app/components/positions-table/positions-table.component.ts
+++ b/apps/client/src/app/components/positions-table/positions-table.component.ts
@@ -55,19 +55,14 @@ export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
   public ngOnInit() {}
 
   public ngOnChanges() {
-    this.displayedColumns = ['symbol'];
+    this.displayedColumns = ['icon', 'symbol', 'name'];
 
     if (this.hasPermissionToShowValues) {
       this.displayedColumns.push('value');
     }
 
-    this.displayedColumns.push('performance');
-
-    if (this.hasPermissionToShowValues) {
-      this.displayedColumns.push('allocationInvestment');
-    }
-
     this.displayedColumns.push('allocationCurrent');
+    this.displayedColumns.push('performance');
 
     this.isLoading = true;
 
diff --git a/apps/client/src/app/components/positions-table/positions-table.module.ts b/apps/client/src/app/components/positions-table/positions-table.module.ts
index 9461a8907..e9be0932e 100644
--- a/apps/client/src/app/components/positions-table/positions-table.module.ts
+++ b/apps/client/src/app/components/positions-table/positions-table.module.ts
@@ -35,7 +35,6 @@ import { PositionsTableComponent } from './positions-table.component';
     NgxSkeletonLoaderModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPositionsTableModule {}
diff --git a/libs/common/src/lib/interfaces/enhanced-symbol-profile.interface.ts b/libs/common/src/lib/interfaces/enhanced-symbol-profile.interface.ts
index 657c9acd6..1320edf0e 100644
--- a/libs/common/src/lib/interfaces/enhanced-symbol-profile.interface.ts
+++ b/libs/common/src/lib/interfaces/enhanced-symbol-profile.interface.ts
@@ -18,4 +18,5 @@ export interface EnhancedSymbolProfile {
   symbol: string;
   symbolMapping?: { [key: string]: string };
   updatedAt: Date;
+  url?: string;
 }
diff --git a/libs/common/src/lib/interfaces/portfolio-public-details.interface.ts b/libs/common/src/lib/interfaces/portfolio-public-details.interface.ts
index 61046eb61..a8a96030b 100644
--- a/libs/common/src/lib/interfaces/portfolio-public-details.interface.ts
+++ b/libs/common/src/lib/interfaces/portfolio-public-details.interface.ts
@@ -13,6 +13,7 @@ export interface PortfolioPublicDetails {
       | 'netPerformancePercent'
       | 'sectors'
       | 'symbol'
+      | 'url'
       | 'value'
     >;
   };