feat: add StartsWith/EndsWith (a*z) to OData/GraphQL (#356)

ghiscoding · Jun 8, 2024 · 643f8a8 · 643f8a8
1 parent 23f3f9d
commit 643f8a8
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 18 deletions.
diff --git a/src/examples/slickgrid/Example5.tsx b/src/examples/slickgrid/Example5.tsx
@@ -311,12 +311,16 @@ export default class Example5 extends React.Component<Props, State> {
               }
             }
           }
-          if (filterBy.includes('startswith')) {
+          if (filterBy.includes('startswith') && filterBy.includes('endswith')) {
+            const filterStartMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/) || [];
+            const filterEndMatch = filterBy.match(/endswith\(([a-zA-Z ]*),\s?'(.*?)'/) || [];
+            const fieldName = filterStartMatch[1].trim();
+            (columnFilters as any)[fieldName] = { type: 'starts+ends', term: [filterStartMatch[2].trim(), filterEndMatch[2].trim()] };
+          } else if (filterBy.includes('startswith')) {
             const filterMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/);
             const fieldName = filterMatch![1].trim();
             (columnFilters as any)[fieldName] = { type: 'starts', term: filterMatch![2].trim() };
-          }
-          if (filterBy.includes('endswith')) {
+          } else if (filterBy.includes('endswith')) {
             const filterMatch = filterBy.match(/endswith\(([a-zA-Z ]*),\s?'(.*?)'/);
             const fieldName = filterMatch![1].trim();
             (columnFilters as any)[fieldName] = { type: 'ends', term: filterMatch![2].trim() };
@@ -377,7 +381,7 @@ export default class Example5 extends React.Component<Props, State> {
                   const filterType = (columnFilters as any)[columnId].type;
                   const searchTerm = (columnFilters as any)[columnId].term;
                   let colId = columnId;
-                  if (columnId && columnId.indexOf(' ') !== -1) {
+                  if (columnId?.indexOf(' ') !== -1) {
                     const splitIds = columnId.split(' ');
                     colId = splitIds[splitIds.length - 1];
                   }
@@ -387,6 +391,7 @@ export default class Example5 extends React.Component<Props, State> {
                     filterTerm = (col as any)[part];
                     col = filterTerm;
                   }
+
                   if (filterTerm) {
                     const [term1, term2] = Array.isArray(searchTerm) ? searchTerm : [searchTerm];
 

diff --git a/src/examples/slickgrid/Example6.tsx b/src/examples/slickgrid/Example6.tsx
@@ -208,7 +208,8 @@ class Example6 extends React.Component<Props, State> {
         filters: [
           // you can use OperatorType or type them as string, e.g.: operator: 'EQ'
           { columnId: 'gender', searchTerms: ['male'], operator: OperatorType.equal },
-          { columnId: 'name', searchTerms: ['John Doe'], operator: OperatorType.contains },
+          // { columnId: 'name', searchTerms: ['John Doe'], operator: OperatorType.contains },
+          { columnId: 'name', searchTerms: ['Joh*oe'], operator: OperatorType.startsWithEndsWith },
           { columnId: 'company', searchTerms: ['xyz'], operator: 'IN' },
 
           // use a date range with 2 searchTerms values
@@ -396,7 +397,8 @@ class Example6 extends React.Component<Props, State> {
     this.reactGrid.filterService.updateFilters([
       // you can use OperatorType or type them as string, e.g.: operator: 'EQ'
       { columnId: 'gender', searchTerms: ['male'], operator: OperatorType.equal },
-      { columnId: 'name', searchTerms: ['John Doe'], operator: OperatorType.contains },
+      // { columnId: 'name', searchTerms: ['John Doe'], operator: OperatorType.contains },
+      { columnId: 'name', searchTerms: ['Joh*oe'], operator: OperatorType.startsWithEndsWith },
       { columnId: 'company', searchTerms: ['xyz'], operator: 'IN' },
 
       // use a date range with 2 searchTerms values

diff --git a/test/cypress/e2e/example05.cy.ts b/test/cypress/e2e/example05.cy.ts
@@ -865,6 +865,27 @@ describe('Example 5 - OData Grid', () => {
       cy.get('[data-test=total-items]')
         .contains('50');
     });
+
+    it('should return 2 rows using "C*n" (starts with "C" + ends with "n")', () => {
+      cy.get('input.filter-name')
+        .clear()
+        .type('C*n');
+
+      // wait for the query to finish
+      cy.get('[data-test=status]').should('contain', 'finished');
+
+      cy.get('[data-test=odata-query-result]')
+        .should(($span) => {
+          expect($span.text()).to.eq(`$top=10&$orderby=Name desc&$filter=(Gender eq 'female' and startswith(Name, 'C') and endswith(Name, 'n'))`);
+        });
+
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Consuelo Dickson');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Christine Compton');
+
+      // clear filter before next test
+      cy.get('input.filter-name')
+        .clear();
+    });
   });
 
   describe('Select and Expand Behaviors', () => {

diff --git a/test/cypress/e2e/example06.cy.ts b/test/cypress/e2e/example06.cy.ts
@@ -34,7 +34,7 @@ describe('Example 6 - GraphQL Grid', () => {
     cy.get('.search-filter.filter-name')
       .find('input')
       .invoke('val')
-      .then(text => expect(text).to.eq('John Doe'));
+      .then(text => expect(text).to.eq('Joh*oe'));
 
     cy.get('.search-filter.filter-gender .ms-choice > span')
       .contains('Male');
@@ -59,7 +59,8 @@ describe('Example 6 - GraphQL Grid', () => {
         expect(text).to.eq(removeWhitespaces(`query{users(first:20,offset:20,
           orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
           filterBy:[
-            {field:"gender",operator:EQ,value:"male"},{field:"name",operator:Contains,value:"JohnDoe"},
+            {field:"gender",operator:EQ,value:"male"},
+            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
             {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
           ],locale:"en",userId:123){
             totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`));
@@ -84,7 +85,8 @@ describe('Example 6 - GraphQL Grid', () => {
         expect(text).to.eq(removeWhitespaces(`query{users(first:20,offset:40,
           orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
           filterBy:[
-            {field:"gender",operator:EQ,value:"male"},{field:"name",operator:Contains,value:"JohnDoe"},
+            {field:"gender",operator:EQ,value:"male"},
+            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
             {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
           ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`));
       });
@@ -102,7 +104,8 @@ describe('Example 6 - GraphQL Grid', () => {
         expect(text).to.eq(removeWhitespaces(`query{users(first:20,offset:80,
           orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
           filterBy:[
-            {field:"gender",operator:EQ,value:"male"},{field:"name",operator:Contains,value:"JohnDoe"},
+            {field:"gender",operator:EQ,value:"male"},
+            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
             {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
           ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`));
       });
@@ -122,7 +125,7 @@ describe('Example 6 - GraphQL Grid', () => {
           orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
           filterBy:[
             {field:"gender",operator:EQ,value:"male"},
-            {field:"name",operator:Contains,value:"John Doe"},
+            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
             {field:"company",operator:IN,value:"xyz"},
             {field:"finish",operator:GE,value:"${presetLowestDay}"},
             {field:"finish",operator:LE,value:"${presetHighestDay}"}
@@ -143,7 +146,8 @@ describe('Example 6 - GraphQL Grid', () => {
         expect(text).to.eq(removeWhitespaces(`query{users(first:20,offset:80,
           orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
           filterBy:[
-            {field:"gender",operator:EQ,value:"male"},{field:"name",operator:Contains,value:"JohnDoe"},
+            {field:"gender",operator:EQ,value:"male"},
+            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
             {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
           ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`));
       });
@@ -163,7 +167,8 @@ describe('Example 6 - GraphQL Grid', () => {
         expect(text).to.eq(removeWhitespaces(`query{users(first:30,offset:0,
           orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
           filterBy:[
-            {field:"gender",operator:EQ,value:"male"},{field:"name",operator:Contains,value:"JohnDoe"},
+            {field:"gender",operator:EQ,value:"male"},
+            {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
             {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
           ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`));
       });
@@ -174,7 +179,7 @@ describe('Example 6 - GraphQL Grid', () => {
       .find('.slick-header-left .slick-header-column:nth(0)')
       .trigger('mouseover')
       .children('.slick-header-menu-button')
-      // .should('be.hidden')
+      .should('be.hidden')
       .invoke('show')
       .click();
 
@@ -731,7 +736,8 @@ describe('Example 6 - GraphQL Grid', () => {
           expect(text).to.eq(removeWhitespaces(`query{users(last:20,
             orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
             filterBy:[
-              {field:"gender",operator:EQ,value:"male"},{field:"name",operator:Contains,value:"JohnDoe"},
+              {field:"gender",operator:EQ,value:"male"},
+              {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
               {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
             ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`));
         });
@@ -751,7 +757,8 @@ describe('Example 6 - GraphQL Grid', () => {
           expect(text).to.eq(removeWhitespaces(`query{users(first:20,
             orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
             filterBy:[
-              {field:"gender",operator:EQ,value:"male"},{field:"name",operator:Contains,value:"JohnDoe"},
+              {field:"gender",operator:EQ,value:"male"},
+              {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
               {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
             ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`));
         });
@@ -779,7 +786,8 @@ describe('Example 6 - GraphQL Grid', () => {
               expect(text).to.eq(removeWhitespaces(`query{users(first:20,after:"${afterCursor}",
                 orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
                 filterBy:[
-                  {field:"gender",operator:EQ,value:"male"},{field:"name",operator:Contains,value:"JohnDoe"},
+                  {field:"gender",operator:EQ,value:"male"},
+                  {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
                   {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
                 ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`));
             });
@@ -808,7 +816,8 @@ describe('Example 6 - GraphQL Grid', () => {
               expect(text).to.eq(removeWhitespaces(`query{users(last:20,before:"${beforeCursor}",
                 orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
                 filterBy:[
-                  {field:"gender",operator:EQ,value:"male"},{field:"name",operator:Contains,value:"JohnDoe"},
+                  {field:"gender",operator:EQ,value:"male"},
+                  {field:"name",operator:StartsWith,value:"Joh"},{field:"name",operator:EndsWith,value:"oe"},
                   {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
                 ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish},pageInfo{hasNextPage,hasPreviousPage,endCursor,startCursor},edges{cursor}}}`));
             });