fix(odata): use contains with OData version 4

- defaults to OData version 2 (which uses substringof)

Author: Ghislain Beaulac

src/app/examples/grid-odata.component.html

@@ -1,13 +1,10 @@
 <div class="container-fluid">
   <h2>{{title}}</h2>
-  <div class="subtitle row"
-       [innerHTML]="subTitle"></div>
+  <div class="subtitle row" [innerHTML]="subTitle"></div>
 
   <div class="row">
     <div class="col-sm-4">
-      <div [class]="status.class"
-           role="alert"
-           data-test="status">
+      <div [class]="status.class" role="alert" data-test="status">
         <strong>Status: </strong> {{status.text}}
         <span [hidden]="!processing">
           <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
@@ -19,17 +16,25 @@ <h2>{{title}}</h2>
       </span>
     </div>
     <div class="col-sm-8">
-      <div class="alert alert-info"
-           data-test="alert-odata-query">
+      <div class="alert alert-info" data-test="alert-odata-query">
         <strong>OData Query:</strong> <span data-test="odata-query-result">{{odataQuery}}</span>
       </div>
+      <label>OData Version: </label>
+      <span data-test="radioVersion">
+        <label class="radio-inline control-label" for="radio2">
+          <input type="radio" name="inlineRadioOptions" data-test="version2" id="radio2" checked [value]="2"
+            (change)="setOdataVersion(2)"> 2
+        </label>
+        <label class="radio-inline control-label" for="radio4">
+          <input type="radio" name="inlineRadioOptions" data-test="version4" id="radio4" [value]="4"
+            (change)="setOdataVersion(4)"> 4
+        </label>
+      </span>
     </div>
   </div>
 
