Add search filter to user management

src/app/app.module.ts

@@ -273,6 +273,7 @@ import { UserManagementComponent } from './components/user-management/user-manag
 import { UserService } from './services/user.service';
 import { LoggedUserComponent } from './components/users/logged-user/logged-user.component';
 import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component';
+import { UserFilterPipe } from './filters/user-filter.pipe';
 
 @NgModule({
   declarations: [
@@ -462,6 +463,7 @@ import { AddUserDialogComponent } from './components/user-management/add-user-di
     UserManagementComponent,
     ProjectReadmeComponent,
     AddUserDialogComponent,
+    UserFilterPipe,
   ],
   imports: [
     BrowserModule,

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

@@ -8,9 +8,15 @@
     </div>
   </div>
 
+  <form>
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Search by name" [(ngModel)]="searchText" [ngModelOptions]="{ standalone: true }" />
+    </mat-form-field>
+  </form>
+
   <div class="default-content">
     <div class="mat-elevation-z8">
-      <mat-table #table [dataSource]="dataSource" matSort>
+      <mat-table #table [dataSource]="dataSource | userFilter: searchText" matSort>
         <ng-container matColumnDef="name">
           <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
           <mat-cell *matCellDef="let row">

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

@@ -3,3 +3,9 @@
   width: 160px;
   margin: 20px;
 }
+
+.full-width {
+  width: 940px;
+  margin-left: -470px;
+  left: 50%;
+}

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

@@ -35,6 +35,8 @@ export class UserManagementComponent implements OnInit {
   userDatabase = new UserDatabase();
   displayedColumns = ['name', 'email', 'is_active', 'is_superadmin', 'last'];
 
+  searchText: string = '';
+
   @ViewChild(MatSort, { static: true }) sort: MatSort;
 
   constructor(
@@ -77,6 +79,7 @@ export class UserManagementComponent implements OnInit {
     instance.server = this.server;
     dialogRef.afterClosed().subscribe(() => this.refresh());
   }
+
 }
 
 export class UserDatabase {

src/app/filters/user-filter.pipe.spec.ts

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

src/app/filters/user-filter.pipe.ts

@@ -0,0 +1,31 @@
+/*
+* 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 {UserDataSource} from "@components/user-management/user-management.component";
+
+@Pipe({
+  name: 'userFilter'
+})
+export class UserFilterPipe implements PipeTransform {
+
+  transform(items: UserDataSource, searchText: string) {
+    if (!items) return [];
+    if (!searchText) return items;
+    searchText = searchText.toLowerCase();
+    return items.userDatabase.data.filter((item) => {
+      return (item.username && item.username.toLowerCase().includes(searchText))
+        || (item.email && item.email.toLowerCase().includes(searchText));
+    });
+  }
+
+}