group details, add filter on members list

src/app/app.module.ts

@@ -285,6 +285,7 @@ import { UserDetailComponent } from './components/user-management/user-detail/us
 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';
+import { MembersFilterPipe } from './components/group-details/members-filter.pipe';
 
 @NgModule({
   declarations: [
@@ -484,7 +485,8 @@ import { PaginatorPipe } from './components/group-details/paginator.pipe';
     UserDetailComponent,
     AddUserToGroupDialogComponent,
     RemoveUserToGroupDialogComponent,
-    PaginatorPipe
+    PaginatorPipe,
+    MembersFilterPipe
   ],
   imports: [
     BrowserModule,

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

@@ -6,7 +6,7 @@
     <div class="main">
       <div class="details">
         <div>
-          <mat-form-field class="input-field">
+          <mat-form-field>
             <mat-label>Group name:</mat-label>
             <input matInput type="text" [ngModel]="group.name">
           </mat-form-field>
@@ -27,14 +27,22 @@
       <mat-divider [vertical]="true"></mat-divider>
       <div class="members">
         <div>
-          <div class="title"> Members: </div>
+          <div class="title"> Members:</div>
           <mat-icon (click)="openAddUserDialog()" class="clickable">person_add</mat-icon>
         </div>
-        <div *ngFor="let user of members | paginator: pageEvent">
-          <a href="/server/{{server.id}}/user_management/{{user.user_id}}"><div>{{user.username}}</div></a>
+        <div class="search">
+          <mat-form-field>
+            <input matInput placeholder="filter members" [(ngModel)]="searchMembers"/>
+          </mat-form-field>
+        </div>
+        <div *ngFor="let user of members | membersFilter: searchMembers | 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>
+        <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.scss

@@ -37,10 +37,16 @@
   margin-bottom: 20px;
 }
 
-.input-field {
-  width: 100%;
-}
-
 .button-div {
   float: right;
 }
+
+.members > .search {
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  width: 100%;
+}
+mat-form-field {
+  width: 100%;
+}

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

@@ -34,6 +34,7 @@ export class GroupDetailsComponent implements OnInit {
   members: User[];
   editGroupForm: FormGroup;
   pageEvent: PageEvent | undefined;
+  searchMembers: string;
 
   constructor(private route: ActivatedRoute,
               private dialog: MatDialog,

src/app/components/group-details/members-filter.pipe.spec.ts

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

src/app/components/group-details/members-filter.pipe.ts

@@ -0,0 +1,20 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {User} from "@models/users/user";
+
+@Pipe({
+  name: 'membersFilter'
+})
+export class MembersFilterPipe implements PipeTransform {
+
+  transform(members: User[], filterText: string): User[] {
+    if (!members) {
+      return [];
+    }
+    if (filterText === undefined || filterText === '') {
+      return members;
+    }
+
+    return members.filter((member: User) => member.username.toLowerCase().includes(filterText.toLowerCase()));
+  }
+
+}

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

@@ -1,3 +1,15 @@
+/*
+* Software Name : GNS3 Web UI
+* Version: 3
+* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services
+* SPDX-License-Identifier: GPL-3.0-or-later
+*
+* This software is distributed under the GPL-3.0 or any later version,
+* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt
+* or see the "LICENSE" file for more details.
+*
+* Author: Sylvain MATHIEU, Elise LEBEAU
+*/
 import {Pipe, PipeTransform} from '@angular/core';
 import {User} from "@models/users/user";
 import {PageEvent} from "@angular/material/paginator";