Improve label of cash positions

libs/common/src/lib/helper.spec.ts

@@ -156,6 +156,17 @@ describe('Helper', () => {
       ).toEqual('Cash (CHF)');
     });
 
+    it('Cash position without asset sub class label', () => {
+      expect(
+        getHoldingName({
+          assetSubClass: 'CASH',
+          assetSubClassLabel: undefined,
+          name: 'CHF',
+          symbol: 'CHF'
+        })
+      ).toEqual('CHF');
+    });
+
     it('Holding with name', () => {
       expect(
         getHoldingName({

libs/common/src/lib/helper.ts

@@ -462,7 +462,7 @@ export function getHoldingName({
   PortfolioPosition['assetProfile'],
   'assetSubClass' | 'assetSubClassLabel' | 'name' | 'symbol'
 >) {
-  if (isCashPosition({ assetSubClass })) {
+  if (isCashPosition({ assetSubClass }) && assetSubClassLabel) {
     return `${assetSubClassLabel} (${symbol})`;
   }
 

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -40,11 +40,16 @@
         mat-cell
         [class.w-100]="mode() === 'simple'"
       >
-        <div
+        @let holdingName = getHoldingName(element.assetProfile);
-          class="text-truncate"
+
-          [title]="getHoldingName(element.assetProfile)"
+        <div class="text-truncate" [title]="holdingName">
-        >
+          {{ holdingName }}
-          {{ getHoldingName(element.assetProfile) }}
+          @if (
+            !isCashPosition(element.assetProfile) &&
+            element.assetProfile.name === element.assetProfile.symbol
+          ) {
+            <span>({{ element.assetProfile.assetSubClassLabel }})</span>
+          }
         </div>
         @if (mode() === 'default') {
           <div>

libs/ui/src/lib/holdings-table/holdings-table.component.ts

@@ -91,6 +91,7 @@ export class GfHoldingsTableComponent {
   });
 
   protected readonly getHoldingName = getHoldingName;
+  protected readonly isCashPosition = isCashPosition;
 
   protected readonly isLoading = computed(() => {
     return !this.holdings();
@@ -107,7 +108,13 @@ export class GfHoldingsTableComponent {
   });
 
   public constructor() {
-    this.dataSource.sortingDataAccessor = getLowercase;
+    this.dataSource.sortingDataAccessor = (holding, path) => {
+      if (path === 'assetProfile.name') {
+        return getHoldingName(holding.assetProfile).toLocaleLowerCase();
+      }
+
+      return getLowercase(holding, path) as number | string;
+    };
 
     // Reactive data update
     effect(() => {