feat(filter): add input search range functionality, ref issue #240

src/app/examples/grid-clientside.component.ts

@@ -103,8 +103,8 @@ export class GridClientSideComponent implements OnInit {
         }
       },
       {
-        id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, minWidth: 70, type: FieldType.number, sortable: true,
-        filterable: true, filter: { model: Filters.compoundInputNumber }
+        id: 'complete', name: '% Complete', field: 'percentComplete', /*formatter: Formatters.percentCompleteBar,*/ minWidth: 70, type: FieldType.number, sortable: true,
+        filterable: true, filter: { model: Filters.input /*Filters.compoundInputNumber*/ }
       },
       {
         id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: true,
@@ -172,9 +172,9 @@ export class GridClientSideComponent implements OnInit {
       // use columnDef searchTerms OR use presets as shown below
       presets: {
         filters: [
-          { columnId: 'duration', searchTerms: [10, 220] },
-          // { columnId: 'complete', searchTerms: ['5'], operator: '>' },
-          { columnId: 'usDateShort', operator: '<', searchTerms: ['4/20/25'] },
+          // { columnId: 'duration', searchTerms: [10, 220] },
+          { columnId: 'complete', searchTerms: ['5..10'] },
+          // { columnId: 'usDateShort', operator: '<', searchTerms: ['4/20/25'] },
           // { columnId: 'effort-driven', searchTerms: [true] }
         ],
         sorters: [

src/app/modules/angular-slickgrid/filter-conditions/numberFilterCondition.ts

@@ -1,15 +1,37 @@
+import { OperatorType } from './../models/operatorType.enum';
 import { FilterCondition, FilterConditionOption } from '../models/index';
 import { testFilterCondition } from './filterUtilities';
 
 export const numberFilterCondition: FilterCondition = (options: FilterConditionOption) => {
   const cellValue = parseFloat(options.cellValue);
-  let searchTerm = (Array.isArray(options.searchTerms) && options.searchTerms[0]) || 0;
+  const searchTerm = (Array.isArray(options.searchTerms) && options.searchTerms[0]) || 0;
+
+  let isRangeSearch = false;
+  let searchValue1;
+  let searchValue2;
+
   if (typeof searchTerm === 'string') {
-    searchTerm = parseFloat(searchTerm);
+    if (searchTerm.indexOf('..') >= 0) {
+      isRangeSearch = true;
+      const searchValues = searchTerm.split('..');
+      searchValue1 = parseFloat(Array.isArray(searchValues) && searchValues[0]);
+      searchValue2 = parseFloat(Array.isArray(searchValues) && searchValues[1]);
+    } else {
+      searchValue1 = parseFloat(searchTerm);
+    }
+  } else {
+    searchValue1 = searchTerm;
   }
 
   if (!searchTerm && !options.operator) {
     return true;
   }
-  return testFilterCondition(options.operator || '==', cellValue, searchTerm);
+
+  if (isRangeSearch) {
+    const isInclusive = options.operator && options.operator === OperatorType.rangeIncluside;
+    const resultCondition1 = testFilterCondition((isInclusive ? '>=' : '>'), cellValue, searchValue1);
+    const resultCondition2 = testFilterCondition((isInclusive ? '<=' : '<'), cellValue, searchValue2);
+    return (resultCondition1 && resultCondition2);
+  }
+  return testFilterCondition(options.operator || '==', cellValue, searchValue1);
 };

src/app/modules/angular-slickgrid/models/operatorString.ts

@@ -1 +1 @@
-export type OperatorString = '' | '<>' | '!=' | '=' | '==' | '>' | '>=' | '<' | '<=' | '*' | 'a*' | '*z' | 'EQ' | 'GE' | 'GT' | 'NE' | 'LE' | 'LT' | 'IN' | 'NIN' | 'NOT_IN' | 'IN_CONTAINS' | 'NIN_CONTAINS' | 'NOT_IN_CONTAINS' | 'NOT_CONTAINS' | 'Not_Contains' | 'Contains' | 'EndsWith' | 'StartsWith';
+export type OperatorString = '' | '<>' | '!=' | '=' | '==' | '>' | '>=' | '<' | '<=' | '*' | 'a*' | '*z' | 'EQ' | 'GE' | 'GT' | 'NE' | 'LE' | 'LT' | 'IN' | 'NIN' | 'NOT_IN' | 'IN_CONTAINS' | 'NIN_CONTAINS' | 'NOT_IN_CONTAINS' | 'NOT_CONTAINS' | 'Not_Contains' | 'Contains' | 'EndsWith' | 'StartsWith' | 'RangeInclusive' | 'RangeNotInclusive';

src/app/modules/angular-slickgrid/models/operatorType.enum.ts

@@ -29,6 +29,18 @@ export enum OperatorType {
   /** String ends with value */
   endsWith = 'EndsWith',
 
+  /**
+   * Search in an inclusive range of values that is greater or equal to search value 1 and is smaller or equal to value 2
+   * For example the search term of "5..10" will return any values that are greater or equal to 5 and smaller or equal to 10
+   */
+  rangeIncluside = 'RangeInclusive',
+
+  /**
+   * Search in an inclusive range of values that is greater then search value 1 and is smaller then value 2
+   * For example the search term of "5..10" will return any values that is greater then 5 and smaller then 10
+   */
+  rangeNotIncluside = 'RangeNotInclusive',
+
   /** String starts with value */
   startsWith = 'StartsWith',