feat(filters): add more operator types to collection svc filter (#66)

* feat(filters): add more operator types to collection svc filter

The default operator 'EQ' was switched to filter for the value instead of excluding it. Also, an explicit check for undefined in the `collectionFilterBy.value` was added in case the value is actual false, 0, blank or null.

New operator type filters:
`in`: supports `collectionFilterBy.property` as a nested array, and if the `collectionFilterBy.value` exists in the nested array, the parent item will NOT be filtered. For example: `collection: [{ foo: ['bar'] }, { foo: ['foo'] }]`, `collectionFilterBy.property: 'foo'`, `collectionFilterBy.value: 'bar'` will return the first item in the collection only
`notIn`: oppostie of `in`
`contains`: assumes the `collectionFilterBy.value` is an array and will check if any of those values exists in the `collectionFilterBy.property`. For example: `collection: [{ foo: 'bar' }, { foo: 'foo' }]`, `collectionFilterBy.property: 'foo'`, `collectionFilterBy.value: [ 'bar', 'foo' ]` will return both items

closes #63
BREAKING CHANGE: Reversing the 'EQ' filter logic. This was done now because the filter feature was new and it follows the javascript `filter` logic (since equal will filter values equal to the value provided)

* refactor(example): add example code to Doc and Client-CLI samples

aurelia-slickgrid/src/aurelia-slickgrid/models/collectionFilterBy.interface.ts

@@ -3,5 +3,5 @@ import { OperatorType } from './operatorType.enum';
 export interface CollectionFilterBy {
   property: string;
   value: any;
-  operator?: OperatorType.equal | OperatorType.notEqual;
+  operator?: OperatorType.equal | OperatorType.notEqual | OperatorType.in | OperatorType.notIn | OperatorType.contains
 }

aurelia-slickgrid/src/aurelia-slickgrid/services/collection.service.ts

@@ -23,12 +23,24 @@ export class CollectionService {
     if (filterBy) {
       const property = filterBy.property || '';
       const operator = filterBy.operator || OperatorType.equal;
-      const value = filterBy.value || '';
+      // just check for undefined since the filter value could be null, 0, '', false etc
+      const value = typeof filterBy.value === 'undefined' ? '' : filterBy.value;
 
-      if (operator === OperatorType.equal) {
-        filteredCollection = collection.filter((item) => item[property] !== value);
-      } else {
-        filteredCollection = collection.filter((item) => item[property] === value);
+      switch (operator) {
+        case OperatorType.equal:
+          filteredCollection = collection.filter((item) => item[property] === value);
+          break;
+        case OperatorType.in:
+          filteredCollection = collection.filter((item) => item[property].indexOf(value) !== -1);
+          break;
+        case OperatorType.notIn:
+          filteredCollection = collection.filter((item) => item[property].indexOf(value) === -1);
+          break;
+        case OperatorType.contains:
+          filteredCollection = collection.filter((item) => value.indexOf(item[property]) !== -1);
+          break;
+        default:
+          filteredCollection = collection.filter((item) => item[property] !== value);
       }
     }
 
@@ -39,8 +51,7 @@ export class CollectionService {
    * Sort items in a collection
    * @param collection
    * @param sortBy
-   * @param columnDef
-   * @param translate
+   * @param enableTranslateLabel
    */
   sortCollection(collection: any[], sortBy: CollectionSortBy, enableTranslateLabel?: boolean): any[] {
     let sortedCollection: any[] = [];

aurelia-slickgrid/src/examples/slickgrid/example3.ts

@@ -14,6 +14,7 @@ import {
   GridExtraUtils,
   GridOption,
   OnEventArgs,
+  OperatorType,
   ResizerService
 } from '../../aurelia-slickgrid';
 
@@ -129,6 +130,11 @@ export class Example3 {
           property: 'label',
           sortDesc: true
         },
+        collectionFilterBy: {
+          property: 'value',
+          value: 0,
+          operator: OperatorType.notEqual
+        }
       }
     }, {
       id: 'start',
@@ -172,7 +178,8 @@ export class Example3 {
         },
         collectionFilterBy: {
           property: 'label',
-          value: 'Task 2'
+          value: [ 'Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5', 'Task 6' ],
+          operator: OperatorType.contains
         }
       }
     }];

client-cli/src/examples/slickgrid/example3.js

@@ -9,6 +9,7 @@ import {
   Formatters,
   GridExtraService,
   GridExtraUtils,
+  OperatorType,
   ResizerService
 } from 'aurelia-slickgrid';
 
@@ -83,13 +84,13 @@ export class Example3 {
       formatter: Formatters.deleteIcon,
       minWidth: 30,
       maxWidth: 30
-      // use onCellClick OR grid.onClick.subscribe which you can see down below
-      /*
-      onCellClick: (args: OnEventArgs) => {
-        console.log(args);
-        this.alertWarning = `Deleting: ${args.dataContext.title}`;
-      }
-      */
+    // use onCellClick OR grid.onClick.subscribe which you can see down below
+    /*
+    onCellClick: (args: OnEventArgs) => {
+      console.log(args);
+      this.alertWarning = `Deleting: ${args.dataContext.title}`;
+    }
+    */
     }, {
       id: 'title',
       name: 'Title',
@@ -116,7 +117,16 @@ export class Example3 {
       minWidth: 100,
       params: {
         formatters: [Formatters.collection, Formatters.percentCompleteBar],
-        collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k }))
+        collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k })),
+        collectionSortBy: {
+          property: 'label',
+          sortDesc: true
+        },
+        collectionFilterBy: {
+          property: 'value',
+          value: 0,
+          operator: OperatorType.notEqual
+        }
       }
     }, {
       id: 'start',
@@ -157,7 +167,15 @@ export class Example3 {
       editor: Editors.multipleSelect,
       params: {
         collection: Array.from(Array(10).keys()).map(k => ({ value: `Task ${k}`, label: `Task ${k}` })),
-        i18n: this.i18n
+        collectionSortBy: {
+          property: 'label',
+          sortDesc: true
+        },
+        collectionFilterBy: {
+          property: 'label',
+          value: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5', 'Task 6'],
+          operator: OperatorType.contains
+        }
       }
     }];
 

doc/github-demo/src/examples/slickgrid/example3.ts

@@ -14,6 +14,7 @@ import {
   GridExtraUtils,
   GridOption,
   OnEventArgs,
+  OperatorType,
   ResizerService
 } from 'aurelia-slickgrid';
 
@@ -125,6 +126,11 @@ export class Example3 {
           property: 'label',
           sortDesc: true
         },
+        collectionFilterBy: {
+          property: 'value',
+          value: 0,
+          operator: OperatorType.notEqual
+        }
       }
     }, {
       id: 'start',
@@ -168,7 +174,8 @@ export class Example3 {
         },
         collectionFilterBy: {
           property: 'label',
-          value: 'Task 2'
+          value: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5', 'Task 6'],
+          operator: OperatorType.contains
         }
       }
     }];