Merge branch 'feat/20520/develop' into 'develop'

[20520] Recherche d’un utilisateur dans l’administration d’un groupe

See merge request maarch/MaarchParapheur!132

src/frontend/app/administration/group/group.component.html

@@ -27,6 +27,9 @@
         <ion-item lines="none" *ngIf="!creationMode">
             <ion-label color="secondary">{{'lang.linkedUsers' | translate}} :</ion-label>
         </ion-item>
+        <ion-searchbar [placeholder]="'lang.filter' | translate" style="margin-left: 4x; display: flex; width: 50%;"
+            (ionChange)="applyFilter($event.detail.value)">
+        </ion-searchbar>
         <ion-card *ngIf="!creationMode" style="height: 400px; overflow-y: auto;">
             <ion-list>
                 <ion-item style="position: sticky;top:0px;z-index:1;">
@@ -39,7 +42,8 @@
                             </div>
                         </ng-container>
                         <div style="flex: 1;text-align: right;" *ngIf="displayedColumns.indexOf('actions') > -1">
-                            <ion-button slot="end" color="primary" fille="outline" shape="round" (click)="openUserList()">
+                            <ion-button slot="end" color="primary" fille="outline" shape="round"
+                                (click)="openUserList()">
                                 {{'lang.add' | translate}}
                             </ion-button>
                         </div>

src/frontend/app/administration/group/group.component.ts

@@ -12,6 +12,7 @@ import { AuthService } from '../../service/auth.service';
 import { AlertController, ModalController, PopoverController } from '@ionic/angular';
 import { UsersComponent } from './list/users.component';
 import { of } from 'rxjs';
+import { LatinisePipe } from 'ngx-pipes';
 
 
 export interface Group {
@@ -52,7 +53,8 @@ export class GroupComponent implements OnInit {
         public authService: AuthService,
         public popoverController: PopoverController,
         public modalController: ModalController,
-        public alertController: AlertController
+        public alertController: AlertController,
+        private latinisePipe: LatinisePipe
     ) {
         this.displayedColumns = ['firstname', 'lastname', 'actions'];
         this.group = {
@@ -339,8 +341,22 @@ export class GroupComponent implements OnInit {
             return compare(a[sort.active], b[sort.active], isAsc);
         });
     }
+
+    applyFilter(filterValue: string) {
+        filterValue = this.latinisePipe.transform(filterValue.toLowerCase());
+        this.sortedData = this.group.users.filter((option: any) => {
+            let state = false;
+            this.displayedColumns.forEach(element => {
+                if (option[element] && this.latinisePipe.transform(option[element].toLowerCase()).includes(filterValue)) {
+                    state = true;
+                }
+            });
+            return state;
+        });
+    }
 }
 
+
 function compare(a: number | string, b: number | string, isAsc: boolean) {
     return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }