refactor(filter): use Filter model on ColumnFilter, remove FilterType

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

@@ -8,5 +8,9 @@ export const numberFilterCondition: FilterCondition = (options: FilterConditionO
     searchTerm = parseFloat(searchTerm);
   }
 
+  if (!searchTerm && (!options.operator || options.operator === '')) {
+    return true;
+  }
+
   return testFilterCondition(options.operator || '==', cellValue, searchTerm);
 };

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

@@ -7,7 +7,6 @@ import {
   Filter,
   FilterArguments,
   FilterCallback,
-  FilterType,
   GridOption,
   OperatorString,
   OperatorType,
@@ -22,13 +21,12 @@ export class CompoundDateFilter implements Filter {
   private $filterInputElm: any;
   private $selectOperatorElm: any;
   private _currentValue: string;
+  private _operator: OperatorType | OperatorString;
   flatInstance: any;
   grid: any;
-  operator: OperatorType | OperatorString | undefined;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
-  filterType = FilterType.compoundDate;
 
   constructor(private i18n: I18N) { }
 
@@ -37,6 +35,13 @@ export class CompoundDateFilter implements Filter {
     return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
   }
 
+  set operator(op: OperatorType | OperatorString) {
+    this._operator = op;
+  }
+  get operator(): OperatorType | OperatorString {
+    return this._operator || OperatorType.empty;
+  }
+
   /**
    * Initialize the Filter
    */

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

@@ -6,7 +6,6 @@ import {
   Filter,
   FilterArguments,
   FilterCallback,
-  FilterType,
   GridOption,
   OperatorString,
   OperatorType,
@@ -21,12 +20,11 @@ export class CompoundInputFilter implements Filter {
   private $filterElm: any;
   private $filterInputElm: any;
   private $selectOperatorElm: any;
+  private _operator: OperatorType | OperatorString;
   grid: any;
-  operator: OperatorType | OperatorString | undefined;
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
-  filterType = FilterType.compoundInput;
 
   constructor(private i18n: I18N) { }
 
@@ -35,6 +33,13 @@ export class CompoundInputFilter implements Filter {
     return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
   }
 
+  set operator(op: OperatorType | OperatorString) {
+    this._operator = op;
+  }
+  get operator(): OperatorType | OperatorString {
+    return this._operator || OperatorType.empty;
+  }
+
   /**
    * Initialize the Filter
    */

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

@@ -1,10 +1,7 @@
 import { inject, Container } from 'aurelia-framework';
-import { Filter, FilterType } from '../models/index';
+import { ColumnFilter, Filter } from '../models/index';
 import { SlickgridConfig } from '../slickgrid-config';
 
-/** The name of the plugins the factory will initialize */
-export const PLUGIN_NAME = 'GRID_FILTERS';
-
 /**
  * Factory class to create a Filter interface implementation
  */
@@ -25,26 +22,21 @@ export class FilterFactory {
   }
 
   /**
-   * Creates a new Filter from the provided filterType
-   * @param {FilterType | string} [filterType] the type of filter to create
-   * as an enum or custom string. The default filter type will be used if no value is passed
+   * Creates a new Filter from the provided ColumnFilter or fallbacks to the default filter
+   * @param {columnFilter} a ColumnFilter object
    * @return {Filter} the new Filter
    */
-  public createFilter(filterType?: FilterType | string): Filter {
-    const filters = this.container.getAll(PLUGIN_NAME);
-
-    let filter: Filter | undefined = filters.find((f: Filter) =>
-      f.filterType === filterType);
+  public createFilter(columnFilter: ColumnFilter): Filter {
+    let filter: Filter | undefined;
 
-    // default to the input filter type when none is found
-    if (!filter) {
-      filter = filters.find((f: Filter) => f.filterType === this._options.defaultFilterType);
-
-      if (!filter) {
-        const enumOrCustom = FilterType[this._options.defaultFilterType] ? 'FilterType.enum' : 'custom';
+    if (columnFilter && columnFilter.model) {
+      // the model either needs to be retrieved or is already instantiated
+      filter = typeof columnFilter.model === 'function' ? this.container.get(columnFilter.model) : columnFilter.model;
+    }
 
-        throw new Error(`Default filter of type ${enumOrCustom}=${this._options.defaultFilterType} was not found`);
-      }
+    // fallback to the default filter
+    if (!filter && this._options.defaultFilter) {
+      filter = this.container.get(this._options.defaultFilter);
     }
 
     return filter;

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

@@ -1,4 +1,3 @@
-import { Column, Filter } from './../models/index';
 import { CompoundDateFilter } from './compoundDateFilter';
 import { CompoundInputFilter } from './compoundInputFilter';
 import { InputFilter } from './inputFilter';
@@ -26,4 +25,4 @@ export const Filters = {
   select: SelectFilter
 };
 
-export { PLUGIN_NAME, FilterFactory } from './filterFactory';
+export { FilterFactory } from './filterFactory';

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

@@ -1,10 +1,11 @@
 import {
   Column,
   Filter,
-  FilterType,
   FilterArguments,
   FilterCallback,
   GridOption,
+  OperatorType,
+  OperatorString,
   SearchTerm
 } from './../models/index';
 import * as $ from 'jquery';
@@ -15,13 +16,16 @@ export class InputFilter implements Filter {
   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() : {};
   }
 
+  get operator(): OperatorType | OperatorString {
+    return OperatorType.equal;
+  }
+
   /**
    * Initialize the Filter
    */

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

@@ -5,10 +5,11 @@ import {
   Filter,
   FilterArguments,
   FilterCallback,
-  FilterType,
   GridOption,
   HtmlElementPosition,
   MultipleSelectOption,
+  OperatorType,
+  OperatorString,
   SearchTerm,
   SelectOption
 } from './../models/index';
@@ -24,7 +25,6 @@ export class MultipleSelectFilter implements Filter {
   callback: FilterCallback;
   defaultOptions: MultipleSelectOption;
   isFilled = false;
-  filterType = FilterType.multipleSelect;
   labelName: string;
   valueName: string;
   enableTranslateLabel = false;
@@ -66,6 +66,10 @@ export class MultipleSelectFilter implements Filter {
     return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
   }
 
+  get operator(): OperatorType | OperatorString {
+    return OperatorType.in;
+  }
+
   /**
    * Initialize the filter template
    */
@@ -79,7 +83,7 @@ export class MultipleSelectFilter implements Filter {
     this.searchTerms = args.searchTerms || [];
 
     if (!this.grid || !this.columnDef || !this.columnDef.filter || !this.columnDef.filter.collection) {
-      throw new Error(`[Aurelia-SlickGrid] You need to pass a "collection" for the MultipleSelect Filter to work correctly. Also each option should include a value/label pair (or value/labelKey when using Locale). For example:: { filter: type: FilterType.multipleSelect, collection: [{ value: true, label: 'True' }, { value: false, label: 'False'}] }`);
+      throw new Error(`[Aurelia-SlickGrid] You need to pass a "collection" for the MultipleSelect Filter to work correctly. Also each option should include a value/label pair (or value/labelKey when using Locale). For example: { filter: { model: Filters.multipleSelect, collection: [{ value: true, label: 'True' }, { value: false, label: 'False'}] } }`);
     }
 
     this.enableTranslateLabel = this.columnDef.filter.enableTranslateLabel || false;
@@ -153,7 +157,7 @@ export class MultipleSelectFilter implements Filter {
     let options = '';
     optionCollection.forEach((option: SelectOption) => {
       if (!option || (option[this.labelName] === undefined && option.labelKey === undefined)) {
-        throw new Error(`A collection with value/label (or value/labelKey when using Locale) is required to populate the Select list, for example:: { filter: type: FilterType.multipleSelect, collection: [ { value: '1', label: 'One' } ]')`);
+        throw new Error(`A collection with value/label (or value/labelKey when using Locale) is required to populate the Select list, for example:: { filter: model: Filters.multipleSelect, collection: [ { value: '1', label: 'One' } ]')`);
       }
       const labelKey = (option.labelKey || option[this.labelName]) as string;
       const selected = (this.findValueInSearchTerms(option[this.valueName]) >= 0) ? 'selected' : '';

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

@@ -3,9 +3,10 @@ import { inject } from 'aurelia-framework';
 import {
   Column,
   Filter,
-  FilterType,
   FilterArguments,
   FilterCallback,
+  OperatorString,
+  OperatorType,
   SearchTerm
 } from './../models/index';
 import * as $ from 'jquery';
@@ -17,10 +18,13 @@ export class SelectFilter implements Filter {
   searchTerms: SearchTerm[];
   columnDef: Column;
   callback: FilterCallback;
-  filterType = FilterType.select;
 
   constructor(private i18n: I18N) { }
 
+  get operator(): OperatorType | OperatorString {
+    return OperatorType.equal;
+  }
+
   /**
    * Initialize the Filter
    */
@@ -89,7 +93,7 @@ export class SelectFilter implements Filter {
 
   private buildTemplateHtmlString() {
     if (!this.columnDef || !this.columnDef.filter || !this.columnDef.filter.collection) {
-      throw new Error(`[Aurelia-SlickGrid] You need to pass a "collection" for the Select Filter to work correctly. Also each option should include a value/label pair (or value/labelKey when using Locale). For example:: { filter: type: FilterType.select, collection: [{ value: true, label: 'True' }, { value: false, label: 'False'}] }`);
+      throw new Error(`[Aurelia-SlickGrid] You need to pass a "collection" for the Select Filter to work correctly. Also each option should include a value/label pair (or value/labelKey when using Locale). For example: { filter: { model: Filters.select, collection: [{ value: true, label: 'True' }, { value: false, label: 'False'}] } }`);
     }
 
     const optionCollection = this.columnDef.filter.collection || [];
@@ -100,7 +104,7 @@ export class SelectFilter implements Filter {
     let options = '';
     optionCollection.forEach((option: any) => {
       if (!option || (option[labelName] === undefined && option.labelKey === undefined)) {
-        throw new Error(`A collection with value/label (or value/labelKey when using Locale) is required to populate the Select list, for example:: { filter: type: FilterType.select, collection: [ { value: '1', label: 'One' } ]')`);
+        throw new Error(`A collection with value/label (or value/labelKey when using Locale) is required to populate the Select list, for example: { filter: { model: Filters.select, collection: [ { value: '1', label: 'One' } ] } }`);
       }
       const labelKey = option.labelKey || option[labelName];
       const textLabel = ((option.labelKey || isEnabledTranslate) && this.i18n && typeof this.i18n.tr === 'function') ? this.i18n.tr(labelKey || ' ') : labelKey;

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

@@ -3,12 +3,13 @@ import { inject } from 'aurelia-framework';
 import {
   Column,
   Filter,
-  FilterType,
   FilterArguments,
   FilterCallback,
   GridOption,
   HtmlElementPosition,
   MultipleSelectOption,
+  OperatorString,
+  OperatorType,
   SearchTerm,
   SelectOption
 } from './../models/index';
@@ -23,7 +24,6 @@ export class SingleSelectFilter implements Filter {
   columnDef: Column;
   callback: FilterCallback;
   defaultOptions: MultipleSelectOption;
-  filterType = FilterType.singleSelect;
   isFilled = false;
   labelName: string;
   valueName: string;
@@ -53,6 +53,10 @@ export class SingleSelectFilter implements Filter {
     };
   }
 
+  get operator(): OperatorType | OperatorString {
+    return OperatorType.equal;
+  }
+
   /** Getter for the Grid Options pulled through the Grid Object */
   private get gridOptions(): GridOption {
     return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
@@ -71,7 +75,7 @@ export class SingleSelectFilter implements Filter {
     this.searchTerms = args.searchTerms || [];
 
     if (!this.grid || !this.columnDef || !this.columnDef.filter || !this.columnDef.filter.collection) {
-      throw new Error(`[Aurelia-SlickGrid] You need to pass a "collection" for the MultipleSelect Filter to work correctly. Also each option should include a value/label pair (or value/labelKey when using Locale). For example:: { filter: type: FilterType.multipleSelect, collection: [{ value: true, label: 'True' }, { value: false, label: 'False'}] }`);
+      throw new Error(`[Aurelia-SlickGrid] You need to pass a "collection" for the MultipleSelect Filter to work correctly. Also each option should include a value/label pair (or value/labelKey when using Locale). For example: { filter: { model: Filters.singleSelect, collection: [{ value: true, label: 'True' }, { value: false, label: 'False'}] } }`);
     }
 
     this.enableTranslateLabel = this.columnDef.filter.enableTranslateLabel || false;
@@ -149,7 +153,7 @@ export class SingleSelectFilter implements Filter {
     let options = '';
     optionCollection.forEach((option: SelectOption) => {
       if (!option || (option[this.labelName] === undefined && option.labelKey === undefined)) {
-        throw new Error(`A collection with value/label (or value/labelKey when using Locale) is required to populate the Select list, for example:: { filter: type: FilterType.singleSelect, collection: [ { value: '1', label: 'One' } ]')`);
+        throw new Error(`A collection with value/label (or value/labelKey when using Locale) is required to populate the Select list, for example: { filter: { model: Filter.singleSelect, collection: [ { value: '1', label: 'One' } ] } }`);
       }
 
       const labelKey = (option.labelKey || option[this.labelName]) as string;

aurelia-slickgrid/src/aurelia-slickgrid/global-grid-options.ts

@@ -1,4 +1,5 @@
-import { FilterType, DelimiterType, FileType, GridOption } from './models/index';
+import { Filters } from './filters/index';
+import { DelimiterType, FileType, GridOption } from './models/index';
 
 /**
  * Default Options that can be passed to the Aurelia-Slickgrid
@@ -26,7 +27,7 @@ export const GlobalGridOptions: GridOption = {
   defaultAureliaEventPrefix: 'asg',
   defaultSlickgridEventPrefix: 'sg',
   defaultFilterPlaceholder: '🔍', // magnifying glass icon
-  defaultFilterType: FilterType.input,
+  defaultFilter: Filters.input,
   enableAutoResize: true,
   enableHeaderMenu: true,
   enableRowSelection: true,

aurelia-slickgrid/src/aurelia-slickgrid/index.ts

@@ -2,9 +2,7 @@ import { PLATFORM } from 'aurelia-pal';
 import { AureliaSlickgridCustomElement } from './aurelia-slickgrid';
 import { SlickPaginationCustomElement } from './slick-pagination';
 import { SlickgridConfig } from './slickgrid-config';
-import { Filters, PLUGIN_NAME as FILTER_PLUGIN_NAME } from './filters/index';
-
-const AURELIA_SERVICE_NAME = 'AURELIA_SLICKGRID_SERVICES';
+import { Filters } from './filters/index';
 
 // import all Services separately
 import {
@@ -43,12 +41,12 @@ export function configure(aurelia: any, callback: any) {
   aurelia.globalResources(PLATFORM.moduleName('./slick-pagination'));
 
   // must register a transient so the container will get a new instance everytime
-  aurelia.container.registerTransient(FILTER_PLUGIN_NAME, Filters.compoundDate);
-  aurelia.container.registerTransient(FILTER_PLUGIN_NAME, Filters.compoundInput);
-  aurelia.container.registerTransient(FILTER_PLUGIN_NAME, Filters.input);
-  aurelia.container.registerTransient(FILTER_PLUGIN_NAME, Filters.multipleSelect);
-  aurelia.container.registerTransient(FILTER_PLUGIN_NAME, Filters.singleSelect);
-  aurelia.container.registerTransient(FILTER_PLUGIN_NAME, Filters.select);
+  aurelia.container.registerTransient(Filters.compoundDate);
+  aurelia.container.registerTransient(Filters.compoundInput);
+  aurelia.container.registerTransient(Filters.input);
+  aurelia.container.registerTransient(Filters.multipleSelect);
+  aurelia.container.registerTransient(Filters.singleSelect);
+  aurelia.container.registerTransient(Filters.select);
 
   const config = new SlickgridConfig();