Bug fix, paginators and sort for user group and role lists

src/app/components/group-management/group-management.component.html

@@ -18,7 +18,7 @@
   </form>
 
   <div class="default-content">
-    <table mat-table [dataSource]="dataSource | groupFilter: searchText" class="mat-elevation-z8" matSort>
+    <table mat-table [dataSource]="dataSource | groupFilter: searchText" class="mat-elevation-z8" matSort #groupsSort="matSort">
 
       <ng-container matColumnDef="select" >
         <th mat-header-cell *matHeaderCellDef class="small-col">
@@ -67,7 +67,8 @@
 
 
     </table>
-    <mat-paginator [pageSizeOptions]="[5, 10, 20]"
+    <mat-paginator #groupsPaginator="matPaginator"
+      [pageSizeOptions]="[5, 10, 20]"
                    showFirstLastButtons
                    aria-label="Select page">
     </mat-paginator>

src/app/components/group-management/group-management.component.ts

@@ -10,7 +10,7 @@
 *
 * Author: Sylvain MATHIEU, Elise LEBEAU
 */
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {ServerService} from "../../services/server.service";
 import {ToasterService} from "../../services/toaster.service";
@@ -26,7 +26,6 @@ import {forkJoin} from "rxjs";
 import {MatPaginator} from "@angular/material/paginator";
 import {MatTableDataSource} from "@angular/material/table";
 
-import {User} from "@models/users/user";
 
 @Component({
   selector: 'app-group-management',
@@ -36,8 +35,8 @@ import {User} from "@models/users/user";
 export class GroupManagementComponent implements OnInit {
   server: Server;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChildren('groupsPaginator') groupsPaginator: QueryList<MatPaginator>;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChildren('groupsSort') groupsSort: QueryList<MatSort>;
 
   public displayedColumns = ['select', 'name', 'created_at', 'updated_at', 'is_builtin', 'delete'];
   selection = new SelectionModel<Group>(true, []);
@@ -65,13 +64,16 @@ export class GroupManagementComponent implements OnInit {
   }
 
   ngAfterViewInit() {
-    this.dataSource.paginator = this.paginator;
+    this.groupsPaginator.changes.subscribe((comps: QueryList <MatPaginator>) =>
-    this.dataSource.sort = this.sort;
+    {
+      this.dataSource.paginator = comps.first;
+    });
+    this.groupsSort.changes.subscribe((comps: QueryList<MatSort>) => {
+      this.dataSource.sort = comps.first;
+    });
     this.dataSource.sortingDataAccessor = (item, property) => {
       switch (property) {
-        case 'username':
+        case 'name':
-        case 'full_name':
-        case 'email':
           return item[property] ? item[property].toLowerCase() : '';
         default:
           return item[property];

src/app/components/role-management/role-management.component.html

@@ -21,7 +21,7 @@
 
   <div class="default-content">
     <div class="mat-elevation-z8">
-      <mat-table #table [dataSource]="dataSource | roleFilter: searchText" matSort>
+      <mat-table #table [dataSource]="dataSource | roleFilter: searchText" matSort #rolesSort="matSort">
         <ng-container matColumnDef="select">
           <mat-header-cell *matHeaderCellDef class="small-col">
             <mat-checkbox (change)="$event ? masterToggle() : null"
@@ -76,7 +76,8 @@
         <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
       </mat-table>
 
-      <mat-paginator [pageSizeOptions]="[5, 10, 20]"
+      <mat-paginator #rolesPaginator="matPaginator"
+        [pageSizeOptions]="[5, 10, 20]"
                      showFirstLastButtons
                      aria-label="Select page">
       </mat-paginator>

src/app/components/role-management/role-management.component.ts

@@ -10,7 +10,7 @@
 *
 * Author: Sylvain MATHIEU, Elise LEBEAU
 */
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {Server} from "@models/server";
 import {MatTableDataSource} from "@angular/material/table";
 import {SelectionModel} from "@angular/cdk/collections";
@@ -41,10 +41,11 @@ export class RoleManagementComponent implements OnInit {
   selection = new SelectionModel<Role>(true, []);
   searchText = '';
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChildren('rolesPaginator') rolesPaginator: QueryList<MatPaginator>;
-  @ViewChild(MatSort, {static: true}) sort: MatSort;
+  @ViewChildren('rolesSort') rolesSort: QueryList<MatSort>;
   isReady = false;
 
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -61,11 +62,25 @@ export class RoleManagementComponent implements OnInit {
       this.server = server;
       this.refresh();
     });
+
   }
 
   ngAfterViewInit() {
-    this.dataSource.paginator = this.paginator;
+    this.rolesPaginator.changes.subscribe((comps: QueryList <MatPaginator>) =>
-    this.dataSource.sort = this.sort;
+    {
+      this.dataSource.paginator = comps.first;
+    });
+    this.rolesSort.changes.subscribe((comps: QueryList<MatSort>) => {
+      this.dataSource.sort = comps.first;
+    });
+    this.dataSource.sortingDataAccessor = (item, property) => {
+      switch (property) {
+        case 'name':
+          return item[property] ? item[property].toLowerCase() : '';
+        default:
+          return item[property];
+      }
+    };
 
   }
 

src/app/components/user-management/user-management.component.html

@@ -21,7 +21,7 @@
 
   <div class="default-content">
     <div class="mat-elevation-z8">
-      <mat-table #table [dataSource]="dataSource | userFilter: searchText" matSort>
+      <mat-table #table [dataSource]="dataSource | userFilter: searchText" matSort #usersSort="matSort">
         <ng-container matColumnDef="select">
           <mat-header-cell *matHeaderCellDef class="small-col">
             <mat-checkbox (change)="$event ? masterToggle() : null"
@@ -84,9 +84,9 @@
         <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
       </mat-table>
 
-      <mat-paginator [pageSizeOptions]="[5, 10, 20]"
+      <mat-paginator #usersPaginator="matPaginator"
-                     showFirstLastButtons
+        [pageSizeOptions]="[5, 10, 20]"
-                     aria-label="Select page">
+          showFirstLastButtons aria-label="Select page">
       </mat-paginator>
     </div>
   </div>

src/app/components/user-management/user-management.component.ts

@@ -10,7 +10,7 @@
 *
 * Author: Sylvain MATHIEU, Elise LEBEAU
 */
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {Server} from "@models/server";
 import {MatSort} from "@angular/material/sort";
@@ -38,8 +38,8 @@ export class UserManagementComponent implements OnInit {
   selection = new SelectionModel<User>(true, []);
   searchText = '';
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChildren('usersPaginator') usersPaginator: QueryList<MatPaginator>;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChildren('usersSort') usersSort: QueryList<MatSort>;
   isReady = false;
 
   constructor(
@@ -60,8 +60,14 @@ export class UserManagementComponent implements OnInit {
   }
 
   ngAfterViewInit() {
-    this.dataSource.paginator = this.paginator;
+    this.usersPaginator.changes.subscribe((comps: QueryList <MatPaginator>) =>
-    this.dataSource.sort = this.sort;
+    {
+      this.dataSource.paginator = comps.first;
+    });
+    this.usersSort.changes.subscribe((comps: QueryList<MatSort>) => {
+      this.dataSource.sort = comps.first;
+    })
+
     this.dataSource.sortingDataAccessor = (item, property) => {
       switch (property) {
         case 'username':