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