[TRTL-206] Add search & order by on Groups list

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

@@ -5,11 +5,41 @@
 >
   <thead>
     <tr>
-      <th><i class="vitamui-icon vitamui-icon-keys vitamui-row-icon"></i></th>
-      <th i18n="Group name@@profileGroupListHeaderName">Nom du groupe</th>
-      <th i18n="Group ID@@profileGroupListHeaderID">Identifiant</th>
-      <th i18n="Description@@profileGroupListHeaderDescription">Description</th>
-      <th i18n="Description@@profileGroupListHeaderLevel">Niveau</th>
+      <th>
+        <div class="vitamui-table-header">
+          <i class="vitamui-icon vitamui-icon-keys vitamui-row-icon"></i>
+          <vitamui-common-order-by-button orderByKey="status" [(orderBy)]="orderBy" [(direction)]="direction"
+              (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
+        </div>
+      </th>
+      <th>
+        <div class="vitamui-table-header">
+          <span i18n="Group name@@profileGroupListHeaderName">Nom du groupe</span>
+          <vitamui-common-order-by-button orderByKey="name" [(orderBy)]="orderBy" [(direction)]="direction"
+                                          (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
+        </div>
+      </th>
+      <th>
+        <div class="vitamui-table-header">
+          <span i18n="Group ID@@profileGroupListHeaderID">Identifiant</span>
+          <vitamui-common-order-by-button orderByKey="identifier" [(orderBy)]="orderBy" [(direction)]="direction"
+                                          (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
+        </div>
+      </th>
+      <th>
+        <div class="vitamui-table-header">
+          <span i18n="Description@@profileGroupListHeaderDescription">Description</span>
+          <vitamui-common-order-by-button orderByKey="description" [(orderBy)]="orderBy" [(direction)]="direction"
+                                          (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
+        </div>
+      </th>
+      <th>
+        <div class="vitamui-table-header">
+          <span i18n="Description@@profileGroupListHeaderLevel">Niveau</span>
+          <vitamui-common-order-by-button orderByKey="level" [(orderBy)]="orderBy" [(direction)]="direction"
+                                          (orderChange)="emitOrderChange()"></vitamui-common-order-by-button>
+        </div>
+      </th>
     </tr>
   </thead>
 

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

@@ -35,10 +35,17 @@
  * knowledge of the CeCILL-C license and that you accept its terms.
  */
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
-import { Subscription } from 'rxjs';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {merge, Subject, Subscription} from 'rxjs';
 
-import { Group, InfiniteScrollTable } from 'ui-frontend-common';
+import {
+  buildCriteriaFromSearch,
+  DEFAULT_PAGE_SIZE, Direction,
+  Group,
+  InfiniteScrollTable,
+  PageRequest,
+  SearchQuery
+} from 'ui-frontend-common';
 import { GroupService } from '../group.service';
 
 @Component({
@@ -65,6 +72,25 @@ export class GroupListComponent extends InfiniteScrollTable<Group> implements On
 
   private updatedGroupSub: Subscription;
 
+  @Input('search')
+  set searchText(text: string) {
+    this._search = text;
+    this.searchChange.next(text);
+  }
+  // tslint:disable-next-line:variable-name
+  private _search: string;
+  private readonly searchKeys = [
+    'name',
+    'level',
+    'description'
+  ];
+
+  orderBy = 'name';
+  direction = Direction.ASCENDANT;
+
+  private readonly orderChange = new Subject<string>();
+  private readonly searchChange = new Subject<string>();
+
   constructor(public groupService: GroupService) {
     super(groupService);
   }
@@ -76,7 +102,24 @@ export class GroupListComponent extends InfiniteScrollTable<Group> implements On
       if (profileGroupIndex > -1) {
         this.dataSource[profileGroupIndex] = updatedGroup;
       }
+
+    });
+
+    const searchCriteriaChange = merge(this.searchChange, this.orderChange);
+
+    searchCriteriaChange.subscribe(() => {
+      const query: SearchQuery = {
+        criteria: buildCriteriaFromSearch(this._search, this.searchKeys)
+      };
+      const pageRequest = new PageRequest(0, DEFAULT_PAGE_SIZE, this.orderBy, this.direction, JSON.stringify(query));
+
+      this.search(pageRequest);
     });
+
+  }
+
+  emitOrderChange() {
+    this.orderChange.next();
   }
 
   ngOnDestroy() {

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

@@ -16,10 +16,11 @@
         </h2>
         <div class="controls">
 
-          <div class="search disabled">
-            <input type="search" placeholder="Nom du groupe" i18n-placeholder="Group name@@profileGroupSearchInputPlaceholder" disabled>
-            <button type="submit" class="btn-circle primary btn-search"><i class="material-icons">search</i></button>
-          </div>
+          <vitamui-common-search-bar
+            name="group-search"
+            (search)="onSearchSubmit($event)"
+            placeholder="Nom du groupe" i18n-placeholder="Group name@@profileGroupSearchInputPlaceholder"
+          ></vitamui-common-search-bar>
 
           <div class="actions">
             <button class="btn secondary" (click)="openCreateGroupDialog()">
@@ -38,7 +39,7 @@
     </div>
 
     <div class="vitamui-body vitamui-container">
-      <app-group-list (groupClick)="openPanel($event)"></app-group-list>
+      <app-group-list [search]="search" (groupClick)="openPanel($event)"></app-group-list>
     </div>
 
   </mat-sidenav-content>

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

@@ -51,6 +51,8 @@ export class GroupComponent extends SidenavPage<Group> implements OnInit {
 
   groups: Group[];
 
+  search: string;
+
   @ViewChild(GroupListComponent, { static: true }) groupListComponent: GroupListComponent;
 
   constructor(public dialog: MatDialog, route: ActivatedRoute, globalEventService: GlobalEventService) {
@@ -71,4 +73,9 @@ export class GroupComponent extends SidenavPage<Group> implements OnInit {
     if (!this.groupListComponent) { return; }
     this.groupListComponent.search();
   }
+
+  onSearchSubmit(search: string) {
+      this.search = search;
+
+  }
 }