feat(filter): add posibility to filter complex objects

Author: Ghislain Beaulac

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

@@ -97,16 +97,25 @@ export class GridClientSideComponent implements OnInit {
       },
       { id: 'utcDate', name: 'UTC Date', field: 'utcDate', formatter: Formatters.dateTimeIsoAmPm, sortable: true, minWidth: 115,
         type: FieldType.dateUtc, outputType: FieldType.dateTimeIsoAmPm, filterable: true, filter: { model: Filters.compoundDate } },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', minWidth: 85, maxWidth: 85, formatter: Formatters.checkmark,
+      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven.isEffort', minWidth: 85, maxWidth: 85,
         type: FieldType.boolean,
         sortable: true,
         filterable: true,
+        // to pass multiple formatters, use the params property
+        // also these formatters are executed in sequence, so if you want the checkmark to work correctly, it has to be the last formatter defined
+        formatter: Formatters.multiple,
+        params: { formatters: [Formatters.complexObject, Formatters.checkmark] },
         filter: {
           // We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized
           // enableRenderHtml: true,
           // collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: `<i class="fa fa-check"></i> ` }, { value: false, label: 'False' }],
 
-          collection: [ { value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' } ],
+          collection: [ { isEffort: '', label: '' }, { isEffort: true, label: 'True' }, { isEffort: false, label: 'False' } ],
+          customStructure: {
+            value: 'isEffort',
+            label: 'label'
+          },
+          isComplexObject: true,
           model: Filters.singleSelect,
 
           // we could add certain option(s) to the "multiple-select" plugin
@@ -162,6 +171,7 @@ export class GridClientSideComponent implements OnInit {
       const randomPercent = randomBetween(0, 100);
       const randomHour = randomBetween(10, 23);
       const randomTime = randomBetween(10, 59);
+      const randomIsEffort = (i % 3 === 0);
 
       tempDataset.push({
         id: i,
@@ -173,7 +183,10 @@ export class GridClientSideComponent implements OnInit {
         start: (i % 4) ? null : new Date(randomYear, randomMonth, randomDay),          // provide a Date format
         usDateShort: `${randomMonth}/${randomDay}/${randomYearShort}`, // provide a date US Short in the dataset
         utcDate: `${randomYear}-${randomMonthStr}-${randomDay}T${randomHour}:${randomTime}:${randomTime}Z`,
-        effortDriven: (i % 3 === 0)
+        effortDriven: {
+          isEffort: randomIsEffort,
+          label: randomIsEffort ? 'Effort' : 'NoEffort',
+        }
       });
     }
 

src/app/modules/angular-slickgrid/models/columnFilter.interface.ts

@@ -71,6 +71,12 @@ export interface ColumnFilter {
   /** Do we want the Filter to handle translation (localization)? */
   enableTranslateLabel?: boolean;
 
+  /**
+   * Defaults to false, does the filter has to deal with item that are complex object?
+   * If so, it will explode the object using the dot "." notation to find the value to filter against.
+   */
+  isComplexObject?: boolean;
+
   /**
    * Use "params" to pass any type of arguments to your Custom Filter
    * for example, to pass a second collection to a select Filter we can type this:

src/app/modules/angular-slickgrid/services/filter.service.ts

@@ -15,7 +15,7 @@ import {
   SlickEvent,
   OperatorString
 } from './../models/index';
-import { castToPromise } from './utilities';
+import { castToPromise, getDescendantProperty } from './utilities';
 import { FilterFactory } from '../filters/filterFactory';
 import { Subject } from 'rxjs/Subject';
 import * as isequal_ from 'lodash.isequal';
@@ -185,10 +185,16 @@ export class FilterService {
       if (!columnDef) {
         return false;
       }
+
+      const fieldName = columnDef.queryField || columnDef.queryFieldFilter || columnDef.field;
       const fieldType = columnDef.type || FieldType.string;
       const filterSearchType = (columnDef.filterSearchType) ? columnDef.filterSearchType : null;
+      let cellValue = item[fieldName];
 
-      let cellValue = item[columnDef.queryField || columnDef.queryFieldFilter || columnDef.field];
+      // when item is a complex object, we need to filter the value contained in the object following the dot "." notation
+      if (columnDef && columnDef.filter && columnDef.filter.isComplexObject) {
+        cellValue = getDescendantProperty(item, fieldName);
+      }
 
       // if we find searchTerms use them but make a deep copy so that we don't affect original array
       // we might have to overwrite the value(s) locally that are returned