refactor(searchTerm): remove searchTerm and only use searchTerms

- prior to this, user could predefined searchTerm (singular) or searchTerms (array). To simplify the logic, the singular searchTerm has been dropped in favor of the array searchTerms

aurelia-slickgrid/src/aurelia-slickgrid/filter-conditions/booleanFilterCondition.ts

@@ -5,5 +5,6 @@ function parseBoolean(input: boolean | number | string) {
 }
 
 export const booleanFilterCondition: FilterCondition = (options: FilterConditionOption) => {
-  return parseBoolean(options.cellValue) === parseBoolean(options.searchTerm || false);
+  const searchTerm = Array.isArray(options.searchTerms) && options.searchTerms[0] || '';
+  return parseBoolean(options.cellValue) === parseBoolean(searchTerm);
 };

aurelia-slickgrid/src/aurelia-slickgrid/filter-conditions/dateFilterCondition.ts

@@ -4,13 +4,14 @@ import { testFilterCondition } from './filterUtilities';
 import * as moment from 'moment';
 
 export const dateFilterCondition: FilterCondition = (options: FilterConditionOption) => {
+  const searchTerm = Array.isArray(options.searchTerms) && options.searchTerms[0] || '';
   const filterSearchType = options.filterSearchType || FieldType.dateIso;
   const searchDateFormat = mapMomentDateFormatWithFieldType(filterSearchType);
-  if (!moment(options.cellValue, moment.ISO_8601).isValid() || !moment(options.searchTerm, searchDateFormat, true).isValid()) {
+  if (searchTerm === null || searchTerm === '' || !moment(options.cellValue, moment.ISO_8601).isValid() || !moment(searchTerm, searchDateFormat, true).isValid()) {
     return false;
   }
   const dateCell = moment(options.cellValue);
-  const dateSearch = moment(options.searchTerm);
+  const dateSearch = moment(searchTerm);
 
   // run the filter condition with date in Unix Timestamp format
   return testFilterCondition(options.operator || '==', parseInt(dateCell.format('X'), 10), parseInt(dateSearch.format('X'), 10));

aurelia-slickgrid/src/aurelia-slickgrid/filter-conditions/dateIsoFilterCondition.ts

@@ -5,11 +5,12 @@ import * as moment from 'moment';
 const FORMAT = mapMomentDateFormatWithFieldType(FieldType.dateIso);
 
 export const dateIsoFilterCondition: FilterCondition = (options: FilterConditionOption) => {
-  if (!moment(options.cellValue, FORMAT, true).isValid() || !moment(options.searchTerm, FORMAT, true).isValid()) {
+  const searchTerm = Array.isArray(options.searchTerms) && options.searchTerms[0] || '';
+  if (searchTerm === null || searchTerm === '' || !moment(options.cellValue, FORMAT, true).isValid() || !moment(searchTerm, FORMAT, true).isValid()) {
     return false;
   }
   const dateCell = moment(options.cellValue, FORMAT, true);
-  const dateSearch = moment(options.searchTerm, FORMAT, true);
+  const dateSearch = moment(searchTerm, FORMAT, true);
 
   // run the filter condition with date in Unix Timestamp format
   return testFilterCondition(options.operator || '==', parseInt(dateCell.format('X'), 10), parseInt(dateSearch.format('X'), 10));

aurelia-slickgrid/src/aurelia-slickgrid/filter-conditions/dateUsFilterCondition.ts

@@ -5,11 +5,12 @@ import * as moment from 'moment';
 const FORMAT = mapMomentDateFormatWithFieldType(FieldType.dateUs);
 
 export const dateUsFilterCondition: FilterCondition = (options: FilterConditionOption) => {
-  if (!moment(options.cellValue, FORMAT, true).isValid() || !moment(options.searchTerm, FORMAT, true).isValid()) {
+  const searchTerm = Array.isArray(options.searchTerms) && options.searchTerms[0] || '';
+  if (searchTerm === null || searchTerm === '' || !moment(options.cellValue, FORMAT, true).isValid() || !moment(searchTerm, FORMAT, true).isValid()) {
     return false;
   }
   const dateCell = moment(options.cellValue, FORMAT, true);
-  const dateSearch = moment(options.searchTerm, FORMAT, true);
+  const dateSearch = moment(searchTerm, FORMAT, true);
 
   // run the filter condition with date in Unix Timestamp format
   return testFilterCondition(options.operator || '==', parseInt(dateCell.format('X'), 10), parseInt(dateSearch.format('X'), 10));

aurelia-slickgrid/src/aurelia-slickgrid/filter-conditions/dateUsShortFilterCondition.ts

@@ -5,11 +5,12 @@ import { mapMomentDateFormatWithFieldType } from './../services/utilities';
 const FORMAT = mapMomentDateFormatWithFieldType(FieldType.dateUsShort);
 
 export const dateUsShortFilterCondition: FilterCondition = (options: FilterConditionOption) => {
-  if (!moment(options.cellValue, FORMAT, true).isValid() || !moment(options.searchTerm, FORMAT, true).isValid()) {
+  const searchTerm = Array.isArray(options.searchTerms) && options.searchTerms[0] || '';
+  if (searchTerm === null || searchTerm === '' || !moment(options.cellValue, FORMAT, true).isValid() || !moment(searchTerm, FORMAT, true).isValid()) {
     return false;
   }
   const dateCell = moment(options.cellValue, FORMAT, true);
-  const dateSearch = moment(options.searchTerm, FORMAT, true);
+  const dateSearch = moment(searchTerm, FORMAT, true);
 
   // run the filter condition with date in Unix Timestamp format
   return testFilterCondition(options.operator || '==', parseInt(dateCell.format('X'), 10), parseInt(dateSearch.format('X'), 10));

aurelia-slickgrid/src/aurelia-slickgrid/filter-conditions/dateUtcFilterCondition.ts

@@ -4,12 +4,13 @@ import { testFilterCondition } from './filterUtilities';
 import * as moment from 'moment';
 
 export const dateUtcFilterCondition: FilterCondition = (options: FilterConditionOption) => {
+  const searchTerm = Array.isArray(options.searchTerms) && options.searchTerms[0] || '';
   const searchDateFormat = mapMomentDateFormatWithFieldType(options.filterSearchType || options.fieldType);
-  if (!moment(options.cellValue, moment.ISO_8601).isValid() || !moment(options.searchTerm, searchDateFormat, true).isValid()) {
+  if (searchTerm === null || searchTerm === '' || !moment(options.cellValue, moment.ISO_8601).isValid() || !moment(searchTerm, searchDateFormat, true).isValid()) {
     return false;
   }
   const dateCell = moment(options.cellValue, moment.ISO_8601, true);
-  const dateSearch = moment(options.searchTerm, searchDateFormat, true);
+  const dateSearch = moment(searchTerm, searchDateFormat, true);
 
   // run the filter condition with date in Unix Timestamp format
   return testFilterCondition(options.operator || '==', parseInt(dateCell.format('X'), 10), parseInt(dateSearch.format('X'), 10));

aurelia-slickgrid/src/aurelia-slickgrid/filter-conditions/numberFilterCondition.ts

@@ -3,7 +3,10 @@ import { testFilterCondition } from './filterUtilities';
 
 export const numberFilterCondition: FilterCondition = (options: FilterConditionOption) => {
   const cellValue = parseFloat(options.cellValue);
-  const searchTerm = (typeof options.searchTerm === 'string') ? parseFloat(options.searchTerm) : options.searchTerm;
+  let searchTerm = (Array.isArray(options.searchTerms) && options.searchTerms[0]) || 0;
+  if (typeof searchTerm === 'string') {
+    searchTerm = parseFloat(searchTerm);
+  }
 
   return testFilterCondition(options.operator || '==', cellValue, searchTerm);
 };

aurelia-slickgrid/src/aurelia-slickgrid/filter-conditions/stringFilterCondition.ts

@@ -7,7 +7,10 @@ export const stringFilterCondition: FilterCondition = (options: FilterConditionO
 
   // make both the cell value and search value lower for case insensitive comparison
   const cellValue = options.cellValue.toLowerCase();
-  const searchTerm = (typeof options.searchTerm === 'string') ? options.searchTerm.toLowerCase() : options.searchTerm;
+  let searchTerm = (Array.isArray(options.searchTerms) && options.searchTerms[0]) || '';
+  if (typeof searchTerm === 'string') {
+    searchTerm = searchTerm.toLowerCase();
+  }
 
   if (options.operator === '*' || options.operator === OperatorType.endsWith) {
     return cellValue.endsWith(searchTerm);

aurelia-slickgrid/src/aurelia-slickgrid/filters/compoundDateFilter.ts

@@ -24,15 +24,19 @@ export class CompoundDateFilter implements Filter {
   private _currentValue: string;
   flatInstance: any;
   grid: any;
-  gridOptions: GridOption;
   operator: OperatorType | OperatorString | undefined;
-  searchTerm: SearchTerm | undefined;
+  searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
   filterType = FilterType.compoundDate;
 
   constructor(private i18n: I18N) { }
 
+  /** Getter for the Grid Options pulled through the Grid Object */
+  private get gridOptions(): GridOption {
+    return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
+  }
+
   /**
    * Initialize the Filter
    */
@@ -42,14 +46,14 @@ export class CompoundDateFilter implements Filter {
       this.callback = args.callback;
       this.columnDef = args.columnDef;
       this.operator = args.operator || '';
-      this.searchTerm = args.searchTerm;
-      if (this.grid && typeof this.grid.getOptions === 'function') {
-        this.gridOptions = this.grid.getOptions();
-      }
+      this.searchTerms = args.searchTerms || [];
+
+      // date input can only have 1 search term, so we will use the 1st array index if it exist
+      const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms[0]) || '';
 
       // step 1, create the DOM Element of the filter which contain the compound Operator+Input
       // and initialize it if searchTerm is filled
-      this.$filterElm = this.createDomElement();
+      this.$filterElm = this.createDomElement(searchTerm);
 
       // step 3, subscribe to the keyup event and run the callback when that happens
       // also add/remove "filled" class for styling purposes
@@ -84,17 +88,17 @@ export class CompoundDateFilter implements Filter {
   /**
    * Set value(s) on the DOM element
    */
-  setValues(values: SearchTerm) {
-    if (values) {
-      this.flatInstance.setDate(values);
+  setValues(values: SearchTerm[]) {
+    if (values && Array.isArray(values)) {
+      this.flatInstance.setDate(values[0]);
     }
   }
 
   //
   // private functions
   // ------------------
 
-  private buildDatePickerInput(searchTerm: SearchTerm) {
+  private buildDatePickerInput(searchTerm?: SearchTerm) {
     const inputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.type || FieldType.dateIso);
     const outputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.outputType || this.columnDef.type || FieldType.dateUtc);
     let currentLocale = this.i18n.getLocale() || 'en';
@@ -159,15 +163,10 @@ export class CompoundDateFilter implements Filter {
   /**
    * Create the DOM element
    */
-  private createDomElement() {
+  private createDomElement(searchTerm?: SearchTerm) {
     const $headerElm = this.grid.getHeaderRowColumn(this.columnDef.id);
     $($headerElm).empty();
 
-    const searchTerm = (this.searchTerm || '') as string;
-    if (searchTerm) {
-      this._currentValue = searchTerm;
-    }
-
     // create the DOM Select dropdown for the Operator
     this.$selectOperatorElm = $(this.buildSelectOperatorHtmlString());
     this.$filterInputElm = this.buildDatePickerInput(searchTerm);
@@ -199,8 +198,9 @@ export class CompoundDateFilter implements Filter {
     }
 
     // if there's a search term, we will add the "filled" class for styling purposes
-    if (this.searchTerm) {
+    if (searchTerm) {
       $filterContainerElm.addClass('filled');
+      this._currentValue = searchTerm as string;
     }
 
     // append the new DOM element to the header row
@@ -223,7 +223,7 @@ export class CompoundDateFilter implements Filter {
   private onTriggerEvent(e: Event | undefined) {
     const selectedOperator = this.$selectOperatorElm.find('option:selected').text();
     (this._currentValue) ? this.$filterElm.addClass('filled') : this.$filterElm.removeClass('filled');
-    this.callback(e, { columnDef: this.columnDef, searchTerm: this._currentValue, operator: selectedOperator || '=' });
+    this.callback(e, { columnDef: this.columnDef, searchTerms: [this._currentValue], operator: selectedOperator || '=' });
   }
 
   private hide() {

aurelia-slickgrid/src/aurelia-slickgrid/filters/compoundInputFilter.ts

@@ -23,15 +23,19 @@ export class CompoundInputFilter implements Filter {
   private $filterInputElm: any;
   private $selectOperatorElm: any;
   grid: any;
-  gridOptions: GridOption;
   operator: OperatorType | OperatorString | undefined;
-  searchTerm: SearchTerm | undefined;
+  searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
   filterType = FilterType.compoundInput;
 
   constructor(private i18n: I18N) { }
 
+  /** Getter for the Grid Options pulled through the Grid Object */
+  private get gridOptions(): GridOption {
+    return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
+  }
+
   /**
    * Initialize the Filter
    */
@@ -41,14 +45,14 @@ export class CompoundInputFilter implements Filter {
       this.callback = args.callback;
       this.columnDef = args.columnDef;
       this.operator = args.operator || '';
-      this.searchTerm = args.searchTerm;
-      if (this.grid && typeof this.grid.getOptions === 'function') {
-        this.gridOptions = this.grid.getOptions();
-      }
+      this.searchTerms = args.searchTerms || [];
+
+      // filter input can only have 1 search term, so we will use the 1st array index if it exist
+      const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms[0]) || '';
 
       // step 1, create the DOM Element of the filter which contain the compound Operator+Input
       // and initialize it if searchTerm is filled
-      this.$filterElm = this.createDomElement();
+      this.$filterElm = this.createDomElement(searchTerm);
 
       // step 3, subscribe to the keyup event and run the callback when that happens
       // also add/remove "filled" class for styling purposes
@@ -86,9 +90,9 @@ export class CompoundInputFilter implements Filter {
   /**
    * Set value(s) on the DOM element
    */
-  setValues(values: SearchTerm) {
-    if (values) {
-      this.$filterElm.val(values);
+  setValues(values: SearchTerm[]) {
+    if (values && Array.isArray(values)) {
+      this.$filterElm.val(values[0]);
     }
   }
 
@@ -146,7 +150,7 @@ export class CompoundInputFilter implements Filter {
   /**
    * Create the DOM element
    */
-  private createDomElement() {
+  private createDomElement(searchTerm?: SearchTerm) {
     const $headerElm = this.grid.getHeaderRowColumn(this.columnDef.id);
     $($headerElm).empty();
 
@@ -173,7 +177,6 @@ export class CompoundInputFilter implements Filter {
     $filterContainerElm.append($containerInputGroup);
     $filterContainerElm.attr('id', `filter-${this.columnDef.id}`);
 
-    const searchTerm = (typeof this.searchTerm === 'boolean') ? `${this.searchTerm}` : this.searchTerm;
     this.$filterInputElm.val(searchTerm);
     this.$filterInputElm.data('columnId', this.columnDef.id);
 
@@ -182,7 +185,7 @@ export class CompoundInputFilter implements Filter {
     }
 
     // if there's a search term, we will add the "filled" class for styling purposes
-    if (this.searchTerm) {
+    if (searchTerm) {
       $filterContainerElm.addClass('filled');
     }
 
@@ -198,6 +201,6 @@ export class CompoundInputFilter implements Filter {
     const selectedOperator = this.$selectOperatorElm.find('option:selected').text();
     const value = this.$filterInputElm.val();
     (value) ? this.$filterElm.addClass('filled') : this.$filterElm.removeClass('filled');
-    this.callback(e, { columnDef: this.columnDef, searchTerm: value, operator: selectedOperator || '' });
+    this.callback(e, { columnDef: this.columnDef, searchTerms: [value], operator: selectedOperator || '' });
   }
 }

aurelia-slickgrid/src/aurelia-slickgrid/filters/inputFilter.ts

@@ -12,12 +12,16 @@ import * as $ from 'jquery';
 export class InputFilter implements Filter {
   private $filterElm: any;
   grid: any;
-  gridOptions: GridOption;
-  searchTerm: SearchTerm;
+  searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
   filterType = FilterType.input;
 
+  /** Getter for the Grid Options pulled through the Grid Object */
+  private get gridOptions(): GridOption {
+    return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
+  }
+
   /**
    * Initialize the Filter
    */
@@ -28,16 +32,16 @@ export class InputFilter implements Filter {
     this.grid = args.grid;
     this.callback = args.callback;
     this.columnDef = args.columnDef;
-    this.searchTerm = args.searchTerm || '';
-    if (this.grid && typeof this.grid.getOptions === 'function') {
-      this.gridOptions = this.grid.getOptions();
-    }
+    this.searchTerms = args.searchTerms || [];
+
+    // filter input can only have 1 search term, so we will use the 1st array index if it exist
+    const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms[0]) || '';
 
     // step 1, create HTML string template
     const filterTemplate = this.buildTemplateHtmlString();
 
     // step 2, create the DOM Element of the filter & initialize it if searchTerm is filled
-    this.$filterElm = this.createDomElement(filterTemplate);
+    this.$filterElm = this.createDomElement(filterTemplate, searchTerm);
 
     // step 3, subscribe to the keyup event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
@@ -93,19 +97,20 @@ export class InputFilter implements Filter {
    * From the html template string, create a DOM element
    * @param filterTemplate
    */
-  private createDomElement(filterTemplate: string) {
+  private createDomElement(filterTemplate: string, searchTerm?: SearchTerm) {
     const $headerElm = this.grid.getHeaderRowColumn(this.columnDef.id);
     $($headerElm).empty();
 
     // create the DOM element & add an ID and filter class
     const $filterElm = $(filterTemplate);
-    const searchTerm = (typeof this.searchTerm === 'boolean') ? `${this.searchTerm}` : this.searchTerm;
-    $filterElm.val(searchTerm);
+    const searchTermInput = searchTerm as string;
+
+    $filterElm.val(searchTermInput);
     $filterElm.attr('id', `filter-${this.columnDef.id}`);
     $filterElm.data('columnId', this.columnDef.id);
 
     // if there's a search term, we will add the "filled" class for styling purposes
-    if (this.searchTerm) {
+    if (searchTerm) {
       $filterElm.addClass('filled');
     }
 

aurelia-slickgrid/src/aurelia-slickgrid/filters/multipleSelectFilter.ts

@@ -19,7 +19,6 @@ import * as $ from 'jquery';
 export class MultipleSelectFilter implements Filter {
   $filterElm: any;
   grid: any;
-  gridOptions: GridOption;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
@@ -62,6 +61,11 @@ export class MultipleSelectFilter implements Filter {
     };
   }
 
+  /** Getter for the Grid Options pulled through the Grid Object */
+  private get gridOptions(): GridOption {
+    return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
+  }
+
   /**
    * Initialize the filter template
    */
@@ -83,7 +87,6 @@ export class MultipleSelectFilter implements Filter {
     this.valueName = (this.columnDef.filter.customStructure) ? this.columnDef.filter.customStructure.value : 'value';
 
     let newCollection = this.columnDef.filter.collection || [];
-    this.gridOptions = this.grid.getOptions();
 
     // user might want to filter certain items of the collection
     if (this.gridOptions.params && this.columnDef.filter.collectionFilterBy) {