feat(process-explorer/frontend): Add sort to column headers (#357)

* Add sort to colum headers

* Fix build

* Refactor variable

* Remove comma

prototypes/process-explorer/oss-frontend/src/app/app.module.ts

@@ -12,7 +12,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatMenuModule } from '@angular/material/menu';
-
+import { MatSortModule } from '@angular/material/sort';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -38,7 +38,8 @@ import { ProcessesComponent } from './components/processes/processes.component';
     MatPaginatorModule,
     MatTableModule,
     MatExpansionModule,
-    MatMenuModule
+    MatMenuModule,
+    MatSortModule
   ],
   providers: [],
   bootstrap: [AppComponent]

prototypes/process-explorer/oss-frontend/src/app/components/processes/processes.component.html

@@ -2,9 +2,9 @@
 <h1 class="header">Processes</h1>
 <div class="table-all mat-elevation-z8" >
 
-    <mat-table #table [dataSource]="dataSource" multiTemplateDataRows>
+    <mat-table #table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" multiTemplateDataRows>
     <ng-container *ngFor="let column of displayedColumns" matColumnDef="{{column.key}}" >
-      <th mat-header-cell *matHeaderCellDef> {{column.header}} </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.header}} </th>
       <td mat-cell *matCellDef="let element"> {{element[column.key]}} </td>
     </ng-container>
 

prototypes/process-explorer/oss-frontend/src/app/components/processes/processes.component.scss

@@ -81,4 +81,8 @@
 
   .element-description-attribution {
     opacity: 0.5;
+  }
+
+  th.mat-sort-header-sorted {
+    color: black;
   }

prototypes/process-explorer/oss-frontend/src/app/components/processes/processes.component.spec.ts

@@ -15,7 +15,11 @@ describe('ProcessesComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [ProcessesComponent],
-      imports: [MatPaginatorModule, MatToolbarModule, MatTableModule, BrowserAnimationsModule]
+      imports: [
+        MatPaginatorModule, 
+        MatToolbarModule, 
+        MatTableModule, 
+        BrowserAnimationsModule]
     });
     fixture = TestBed.createComponent(ProcessesComponent);
     component = fixture.componentInstance;

prototypes/process-explorer/oss-frontend/src/app/components/processes/processes.component.ts

@@ -5,6 +5,8 @@ import { MatTableDataSource } from '@angular/material/table';
 import { ProcessInfo, ProcessTable } from 'src/app/DTOs/ProcessInfo';
 import { ProcessesService } from 'src/app/services/processes.service';
 import { animate, state, style, transition, trigger } from '@angular/animations';
+import { MatSort, Sort } from '@angular/material/sort';
+import {LiveAnnouncer} from '@angular/cdk/a11y';
 
 
 @Component({
@@ -28,15 +30,17 @@ export class ProcessesComponent implements AfterViewInit {
   displayedColumnsKeys: string[];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private processService: ProcessesService) {
+  constructor(private processService: ProcessesService, private liveAnnouncer: LiveAnnouncer) {
     this.processService.getProcesses('Processes').subscribe(process => this.processesData = process);
     this.displayedColumnsKeys = this.displayedColumns.map(column => column.key);
     this.dataSource = new MatTableDataSource<ProcessTable>(this.processesData);
   }
 
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
   }
   ngOnInit() {
   }
@@ -48,5 +52,13 @@ export class ProcessesComponent implements AfterViewInit {
   onItemSelected(idx: number) {
     console.log(idx);
   }
+
+  announceSortChange(sortState: Sort) {
+    if (sortState.direction) {
+      this.liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+    } else {
+      this.liveAnnouncer.announce('Sorting cleared');
+    }
+  }
 }