From 672199c776a6cf421edc7eb175deb892377186cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anthony=20Qu=C3=A9r=C3=A9?=
 <47711333+Anthony-Jhoiro@users.noreply.github.com>
Date: Fri, 23 Aug 2019 12:04:35 +0200
Subject: [PATCH] #9 Change filter system

---
 .../campaigns/campaigns-columnsdata.ts        | 18 ++---
 .../testcaselist/testcaselist.columnsdata.ts  | 65 ++++++++-------
 .../datatable/datatable.component.ts          | 13 +--
 .../filters/filters.component.html            | 10 +--
 .../filters/filters.component.ts              | 17 ++--
 .../utils/filter/filter.component.html        | 80 +++++++++++--------
 .../utils/filter/filter.component.ts          | 12 ++-
 .../filterlike/filterlike.component.html      | 12 ---
 .../filterlike/filterlike.component.scss      |  0
 .../filterlike/filterlike.component.spec.ts   | 25 ------
 .../utils/filterlike/filterlike.component.ts  | 35 --------
 src/app/shared/model/column.model.ts          |  8 +-
 src/app/shared/shared.module.ts               |  2 -
 13 files changed, 129 insertions(+), 168 deletions(-)
 delete mode 100644 src/app/shared/datatable-page/utils/filterlike/filterlike.component.html
 delete mode 100644 src/app/shared/datatable-page/utils/filterlike/filterlike.component.scss
 delete mode 100644 src/app/shared/datatable-page/utils/filterlike/filterlike.component.spec.ts
 delete mode 100644 src/app/shared/datatable-page/utils/filterlike/filterlike.component.ts

