ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-22 14:22:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Lebeau Elise 2022-02-08 08:23:33 +00:00 committed by Sylvain MATHIEU
parent 02285265e3
commit 8df255ebc3
6 changed files with 52 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/group-management/group-management.component.html
View File

@ -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>

20
src/app/components/group-management/group-management.component.ts
View File

@ -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;
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChildren('groupsPaginator') groupsPaginator: QueryList<MatPaginator>;
@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.dataSource.sort = this.sort;
this.groupsPaginator.changes.subscribe((comps: QueryList <MatPaginator>) =>
{
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 'full_name':
case 'email':
case 'name':
return item[property] ? item[property].toLowerCase() : '';
default:
return item[property];

5
src/app/components/role-management/role-management.component.html
View File

@ -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>

25
src/app/components/role-management/role-management.component.ts
View File

@ -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;
@ViewChild(MatSort, {static: true}) sort: MatSort;
@ViewChildren('rolesPaginator') rolesPaginator: QueryList<MatPaginator>;
@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.dataSource.sort = this.sort;
this.rolesPaginator.changes.subscribe((comps: QueryList <MatPaginator>) =>
{
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];
}
};
}

8
src/app/components/user-management/user-management.component.html
View File

@ -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]"
showFirstLastButtons
aria-label="Select page">
<mat-paginator #usersPaginator="matPaginator"
[pageSizeOptions]="[5, 10, 20]"
showFirstLastButtons aria-label="Select page">
</mat-paginator>
</div>
</div>

16
src/app/components/user-management/user-management.component.ts
View File

@ -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;
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChildren('usersPaginator') usersPaginator: QueryList<MatPaginator>;
@ViewChildren('usersSort') usersSort: QueryList<MatSort>;
isReady = false;
constructor(
@ -60,8 +60,14 @@ export class UserManagementComponent implements OnInit {
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.usersPaginator.changes.subscribe((comps: QueryList <MatPaginator>) =>
{
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':