mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-22 22:32:21 +00:00
group details, add members pagination
This commit is contained in:
parent
a4e8dee2e1
commit
a7f6743860
@ -284,6 +284,7 @@ import { GroupDetailsComponent } from './components/group-details/group-details.
|
|||||||
import { UserDetailComponent } from './components/user-management/user-detail/user-detail.component';
|
import { UserDetailComponent } from './components/user-management/user-detail/user-detail.component';
|
||||||
import { AddUserToGroupDialogComponent } from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component';
|
import { AddUserToGroupDialogComponent } from './components/group-details/add-user-to-group-dialog/add-user-to-group-dialog.component';
|
||||||
import { RemoveUserToGroupDialogComponent } from './components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component';
|
import { RemoveUserToGroupDialogComponent } from './components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component';
|
||||||
|
import { PaginatorPipe } from './components/group-details/paginator.pipe';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
@ -482,7 +483,8 @@ import { RemoveUserToGroupDialogComponent } from './components/group-details/rem
|
|||||||
GroupDetailsComponent,
|
GroupDetailsComponent,
|
||||||
UserDetailComponent,
|
UserDetailComponent,
|
||||||
AddUserToGroupDialogComponent,
|
AddUserToGroupDialogComponent,
|
||||||
RemoveUserToGroupDialogComponent
|
RemoveUserToGroupDialogComponent,
|
||||||
|
PaginatorPipe
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -30,10 +30,11 @@
|
|||||||
<div class="title"> Members: </div>
|
<div class="title"> Members: </div>
|
||||||
<mat-icon (click)="openAddUserDialog()" class="clickable">person_add</mat-icon>
|
<mat-icon (click)="openAddUserDialog()" class="clickable">person_add</mat-icon>
|
||||||
</div>
|
</div>
|
||||||
<div *ngFor="let user of members">
|
<div *ngFor="let user of members | paginator: pageEvent">
|
||||||
<a href="/server/{{server.id}}/user_management/{{user.user_id}}"><div>{{user.username}}</div></a>
|
<a href="/server/{{server.id}}/user_management/{{user.user_id}}"><div>{{user.username}}</div></a>
|
||||||
<mat-icon class="clickable" (click)="openRemoveUserDialog(user)">delete</mat-icon>
|
<mat-icon class="clickable" (click)="openRemoveUserDialog(user)">delete</mat-icon>
|
||||||
</div>
|
</div>
|
||||||
|
<mat-paginator [length]="members.length" (page)="pageEvent = $event" [pageSizeOptions]="[5, 20, 50, 100]"></mat-paginator>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -21,6 +21,7 @@ import {AddUserToGroupDialogComponent} from "@components/group-details/add-user-
|
|||||||
import {RemoveUserToGroupDialogComponent} from "@components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component";
|
import {RemoveUserToGroupDialogComponent} from "@components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component";
|
||||||
import {GroupService} from "@services/group.service";
|
import {GroupService} from "@services/group.service";
|
||||||
import {ToasterService} from "@services/toaster.service";
|
import {ToasterService} from "@services/toaster.service";
|
||||||
|
import {PageEvent} from "@angular/material/paginator";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-group-details',
|
selector: 'app-group-details',
|
||||||
@ -32,6 +33,7 @@ export class GroupDetailsComponent implements OnInit {
|
|||||||
group: Group;
|
group: Group;
|
||||||
members: User[];
|
members: User[];
|
||||||
editGroupForm: FormGroup;
|
editGroupForm: FormGroup;
|
||||||
|
pageEvent: PageEvent | undefined;
|
||||||
|
|
||||||
constructor(private route: ActivatedRoute,
|
constructor(private route: ActivatedRoute,
|
||||||
private dialog: MatDialog,
|
private dialog: MatDialog,
|
||||||
|
8
src/app/components/group-details/paginator.pipe.spec.ts
Normal file
8
src/app/components/group-details/paginator.pipe.spec.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { PaginatorPipe } from './paginator.pipe';
|
||||||
|
|
||||||
|
describe('PaginatorPipe', () => {
|
||||||
|
it('create an instance', () => {
|
||||||
|
const pipe = new PaginatorPipe();
|
||||||
|
expect(pipe).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
29
src/app/components/group-details/paginator.pipe.ts
Normal file
29
src/app/components/group-details/paginator.pipe.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import {Pipe, PipeTransform} from '@angular/core';
|
||||||
|
import {User} from "@models/users/user";
|
||||||
|
import {PageEvent} from "@angular/material/paginator";
|
||||||
|
|
||||||
|
@Pipe({
|
||||||
|
name: 'paginator'
|
||||||
|
})
|
||||||
|
export class PaginatorPipe implements PipeTransform {
|
||||||
|
|
||||||
|
transform(members: User[] | undefined, paginatorEvent: PageEvent | undefined): User[] {
|
||||||
|
if (!members) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!paginatorEvent) {
|
||||||
|
paginatorEvent = {
|
||||||
|
length: members.length,
|
||||||
|
pageIndex: 0,
|
||||||
|
pageSize: 5
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return members.slice(
|
||||||
|
paginatorEvent.pageIndex * paginatorEvent.pageSize,
|
||||||
|
(paginatorEvent.pageIndex + 1) * paginatorEvent.pageSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user