From b2f094602ca018d63c2bf25a1f0b4dcdedf18251 Mon Sep 17 00:00:00 2001
From: JoryHogeveen <jory.johan.hogeveen@gmail.com>
Date: Mon, 18 Nov 2024 16:02:52 +0100
Subject: [PATCH] Convert to table layout with less padding for better UI

---
 .../top-holdings/top-holdings.component.html  | 71 ++++++++++++-------
 .../top-holdings/top-holdings.component.scss  | 19 ++++-
 .../top-holdings/top-holdings.component.ts    |  8 ++-
 3 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.html b/libs/ui/src/lib/top-holdings/top-holdings.component.html
index 0f6e24d1b..caf150469 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.html
@@ -85,31 +85,52 @@
               }
             </div>
 
-            <mat-list>
-              @for (parentHolding of element.parents; track parentHolding) {
-                <mat-list-item>
-                  <span matListItemTitle style="font-size: inherit"
-                    >{{ parentHolding.name }} ({{
-                      parentHolding.symbol
-                    }}):</span
-                  >
-                  <span matListItemMeta>
-                    <gf-value
-                      [isCurrency]="true"
-                      [locale]="locale"
-                      [value]="parentHolding?.valueInBaseCurrency"
-                    />
-                  </span>
-                  <span matListItemMeta>
-                    <gf-value
-                      [isPercent]="true"
-                      [locale]="locale"
-                      [value]="parentHolding?.allocationInPercentage"
-                    />
-                  </span>
-                </mat-list-item>
-              }
-            </mat-list>
+            <table mat-table [dataSource]="element.parents">
+              <ng-container matColumnDef="name">
+                <th *matHeaderCellDef mat-header-cell>Name</th>
+                <td *matCellDef="let parentHolding" mat-cell>
+                  <span
+                    class="colorBadge"
+                    [style.background-color]="getColor(parentHolding?.symbol)"
+                  ></span>
+                  {{ parentHolding?.name }}
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="symbol">
+                <th *matHeaderCellDef mat-header-cell>Symbol</th>
+                <td *matCellDef="let parentHolding" mat-cell>
+                  {{ parentHolding?.symbol }}
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="valueInBaseCurrency">
+                <th *matHeaderCellDef mat-header-cell>Value</th>
+                <td *matCellDef="let parentHolding" mat-cell>
+                  <gf-value
+                    [isCurrency]="true"
+                    [locale]="locale"
+                    [value]="parentHolding?.valueInBaseCurrency"
+                  />
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="allocationInPercentage">
+                <th *matHeaderCellDef mat-header-cell>Allocation</th>
+                <td *matCellDef="let parentHolding" mat-cell>
+                  <gf-value
+                    [isPercent]="true"
+                    [locale]="locale"
+                    [value]="parentHolding?.allocationInPercentage"
+                  />
+                </td>
+              </ng-container>
+              <tr
+                *matHeaderRowDef="displayedHoldingParentColumns"
+                mat-header-row
+              ></tr>
+              <tr
+                *matRowDef="let row; columns: displayedHoldingParentColumns"
+                mat-row
+              ></tr>
+            </table>
           </div>
         </div>
       </td>
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.scss b/libs/ui/src/lib/top-holdings/top-holdings.component.scss
index d49dc926f..e9d49cbee 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.scss
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.scss
@@ -21,6 +21,7 @@
 
   .holdingParents {
     padding: 1em 0;
+    --table-padding: 0.5em;
 
     .holdingParentProportionChart {
       height: 2em;
@@ -28,15 +29,31 @@
       div {
         box-sizing: border-box;
         line-height: 2em;
-        padding: 0 0.5em;
+        padding: 0 var(--table-padding);
         overflow: hidden;
       }
     }
 
+    .colorBadge {
+      width: 0.75em;
+      height: 0.75em;
+      border-radius: 100%;
+      display: inline-block;
+    }
+
     table,
     tr,
+    th,
     td {
       background-color: transparent;
     }
+
+    tr {
+      height: auto;
+    }
+    th,
+    td {
+      padding: var(--table-padding);
+    }
   }
 }
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.ts b/libs/ui/src/lib/top-holdings/top-holdings.component.ts
index 25333f48f..ce3fea7bc 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.ts
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.ts
@@ -20,7 +20,6 @@ import {
   ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatListModule } from '@angular/material/list';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -60,7 +59,6 @@ const {
     CommonModule,
     GfValueComponent,
     MatButtonModule,
-    MatListModule,
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
@@ -92,6 +90,12 @@ export class GfTopHoldingsComponent implements OnChanges, OnDestroy {
     'valueInBaseCurrency',
     'allocationInPercentage'
   ];
+  public displayedHoldingParentColumns: string[] = [
+    'name',
+    'symbol',
+    'valueInBaseCurrency',
+    'allocationInPercentage'
+  ];
   public isLoading = true;
 
   private unsubscribeSubject = new Subject<void>();