FEAT #15550 TIME 3:10 modify the display of filters selected in search component

src/frontend/app/plugins/autocomplete/autocomplete.component.ts

@@ -53,7 +53,6 @@ export class PluginAutocompleteComponent implements OnInit {
         } else {
             this.http.get('../rest/autocomplete/users?search=' + ev.detail.value).pipe(
                 tap((res: any) => {
-                    console.log(res);
                     this.itemList = res;
                 }),
                 catchError(err => {

src/frontend/app/search/search.component.html

@@ -12,35 +12,39 @@
         </ion-buttons>
     </ion-toolbar>
     <ion-toolbar color="primary">
-        <ion-button *ngIf="getNbFilters() > 0"  
-            shape="round" size="small" slot="start" 
-            color="primary" 
-            (click)="clearFilters()" style="margin-left: 4px;" [title]="'lang.clearFilters' | translate">
-            <ion-icon slot="icon-only" name="backspace" color="light"></ion-icon>
-        </ion-button>
         <ion-title slot="end" *ngIf="getNbFilters() >= 0">{{getNbFilters()}} {{'lang.currentFilters' | translate}}</ion-title>
         <div class="scrollfilters" slot="start">
+            <ion-button *ngIf="getNbFilters() > 0" class="clearFilter" 
+                shape="round" size="small" slot="start" color="primary" (click)="clearFilters()" [title]="'lang.clearFilters' | translate">
+                <ion-icon slot="icon-only" name="backspace" color="light"></ion-icon>
+            </ion-button>
             <div *ngFor="let filter of filters" >
-                <ion-chip *ngIf="filter.id === 'title' && filter.val !== ''" color="light">
+                <ion-chip *ngIf="filter.id === 'title' && filter.val !== ''" color="light" 
+                [title]="'lang.titleSearch' | translate" (click)="removeFilter(filter)">
                     <ion-icon name="document-text"></ion-icon>
-                    <ion-label >{{ filter.val}}</ion-label>
+                    <ion-label >{{ filter.val }}</ion-label>
+                    <ion-icon name="close-circle"></ion-icon>
                 </ion-chip>
-                <ion-chip *ngIf="filter.id === 'reference' && filter.val !== ''" color="light">
+                <ion-chip *ngIf="filter.id === 'reference' && filter.val !== ''" color="light" 
+                [title]="'lang.referenceSearch' | translate" (click)="removeFilter(filter)">
                     <ion-icon name="key"></ion-icon>
-                    <ion-label >{{ filter.val}}</ion-label>
+                    <ion-label >{{ filter.val }}</ion-label>
+                    <ion-icon name="close-circle"></ion-icon>
                 </ion-chip>
                 <div *ngIf="filter.id === 'workflowStates'">
-                    <ion-chip *ngFor="let item of filter.val" color="light">
-                        <span *ngFor="let lang of filter.values">
-                            <ion-icon *ngIf="lang.id === item" name="options-outline"></ion-icon>
-                            <ion-label *ngIf="lang.id === item">{{ lang.label | translate}}</ion-label>
-                        </span>
+                    <ion-chip *ngFor="let item of filter.val" color="light" 
+                    [title]="'lang.workflowStatesSearch' | translate" (click)="removeFilter(filter, item)">
+                        <ion-icon name="options-outline"></ion-icon>
+                        <ion-label>{{ getLabel(item) | translate}}</ion-label>
+                        <ion-icon name="close-circle"></ion-icon>
                     </ion-chip>
                 </div>
                 <div *ngIf="filter.id === 'workflowUsers'">
-                    <ion-chip *ngFor="let item of filter.val" color="light">
+                    <ion-chip *ngFor="let item of filter.val" color="light" 
+                    [title]="'lang.workflowUsersSearch' | translate" (click)="removeFilter(filter, item)">
                         <ion-icon name="person-circle"></ion-icon>
                         <ion-label >{{ item.firstname}} {{ item.lastname }}</ion-label>
+                        <ion-icon name="close-circle"></ion-icon>
                     </ion-chip>
                 </div>
             </div>
@@ -150,7 +154,7 @@
                 <ion-item>
                     <ion-label color="secondary" position="floating">{{'lang.' + filter.id + 'Search' | translate}}
                     </ion-label>
-                    <ion-input [(ngModel)]="filter.val"></ion-input>
+                    <ion-input [(ngModel)]="filter.val" [value]="filter.val"></ion-input>
                 </ion-item>
             </ng-container>
             <ng-container *ngIf="filter.type === 'checkbox'">
@@ -160,7 +164,7 @@
                 <ion-item *ngFor="let val of filter.values;let i=index;">
                     <ion-label>{{val.label | translate}}</ion-label>
                     <ion-checkbox (ionChange)="toggleItem(filter, val, $event.detail.checked)"
-                        [checked]="filter.val.indexOf(val.id) > -1" slot="end" class="checkedAction"></ion-checkbox>
+                        [checked]="filter.val.indexOf(val.id) > -1" slot="end" [value]="val.id" class="workflowStates"></ion-checkbox>
                 </ion-item>
             </ng-container>
             <ng-container *ngIf="filter.type === 'autocompleteUsers'">

src/frontend/app/search/search.component.scss

@@ -65,7 +65,13 @@
     white-space: nowrap;
     ion-chip, div {
         height: auto;
-        margin: 4px;
         display: inline-block;
     }
+}
+
+ion-button.clearFilter {
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    z-index: 1;
 }
\ No newline at end of file

src/frontend/app/search/search.component.ts

@@ -112,7 +112,7 @@ export class SearchComponent implements OnInit {
         this.signaturesService.initTemplate(this.rightContent, this.viewContainerRef, 'rightContent');
         setTimeout(() => {
             this.menu.open('right-menu');
-        }, 500);
+        }, 500);        
     }
 
     ionViewWillLeave() {
@@ -157,14 +157,14 @@ export class SearchComponent implements OnInit {
     formatDatas() {
         const objToSend: any = {};
         const tmpArr = this.filters.filter((filter: any) => (filter.type === 'text' && filter.val !== '') || (filter.type !== 'text' && filter.val.length > 0));
-
+        
         tmpArr.forEach((filter: any) => {
             if (filter.id === 'workflowUsers') {
                 objToSend[filter.id] = filter.val.map((item: any) => item.id);
             } else {
                 objToSend[filter.id] = filter.val;
             }
-        });
+        });        
         return objToSend;
     }
 
@@ -239,7 +239,7 @@ export class SearchComponent implements OnInit {
         return new Promise((resolve) => {
             this.http.post(`../rest/search/documents?limit=10&offset=0`, this.formatDatas())
                 .pipe(
-                    tap((data: any) => {
+                    tap((data: any) => {                        
                         this.ressources = this.formatListDatas(data.documents);
                         this.count = data.count;
                         this.infiniteScroll.disabled = false;
@@ -408,7 +408,7 @@ export class SearchComponent implements OnInit {
     }
 
     clearFilters() {
-        $(".checkedAction").each(function(){
+        $(".workflowStates").each(function(){
             $(this).prop("checked", false);
         });
         for (let index = 0; index < this.filters.length; index++) {
@@ -424,4 +424,30 @@ export class SearchComponent implements OnInit {
             this.launchSearch();
         }
     }
+
+    removeFilter(filter: any, item: any) {
+        if (!Array.isArray(filter.val)) {
+            filter.val = '';
+        } else {
+            if (filter.id === 'workflowStates') {
+                    $(".workflowStates").each(function() {
+                        if ($(this).val() === item) {
+                            $(this).prop("checked", false);
+                            return false;
+                        }
+                    });
+            } else {
+                const index = filter.val.indexOf(item);
+                filter.val.splice(index, 1);
+            }
+        }
+        if (this.ressources.length > 0) {
+            this.launchSearch();
+        }
+    }
+
+    getLabel(filter: any) {
+        const obj = this.filters.filter((item: any) => item.id === 'workflowStates')[0].values;
+        return obj.find((element: any) => element.id === filter).label;
+    }
 }