Feature/extend sorting in tables (#1491)

* Extend sorting

* Update changelog

CHANGELOG.md

@@ -11,6 +11,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Supported a note for asset profiles
 - Supported a manual currency for the activity fee
+- Extended the support for column sorting in the accounts table (name, platform, transactions)
+- Extended the support for column sorting in the activities table (name, symbol)
+- Extended the support for column sorting in the positions table (performance)
 
 ### Changed
 

apps/client/src/app/components/accounts-table/accounts-table.component.html

@@ -18,7 +18,15 @@
   </ng-container>
 
   <ng-container matColumnDef="account">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Name</th>
+    <th
+      *matHeaderCellDef
+      class="px-1"
+      i18n
+      mat-header-cell
+      mat-sort-header="name"
+    >
+      Name
+    </th>
     <td *matCellDef="let element" class="px-1" mat-cell>
       <gf-symbol-icon
         *ngIf="element.Platform?.url"
@@ -54,7 +62,12 @@
   </ng-container>
 
   <ng-container matColumnDef="platform">
-    <th *matHeaderCellDef class="d-none d-lg-table-cell px-1" mat-header-cell>
+    <th
+      *matHeaderCellDef
+      class="d-none d-lg-table-cell px-1"
+      mat-header-cell
+      mat-sort-header="Platform.name"
+    >
       <ng-container i18n>Platform</ng-container>
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
@@ -76,7 +89,12 @@
   </ng-container>
 
   <ng-container matColumnDef="transactions">
-    <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+    <th
+      *matHeaderCellDef
+      class="px-1 text-right"
+      mat-header-cell
+      mat-sort-header="transactionCount"
+    >
       <span class="d-block d-sm-none">#</span>
       <span class="d-none d-sm-block" i18n>Activities</span>
     </th>

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -13,6 +13,7 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';
+import { get } from 'lodash';
 import { Subject, Subscription } from 'rxjs';
 
 @Component({
@@ -69,6 +70,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
     if (this.accounts) {
       this.dataSource = new MatTableDataSource(this.accounts);
       this.dataSource.sort = this.sort;
+      this.dataSource.sortingDataAccessor = get;
 
       this.isLoading = false;
     }

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

@@ -84,7 +84,12 @@
     </ng-container>
 
     <ng-container matColumnDef="symbol">
-      <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+      <th
+        *matHeaderCellDef
+        class="px-1"
+        mat-header-cell
+        mat-sort-header="SymbolProfile.symbol"
+      >
         <ng-container i18n>Symbol</ng-container>
       </th>
       <td *matCellDef="let element" class="px-1" mat-cell>
@@ -282,7 +287,12 @@
     </ng-container>
 
     <ng-container matColumnDef="account">
-      <th *matHeaderCellDef class="px-1" mat-header-cell>
+      <th
+        *matHeaderCellDef
+        class="px-1"
+        mat-header-cell
+        mat-sort-header="Account.name"
+      >
         <span class="d-none d-lg-block" i18n>Account</span>
       </th>
       <td *matCellDef="let element" class="px-1" mat-cell>

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

@@ -20,7 +20,7 @@ import { OrderWithAccount } from '@ghostfolio/common/types';
 import Big from 'big.js';
 import { isUUID } from 'class-validator';
 import { endOfToday, format, isAfter } from 'date-fns';
-import { isNumber } from 'lodash';
+import { get, isNumber } from 'lodash';
 import { Subject, Subscription, distinctUntilChanged, takeUntil } from 'rxjs';
 
 @Component({
@@ -127,6 +127,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
       };
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
+      this.dataSource.sortingDataAccessor = get;
 
       this.updateFilters();
     }

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -45,6 +45,6 @@
     </td>
   </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
 </table>