diff --git a/src/app/feat-design/campaigns/campaigns-columnsdata.ts b/src/app/feat-design/campaigns/campaigns-columnsdata.ts
index 13fae690..ffd161ec 100644
--- a/src/app/feat-design/campaigns/campaigns-columnsdata.ts
+++ b/src/app/feat-design/campaigns/campaigns-columnsdata.ts
@@ -9,7 +9,7 @@ export var CampainsColumnsData: Column[] = [
         flexGrow: 100,
         defaultActive: true,
         searchable: true,
-        dropActive: false,
+        filterDisplayed: false,
         multiple: true,
         placeholder: 'Select applications',
         sSearch: []
@@ -23,7 +23,7 @@ export var CampainsColumnsData: Column[] = [
         defaultActive: true,
         searchable: true,
         type: COLUMN_TYPE.BOOLEAN,
-        dropActive: false,
+        filterDisplayed: false,
         multiple: true,
         placeholder: 'Select applications',
         sSearch: []
@@ -37,7 +37,7 @@ export var CampainsColumnsData: Column[] = [
         defaultActive: true,
         searchable: true,
         type: COLUMN_TYPE.BOOLEAN,
-        dropActive: false,
+        filterDisplayed: false,
         multiple: true,
         placeholder: 'Select applications',
         sSearch: []
@@ -51,7 +51,7 @@ export var CampainsColumnsData: Column[] = [
         defaultActive: true,
         searchable: true,
         type: COLUMN_TYPE.LONGTEXT,
-        dropActive: false,
+        filterDisplayed: false,
         multiple: true,
         placeholder: 'Select applications',
         sSearch: []
@@ -65,7 +65,7 @@ export var CampainsColumnsData: Column[] = [
         defaultActive: true,
         searchable: true,
         type: COLUMN_TYPE.BOOLEAN,
-        dropActive: false,
+        filterDisplayed: false,
         multiple: true,
         placeholder: 'Select applications',
         sSearch: []
@@ -79,7 +79,7 @@ export var CampainsColumnsData: Column[] = [
         defaultActive: true,
         searchable: true,
         type: COLUMN_TYPE.BOOLEAN,
-        dropActive: false,
+        filterDisplayed: false,
         multiple: true,
         placeholder: 'Select applications',
         sSearch: []
@@ -92,7 +92,7 @@ export var CampainsColumnsData: Column[] = [
         flexGrow: 100,
         defaultActive: true,
         searchable: true,
-        dropActive: false,
+        filterDisplayed: false,
         multiple: true,
         placeholder: 'Select applications',
         sSearch: []
@@ -105,7 +105,7 @@ export var CampainsColumnsData: Column[] = [
         flexGrow: 100,
         defaultActive: true,
         searchable: true,
-        dropActive: false,
+        filterDisplayed: false,
         multiple: true,
         placeholder: 'Select applications',
         sSearch: []
@@ -117,7 +117,7 @@ export var CampainsColumnsData: Column[] = [
         active: true,
         flexGrow: 100,
         defaultActive: true,
-        dropActive: false,
+        filterDisplayed: false,
         type: COLUMN_TYPE.LONGTEXT,
         like: true,
         multiple: true,
diff --git a/src/app/feat-design/testcaselist/testcaselist.columnsdata.ts b/src/app/feat-design/testcaselist/testcaselist.columnsdata.ts
index e77141d8..1ba29cf4 100644
--- a/src/app/feat-design/testcaselist/testcaselist.columnsdata.ts
+++ b/src/app/feat-design/testcaselist/testcaselist.columnsdata.ts
@@ -1,4 +1,4 @@
-import { Column, COLUMN_TYPE } from 'src/app/shared/model/column.model';
+import { Column, COLUMN_TYPE, FILTER_MODE } from 'src/app/shared/model/column.model';
 
 export var TestCasesColumnsData: Column[] = [
     {
@@ -9,7 +9,7 @@ export var TestCasesColumnsData: Column[] = [
         flexGrow: 100,
         defaultActive: true,
         searchable: true,
-        dropActive: false,
+        filterDisplayed: false,
         multiple: true,
         placeholder: 'Select applications',
         sSearch: []
@@ -34,7 +34,8 @@ export var TestCasesColumnsData: Column[] = [
         flexGrow: 75,
         active: true,
         defaultActive: true,
-        like: true,
+        like: true, 
+        filterMode: FILTER_MODE.SEARCH_FIELD,
         multiple: true,
         placeholder: 'Search TestCase',
         sSearch: []
@@ -48,7 +49,7 @@ export var TestCasesColumnsData: Column[] = [
         defaultActive: true,
         sortable: false,
         searchable: true,
-        dropActive: false,
+        filterDisplayed: false,
         flexGrow: 250,
         multiple: true,
         placeholder: 'Select Labels',
@@ -62,8 +63,9 @@ export var TestCasesColumnsData: Column[] = [
         flexGrow: 250,
         defaultActive: true,
         active: true,
-        dropActive: false,
-        like: true,
+        filterDisplayed: false,
+        like: true, 
+        filterMode: FILTER_MODE.SEARCH_FIELD,
         multiple: true,
         placeholder: 'Search Description...',
         sSearch: []
@@ -76,7 +78,7 @@ export var TestCasesColumnsData: Column[] = [
         active: true,
         defaultActive: true,
         searchable: true,
-        dropActive: false,
+        filterDisplayed: false,
         flexGrow: 100,
         multiple: true,
         placeholder: 'Select status',
@@ -88,7 +90,7 @@ export var TestCasesColumnsData: Column[] = [
         contentName: 'priority',
         active: true,
         defaultActive: true,
-        dropActive: false,
+        filterDisplayed: false,
         searchable: true,
         flexGrow: 100,
         multiple: true,
@@ -101,7 +103,7 @@ export var TestCasesColumnsData: Column[] = [
         apiName: 'app.system',
         contentName: 'system',
         active: false,
-        dropActive: false,
+        filterDisplayed: false,
         searchable: true,
         multiple: true,
         placeholder: 'Select System...',
@@ -114,7 +116,7 @@ export var TestCasesColumnsData: Column[] = [
         contentName: 'tcActive',
         searchable: true,
         active: false,
-        dropActive: false,
+        filterDisplayed: false,
         type: COLUMN_TYPE.BOOLEAN,
         multiple: false,
         placeholder: 'Select Gloabl Activation',
@@ -141,7 +143,7 @@ export var TestCasesColumnsData: Column[] = [
         type: COLUMN_TYPE.LABEL,
         active: false,
         sortable: false,
-        dropActive: false,
+        filterDisplayed: false,
         multiple: true,
         placeholder: 'Select Stickers',
         sSearch: []
@@ -153,7 +155,7 @@ export var TestCasesColumnsData: Column[] = [
         contentName: 'labelsREQUIREMENT',
         type: COLUMN_TYPE.LABEL,
         active: false,
-        dropActive: false,
+        filterDisplayed: false,
         sortable: false,
         multiple: true,
         placeholder: 'Select Requirement',
@@ -166,7 +168,7 @@ export var TestCasesColumnsData: Column[] = [
         contentName: 'labelsBATTERY',
         type: COLUMN_TYPE.LABEL,
         active: false,
-        dropActive: false,
+        filterDisplayed: false,
         sortable: false
     },//
     {
@@ -174,7 +176,7 @@ export var TestCasesColumnsData: Column[] = [
         apiName: 'tec.tcactive',
         contentName: 'activePROD',
         active: false,
-        dropActive: false,
+        filterDisplayed: false,
         type: COLUMN_TYPE.BOOLEAN
     },
     {
@@ -182,7 +184,7 @@ export var TestCasesColumnsData: Column[] = [
         apiName: 'tec.tcactive',
         contentName: 'activeQA',
         active: false,
-        dropActive: false,
+        filterDisplayed: false,
         type: COLUMN_TYPE.BOOLEAN
     },
     {
@@ -190,7 +192,7 @@ export var TestCasesColumnsData: Column[] = [
         apiName: 'tec.tcactive',
         contentName: 'activeUAT',
         active: false,
-        dropActive: false,
+        filterDisplayed: false,
         type: COLUMN_TYPE.BOOLEAN
     },
     {
@@ -198,9 +200,9 @@ export var TestCasesColumnsData: Column[] = [
         apiName: 'tec.function',
         contentName: 'function',
         active: false,
-        dropActive: false,
-        like: true,
-
+        filterDisplayed: false,
+        like: true, 
+        filterMode: FILTER_MODE.SEARCH_FIELD,
         multiple: true,
         placeholder: 'Select Function',
         sSearch: []
@@ -210,7 +212,7 @@ export var TestCasesColumnsData: Column[] = [
         displayName: 'Project',
         apiName: 'tec.project',
         contentName: 'Project',
-        dropActive: false,
+        filterDisplayed: false,
         active: false,
 
         multiple: true,
@@ -222,7 +224,7 @@ export var TestCasesColumnsData: Column[] = [
         displayName: 'Origine',
         apiName: 'tec.origine',
         contentName: 'origine',
-        dropActive: false,
+        filterDisplayed: false,
         active: false,
 
         multiple: true,
@@ -235,8 +237,9 @@ export var TestCasesColumnsData: Column[] = [
         apiName: 'tec.refOrigine',
         contentName: 'refOrigin',
         active: false,
-        dropActive: false,
-        like: true,
+        filterDisplayed: false,
+        like: true, 
+        filterMode: FILTER_MODE.SEARCH_FIELD,
         multiple: true,
         placeholder: 'Select Reference Origine',
         sSearch: []
@@ -258,8 +261,9 @@ export var TestCasesColumnsData: Column[] = [
         apiName: 'tec.dateCreated',
         contentName: 'dateCreated',
         active: false,
-        dropActive: false,
-        like: true,
+        filterDisplayed: false,
+        like: true, 
+        filterMode: FILTER_MODE.SEARCH_FIELD,
         multiple: true,
         placeholder: 'Select Date Created',
         sSearch: []
@@ -269,7 +273,7 @@ export var TestCasesColumnsData: Column[] = [
         displayName: 'User Created',
         apiName: 'tec.usrCreated',
         contentName: 'usrCreated',
-        dropActive: false,
+        filterDisplayed: false,
         searchable: true,
         active: false,
         multiple: true,
@@ -281,7 +285,7 @@ export var TestCasesColumnsData: Column[] = [
         displayName: 'TestCase Version',
         apiName: 'tec.testCaseVersion',
         contentName: 'testCaseVersion',
-        dropActive: false,
+        filterDisplayed: false,
         active: false,
         multiple: true,
         placeholder: 'Select TestCase Version',
@@ -293,8 +297,9 @@ export var TestCasesColumnsData: Column[] = [
         apiName: 'tec.dateModif',
         contentName: 'dateModif',
         active: false,
-        dropActive: false,
-        like: true,
+        filterDisplayed: false,
+        like: true, 
+        filterMode: FILTER_MODE.SEARCH_FIELD,
         multiple: true,
         placeholder: 'Select Date Modification',
         sSearch: []
@@ -304,7 +309,7 @@ export var TestCasesColumnsData: Column[] = [
         displayName: 'User Modification',
         apiName: 'tec.usrModif',
         contentName: 'usrModif',
-        dropActive: false,
+        filterDisplayed: false,
         active: false,
         multiple: true,
         placeholder: 'Select User Modification',
diff --git a/src/app/shared/datatable-page/datatable/datatable.component.ts b/src/app/shared/datatable-page/datatable/datatable.component.ts
index 6c71d94d..2ff6b0f0 100644
--- a/src/app/shared/datatable-page/datatable/datatable.component.ts
+++ b/src/app/shared/datatable-page/datatable/datatable.component.ts
@@ -71,17 +71,18 @@ export class DatatableComponent implements OnInit {
    * @param column column to filter
    */
   addFilter(column: Column): void {
-    column.dropActive = !column.dropActive;
+    column.filterDisplayed = !column.filterDisplayed;
   }
-
-  /**
+  
+  /** 
    * addFilterLike
    * * Add a like filter corresponding to the column
    * @param column column to filter
+   * TODO : Remove
    */
-  addFilterLike(column: Column): void {
-    column.fieldActive = !column.fieldActive;
-  }
+  // addFilterLike(column: Column): void {
+  //   column.fieldActive = !column.fieldActive;
+  // }
 
   /**
    * onSort
diff --git a/src/app/shared/datatable-page/filters/filters.component.html b/src/app/shared/datatable-page/filters/filters.component.html
index 43cf0d98..10605891 100644
--- a/src/app/shared/datatable-page/filters/filters.component.html
+++ b/src/app/shared/datatable-page/filters/filters.component.html
@@ -99,7 +99,7 @@ <h3 class="block-title">
                                         <!--List of filters (underline if selected)-->
                                         <ng-template ng-option-tmp let-item="item" let-index="index">
                                             <div (click)="addFilter(item)">
-                                                <span *ngIf="item.dropActive || item.fieldActive; else elseTemplate"
+                                                <span *ngIf="item.filterDisplayed; else elseTemplate"
                                                     class="text-primary-dark bold">
                                                     <i class="ml-1 fa fa-check-circle text-primary-dark"></i>
                                                     {{item.displayName}}
@@ -113,17 +113,17 @@ <h3 class="block-title">
                                     <div class="filter-list form-inline mb-2">
                                         <!--Distinct filters-->
                                         <ng-template ngFor let-column [ngForOf]="columns">
-                                            <app-filter *ngIf="column.dropActive" class="filter-drop" [column]="column"
+                                            <app-filter *ngIf="column.filterDisplayed" class="filter-drop" [column]="column"
                                                 [servlet]="servlet" (applyFilterOutput)=applySystem()
                                                 (remove)="removeFilter($event)">
                                             </app-filter>
                                         </ng-template>
-                                        <!--Like filters-->
-                                        <ng-template ngFor let-column [ngForOf]="columns">
+                                        <!--Like filters--><!-- TODO : remove-->
+                                        <!-- <ng-template ngFor let-column [ngForOf]="columns">
                                             <app-filterlike *ngIf="column.fieldActive" [column]="column"
                                                 (applyFilterOutput)=applySystem() (remove)="removeFilter($event)">
                                             </app-filterlike>
-                                        </ng-template>
+                                        </ng-template> -->
                                     </div>
                                 </div>
                             </div>
diff --git a/src/app/shared/datatable-page/filters/filters.component.ts b/src/app/shared/datatable-page/filters/filters.component.ts
index b8ee13d3..d98b0380 100644
--- a/src/app/shared/datatable-page/filters/filters.component.ts
+++ b/src/app/shared/datatable-page/filters/filters.component.ts
@@ -6,7 +6,7 @@ import { InvariantsService } from '../../../core/services/crud/invariants.servic
 import { IInvariant } from '../../../shared/model/invariants.model';
 import { TestService } from '../../../core/services/crud/test.service';
 import { ITest } from '../../../shared/model/test.model';
-import { Column } from 'src/app/shared/model/column.model';
+import { Column, FILTER_MODE } from 'src/app/shared/model/column.model';
 import { SidecontentService } from 'src/app/core/services/crud/sidecontent.service';
 
 @Component({
@@ -49,7 +49,7 @@ export class FiltersComponent implements OnInit {
 
   ngOnInit() {    
     this.columnActive = this.columns.filter(a => a.active).length;
-    this.searchableColumns = this.columns.filter(a => a.searchable || a.like);
+    this.searchableColumns = this.columns.filter(a => a.searchable || a.filterMode===FILTER_MODE.SEARCH_FIELD);
   }
 
   /**
@@ -94,23 +94,24 @@ export class FiltersComponent implements OnInit {
    * @param column  column to filter
    */
   addFilter(column: Column) {
-    if (column.dropActive || column.fieldActive) {
+    if (column.filterDisplayed) {
       column.sSearch = [];
       this.activeFilters.splice(this.activeFilters.indexOf(column.contentName),1)
     } else {
       this.activeFilters.push(column.contentName)
     }
-    if (!column.like) column.dropActive = !column.dropActive;
-    else column.fieldActive = !column.fieldActive;
+    column.filterDisplayed = !column.filterDisplayed;
+   
   }
 
   /** addFilterLike
    * * Add search field for that column
    * @param column column to filter
+   * TODO : remove
    */
-  addFilterLike(column: Column) {
-    column.fieldActive = !column.fieldActive;
-  }
+  // addFilterLike(column: Column) {
+  //   column.fieldActive = !column.fieldActive;
+  // }
 
   /** resetDefaultColumns
    * * rest default column to display
diff --git a/src/app/shared/datatable-page/utils/filter/filter.component.html b/src/app/shared/datatable-page/utils/filter/filter.component.html
index c5cbe9c0..b7f5b5c9 100644
--- a/src/app/shared/datatable-page/utils/filter/filter.component.html
+++ b/src/app/shared/datatable-page/utils/filter/filter.component.html
@@ -1,5 +1,4 @@
-<div class="input-group mr-2 mb-2">
-
+<div class="input-group mr-2 mb-2" *ngIf="column.filterMode==='SEARCH_FIELD'">
   <div class="input-group-prepend link-cursor" (mouseenter)="mouseOverOnFilter = true"
     (mouseleave)="mouseOverOnFilter = false" (click)="removeFilter()">
     <span class="input-group-text">
@@ -7,43 +6,58 @@
       {{column.displayName}}
     </span>
   </div>
+  <input type="text" class="form-control" (keyup.enter)="validField()" (blur)="validField()" [(ngModel)]="data"
+    [placeholder]="column.placeholder">
 
-  <ng-select class="custom" [items]="dataList" [selectableGroup]="true" [multiple]="column.multiple"
-    [closeOnSelect]="false" [bindValue]="id" [bindLabel]="label" [(ngModel)]='model' (open)="updateModel()"
-    (add)="onAdd($event)" (remove)="applyFilter()" (change)="onChange($event)" (clear)="applyFilter()"
-    [clearable]="true" (close)="applyFilter()" (search)="onSearch($event)" (keyup.enter)="onKeyUpEnter($event)">
+</div>
 
-    <!-- NOT WORKING RIGHT NOW -->
-    <ng-template *ngIf="column.type=='label'" ng-option-tmp let-item="item" let-index="index">
-      <div class="label" [style.background-color]="item.color">{{item.label}}</div>
-    </ng-template>
+  <div class="input-group mr-2 mb-2" *ngIf="column.filterMode==='DROPDOWN'">
 
-    <ng-template ng-multi-label-tmp let-items="items" let-clear="clear" let-search="searchTerm">
-      <i class="fa fa-fw fa-folder-open mr-2" style="color:#495057;"></i>
-      <span class="nav-main-link-badge badge badge-pill badge-primary mr-2">
-        <span *ngIf="items.length == 1"> {{ items[0] }}</span>
-        <span *ngIf="items.length > 1"> {{ items.length }} </span>
+    <div class="input-group-prepend link-cursor" (mouseenter)="mouseOverOnFilter = true"
+      (mouseleave)="mouseOverOnFilter = false" (click)="removeFilter()">
+      <span class="input-group-text">
+        <i class="fa fa-fw mr-2" [ngClass]="mouseOverOnFilter ? 'fa-trash' : 'fa-search'" style="color:#495057;"></i>
+        {{column.displayName}}
       </span>
-    </ng-template>
+    </div>
 
-    <ng-template ng-header-tmp>
-      <div class="row ml-1 mr-1">
-        <!-- TO DO : disable buttons -->
-        <!-- SELECT ALL BUTTON -->
-        <button class="col mr-2 btn btn-info btn-sm" (click)="onSelectAll()">
-          <i class="fa fa-fw fa-check mr-1"></i>
-          Select all
-        </button>
-        <!-- CLEAR ALL BUTTON -->
-        <button class="col btn btn-danger btn-sm" (click)="onClearAll()">
-          <i class="fa fa-fw fa-times mr-1"></i>
-          Clear all
-        </button>
-      </div>
-    </ng-template>
+    <ng-select class="custom" [items]="dataList" [selectableGroup]="true" [multiple]="column.multiple"
+      [closeOnSelect]="false" [bindValue]="id" [bindLabel]="label" [(ngModel)]='model' (open)="updateModel()"
+      (add)="onAdd($event)" (remove)="applyFilter()" (change)="onChange($event)" (clear)="applyFilter()"
+      [clearable]="true" (close)="applyFilter()" (search)="onSearch($event)" (keyup.enter)="onKeyUpEnter($event)">
+
+      <!-- NOT WORKING RIGHT NOW -->
+      <ng-template *ngIf="column.type=='label'" ng-option-tmp let-item="item" let-index="index">
+        <div class="label" [style.background-color]="item.color">{{item.label}}</div>
+      </ng-template>
+
+      <ng-template ng-multi-label-tmp let-items="items" let-clear="clear" let-search="searchTerm">
+        <i class="fa fa-fw fa-folder-open mr-2" style="color:#495057;"></i>
+        <span class="nav-main-link-badge badge badge-pill badge-primary mr-2">
+          <span *ngIf="items.length == 1"> {{ items[0] }}</span>
+          <span *ngIf="items.length > 1"> {{ items.length }} </span>
+        </span>
+      </ng-template>
+
+      <ng-template ng-header-tmp>
+        <div class="row ml-1 mr-1">
+          <!-- TO DO : disable buttons -->
+          <!-- SELECT ALL BUTTON -->
+          <button class="col mr-2 btn btn-info btn-sm" (click)="onSelectAll()">
+            <i class="fa fa-fw fa-check mr-1"></i>
+            Select all
+          </button>
+          <!-- CLEAR ALL BUTTON -->
+          <button class="col btn btn-danger btn-sm" (click)="onClearAll()">
+            <i class="fa fa-fw fa-times mr-1"></i>
+            Clear all
+          </button>
+        </div>
+      </ng-template>
+
+    </ng-select>
+  </div>
 
-  </ng-select>
-</div>
 
 <!-- <div class="select-container">
   <ng-select class="custom auto-width" [items]="dataList" [selectableGroup]="true" [multiple]="column.multiple"
diff --git a/src/app/shared/datatable-page/utils/filter/filter.component.ts b/src/app/shared/datatable-page/utils/filter/filter.component.ts
index 854321b3..8a1e0b2b 100644
--- a/src/app/shared/datatable-page/utils/filter/filter.component.ts
+++ b/src/app/shared/datatable-page/utils/filter/filter.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Column } from 'src/app/shared/model/column.model';
+import { Column, FILTER_MODE } from 'src/app/shared/model/column.model';
 import { TestService } from 'src/app/core/services/crud/test.service';
 import { SystemService } from 'src/app/core/services/crud/system.service';
 
@@ -53,6 +53,9 @@ export class FilterComponent implements OnInit {
 
   ngOnInit() {
     /*use a different request to get label because need label AND color*/
+
+    if (!this.column.filterMode) this.column.filterMode = FILTER_MODE.DROPDOWN
+
     if (this.column.type === 'label') {
       this.systemService.getLabelsFromSystem('');
       this.systemService.observableLabelsList.subscribe(response => {
@@ -94,10 +97,15 @@ export class FilterComponent implements OnInit {
     this.searchItems = event.items;
   }
   removeFilter() {
-    this.column.dropActive = false;
+    this.column.filterDisplayed = false;
     this.model = [];
     this.remove.emit(this.column.contentName);
     this.applyFilter()
   }
 
+  validField(): void {
+    this.column.sSearch = [this.data];
+    this.applyFilterOutput.emit();
+  }
+
 }
diff --git a/src/app/shared/datatable-page/utils/filterlike/filterlike.component.html b/src/app/shared/datatable-page/utils/filterlike/filterlike.component.html
deleted file mode 100644
index f00b2cca..00000000
--- a/src/app/shared/datatable-page/utils/filterlike/filterlike.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="input-group mr-2 mb-2">
-    <div class="input-group-prepend link-cursor" (mouseenter)="mouseOverOnFilter = true"
-        (mouseleave)="mouseOverOnFilter = false" (click)="removeFilter()">
-        <span class="input-group-text">
-            <i class="fa fa-fw mr-2" [ngClass]="mouseOverOnFilter ? 'fa-trash' : 'fa-search'"
-                style="color:#495057;"></i>
-            {{column.displayName}}
-        </span>
-    </div>
-    <input type="text" class="form-control" (keyup.enter)="validField()" (blur)="validField()" [(ngModel)]="data"
-        [placeholder]="column.placeholder">
-</div>
\ No newline at end of file
diff --git a/src/app/shared/datatable-page/utils/filterlike/filterlike.component.scss b/src/app/shared/datatable-page/utils/filterlike/filterlike.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/shared/datatable-page/utils/filterlike/filterlike.component.spec.ts b/src/app/shared/datatable-page/utils/filterlike/filterlike.component.spec.ts
deleted file mode 100644
index 7d36976e..00000000
--- a/src/app/shared/datatable-page/utils/filterlike/filterlike.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FilterlikeComponent } from './filterlike.component';
-
-describe('FilterlikeComponent', () => {
-  let component: FilterlikeComponent;
-  let fixture: ComponentFixture<FilterlikeComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ FilterlikeComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FilterlikeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/shared/datatable-page/utils/filterlike/filterlike.component.ts b/src/app/shared/datatable-page/utils/filterlike/filterlike.component.ts
deleted file mode 100644
index e142f83b..00000000
--- a/src/app/shared/datatable-page/utils/filterlike/filterlike.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { Column } from 'src/app/shared/model/column.model';
-import { TestService } from 'src/app/core/services/crud/test.service';
-
-@Component({
-  selector: 'app-filterlike',
-  templateUrl: './filterlike.component.html',
-  styleUrls: ['./filterlike.component.scss']
-})
-export class FilterlikeComponent implements OnInit {
-
-  @Input() column: Column;
-  @Output() applyFilterOutput = new EventEmitter<void>();
-  @Output() remove = new EventEmitter<string>();
-  data: string;
-
-  private mouseOverOnFilter: boolean = false;
-
-  constructor(private testService: TestService) { }
-
-  ngOnInit() { }
-
-  validField(): void {
-    this.column.sSearch = [this.data];
-    this.applyFilterOutput.emit();
-  }
-
-  removeFilter() {
-    this.column.fieldActive = false;
-    this.data = '';
-    this.remove.emit(this.column.contentName);
-    this.validField()
-  }
-
-}
diff --git a/src/app/shared/model/column.model.ts b/src/app/shared/model/column.model.ts
index 706d75af..f3f2664f 100644
--- a/src/app/shared/model/column.model.ts
+++ b/src/app/shared/model/column.model.ts
@@ -9,7 +9,8 @@ export interface Column {
     sortable?: boolean, // the column can be sortable
     searchable?: boolean, // the column can be filter with a dropdown
     displayContentFunction?: (any) => string, // if some value need a function to be display
-    dropActive?: boolean, //the dropdown filter is active 
+    filterDisplayed?: boolean, //the dropdown filter is active 
+    filterMode?: FILTER_MODE,
     fieldActive?: boolean, // the text field filter is active
     placeholder?: string, // Placeholder of the corresponding filter
     multiple?: boolean, // can select multiple item at time
@@ -22,4 +23,9 @@ export enum COLUMN_TYPE {
     LABEL = 'label',
     LONGTEXT = 'longtext',
     LIST = 'list'
+}
+
+export enum FILTER_MODE {
+    DROPDOWN = 'DROPDOWN',
+    SEARCH_FIELD = 'SEARCH_FIELD'
 }
\ No newline at end of file
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 7c5a9444..2be72e20 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -11,7 +11,6 @@ import { NgbPopoverModule } from "@ng-bootstrap/ng-bootstrap";
 import { LabelComponent } from './label/label.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { DatatablePageComponent } from './datatable-page/datatable-page.component';
-import { FilterlikeComponent } from './datatable-page/utils/filterlike/filterlike.component';
 import { FiltersComponent } from "./datatable-page/filters/filters.component";
 import { FilterComponent } from "./datatable-page/utils/filter/filter.component";
 import { RunComponent } from './run/run.component';
@@ -29,7 +28,6 @@ import { DatatableFilterTmpDirective, DatatableMassActionTmpDirective, Datatable
     LabelfilteringPipe,
     LabelComponent,
     DatatablePageComponent,
-    FilterlikeComponent,
     FiltersComponent,
     FilterComponent,
     RunComponent,