Add simplified mode to holdings table component

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

@@ -3,9 +3,9 @@
     class="gf-table w-100"
     mat-table
     matSort
-    matSortActive="allocationInPercentage"
-    matSortDirection="desc"
     [dataSource]="dataSource"
+    [matSortActive]="sortActive()"
+    [matSortDirection]="sortDirection()"
   >
     <ng-container matColumnDef="icon" sticky>
       <th *matHeaderCellDef class="px-1" mat-header-cell></th>
@@ -181,7 +181,11 @@
       </td>
     </ng-container>
 
-    <tr *matHeaderRowDef="displayedColumns()" mat-header-row></tr>
+    <tr
+      *matHeaderRowDef="displayedColumns()"
+      mat-header-row
+      [class.d-none]="isSimplified()"
+    ></tr>
     <tr
       *matRowDef="let row; columns: displayedColumns()"
       mat-row

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

@@ -9,6 +9,8 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfEntityLogoComponent } from '../entity-logo';
+import { EntityLogoImageSourceService } from '../entity-logo/entity-logo-image-source.service';
+import { EntityLogoImageSourceServiceMock } from '../mocks/entity-logo-image-source.service.mock';
 import { holdings } from '../mocks/holdings';
 import { GfValueComponent } from '../value';
 import { GfHoldingsTableComponent } from './holdings-table.component';
@@ -28,6 +30,12 @@ export default {
         MatSortModule,
         MatTableModule,
         NgxSkeletonLoaderModule
+      ],
+      providers: [
+        {
+          provide: EntityLogoImageSourceService,
+          useValue: new EntityLogoImageSourceServiceMock()
+        }
       ]
     })
   ]
@@ -56,3 +64,10 @@ export const Default: Story = {
     pageSize: Number.MAX_SAFE_INTEGER
   }
 };
+
+export const Simplified: Story = {
+  args: {
+    ...Default.args,
+    isSimplified: true
+  }
+};

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

@@ -22,7 +22,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatSort, MatSortModule, SortDirection } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -51,6 +51,7 @@ export class GfHoldingsTableComponent {
   public readonly hasPermissionToShowQuantities = input(true);
   public readonly hasPermissionToShowValues = input(true);
   public readonly holdings = input.required<PortfolioPosition[] | undefined>();
+  public readonly isSimplified = input(false);
   public readonly locale = input(getLocale());
   public readonly pageSize = model(Number.MAX_SAFE_INTEGER);
 
@@ -62,6 +63,10 @@ export class GfHoldingsTableComponent {
   protected readonly dataSource = new MatTableDataSource<PortfolioPosition>([]);
 
   protected readonly displayedColumns = computed(() => {
+    if (this.isSimplified()) {
+      return ['icon', 'nameWithSymbol', 'performanceInPercentage'];
+    }
+
     const columns = ['icon', 'nameWithSymbol', 'dateOfFirstActivity'];
 
     if (this.hasPermissionToShowQuantities()) {
@@ -82,7 +87,17 @@ export class GfHoldingsTableComponent {
     return columns;
   });
 
-  protected readonly isLoading = computed(() => !this.holdings());
+  protected readonly isLoading = computed(() => {
+    return !this.holdings();
+  });
+
+  protected readonly sortActive = computed(() => {
+    return this.isSimplified() ? 'assetProfile.name' : 'allocationInPercentage';
+  });
+
+  protected readonly sortDirection = computed<SortDirection>(() => {
+    return this.isSimplified() ? 'asc' : 'desc';
+  });
 
   public constructor() {
     this.dataSource.sortingDataAccessor = getLowercase;