feat(query): add queryFieldNameGetterFn callback know which field to use (#434)

in certain occasion we don't have know at hand which field name to use, we might just know depending on certain logic (e.g. if item dataContext has a product type "I" then use field "catalogNumber" but if it's type "P" use field "productCategoryNumber", ...)

Author: ghiscoding-SE

src/app/app.component.scss

@@ -20,7 +20,7 @@ $side-menu-width: 250px;
 /** Sidebar (left) and Content (right) */
 @media (min-width: 1200px) {
   .panel-wm-content .container {
-      width: calc(1170px - $side-menu-width);
+    width: calc(1170px - #{$side-menu-width});
   }
 }
 

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

@@ -183,6 +183,15 @@ export interface Column {
    */
   queryField?: string;
 
+  /**
+   * When you do not know at hand the name of the Field to use for querying,
+   * the lib will run your callback to find out which Field name you want to use by the logic you defined.
+   * Useful when you only know the Field name by executing a certain logic in order to get the Field name to query from.
+   * @param {string} item data context
+   * @return {string} name of the Field that will end up being used to query
+   */
+  queryFieldNameGetterFn?: (dataContext: any) => string;
+
   /**
    * Similar to "queryField" but only used when Filtering (please note that it has higher precendence over "queryField").
    * Useful when you want to display a certain field to the UI, but you want to use another field to query for Filtering.

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

@@ -788,6 +788,42 @@ describe('FilterService', () => {
 
       expect(output).toBe(true);
     });
+
+    it('should execute "queryFieldNameGetterFn()" callback and return True when input value matches the full name', () => {
+      const mockColumn1 = { id: 'name', field: 'name', filterable: true, queryFieldNameGetterFn: (dataContext) => 'fullName' } as Column;
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue([mockColumn1]);
+      jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(0);
+
+      service.init(gridStub);
+      const columnFilters = { name: { columnDef: mockColumn1, columnId: 'name', operator: 'EQ', searchTerms: ['John Doe'] } };
+      const output = service.customLocalFilter(mockItem1, { dataView: dataViewStub, grid: gridStub, columnFilters });
+
+      expect(output).toBe(true);
+    });
+
+    it('should execute "queryFieldNameGetterFn()" callback and return False when input value is not fullName but just the firstName', () => {
+      const mockColumn1 = { id: 'name', field: 'name', filterable: true, queryFieldNameGetterFn: (dataContext) => 'fullName' } as Column;
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue([mockColumn1]);
+      jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(0);
+
+      service.init(gridStub);
+      const columnFilters = { name: { columnDef: mockColumn1, columnId: 'name', operator: 'EQ', searchTerms: ['John'] } };
+      const output = service.customLocalFilter(mockItem1, { dataView: dataViewStub, grid: gridStub, columnFilters });
+
+      expect(output).toBe(false);
+    });
+
+    it('should execute "queryFieldNameGetterFn()" callback and return False when input value is not fullName but just the lastName', () => {
+      const mockColumn1 = { id: 'name', field: 'name', filterable: true, queryFieldNameGetterFn: (dataContext) => 'fullName' } as Column;
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue([mockColumn1]);
+      jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(0);
+
+      service.init(gridStub);
+      const columnFilters = { name: { columnDef: mockColumn1, columnId: 'name', operator: 'EQ', searchTerms: ['Doe'] } };
+      const output = service.customLocalFilter(mockItem1, { dataView: dataViewStub, grid: gridStub, columnFilters });
+
+      expect(output).toBe(false);
+    });
   });
 
   describe('onBackendFilterChange method', () => {

src/app/modules/angular-slickgrid/services/__tests__/sort.service.spec.ts

@@ -561,6 +561,24 @@ describe('SortService', () => {
       ]);
     });
 
+    it('should sort the data with 2 sorters which the second is by executing the "queryFieldNameGetterFn()" callback and sort by the field returned by it', () => {
+      const mockSortedCols = [
+        { sortCol: { id: 'address', field: 'address', queryField: 'lastName' }, sortAsc: true },
+        { sortCol: { id: 'random', field: 'random', queryFieldNameGetterFn: (dataContext) => 'zip' }, sortAsc: false },
+      ] as ColumnSort[];
+
+      dataset.sort((row1, row2) => service.sortComparer(mockSortedCols, row1, row2));
+
+      expect(dataset).toEqual([
+        { firstName: 'John', lastName: 'Doe', age: 22, address: { zip: 123456 } },
+        { firstName: 'Jane', lastName: 'Doe', age: 27, address: { zip: 123456 } },
+        { firstName: 'Christopher', lastName: 'McDonald', age: 40, address: { zip: 555555 } },
+        { firstName: 'Erla', lastName: 'Richard', age: 101, address: { zip: 444444 } },
+        { firstName: 'Barbara', lastName: 'Smith', age: 1, address: { zip: 222222 } },
+        { firstName: 'Jane', lastName: 'Smith', age: 40, address: { zip: 333333 } },
+      ]);
+    });
+
     it('should sort the data with a sorter that is a complex object (following the dot notation in its field name)', () => {
       const mockSortedCols = [
         { sortCol: { id: 'address', field: 'address.zip' }, sortAsc: true },

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

@@ -274,14 +274,17 @@ export class FilterService {
       }
 
       const dataKey = columnDef.dataKey;
-      const fieldName = columnDef.queryFieldFilter || columnDef.queryField || columnDef.field;
       const fieldType = columnDef.type || FieldType.string;
       const filterSearchType = (columnDef.filterSearchType) ? columnDef.filterSearchType : null;
-      let cellValue = item[fieldName];
+      let queryFieldName = columnDef.queryFieldFilter || columnDef.queryField || columnDef.field || '';
+      if (typeof columnDef.queryFieldNameGetterFn === 'function') {
+        queryFieldName = columnDef.queryFieldNameGetterFn(item);
+      }
+      let cellValue = item[queryFieldName];
 
       // when item is a complex object (dot "." notation), we need to filter the value contained in the object tree
-      if (fieldName.indexOf('.') >= 0) {
-        cellValue = getDescendantProperty(item, fieldName);
+      if (queryFieldName && queryFieldName.indexOf('.') >= 0) {
+        cellValue = getDescendantProperty(item, queryFieldName);
       }
 
       // if we find searchTerms use them but make a deep copy so that we don't affect original array

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

@@ -260,29 +260,40 @@ export class SortService {
 
   sortComparer(sortColumns: ColumnSort[], dataRow1: any, dataRow2: any) {
     if (Array.isArray(sortColumns)) {
-      for (let i = 0, l = sortColumns.length; i < l; i++) {
-        const columnSortObj = sortColumns[i];
-        if (columnSortObj && columnSortObj.sortCol) {
-          const sortDirection = columnSortObj.sortAsc ? SortDirectionNumber.asc : SortDirectionNumber.desc;
-          const sortField = columnSortObj.sortCol.queryFieldSorter || columnSortObj.sortCol.queryField || columnSortObj.sortCol.field;
-          const fieldType = columnSortObj.sortCol.type || FieldType.string;
-          let value1 = dataRow1[sortField];
-          let value2 = dataRow2[sortField];
+      for (const sortColumn of sortColumns) {
+        if (sortColumn && sortColumn.sortCol) {
+          const columnDef = sortColumn.sortCol;
+          const querySortField = sortColumn.sortCol;
+          const sortDirection = sortColumn.sortAsc ? SortDirectionNumber.asc : SortDirectionNumber.desc;
+          let queryFieldName1 = querySortField.queryFieldSorter || querySortField.queryField || querySortField.field;
+          let queryFieldName2 = queryFieldName1;
+          const fieldType = querySortField.type || FieldType.string;
+
+          // if user provided a query field name getter callback, we need to get the name on each item independently
+          if (typeof columnDef.queryFieldNameGetterFn === 'function') {
+            queryFieldName1 = columnDef.queryFieldNameGetterFn(dataRow1);
+            queryFieldName2 = columnDef.queryFieldNameGetterFn(dataRow2);
+          }
+
+          let value1 = dataRow1[queryFieldName1];
+          let value2 = dataRow2[queryFieldName2];
 
           // when item is a complex object (dot "." notation), we need to filter the value contained in the object tree
-          if (sortField && sortField.indexOf('.') >= 0) {
-            value1 = getDescendantProperty(dataRow1, sortField);
-            value2 = getDescendantProperty(dataRow2, sortField);
+          if (queryFieldName1 && queryFieldName1.indexOf('.') >= 0) {
+            value1 = getDescendantProperty(dataRow1, queryFieldName1);
+          }
+          if (queryFieldName2 && queryFieldName2.indexOf('.') >= 0) {
+            value2 = getDescendantProperty(dataRow2, queryFieldName2);
           }
 
           // user could provide his own custom Sorter
-          if (columnSortObj.sortCol && columnSortObj.sortCol.sorter) {
-            const customSortResult = columnSortObj.sortCol.sorter(value1, value2, sortDirection, columnSortObj.sortCol);
+          if (querySortField && querySortField.sorter) {
+            const customSortResult = querySortField.sorter(value1, value2, sortDirection, querySortField);
             if (customSortResult !== SortDirectionNumber.neutral) {
               return customSortResult;
             }
           } else {
-            const sortResult = sortByFieldType(fieldType, value1, value2, sortDirection, columnSortObj.sortCol);
+            const sortResult = sortByFieldType(fieldType, value1, value2, sortDirection, querySortField);
             if (sortResult !== SortDirectionNumber.neutral) {
               return sortResult;
             }

test/cypress/package.json

@@ -11,7 +11,7 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^4.3.0",
+    "cypress": "^4.4.1",
     "mocha": "^5.2.0",
     "mochawesome": "^3.1.2",
     "mochawesome-merge": "^1.0.7",