sort

frontends/dnet-is-application/src/app/app.module.ts

@@ -25,6 +25,8 @@ import { MainMenuPanelsComponent } from './main-menu-panels/main-menu-panels.com
 import { MatExpansionModule } from '@angular/material/expansion';
 import { WfDialog, WfHistoryComponent } from './wf-history/wf-history.component';
 import { MatDialogModule } from '@angular/material/dialog';
+import {MatSortModule} from '@angular/material/sort'
+
 
 @NgModule({
   declarations: [
@@ -55,7 +57,8 @@ import { MatDialogModule } from '@angular/material/dialog';
     MatInputModule,
     MatTableModule,
     MatExpansionModule,
-    MatDialogModule
+    MatDialogModule,
+    MatSortModule
   ],
   providers: [],
   bootstrap: [AppComponent]

frontends/dnet-is-application/src/app/wf-history/wf-history.component.html

@@ -18,42 +18,42 @@
   <span><b>Count :</b> {{historyDatasource.filteredData.length}}</span>
 </p>
 
-<table mat-table [dataSource]="historyDatasource" class="mat-elevation-z8">
+<table mat-table [dataSource]="historyDatasource" matSort (matSortChange)="updateSort($event)" class="mat-elevation-z8">
 
   <ng-container matColumnDef="processId">
-    <th mat-header-cell *matHeaderCellDef  style="width: 15%;"> Process Id </th>
+    <th mat-header-cell *matHeaderCellDef style="width: 15%;" mat-sort-header sortActionDescription="Sort by Process ID"> Process Id </th>
     <td mat-cell *matCellDef="let element">
       <a (click)="openWfDialog(element)">{{element.processId}}</a>
     </td>
   </ng-container>
 
   <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Workflow Name </th>
+    <th mat-header-cell *matHeaderCellDef style="width: 15%;" mat-sort-header sortActionDescription="Sort by WF Name"> Workflow Name </th>
     <td mat-cell *matCellDef="let element"> {{element.name}} </td>
   </ng-container>
 
   <ng-container matColumnDef="family">
-    <th mat-header-cell *matHeaderCellDef style="width: 10%;"> Workflow Family </th>
+    <th mat-header-cell *matHeaderCellDef style="width: 10%;" mat-sort-header sortActionDescription="Sort by WF Family"> Workflow Family </th>
     <td mat-cell *matCellDef="let element"> {{element.family}} </td>
   </ng-container>
 
   <ng-container matColumnDef="dsName">
-    <th mat-header-cell *matHeaderCellDef style="width: 20%;"> Datasource </th>
+    <th mat-header-cell *matHeaderCellDef style="width: 20%;" mat-sort-header sortActionDescription="Sort by Datasource"> Datasource </th>
     <td mat-cell *matCellDef="let element"> {{element.dsName}} </td>
   </ng-container>
 
-  <ng-container matColumnDef="status" style="width: 10%;">
-    <th mat-header-cell *matHeaderCellDef> Status </th>
+  <ng-container matColumnDef="status">
+    <th mat-header-cell *matHeaderCellDef style="width: 10%;" mat-sort-header sortActionDescription="Sort by Status"> Status </th>
     <td mat-cell *matCellDef="let element"> {{element.status}} </td>
   </ng-container>
 
-  <ng-container matColumnDef="startDate" style="width: 15%;">
-    <th mat-header-cell *matHeaderCellDef> Start Date </th>
+  <ng-container matColumnDef="startDate">
+    <th mat-header-cell *matHeaderCellDef style="width: 15%;" mat-sort-header sortActionDescription="Sort by Start Date"> Start Date </th>
     <td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
   </ng-container>
 
-  <ng-container matColumnDef="endDate" style="width: 15%;">
-    <th mat-header-cell *matHeaderCellDef> End Date </th>
+  <ng-container matColumnDef="endDate">
+    <th mat-header-cell *matHeaderCellDef style="width: 15%;" mat-sort-header sortActionDescription="Sort by End Date"> End Date </th>
     <td mat-cell *matCellDef="let element"> {{element.endDate}} </td>
   </ng-container>
 

frontends/dnet-is-application/src/app/wf-history/wf-history.component.ts

@@ -1,19 +1,21 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject,AfterViewInit, ViewChild } from '@angular/core';
 import { ISService } from '../is.service';
 import { MatTableDataSource } from '@angular/material/table';
+import { MatSort, Sort } from '@angular/material/sort';
 import { WfHistoryEntry } from '../model/controller.model';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { KeyValue } from '../model/controller.model';
+import {LiveAnnouncer} from '@angular/cdk/a11y';
 
 @Component({
   selector: 'app-wf-history',
   templateUrl: './wf-history.component.html',
   styleUrls: ['./wf-history.component.css']
 })
-export class WfHistoryComponent {
+export class WfHistoryComponent implements AfterViewInit {
 
   historyDatasource: MatTableDataSource<WfHistoryEntry> = new MatTableDataSource<WfHistoryEntry>([]);
 
@@ -23,7 +25,7 @@ export class WfHistoryComponent {
   from: number = -1
   to: number = -1
 
-  constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog) {
+  constructor(public service: ISService, public route: ActivatedRoute, public dialog: MatDialog, private _liveAnnouncer: LiveAnnouncer) {
 
     let totalP = route.snapshot.paramMap.get('total');
     let fromP = route.snapshot.queryParamMap.get('from');
@@ -40,6 +42,13 @@ export class WfHistoryComponent {
     })
   }
 
+  @ViewChild(MatSort) sort: MatSort | undefined
+
+  ngAfterViewInit() {
+    if(this.sort) this.historyDatasource.sort = this.sort;
+  }
+
+
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
     this.historyDatasource.filter = filterValue;
@@ -50,6 +59,14 @@ export class WfHistoryComponent {
       data: wf
     });
   }
+
+  updateSort(sortState: Sort) {
+    if (sortState.direction) {
+      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+    } else {
+      this._liveAnnouncer.announce('Sorting cleared');
+    }
+  }
 }
 
 @Component({

frontends/dnet-is-application/src/styles.css

@@ -33,6 +33,8 @@ tr {
     height: auto !important;
 }
 
+th.mat-sort-header-sorted { color: black !important; }
+
 th, td {
     white-space: nowrap !important; 
     overflow: hidden !important;