Merge pull request #224 from ghiscoding/bugfix/query-field-precendence

fix(queryField): queryFieldFilter and queryFieldSorter have precedence

Author: ghiscoding

src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts

@@ -277,7 +277,8 @@ export class HeaderMenuExtension implements Extension {
         const updatedSortColumns: ColumnSort[] = sortedColsWithoutCurrent.map((col) => {
           return {
             columnId: col && col.sortCol && col.sortCol.id,
-            sortAsc: col && col.sortAsc
+            sortAsc: col && col.sortAsc,
+            sortCol: col && col.sortCol,
           };
         });
         this.sharedService.grid.setSortColumns(updatedSortColumns); // add sort icon in UI
@@ -335,7 +336,8 @@ export class HeaderMenuExtension implements Extension {
       const newSortColumns: ColumnSort[] = sortedColsWithoutCurrent.map((col) => {
         return {
           columnId: col && col.sortCol && col.sortCol.id,
-          sortAsc: col && col.sortAsc
+          sortAsc: col && col.sortAsc,
+          sortCol: col && col.sortCol,
         };
       });
       this.sharedService.grid.setSortColumns(newSortColumns); // add sort icon in UI

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

@@ -153,13 +153,22 @@ export interface Column {
   /** The previous column width in pixels (number only) */
   previousWidth?: number;
 
-  /** Useful when you want to display a certain field to the UI, but you want to use another field to query for Filtering/Sorting. */
+  /**
+   * Useful when you want to display a certain field to the UI, but you want to use another field to query when Filtering/Sorting.
+   * Please note that it has higher precendence over the "field" property.
+   */
   queryField?: string;
 
-  /** Similar to "queryField" but only used with Filtering. Useful when you want to display a certain field to the UI, but you want to use another field to query for Filtering. */
+  /**
+   * 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.
+   */
   queryFieldFilter?: string;
 
-  /** Similar to "queryField" but only used with Sorting. Useful when you want to display a certain field to the UI, but you want to use another field to query for Sorting. */
+  /**
+   * Similar to "queryField" but only used when Sorting (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 Sorting.
+   */
   queryFieldSorter?: string;
 
   /** Is the column resizable, can we make it wider/thinner? A resize cursor will show on the right side of the column when enabled. */

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

@@ -2,7 +2,7 @@ import { SearchTerm } from './searchTerm.type';
 import { Column } from './column.interface';
 import { ColumnFilters } from './columnFilters.interface';
 import { OperatorType } from './operatorType.enum';
-import { OperatorString } from 'dist/public_api';
+import { OperatorString } from './operatorString';
 
 export interface FilterChangedArgs {
   clearFilterTriggered?: boolean;

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

@@ -821,8 +821,8 @@ describe('CollectionService', () => {
     });
 
     it('should return a query using a different field to query when the column has a "queryFieldFilter" defined in its definition', () => {
-      const expectation = `query{users(first:10, offset:0, filterBy:[{field:isFemale, operator:EQ, value:"female"}]) { totalCount,nodes{ id,company,gender,name } }}`;
-      const mockColumn = { id: 'gender', field: 'gender', queryFieldFilter: 'isFemale' } as Column;
+      const expectation = `query{users(first:10, offset:0, filterBy:[{field:hasPriority, operator:EQ, value:"female"}]) { totalCount,nodes{ id,company,gender,name } }}`;
+      const mockColumn = { id: 'gender', field: 'gender', queryField: 'isAfter', queryFieldFilter: 'hasPriority' } as Column;
       const mockColumnFilters = {
         gender: { columnId: 'gender', columnDef: mockColumn, searchTerms: ['female'], operator: 'EQ' },
       } as ColumnFilters;
@@ -914,7 +914,7 @@ describe('CollectionService', () => {
                             totalCount,nodes{ id, company, gender, name } }}`;
       const mockColumnSort = [
         { columnId: 'gender', sortCol: { id: 'gender', field: 'gender' }, sortAsc: false },
-        { columnId: 'name', sortCol: { id: 'name', field: 'name', queryFieldSorter: 'lastName' }, sortAsc: true }
+        { columnId: 'name', sortCol: { id: 'name', field: 'name', queryField: 'isAfter', queryFieldSorter: 'lastName' }, sortAsc: true }
       ] as ColumnSort[];
 
       service.init(serviceOptions, paginationOptions, gridStub);

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

@@ -257,7 +257,7 @@ export class FilterService {
       }
 
       const dataKey = columnDef.dataKey;
-      const fieldName = columnDef.queryField || columnDef.queryFieldFilter || columnDef.field;
+      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];

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

@@ -364,7 +364,7 @@ export class GraphqlService implements BackendService {
           throw new Error('[GraphQL Service]: Something went wrong in trying to get the column definition of the specified filter (or preset filters). Did you make a typo on the filter columnId?');
         }
 
-        const fieldName = columnDef.queryField || columnDef.queryFieldFilter || columnDef.field || columnDef.name || '';
+        const fieldName = columnDef.queryFieldFilter || columnDef.queryField || columnDef.field || columnDef.name || '';
         const searchTerms = columnFilter && columnFilter.searchTerms || [];
         let fieldSearchValue = (Array.isArray(searchTerms) && searchTerms.length === 1) ? searchTerms[0] : '';
         if (typeof fieldSearchValue === 'undefined') {
@@ -464,7 +464,7 @@ export class GraphqlService implements BackendService {
         const columnDef = this._columnDefinitions.find((column: Column) => column.id === sorter.columnId);
 
         graphqlSorters.push({
-          field: columnDef ? ((columnDef.queryField || columnDef.queryFieldSorter || columnDef.field) + '') : (sorter.columnId + ''),
+          field: columnDef ? ((columnDef.queryFieldSorter || columnDef.queryField || columnDef.field) + '') : (sorter.columnId + ''),
           direction: sorter.direction
         });
 
@@ -494,7 +494,7 @@ export class GraphqlService implements BackendService {
             });
 
             graphqlSorters.push({
-              field: (column.sortCol.queryField || column.sortCol.queryFieldSorter || column.sortCol.field) + '',
+              field: (column.sortCol.queryFieldSorter || column.sortCol.queryField || column.sortCol.field) + '',
               direction: column.sortAsc ? SortDirection.ASC : SortDirection.DESC
             });
           }

src/app/modules/angular-slickgrid/services/grid-odata.service.ts

@@ -203,7 +203,7 @@ export class GridOdataService implements BackendService {
           throw new Error('[Backend Service API]: Something went wrong in trying to get the column definition of the specified filter (or preset filters). Did you make a typo on the filter columnId?');
         }
 
-        let fieldName = columnDef.queryField || columnDef.queryFieldFilter || columnDef.field || columnDef.name || '';
+        let fieldName = columnDef.queryFieldFilter || columnDef.queryField || columnDef.field || columnDef.name || '';
         const fieldType = columnDef.type || 'string';
         const searchTerms = (columnFilter ? columnFilter.searchTerms : null) || [];
         let fieldSearchValue = (Array.isArray(searchTerms) && searchTerms.length === 1) ? searchTerms[0] : '';
@@ -341,7 +341,7 @@ export class GridOdataService implements BackendService {
         const columnDef = this._columnDefinitions.find((column: Column) => column.id === sorter.columnId);
 
         sorterArray.push({
-          columnId: columnDef ? ((columnDef.queryField || columnDef.queryFieldSorter || columnDef.field || columnDef.id) + '') : (sorter.columnId + ''),
+          columnId: columnDef ? ((columnDef.queryFieldSorter || columnDef.queryField || columnDef.field || columnDef.id) + '') : (sorter.columnId + ''),
           direction: sorter.direction
         });
 
@@ -363,7 +363,7 @@ export class GridOdataService implements BackendService {
         if (sortColumns) {
           for (const columnDef of sortColumns) {
             if (columnDef.sortCol) {
-              let fieldName = (columnDef.sortCol.queryField || columnDef.sortCol.queryFieldSorter || columnDef.sortCol.field || columnDef.sortCol.id) + '';
+              let fieldName = (columnDef.sortCol.queryFieldSorter || columnDef.sortCol.queryField || columnDef.sortCol.field || columnDef.sortCol.id) + '';
               let columnFieldName = (columnDef.sortCol.field || columnDef.sortCol.id) + '';
               if (this.odataService.options.caseType === CaseType.pascalCase) {
                 fieldName = String.titleCase(fieldName);

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

@@ -106,7 +106,7 @@ export class SortService {
     this._slickSubscriber.subscribe((e: any, args: any) => {
       // multiSort and singleSort are not exactly the same, but we want to structure it the same for the (for loop) after
       // also to avoid having to rewrite the for loop in the sort, we will make the singleSort an array of 1 object
-      const sortColumns = (args.multiColumnSort) ? args.sortCols : new Array({sortAsc: args.sortAsc, sortCol: args.sortCol});
+      const sortColumns = (args.multiColumnSort) ? args.sortCols : new Array({ sortAsc: args.sortAsc, sortCol: args.sortCol });
 
       // keep current sorters
       this._currentLocalSorters = []; // reset current local sorters
@@ -139,7 +139,7 @@ export class SortService {
           this.onBackendSortChanged(undefined, { grid: this._grid, sortCols: [] });
         } else {
           if (this._columnDefinitions && Array.isArray(this._columnDefinitions)) {
-            this.onLocalSortChanged(this._grid, this._dataView, new Array({sortAsc: true, sortCol: this._columnDefinitions[0] }));
+            this.onLocalSortChanged(this._grid, this._dataView, new Array({ sortAsc: true, sortCol: this._columnDefinitions[0] }));
           }
         }
       } else if (this._isBackendGrid) {
@@ -230,7 +230,7 @@ export class SortService {
           const columnSortObj = sortColumns[i];
           if (columnSortObj && columnSortObj.sortCol) {
             const sortDirection = columnSortObj.sortAsc ? SortDirectionNumber.asc : SortDirectionNumber.desc;
-            const sortField = columnSortObj.sortCol.queryField || columnSortObj.sortCol.queryFieldSorter || columnSortObj.sortCol.field;
+            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];