group management, add search filter with group name

src/app/app.module.ts

@@ -1,3 +1,4 @@
+/* tslint:disable */
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CdkTableModule } from '@angular/cdk/table';
@@ -273,6 +274,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 { GroupManagementComponent } from './components/group-management/group-management.component';
+import { GroupFilterPipe } from './filters/group-filter.pipe';
 import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component';
 import { UserFilterPipe } from './filters/user-filter.pipe';
 
@@ -463,6 +465,7 @@ import { UserFilterPipe } from './filters/user-filter.pipe';
     EditNetworkConfigurationDialogComponent,
     UserManagementComponent,
     ProjectReadmeComponent,
+    GroupFilterPipe,
     GroupManagementComponent,
     AddUserDialogComponent,
     UserFilterPipe,

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

@@ -4,8 +4,15 @@
       <h1 class="col">Groups management</h1>
     </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">
-    <table mat-table [dataSource]="sortedGroups" class="mat-elevation-z8" matSort (matSortChange)="sort($event)">
+    <table mat-table [dataSource]="sortedGroups | groupFilter: searchText" class="mat-elevation-z8" matSort (matSortChange)="sort($event)">
 
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>

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

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

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

@@ -30,6 +30,7 @@ export class GroupManagementComponent implements OnInit {
   public displayedColumns = ['name', 'created_at', 'updated_at', 'is_builtin', 'delete'];
   groups: Group[];
   sortedGroups: Group[];
+  searchText: string;
 
   constructor(
     private route: ActivatedRoute,

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

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

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

@@ -0,0 +1,35 @@
+/*
+* 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 {Group} from "../models/groups/group";
+
+@Pipe({
+  name: 'groupFilter'
+})
+export class GroupFilterPipe implements PipeTransform {
+
+  transform(groups: Group[], searchText: string): Group[] {
+    if (!groups) {
+      return [];
+    }
+    if (!searchText) {
+      return groups;
+    }
+
+    searchText = searchText.toLowerCase();
+    return groups.filter((group: Group) => {
+      return group.name.toLowerCase().includes(searchText);
+    });
+  }
+
+}