[TRTL-207] Search by name or description in group attribution

ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.html

@@ -4,10 +4,12 @@
 
   <div class="header-informations">
     <div class="controls">
-      <div class="search disabled">
-        <input type="search" placeholder="Filtrer par «nom», «id» ..." disabled i18-placeholder="Filter group filter@@filterGroup">
-        <i class="material-icons">search</i>
-      </div>
+      <vitamui-common-search-bar
+        name="group-attribution-search"
+        placeholder="Filtrer par nom ..."
+        i18-placeholder="Filter group filter@@filterGroup"
+        (search)="onSearch($event)">
+      </vitamui-common-search-bar>
     </div>
 
     <div class="actions" *ngIf="selectedGroupName">

ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.component.ts

@@ -66,6 +66,7 @@ export const GROUP_ATTRIBUTION_VALUE_ACCESSOR: any = {
 })
 export class GroupAttributionComponent implements OnInit {
 
+
   user: User;
   activeGroups: GroupSelection[];
   selectedGroupName: string;
@@ -83,6 +84,10 @@ export class GroupAttributionComponent implements OnInit {
 
   ngOnInit() {
     this.user = this.data[0];
+    this.resetActiveGroups();
+  }
+
+  resetActiveGroups() {
     this.activeGroups = this.data[this.CUSTOMER_ACTIVE_PROFILE_GROUPS_INDEX];
     this.activeGroups.sort((a, b) => a.name.toUpperCase() < b.name.toUpperCase() ? -1 :
       a.name.toUpperCase() > b.name.toUpperCase() ? 1 : 0);
@@ -131,4 +136,10 @@ export class GroupAttributionComponent implements OnInit {
     this.dialogRef.close();
   }
 
+  onSearch(text?: string) {
+    this.resetActiveGroups();
+    if (text !== null && text.length > 0) {
+      this.activeGroups = this.activeGroups.filter((group) => group.name.includes(text) || group.description.includes(text));
+    }
+  }
 }

ui/ui-frontend/projects/identity/src/app/user/group-attribution/group-attribution.module.ts

@@ -38,18 +38,19 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
-import { CollapseDirectiveModule } from 'ui-frontend-common';
+import {CollapseDirectiveModule, SearchBarModule} from 'ui-frontend-common';
 import { SharedModule } from '../../shared/shared.module';
 import { GroupAttributionComponent } from './group-attribution.component';
 import { GroupDetailComponent } from './group-detail/group-detail.component';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    SharedModule,
-    MatTooltipModule,
-    CollapseDirectiveModule,
-  ],
+    imports: [
+        CommonModule,
+        SharedModule,
+        MatTooltipModule,
+        CollapseDirectiveModule,
+        SearchBarModule,
+    ],
   declarations: [
     GroupAttributionComponent,
     GroupDetailComponent,