From ec124c945956d0aa2ffffa6c260f63370d2bad82 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 3 Dec 2022 18:58:18 +0100
Subject: [PATCH] Extend sorting

---
 .../accounts-table.component.html             | 24 ++++++++++++++++---
 .../accounts-table.component.ts               |  2 ++
 .../activities-table.component.html           | 14 +++++++++--
 .../activities-table.component.ts             |  3 ++-
 .../lib/benchmark/benchmark.component.html    |  4 ++--
 5 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.html b/apps/client/src/app/components/accounts-table/accounts-table.component.html
index a1df7e2d5..7c12c735e 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.html
+++ b/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>
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.component.ts b/apps/client/src/app/components/accounts-table/accounts-table.component.ts
index df5a1c589..8ec0f86fb 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.component.ts
+++ b/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;
     }
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html
index b5a7d11a5..0945bbc04 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/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>
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.ts b/libs/ui/src/lib/activities-table/activities-table.component.ts
index b1ddc683a..7805527a3 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.ts
+++ b/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();
     }
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html
index c6ec23f69..e395553ec 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/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>