Feature/add icon and name to positions table (#1040)

* Add icon and name

* Update changelog

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

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
       };
     }

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()
       };
     }

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

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;
 

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 {}

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;
 }

libs/common/src/lib/interfaces/portfolio-public-details.interface.ts

@@ -13,6 +13,7 @@ export interface PortfolioPublicDetails {
       | 'netPerformancePercent'
       | 'sectors'
       | 'symbol'
+      | 'url'
       | 'value'
     >;
   };