Update code with separate symbol property and code style enhancement

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) => {

libs/common/src/lib/interfaces/index.ts

@@ -80,8 +80,8 @@ export {
   Filter,
   FilterGroup,
   HistoricalDataItem,
-  HoldingWithParents,
   Holding,
+  HoldingWithParents,
   ImportResponse,
   InfoItem,
   InvestmentItem,

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

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