Renamed groups to roles in the frontend

Working:
 Account
 Cost Centre
 Employee
 Product Group
 Product
 Role
 User
 Client

overlord/src/app/role/role-list/role-list-datasource.ts

@@ -0,0 +1,59 @@
+import {DataSource} from '@angular/cdk/collections';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import {map} from 'rxjs/operators';
+import {merge, Observable, of as observableOf} from 'rxjs';
+import {Role} from '../role';
+
+export class RoleListDatasource extends DataSource<Role> {
+
+  constructor(private paginator: MatPaginator, private sort: MatSort, public data: Role[]) {
+    super();
+  }
+
+  connect(): Observable<Role[]> {
+    const dataMutations = [
+      observableOf(this.data),
+      this.paginator.page,
+      this.sort.sortChange
+    ];
+
+    // Set the paginators length
+    this.paginator.length = this.data.length;
+
+    return merge(...dataMutations).pipe(map(() => {
+      return this.getPagedData(this.getSortedData([...this.data]));
+    }));
+  }
+
+  disconnect() {
+  }
+
+  private getPagedData(data: Role[]) {
+    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+    return data.splice(startIndex, this.paginator.pageSize);
+  }
+
+  private getSortedData(data: Role[]) {
+    if (!this.sort.active || this.sort.direction === '') {
+      return data;
+    }
+
+    return data.sort((a, b) => {
+      const isAsc = this.sort.direction === 'asc';
+      switch (this.sort.active) {
+        case 'name':
+          return compare(a.name, b.name, isAsc);
+        case 'id':
+          return compare(+a.id, +b.id, isAsc);
+        default:
+          return 0;
+      }
+    });
+  }
+}
+
+/** Simple sort comparator for example ID/Name columns (for user-side sorting). */
+function compare(a, b, isAsc) {
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}