feat(filter): add demo of single search filter, closes #152 (#157)

* feat(filter): add demo of single search filter * refactor(filter): renamed update filter search method * refactor(example): fix single search filter with empty search value
ghiscoding · Apr 7, 2019 · 919872e · 919872e
1 parent 6e0d125
commit 919872e
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 10 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -9,7 +9,7 @@ indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.{js,json,ts,css,scss}]
+[*]
 indent_style = space
 indent_size = 2
 

diff --git a/src/examples/slickgrid/example21.html b/src/examples/slickgrid/example21.html
@@ -3,9 +3,37 @@ <h2>${title}</h2>
   <div class="subtitle"
        innerhtml.bind="subTitle"></div>
 
+  <form class="form-inline">
+    <div class="form-group">
+      <label>
+        Single Search:<br>
+      </label>
+      <select value.bind="selectedColumn"
+              class="form-control">
+        <option repeat.for="column of columnDefinitions"
+                model.bind="column">
+          ${column.name}
+        </option>
+      </select>
+    </div>
+    <select value.bind="selectedOperator"
+            class="form-control">
+      <option repeat.for="operator of operatorList"
+              model.bind="operator">
+        ${operator}
+      </option>
+    </select>
+    <input type="text"
+           class="form-control"
+           placeholder="search value"
+           value.bind="searchValue">
+  </form>
+  <hr />
+
   <aurelia-slickgrid grid-id="grid21"
                      column-definitions.bind="columnDefinitions"
                      grid-options.bind="gridOptions"
-                     dataset.bind="dataset">
+                     dataset.bind="dataset"
+                     asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
 </template>
diff --git a/src/examples/slickgrid/example21.ts b/src/examples/slickgrid/example21.ts
@@ -1,18 +1,19 @@
+import { bindable } from 'aurelia-framework';
 import {
+  AureliaGridInstance,
   Column,
   FieldType,
-  Formatter,
+  FilterCallbackArg,
   Formatters,
   GridOption,
+  OperatorString,
 } from '../../aurelia-slickgrid';
 
-// create my custom Formatter with the Formatter type
-const myCustomCheckmarkFormatter: Formatter = (row, cell, value, columnDef, dataContext) => {
-  // you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
-  return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
-};
 
 export class Example21 {
+  @bindable() selectedColumn: Column;
+  @bindable() selectedOperator: string;
+  @bindable() searchValue: string;
   title = 'Example 21: Grid AutoHeight';
   subTitle = `
   The SlickGrid option "autoHeight" can be used if you wish to keep the full height of the grid without any scrolling
@@ -23,11 +24,13 @@ export class Example21 {
   </ul>
   `;
 
+  aureliaGrid: AureliaGridInstance;
   grid: any;
   dataView: any;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
+  operatorList: OperatorString[] = ['=', '<', '<=', '>', '>=', '<>'];
 
   constructor() {
     // define the grid options & columns and then create the grid itself
@@ -39,6 +42,10 @@ export class Example21 {
     this.getData();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   /* Define grid Options and Columns */
   defineGrid() {
     this.columnDefinitions = [
@@ -82,8 +89,8 @@ export class Example21 {
     ];
 
     this.gridOptions = {
-      // if you want to disable autoResize and used a fixed width that requires horizontal scrolling
-      // you should disable the autoFitColumnsOnFirstLoad as well
+      // if you want to disable autoResize and use a fixed width which requires horizontal scrolling
+      // it's advised to disable the autoFitColumnsOnFirstLoad as well
       // enableAutoResize: false,
       // autoFitColumnsOnFirstLoad: false,
 
@@ -92,6 +99,11 @@ export class Example21 {
         containerId: 'demo-container',
         sidePadding: 15
       },
+
+      // enable the filtering but hide the user filter row since we use our own single filter
+      enableFiltering: true,
+      showHeaderRow: false, // hide the filter row (header row)
+
       enableGridMenu: false, // disable grid menu & remove vertical scroll
       alwaysShowVerticalScroll: false,
       enableColumnPicker: true,
@@ -130,4 +142,41 @@ export class Example21 {
     }
     return phone;
   }
+
+  //
+  // -- if any of the Search form input changes, we'll call the updateFilter() method
+  //
+
+  selectedOperatorChanged() {
+    this.updateFilter();
+  }
+
+  selectedColumnChanged() {
+    this.updateFilter();
+  }
+
+  searchValueChanged() {
+    this.updateFilter();
+  }
+
+  updateFilter() {
+    const fieldName = this.selectedColumn.field;
+    const filter = {};
+    const filterArg: FilterCallbackArg = {
+      columnDef: this.selectedColumn,
+      operator: this.selectedOperator as OperatorString, // or fix one yourself like '='
+      searchTerms: [this.searchValue || '']
+    };
+
+    if (this.searchValue) {
+      // pass a columnFilter object as an object which it's property name must be a column field name (e.g.: 'duration': {...} )
+      filter[fieldName] = filterArg;
+    }
+
+    this.aureliaGrid.dataView.setFilterArgs({
+      columnFilters: filter,
+      grid: this.aureliaGrid.slickGrid
+    });
+    this.aureliaGrid.dataView.refresh();
+  }
 }