From 429e05fbb73199fa3265b9410c6abfffcd7fca36 Mon Sep 17 00:00:00 2001
From: JoryHogeveen <jory.johan.hogeveen@gmail.com>
Date: Mon, 18 Nov 2024 15:14:22 +0100
Subject: [PATCH] Update code with separate symbol property and code style
 enhancement

---
 .../allocations/allocations-page.component.ts | 30 +++++++++----------
 libs/common/src/lib/interfaces/index.ts       |  2 +-
 .../top-holdings/top-holdings.component.html  |  4 ++-
 .../top-holdings/top-holdings.component.scss  | 10 +++++++
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
index 79dbe6b35..6079b56d4 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
@@ -490,24 +490,21 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
           name,
           allocationInPercentage:
             this.totalValueInEtf > 0 ? value / this.totalValueInEtf : 0,
-          valueInBaseCurrency: value,
           parents: Object.entries(this.portfolioDetails.holdings)
             .map(([symbol, holding]) => {
-              if (holding.holdings) {
-                const parentHoldings = holding.holdings;
-                for (const index in parentHoldings) {
-                  if (name === parentHoldings[index].name) {
-                    return {
-                      name: holding.name
-                        ? holding.name + ' (' + symbol + ')'
-                        : symbol,
+              if (holding.holdings.length > 0) {
+                const parentHolding = holding.holdings.find((parentHolding) => {
+                  return parentHolding.name === name;
+                });
+                return parentHolding
+                  ? {
                       allocationInPercentage:
-                        parentHoldings[index].valueInBaseCurrency / value,
-                      valueInBaseCurrency:
-                        parentHoldings[index].valueInBaseCurrency
-                    };
-                  }
-                }
+                        parentHolding.valueInBaseCurrency / value,
+                      name: holding.name,
+                      symbol: prettifySymbol(symbol),
+                      valueInBaseCurrency: parentHolding.valueInBaseCurrency
+                    }
+                  : null;
               }
 
               return null;
@@ -515,7 +512,8 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
             .filter((item) => null !== item)
             .sort((a, b) => {
               return b.allocationInPercentage - a.allocationInPercentage;
-            })
+            }),
+          valueInBaseCurrency: value
         };
       })
       .sort((a, b) => {
diff --git a/libs/common/src/lib/interfaces/index.ts b/libs/common/src/lib/interfaces/index.ts
index 1b212484d..eb28a6d16 100644
--- a/libs/common/src/lib/interfaces/index.ts
+++ b/libs/common/src/lib/interfaces/index.ts
@@ -80,8 +80,8 @@ export {
   Filter,
   FilterGroup,
   HistoricalDataItem,
-  HoldingWithParents,
   Holding,
+  HoldingWithParents,
   ImportResponse,
   InfoItem,
   InvestmentItem,
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 7231cc068..19d853767 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.html
@@ -73,7 +73,9 @@
               @for (parentHolding of element.parents; track parentHolding) {
                 <mat-list-item>
                   <span matListItemTitle style="font-size: inherit"
-                    >{{ parentHolding.name }}:</span
+                    >{{ parentHolding.name }} ({{
+                      parentHolding.symbol
+                    }}):</span
                   >
                   <span matListItemMeta>
                     <gf-value
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 7604aaa63..301596a86 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.scss
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.scss
@@ -18,4 +18,14 @@
   tr:not(.expanded) + tr.holding-detail td {
     border-bottom: 0;
   }
+
+  .holdingParents {
+    padding: 1em 0;
+
+    table,
+    tr,
+    td {
+      background-color: transparent;
+    }
+  }
 }