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

src/app/examples/custom-inputFilter.ts

@@ -6,7 +6,7 @@ declare var $: any;
 export class CustomInputFilter implements Filter {
   private $filterElm: any;
   grid: any;
-  searchTerm: SearchTerm;
+  searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
 
@@ -19,13 +19,17 @@ export class CustomInputFilter implements Filter {
     this.grid = args.grid;
     this.callback = args.callback;
     this.columnDef = args.columnDef;
-    this.searchTerm = args.searchTerm;
+    this.searchTerms = args.searchTerms || [];
+
+    // filter input can only have 1 search term, so we will use the 1st array index if it exist
+    const searchTerms = (Array.isArray(this.searchTerms) && this.searchTerms[0]) || [];
+    const searchTerm = typeof searchTerms[0] === 'boolean' ? `${searchTerms[0]}` : 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
     this.$filterElm.keyup((e: any) => this.callback(e, { columnDef: this.columnDef }));
@@ -76,13 +80,13 @@ export class CustomInputFilter 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);
     $filterElm.attr('id', `filter-${this.columnDef.id}`);
     $filterElm.data('columnId', this.columnDef.id);

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

@@ -120,9 +120,9 @@ export class GridClientSideComponent implements OnInit {
       presets: {
         filters: [
           { columnId: 'duration', searchTerms: [2, 22, 44] },
-          // { columnId: 'complete', searchTerm: '5', operator: '>' },
-          { columnId: 'usDateShort', operator: '<', searchTerm: '4/20/25' },
-          // { columnId: 'effort-driven', searchTerm: true }
+          // { columnId: 'complete', searchTerms: ['5'], operator: '>' },
+          { columnId: 'usDateShort', operator: '<', searchTerms: ['4/20/25'] },
+          // { columnId: 'effort-driven', searchTerms: [true] }
         ],
         sorters: [
           { columnId: 'duration', direction: 'DESC' },

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

@@ -98,8 +98,8 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
       presets: {
         // you can also type operator as string, e.g.: operator: 'EQ'
         filters: [
-          { columnId: 'gender', searchTerm: 'male', operator: OperatorType.equal },
-          { columnId: 'name', searchTerm: 'John Doe', operator: OperatorType.contains },
+          { columnId: 'gender', searchTerms: ['male'], operator: OperatorType.equal },
+          { columnId: 'name', searchTerms: ['John Doe'], operator: OperatorType.contains },
           { columnId: 'company', searchTerms: ['xyz'], operator: 'IN' }
         ],
         sorters: [

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

@@ -11,7 +11,7 @@ export class GridRowSelectionComponent implements OnInit, OnDestroy {
     Row selection, single or multi-select (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Selection" target="_blank">Wiki docs</a>).
     <ul>
       <li>Single Select, you can click on any cell to make the row active</li>
-      <li>Multiple Selections, you need to specifically click on the checkbox to make a selection</li>
+      <li>Multiple Selections, you need to specifically click on the checkbox to make 1 or more selections</li>
     </ul>
   `;
 

src/app/examples/swt-common-grid.component.ts

@@ -344,7 +344,7 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer
             this.filteredGridColumns = '';
             for (let idx = 0; idx < this.columnDefinitions.length; idx++) {
                 if (args.columnFilters.hasOwnProperty(this.columnDefinitions[idx].field)) {
-                    this.filteredGridColumns += args.columnFilters[this.columnDefinitions[idx].field].searchTerm + '|';
+                    this.filteredGridColumns += args.columnFilters[this.columnDefinitions[idx].field].searchTerms[0] + '|';
                 } else {
                     this.filteredGridColumns += 'All|';
                 }

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

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

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

@@ -5,13 +5,14 @@ import * as moment_ from 'moment-mini';
 const moment = moment_; // patch to fix rollup "moment has no default export" issue, document here https://github.com/rollup/rollup/issues/670
 
 export const dateFilterCondition: FilterCondition = (options: FilterConditionOption) => {
+  const searchTerms = 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 (!moment(options.cellValue, moment.ISO_8601).isValid() || !moment(searchTerms[0], searchDateFormat, true).isValid()) {
     return true;
   }
   const dateCell = moment(options.cellValue);
-  const dateSearch = moment(options.searchTerm);
+  const dateSearch = moment(searchTerms[0]);
 
   // run the filter condition with date in Unix Timestamp format
   return testFilterCondition(options.operator || '==', parseInt(dateCell.format('X'), 10), parseInt(dateSearch.format('X'), 10));

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

@@ -6,11 +6,12 @@ const moment = moment_; // patch to fix rollup "moment has no default export" is
 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 searchTerms = Array.isArray(options.searchTerms) && options.searchTerms[0] || [];
+  if (!moment(options.cellValue, FORMAT, true).isValid() || !moment(searchTerms[0], FORMAT, true).isValid()) {
     return true;
   }
   const dateCell = moment(options.cellValue, FORMAT, true);
-  const dateSearch = moment(options.searchTerm, FORMAT, true);
+  const dateSearch = moment(searchTerms[0], 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));

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

@@ -6,11 +6,12 @@ const moment = moment_; // patch to fix rollup "moment has no default export" is
 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 searchTerms = Array.isArray(options.searchTerms) && options.searchTerms[0] || [];
+  if (!moment(options.cellValue, FORMAT, true).isValid() || !moment(searchTerms[0], FORMAT, true).isValid()) {
     return true;
   }
   const dateCell = moment(options.cellValue, FORMAT, true);
-  const dateSearch = moment(options.searchTerm, FORMAT, true);
+  const dateSearch = moment(searchTerms[0], 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));

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

@@ -6,11 +6,12 @@ const moment = moment_; // patch to fix rollup "moment has no default export" is
 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 searchTerms = Array.isArray(options.searchTerms) && options.searchTerms[0] || [];
+  if (!moment(options.cellValue, FORMAT, true).isValid() || !moment(searchTerms[0], FORMAT, true).isValid()) {
     return true;
   }
   const dateCell = moment(options.cellValue, FORMAT, true);
-  const dateSearch = moment(options.searchTerm, FORMAT, true);
+  const dateSearch = moment(searchTerms[0], 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));

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

@@ -5,12 +5,13 @@ import * as moment_ from 'moment-mini';
 const moment = moment_; // patch to fix rollup "moment has no default export" issue, document here https://github.com/rollup/rollup/issues/670
 
 export const dateUtcFilterCondition: FilterCondition = (options: FilterConditionOption) => {
+  const searchTerms = 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 (!moment(options.cellValue, moment.ISO_8601).isValid() || !moment(searchTerms[0], searchDateFormat, true).isValid()) {
     return true;
   }
   const dateCell = moment(options.cellValue, moment.ISO_8601, true);
-  const dateSearch = moment(options.searchTerm, searchDateFormat, true);
+  const dateSearch = moment(searchTerms[0], 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));

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

@@ -3,7 +3,8 @@ 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;
+  const searchTerms = Array.isArray(options.searchTerms) && options.searchTerms[0] || [];
+  const searchTerm = typeof searchTerms[0] === 'string' ? parseFloat(searchTerms[0]) : searchTerms[0];
 
   return testFilterCondition(options.operator || '==', cellValue, searchTerm);
 };

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

@@ -7,7 +7,8 @@ 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;
+  const searchTerms = Array.isArray(options.searchTerms) && options.searchTerms[0] || [];
+  const searchTerm = typeof searchTerms[0] === 'string' ? searchTerms[0].toLowerCase() : searchTerms[0];
 
   if (options.operator === '*' || options.operator === OperatorType.endsWith) {
     return cellValue.endsWith(searchTerm);

src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts

@@ -18,14 +18,18 @@ export class CompoundDateFilter implements Filter {
   private _currentValue: string;
   flatInstance: any;
   grid: any;
-  gridOptions: GridOption;
   operator: OperatorType | OperatorString;
-  searchTerm: SearchTerm;
+  searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
 
   constructor(private translate: TranslateService) {}
 
+  /** 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
    */
@@ -34,14 +38,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]) || '') as string;
 
     // 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();
+    // and initialize it if searchTerms is filled
+    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
@@ -76,17 +80,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.getCurrentLocale(this.columnDef, this.gridOptions) || '';
@@ -151,13 +155,12 @@ 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;
+      this._currentValue = searchTerm as string;
     }
 
     // create the DOM Select dropdown for the Operator
@@ -191,7 +194,7 @@ 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');
     }
 
@@ -224,7 +227,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() {

src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts

@@ -13,14 +13,18 @@ export class CompoundInputFilter implements Filter {
   private $filterInputElm: any;
   private $selectOperatorElm: any;
   grid: any;
-  gridOptions: GridOption;
   operator: OperatorType | OperatorString;
-  searchTerm: SearchTerm;
+  searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
 
   constructor(private translate: TranslateService) {}
 
+  /** 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
    */
@@ -29,14 +33,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]) || '') as string;
 
     // 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();
+    // and initialize it if searchTerms is filled
+    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
@@ -74,9 +78,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]);
     }
   }
 
@@ -134,7 +138,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();
 
@@ -161,7 +165,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);
 
@@ -170,7 +173,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');
     }
 
@@ -186,6 +189,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 || '' });
   }
 }