From 7b501eb3ea02c03287631300644fe6c167dc08b8 Mon Sep 17 00:00:00 2001
From: "hamza.hramchi" <hamza.hramchi@xelians.fr>
Date: Wed, 30 Dec 2020 16:10:06 +0100
Subject: [PATCH] FEAT #15550 TIME 3:10 modify the display of filters selected
in search component
---
.../autocomplete/autocomplete.component.ts | 1 -
src/frontend/app/search/search.component.html | 40 ++++++++++---------
src/frontend/app/search/search.component.scss | 8 +++-
src/frontend/app/search/search.component.ts | 36 ++++++++++++++---
4 files changed, 60 insertions(+), 25 deletions(-)
diff --git a/src/frontend/app/plugins/autocomplete/autocomplete.component.ts b/src/frontend/app/plugins/autocomplete/autocomplete.component.ts
index c85bb9f2dc..80de7f72c9 100644
--- a/src/frontend/app/plugins/autocomplete/autocomplete.component.ts
+++ b/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 => {
diff --git a/src/frontend/app/search/search.component.html b/src/frontend/app/search/search.component.html
index 1d7b07d311..31237e8575 100644
--- a/src/frontend/app/search/search.component.html
+++ b/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'">
diff --git a/src/frontend/app/search/search.component.scss b/src/frontend/app/search/search.component.scss
index 6a3ac2ca7c..f67267da57 100644
--- a/src/frontend/app/search/search.component.scss
+++ b/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
diff --git a/src/frontend/app/search/search.component.ts b/src/frontend/app/search/search.component.ts
index df108da361..0a211e6ff5 100644
--- a/src/frontend/app/search/search.component.ts
+++ b/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;
+ }
}
--
GitLab