-  <angular-slickgrid gridId="grid5"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="gridOptions"
-                     [dataset]="dataset"
-                     (onGridStateChanged)="gridStateChanged($event)">
+  <angular-slickgrid gridId="grid5" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
+    [dataset]="dataset" (onGridStateChanged)="gridStateChanged($event)"
+    (onAngularGridCreated)="angularGridReady($event)">
   </angular-slickgrid>
 </div>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import {
+  AngularGridInstance,
   Column,
   FieldType,
   Filters,
@@ -35,17 +36,23 @@ export class GridOdataComponent implements OnInit {
       <li>You can also preload a grid with certain "presets" like Filters / Sorters / Pagination <a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-State-&-Preset" target="_blank">Wiki - Grid Preset</a>
     </ul>
   `;
+  angularGrid: AngularGridInstance;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset = [];
   statistics: Statistic;
 
+  odataVersion = 2;
   odataQuery = '';
   processing = true;
   status = { text: 'processing...', class: 'alert alert-danger' };
 
   constructor(private http: HttpClient) { }
 
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
   ngOnInit(): void {
     this.columnDefinitions = [
       {
@@ -98,6 +105,7 @@ export class GridOdataComponent implements OnInit {
       },
       backendServiceApi: {
         service: new GridOdataService(),
+        options: { version: this.odataVersion }, // defaults to 2, the query string is slightly different between OData 2 and 4
         preProcess: () => this.displaySpinner(true),
         process: (query) => this.getCustomerApiCall(query),
         postProcess: (response) => {
@@ -161,37 +169,30 @@ export class GridOdataComponent implements OnInit {
         }
         if (param.includes('$filter=')) {
           const filterBy = param.substring('$filter='.length).replace('%20', ' ');
+          if (filterBy.includes('contains')) {
+            const filterMatch = filterBy.match(/contains\(([a-zA-Z\/]+),\s?'(.*?)'/);
+            const fieldName = filterMatch[2].trim();
+            columnFilters[fieldName] = { type: 'substring', term: filterMatch[2].trim() };
+          }
           if (filterBy.includes('substringof')) {
             const filterMatch = filterBy.match(/substringof\('(.*?)',([a-zA-Z ]*)/);
             const fieldName = filterMatch[2].trim();
-            columnFilters[fieldName] = {
-              type: 'substring',
-              term: filterMatch[1].trim()
-            };
+            columnFilters[fieldName] = { type: 'substring', term: filterMatch[1].trim() };
           }
           if (filterBy.includes('eq')) {
             const filterMatch = filterBy.match(/([a-zA-Z ]*) eq '(.*?)'/);
             const fieldName = filterMatch[1].trim();
-            columnFilters[fieldName] = {
-              type: 'equal',
-              term: filterMatch[2].trim()
-            };
+            columnFilters[fieldName] = { type: 'equal', term: filterMatch[2].trim() };
           }
           if (filterBy.includes('startswith')) {
             const filterMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/);
             const fieldName = filterMatch[1].trim();
-            columnFilters[fieldName] = {
-              type: 'starts',
-              term: filterMatch[2].trim()
-            };
+            columnFilters[fieldName] = { type: 'starts', term: filterMatch[2].trim() };
           }
           if (filterBy.includes('endswith')) {
             const filterMatch = filterBy.match(/endswith\(([a-zA-Z ]*),\s?'(.*?)'/);
             const fieldName = filterMatch[1].trim();
-            columnFilters[fieldName] = {
-              type: 'ends',
-              term: filterMatch[2].trim()
-            };
+            columnFilters[fieldName] = { type: 'ends', term: filterMatch[2].trim() };
           }
         }
       }
@@ -259,4 +260,15 @@ export class GridOdataComponent implements OnInit {
   gridStateChanged(gridStateChanges: GridStateChange) {
     console.log('Client sample, Grid State changed:: ', gridStateChanges);
   }
+
+  // THIS IS ONLY FOR DEMO PURPOSES DO NOT USE THIS CODE
+  setOdataVersion(version: number) {
+    this.odataVersion = version;
+    const odataService = this.gridOptions.backendServiceApi.service;
+    // @ts-ignore
+    odataService.updateOptions({ version: this.odataVersion });
+    odataService.clearFilters();
+    this.angularGrid.filterService.clearFilters();
+    return true;
+  }
 }

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

@@ -26,6 +26,9 @@ export interface OdataOption extends BackendServiceOption {
   /** Sorting string (or array of string) that must be a valid OData string */
   orderBy?: string | string[];
 
+  /** OData version number (the query string is different between versions) */
+  version?: number;
+
   /** When accessed as an object */
   [key: string]: any;
 }

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

@@ -252,7 +252,7 @@ describe('GridOdataService', () => {
       const mockColumn = { id: 'gender', field: 'gender' } as Column;
       const mockColumnName = { id: 'firstName', field: 'firstName' } as Column;
       const mockColumnFilter = { columnDef: mockColumn, columnId: 'gender', operator: 'EQ', searchTerms: ['female'] } as ColumnFilter;
-      const mockColumnFilterName = { columnDef: mockColumnName, columnId: 'firstName', operator: 'startsWith', searchTerms: ['John'] } as ColumnFilter;
+      const mockColumnFilterName = { columnDef: mockColumnName, columnId: 'firstName', operator: 'StartsWith', searchTerms: ['John'] } as ColumnFilter;
       const mockFilterChangedArgs = {
         columnDef: mockColumn,
         columnId: 'gender',
@@ -272,7 +272,7 @@ describe('GridOdataService', () => {
       expect(resetSpy).toHaveBeenCalled();
       expect(currentFilters).toEqual([
         { columnId: 'gender', operator: 'EQ', searchTerms: ['female'] },
-        { columnId: 'firstName', operator: 'startsWith', searchTerms: ['John'] }
+        { columnId: 'firstName', operator: 'StartsWith', searchTerms: ['John'] }
       ]);
     });
   });
@@ -721,6 +721,29 @@ describe('GridOdataService', () => {
     });
   });
 
+  describe('updateFilters method with OData version 4', () => {
+    beforeEach(() => {
+      serviceOptions.version = 4;
+      serviceOptions.columnDefinitions = [{ id: 'company', field: 'company' }, { id: 'gender', field: 'gender' }, { id: 'name', field: 'name' }];
+    });
+
+    it('should return a query with a date showing as DateTime as per OData requirement', () => {
+      const expectation = `$top=10&$filter=(contains(Company, 'abc') and UpdatedDate eq DateTime'2001-02-28T00:00:00Z')`;
+      const mockColumnCompany = { id: 'company', field: 'company' } as Column;
+      const mockColumnUpdated = { id: 'updatedDate', field: 'updatedDate', type: FieldType.date } as Column;
+      const mockColumnFilters = {
+        company: { columnId: 'company', columnDef: mockColumnCompany, searchTerms: ['abc'], operator: 'Contains' },
+        updatedDate: { columnId: 'updatedDate', columnDef: mockColumnUpdated, searchTerms: ['2001-02-28'], operator: 'EQ' },
+      } as ColumnFilters;
+
+      service.init(serviceOptions, paginationOptions, gridStub);
+      service.updateFilters(mockColumnFilters, false);
+      const query = service.buildQuery();
+
+      expect(query).toBe(expectation);
+    });
+  });
+
   describe('updateSorters method', () => {
     beforeEach(() => {
       serviceOptions.columnDefinitions = [{ id: 'company', field: 'company' }, { id: 'gender', field: 'gender' }, { id: 'name', field: 'name' }];

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

@@ -340,12 +340,15 @@ export class GridOdataService implements BackendService {
           } else if (fieldType === FieldType.string) {
             // string field needs to be in single quotes
             if (operator === '' || operator === OperatorType.contains || operator === OperatorType.notContains) {
-              searchBy = `substringof('${searchValue}', ${fieldName})`;
+              if (this._odataService.options.version >= 4) {
+                searchBy = `contains(${fieldName}, '${searchValue}')`;
+              } else {
+                searchBy = `substringof('${searchValue}', ${fieldName})`;
+              }
               if (operator === OperatorType.notContains) {
                 searchBy = `not ${searchBy}`;
               }
             } else {
-              // searchBy = `substringof('${searchValue}', ${fieldNameCased}) ${this.mapOdataOperator(operator)} true`;
               searchBy = `${fieldName} ${this.mapOdataOperator(operator)} '${searchValue}'`;
             }
           } else {

test/cypress/integration/example5.spec.js

@@ -95,4 +95,35 @@ describe('Example 5 - OData Grid', () => {
         expect($span.text()).to.eq(`$top=10`);
       });
   });
+
+  it('should use "substringof" when OData version is set to 2', () => {
+    cy.get('.search-filter.filter-name')
+      .find('input')
+      .type('John');
+
+    // wait for the query to finish
+    cy.get('[data-test=status]').should('contain', 'done');
+
+    cy.get('[data-test=odata-query-result]')
+      .should(($span) => {
+        expect($span.text()).to.eq(`$top=10&$filter=(substringof('John', Name))`);
+      });
+  });
+
+  it('should use "contains" when OData version is set to 4', () => {
+    cy.get('[data-test=version4]')
+      .click();
+
+    cy.get('.search-filter.filter-name')
+      .find('input')
+      .type('John');
+
+    // wait for the query to finish
+    cy.get('[data-test=status]').should('contain', 'done');
+
+    cy.get('[data-test=odata-query-result]')
+      .should(($span) => {
+        expect($span.text()).to.eq(`$top=10&$filter=(contains(Name, 'John'))`);
+      });
+  });
 });