From 81db3852e6063866b94b9a2880b37759b17ce436 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 19 Nov 2022 09:57:28 +0100
Subject: [PATCH] Feature/add sorting to accounts table (#1459)

* Add sorting

* Update changelog
---
 CHANGELOG.md                                     |  4 ++++
 .../accounts-table/accounts-table.component.html | 16 ++++++++++++----
 .../accounts-table/accounts-table.component.ts   |  7 ++++++-
 .../accounts-table/accounts-table.module.ts      |  2 ++
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ec7fb10d..9d3905111 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 support for sorting in the accounts table
+
 ### Changed
 
 - Improved the _Activities_ tab icon
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 3be8520dd..a1df7e2d5 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
@@ -1,4 +1,4 @@
-<table class="gf-table w-100" mat-table [dataSource]="dataSource">
+<table class="gf-table w-100" mat-table matSort [dataSource]="dataSource">
   <ng-container matColumnDef="status">
     <th
       *matHeaderCellDef
@@ -37,7 +37,12 @@
   </ng-container>
 
   <ng-container matColumnDef="currency">
-    <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
+    >
       <ng-container i18n>Currency</ng-container>
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
@@ -88,8 +93,9 @@
   <ng-container matColumnDef="balance">
     <th
       *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1 text-right"
+      class="d-none d-lg-table-cell justify-content-end px-1"
       mat-header-cell
+      mat-sort-header
     >
       <ng-container i18n>Cash Balance</ng-container>
     </th>
@@ -122,8 +128,9 @@
   <ng-container matColumnDef="value">
     <th
       *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1 text-right"
+      class="d-none d-lg-table-cell justify-content-end px-1"
       mat-header-cell
+      mat-sort-header
     >
       <ng-container i18n>Value</ng-container>
     </th>
@@ -158,6 +165,7 @@
       *matHeaderCellDef
       class="d-lg-none d-xl-none px-1 text-right"
       mat-header-cell
+      mat-sort-header
     >
       <ng-container i18n>Value</ng-container>
     </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 5e2e4886b..df5a1c589 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
@@ -6,8 +6,10 @@ import {
   OnChanges,
   OnDestroy,
   OnInit,
-  Output
+  Output,
+  ViewChild
 } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';
@@ -32,6 +34,8 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Output() accountDeleted = new EventEmitter<string>();
   @Output() accountToUpdate = new EventEmitter<AccountModel>();
 
+  @ViewChild(MatSort) sort: MatSort;
+
   public dataSource: MatTableDataSource<AccountModel> =
     new MatTableDataSource();
   public displayedColumns = [];
@@ -64,6 +68,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
 
     if (this.accounts) {
       this.dataSource = new MatTableDataSource(this.accounts);
+      this.dataSource.sort = this.sort;
 
       this.isLoading = false;
     }
diff --git a/apps/client/src/app/components/accounts-table/accounts-table.module.ts b/apps/client/src/app/components/accounts-table/accounts-table.module.ts
index b88ea7d56..4f09935f7 100644
--- a/apps/client/src/app/components/accounts-table/accounts-table.module.ts
+++ b/apps/client/src/app/components/accounts-table/accounts-table.module.ts
@@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
@@ -21,6 +22,7 @@ import { AccountsTableComponent } from './accounts-table.component';
     MatButtonModule,
     MatInputModule,
     MatMenuModule,
+    MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
     RouterModule