group details, add members pagination

src/app/app.module.ts

@@ -284,6 +284,7 @@ import { GroupDetailsComponent } from './components/group-details/group-details.
 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 { 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({
   declarations: [
@@ -482,7 +483,8 @@ import { RemoveUserToGroupDialogComponent } from './components/group-details/rem
     GroupDetailsComponent,
     UserDetailComponent,
     AddUserToGroupDialogComponent,
-    RemoveUserToGroupDialogComponent
+    RemoveUserToGroupDialogComponent,
+    PaginatorPipe
   ],
   imports: [
     BrowserModule,

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

@@ -30,10 +30,11 @@
           <div class="title"> Members: </div>
           <mat-icon (click)="openAddUserDialog()" class="clickable">person_add</mat-icon>
         </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>
           <mat-icon class="clickable" (click)="openRemoveUserDialog(user)">delete</mat-icon>
         </div>
+        <mat-paginator [length]="members.length" (page)="pageEvent = $event" [pageSizeOptions]="[5, 20, 50, 100]"></mat-paginator>
       </div>
 
     </div>

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

@@ -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 {GroupService} from "@services/group.service";
 import {ToasterService} from "@services/toaster.service";
+import {PageEvent} from "@angular/material/paginator";
 
 @Component({
   selector: 'app-group-details',
@@ -32,6 +33,7 @@ export class GroupDetailsComponent implements OnInit {
   group: Group;
   members: User[];
   editGroupForm: FormGroup;
+  pageEvent: PageEvent | undefined;
 
   constructor(private route: ActivatedRoute,
               private dialog: MatDialog,

src/app/components/group-details/paginator.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { PaginatorPipe } from './paginator.pipe';
+
+describe('PaginatorPipe', () => {
+  it('create an instance', () => {
+    const pipe = new PaginatorPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/components/group-details/paginator.pipe.ts

@@ -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);
+  }
+
+}