WIP: feat: table sort

projects/components/table/src/data/table-data-source.ts

@@ -65,7 +65,7 @@ export class PsTableDataSource<T, TTrigger = any> extends DataSource<T> {
   public sortColumn: string = null;
 
   /** The sort direction. Defaulted to asc. */
-  public sortDirection: 'asc' | 'desc' = 'asc';
+  public sortDirection: 'asc' | 'desc' | null = 'asc';
 
   /** The zero-based page index of the displayed list of items. Defaulted to 0. */
   public pageIndex = 0;
@@ -290,7 +290,7 @@ export class PsTableDataSource<T, TTrigger = any> extends DataSource<T> {
       currentPage: this.pageIndex,
       searchText: this.filter,
       sortColumn: this.sortColumn,
-      sortDirection: this.sortDirection,
+      sortDirection: this.sortDirection || null,
     };
     if (extended) {
       (data as IExtendedPsTableUpdateDataInfo<TTrigger>).triggerData = this._lastLoadTriggerData;
@@ -433,7 +433,7 @@ export class PsTableDataSource<T, TTrigger = any> extends DataSource<T> {
 
     return this.sortData(data.slice(), {
       sortColumn: this.sortColumn,
-      sortDirection: this.sortDirection,
+      sortDirection: this.sortDirection || null,
     });
   }
 

projects/components/table/src/services/table-settings.service.ts

@@ -4,7 +4,7 @@ import { EMPTY, Observable, of } from 'rxjs';
 export interface IPsTableSetting {
   columnBlacklist: string[];
   sortColumn: string;
-  sortDirection: 'asc' | 'desc';
+  sortDirection: 'asc' | 'desc' | null;
   pageSize: number;
 }
 

projects/components/table/src/subcomponents/table-data.component.html

@@ -1,4 +1,14 @@
-<table mat-table multiTemplateDataRows class="ps-table-data__table" [dataSource]="dataSource" [trackBy]="dataSource.trackBy">
+<table
+  mat-table
+  matSort
+  multiTemplateDataRows
+  class="ps-table-data__table"
+  [dataSource]="dataSource"
+  [trackBy]="dataSource.trackBy"
+  [matSortActive]="sortColumn"
+  [matSortDirection]="sortDirection"
+  (matSortChange)="onSortChanged($event)"
+>
   <!-- Checkbox Column -->
   <ng-container matColumnDef="select">
     <th mat-header-cell *matHeaderCellDef>
@@ -23,7 +33,14 @@
   <!-- Dynamic Columns -->
   <ng-container *ngFor="let columnDef of columnDefs">
     <ng-container [matColumnDef]="columnDef.property">
-      <th mat-header-cell *matHeaderCellDef [ngStyle]="columnDef.headerStyles" [style.width]="columnDef.width">
+      <th
+        mat-header-cell
+        [mat-sort-header]="columnDef.property"
+        [disabled]="!columnDef.sortable"
+        *matHeaderCellDef
+        [ngStyle]="columnDef.headerStyles"
+        [style.width]="columnDef.width"
+      >
         <ng-container *ngIf="!columnDef.headerTemplate; else customHeaderTemplate">
           {{ columnDef.header }}
         </ng-container>

projects/components/table/src/subcomponents/table-data.component.ts

@@ -14,6 +14,7 @@ import { IPsTableIntlTexts } from '@prosoft/components/core';
 import { PsTableDataSource } from '../data/table-data-source';
 import { PsTableColumnDirective, PsTableRowDetailDirective } from '../directives/table.directives';
 import { Subscription } from 'rxjs';
+import { Sort } from '@angular/material/sort';
 
 @Component({
   selector: 'ps-table-data',
@@ -32,6 +33,8 @@ export class PsTableDataComponent implements OnChanges {
   @Input() public refreshable: boolean;
   @Input() public settingsEnabled: boolean;
   @Input() public displayedColumns: string[];
+  @Input() public sortColumn: string;
+  @Input() public sortDirection: 'asc' | 'desc' | null;
   /**
    * @deprecated Please use the action definition in PsTableDataSource
    */
@@ -44,6 +47,7 @@ export class PsTableDataComponent implements OnChanges {
 
   @Output() public showSettingsClicked = new EventEmitter<void>();
   @Output() public refreshDataClicked = new EventEmitter<void>();
+  @Output() public sortChanged = new EventEmitter<Sort>();
 
   private _dataSourceChangesSub = Subscription.EMPTY;
 
@@ -66,6 +70,10 @@ export class PsTableDataComponent implements OnChanges {
     this.refreshDataClicked.emit();
   }
 
+  public onSortChanged(sort: Sort) {
+    this.sortChanged.emit(sort);
+  }
+
   public toggleRowDetail(item: { [key: string]: any }) {
     this.rowDetail.toggle(item);
     this.cd.markForCheck();

projects/components/table/src/subcomponents/table-header.component.ts

@@ -8,6 +8,7 @@ import {
   ViewEncapsulation,
   HostBinding,
 } from '@angular/core';
+import { Sort } from '@angular/material/sort';
 import { IPsTableIntlTexts } from '@prosoft/components/core';
 import { IPsTableSortDefinition } from '../models';
 
@@ -83,12 +84,12 @@ export class PsTableHeaderComponent {
   @Input() public selectedRows: any[];
   @Input() public showSorting: boolean;
   @Input() public sortColumn: string;
-  @Input() public sortDirection: 'asc' | 'desc';
+  @Input() public sortDirection: 'asc' | 'desc' | null;
   @Input() public sortDefinitions: IPsTableSortDefinition[] = [];
   @Input() public filterable: boolean;
   @Input() public searchText: string;
 
-  @Output() public sortChanged = new EventEmitter<{ sortColumn: string; sortDirection: 'asc' | 'desc' }>();
+  @Output() public sortChanged = new EventEmitter<Sort>();
   @Output() public searchChanged = new EventEmitter<string>();
 
   @HostBinding('style.padding-top') public get paddingTop() {

projects/components/table/src/subcomponents/table-settings.component.spec.ts

@@ -17,6 +17,7 @@ import { PsTableSettingsComponent } from './table-settings.component';
 import { PsTableSortComponent } from './table-sort.component';
 import { By } from '@angular/platform-browser';
 import { delay } from 'rxjs/operators';
+import { Sort } from '@angular/material/sort';
 
 @Component({
   selector: 'ps-test-component',
@@ -202,8 +203,8 @@ describe('PsTableSettingsComponent', () => {
           sortDirection: sortDirection,
         } as Partial<IPsTableSetting>) as any;
       }
-      function createColumnDef(sortColumn: string, sortDirection: 'asc' | 'desc') {
-        return { sortColumn: sortColumn, sortDirection: sortDirection };
+      function createColumnDef(sortColumn: string, sortDirection: 'asc' | 'desc'): Sort {
+        return { active: sortColumn, direction: sortDirection };
       }
 
       it('should remove sort column from blacklist', fakeAsync(() => {

projects/components/table/src/subcomponents/table-settings.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
+import { Sort } from '@angular/material/sort';
 import { IPsTableIntlTexts } from '@prosoft/components/core';
 import { Observable, Subscription } from 'rxjs';
 import { first, map } from 'rxjs/operators';
@@ -63,12 +64,12 @@ export class PsTableSettingsComponent implements OnInit {
     return !settings.columnBlacklist.some((x) => x === columnDef.property);
   }
 
-  public onSortChanged(event: { sortColumn: string; sortDirection: 'asc' | 'desc' }, settings: IPsTableSetting) {
-    if (settings.sortColumn !== event.sortColumn) {
-      settings.sortColumn = event.sortColumn;
-      settings.columnBlacklist = settings.columnBlacklist.filter((x) => x !== event.sortColumn);
+  public onSortChanged(event: Sort, settings: IPsTableSetting) {
+    if (settings.sortColumn !== event.active) {
+      settings.sortColumn = event.active;
+      settings.columnBlacklist = settings.columnBlacklist.filter((x) => x !== event.active);
     }
-    settings.sortDirection = event.sortDirection;
+    settings.sortDirection = event.direction || null;
   }
 
   public onColumnVisibilityChange(event: MatCheckboxChange, settings: IPsTableSetting, columnDef: PsTableColumnDirective) {

projects/components/table/src/subcomponents/table-sort.component.spec.ts

@@ -5,6 +5,7 @@ import { MatButton, MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSelectModule } from '@angular/material/select';
+import { Sort } from '@angular/material/sort';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IPsTableSortDefinition } from '../models';
@@ -35,7 +36,7 @@ export class TestComponent {
 
   @ViewChild(PsTableSortComponent, { static: true }) tableSort: PsTableSortComponent;
 
-  public onSortChanged(_event: any) {}
+  public onSortChanged(_event: Sort) {}
 }
 
 describe('PsTableSortComponent', () => {
@@ -62,14 +63,14 @@ describe('PsTableSortComponent', () => {
 
     descButton.triggerEventHandler('click', new MouseEvent('click'));
     expect(component.onSortChanged).toHaveBeenCalledWith({
-      sortColumn: 'prop',
-      sortDirection: 'desc',
+      active: 'prop',
+      direction: 'desc',
     });
 
     ascButton.triggerEventHandler('click', new MouseEvent('click'));
     expect(component.onSortChanged).toHaveBeenCalledWith({
-      sortColumn: 'prop',
-      sortDirection: 'asc',
+      active: 'prop',
+      direction: 'asc',
     });
 
     component.sortDefinitions = [
@@ -87,8 +88,8 @@ describe('PsTableSortComponent', () => {
     const itemNode = matOptionNodes.item(1);
     itemNode.dispatchEvent(new Event('click'));
     expect(component.onSortChanged).toHaveBeenCalledWith({
-      sortColumn: 'newprop',
-      sortDirection: 'asc',
+      active: 'newprop',
+      direction: 'asc',
     });
   });