diff --git a/CHANGELOG.md b/CHANGELOG.md index 992af4047..19baa4cc3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +### Added + +- Added a simplified mode to the holdings table component + ### Changed - Made the details of holdings excluded from analysis accessible via the activities table diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html index e66dac725..2ed948478 100644 --- a/libs/ui/src/lib/holdings-table/holdings-table.component.html +++ b/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()" > @@ -34,9 +34,11 @@ ({{ element.assetProfile.assetSubClassLabel }}) } -
- {{ element.assetProfile.symbol }} -
+ @if (mode() === 'default') { +
+ {{ element.assetProfile.symbol }} +
+ }
@@ -181,7 +183,11 @@ - + (); public readonly locale = input(getLocale()); + public readonly mode = input<'default' | 'simple'>('default'); public readonly pageSize = model(Number.MAX_SAFE_INTEGER); public readonly holdingClicked = output(); @@ -62,6 +63,10 @@ export class GfHoldingsTableComponent { protected readonly dataSource = new MatTableDataSource([]); protected readonly displayedColumns = computed(() => { + if (this.mode() === 'simple') { + return ['icon', 'nameWithSymbol', 'performanceInPercentage']; + } + const columns = ['icon', 'nameWithSymbol', 'dateOfFirstActivity']; if (this.hasPermissionToShowQuantities()) { @@ -82,7 +87,19 @@ export class GfHoldingsTableComponent { return columns; }); - protected readonly isLoading = computed(() => !this.holdings()); + protected readonly isLoading = computed(() => { + return !this.holdings(); + }); + + protected readonly sortActive = computed(() => { + return this.mode() === 'default' + ? 'allocationInPercentage' + : 'assetProfile.name'; + }); + + protected readonly sortDirection = computed(() => { + return this.mode() === 'default' ? 'desc' : 'asc'; + }); public constructor() { this.dataSource.sortingDataAccessor = getLowercase;