feat(export): add delimiter/listSeparator override to use with GraphQL

Author: ghiscoding-SE

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -398,10 +398,17 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     if (backendApi) {
       // internalPostProcess only works (for now) with a GraphQL Service, so make sure it is that type
       if (backendApi && backendApi.service instanceof GraphqlService) {
-        backendApi.internalPostProcess = (processResult: any) => {
+        backendApi.internalPostProcess = (processResult: GraphqlResult) => {
           const datasetName = (backendApi && backendApi.service && typeof backendApi.service.getDatasetName === 'function') ? backendApi.service.getDatasetName() : '';
           if (processResult && processResult.data && processResult.data[datasetName]) {
             this._dataset = processResult.data[datasetName].nodes;
+            if (processResult.data[datasetName].listSeparator) {
+              // if the "listSeparator" is available in the GraphQL result, we'll override the ExportOptions Delimiter with this new info
+              if (!this.gridOptions.exportOptions) {
+                this.gridOptions.exportOptions = {};
+              }
+              this.gridOptions.exportOptions.delimiterOverride = processResult.data[datasetName].listSeparator.toString();
+            }
             this.refreshGridData(this._dataset, processResult.data[datasetName].totalCount);
           } else {
             this._dataset = [];

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

@@ -4,6 +4,9 @@ export interface ExportOption {
   /** export delimiter, can be (comma, tab, ... or even custom string). */
   delimiter?: DelimiterType | string;
 
+  /** Allows you to override for the export delimiter, useful when adding the "listSeparator" to the GraphQL query */
+  delimiterOverride?: DelimiterType | string;
+
   /** Defaults to false, which leads to all Formatters of the grid being evaluated on export. You can also override a column by changing the propery on the column itself */
   exportWithFormatter?: boolean;
 

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

@@ -1,14 +1,16 @@
+import { DelimiterType } from './delimiterType.enum';
 import { Metrics } from './metrics.interface';
 import { Statistic } from './statistic.interface';
 
 export interface GraphqlResult {
   data: {
     [datasetName: string]: {
-      nodes: any[],
+      nodes: any[];
       pageInfo: {
         hasNextPage: boolean;
-      },
-      totalCount: number
+      };
+      listSeparator?: DelimiterType;
+      totalCount: number;
     }
   };
 

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

@@ -7,11 +7,17 @@ import { GraphqlPaginationOption } from './graphqlPaginationOption.interface';
 
 export interface GraphqlServiceOption extends BackendServiceOption {
   /**
-   * When using Translation, we probably want to add locale in the query for the filterBy/orderBy to work
-   * ex.: users(first: 10, offset: 0, locale: "en-CA", filterBy: [{field: name, operator: EQ, value:"John"}]) {
+   * When using Translation, we probably want to add locale as a query parameter for the filterBy/orderBy to work
+   * ex.: users(first: 10, offset: 0, locale: "en-CA", filterBy: [{field: name, operator: EQ, value:"John"}]) { }
    */
   addLocaleIntoQuery?: boolean;
 
+  /**
+   * Add the Current User List Separator to the result query (in English the separator is comma ",").
+   * This is useful to set the "delimiter" property when using Export CSV, for example French uses semicolon ";" as a delimiter/separator
+   */
+  addListSeparator?: boolean;
+
   /** What is the dataset, this is required for the GraphQL query to be built */
   datasetName?: string;
 

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

@@ -250,6 +250,10 @@ describe('ExportService', () => {
     describe('startDownloadFile call after all private methods ran ', () => {
       let mockCollection: any[];
 
+      beforeEach(() => {
+        mockGridOptions.exportOptions = { delimiterOverride: '' };
+      });
+
       it(`should have the Order exported correctly with multiple formatters which have 1 of them returning an object with a text property (instead of simple string)`, (done) => {
         mockCollection = [{ id: 0, userId: '1E06', firstName: 'John', lastName: 'Z', position: 'SALES_REP', order: 10 }];
         jest.spyOn(dataViewStub, 'getLength').mockReturnValue(mockCollection.length);
@@ -274,6 +278,31 @@ describe('ExportService', () => {
         });
       });
 
+      it(`should have the Order exported correctly with multiple formatters and use a different delimiter when "delimiterOverride" is provided`, (done) => {
+        mockGridOptions.exportOptions = { delimiterOverride: DelimiterType.doubleSemicolon };
+        mockCollection = [{ id: 0, userId: '1E06', firstName: 'John', lastName: 'Z', position: 'SALES_REP', order: 10 }];
+        jest.spyOn(dataViewStub, 'getLength').mockReturnValue(mockCollection.length);
+        jest.spyOn(dataViewStub, 'getItem').mockReturnValue(null).mockReturnValueOnce(mockCollection[0]);
+        const spyOnAfter = jest.spyOn(service.onGridAfterExportToFile, 'next');
+        const spyUrlCreate = jest.spyOn(URL, 'createObjectURL');
+        const spyDownload = jest.spyOn(service, 'startDownloadFile');
+
+        const optionExpectation = { filename: 'export.csv', format: 'csv', useUtf8WithBom: false };
+        const contentExpectation =
+          `"User Id";;"FirstName";;"LastName";;"Position";;"Order"
+              ="1E06";;"John";;"Z";;"SALES_REP";;"<b>10</b>"`;
+
+        service.init(gridStub, dataViewStub);
+        service.exportToFile(mockExportCsvOptions);
+
+        setTimeout(() => {
+          expect(spyOnAfter).toHaveBeenCalledWith(optionExpectation);
+          expect(spyUrlCreate).toHaveBeenCalledWith(mockCsvBlob);
+          expect(spyDownload).toHaveBeenCalledWith({ ...optionExpectation, content: removeMultipleSpaces(contentExpectation) });
+          done();
+        });
+      });
+
       it(`should have the UserId escape with equal sign showing as prefix, to avoid Excel casting the value 1E06 to 1 exponential 6,
             when "exportCsvForceToKeepAsString" is enable in its column definition`, (done) => {
         mockCollection = [{ id: 0, userId: '1E06', firstName: 'John', lastName: 'Z', position: 'SALES_REP', order: 10 }];

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

@@ -243,6 +243,16 @@ describe('GraphqlService', () => {
       expect(removeSpaces(query)).toBe(removeSpaces(expectation));
     });
 
+    it('should include "listSeparator" in the query string when option "addListSeparator" is enabled', () => {
+      const expectation = `query{ users(first:10, offset:0){ listSeparator, totalCount, nodes{ id, field1, field2 }}}`;
+      const columns = [{ id: 'field1', field: 'field1', width: 100 }, { id: 'field2', field: 'field2', width: 100 }];
+
+      service.init({ datasetName: 'users', columnDefinitions: columns, addListSeparator: true }, paginationOptions, gridStub);
+      const query = service.buildQuery();
+
+      expect(removeSpaces(query)).toBe(removeSpaces(expectation));
+    });
+
     it('should include default locale "en" in the query string when option "addLocaleIntoQuery" is enabled and i18n is not defined', () => {
       const expectation = `query{ users(first:10, offset:0, locale: "en"){ totalCount, nodes{ id, field1, field2 }}}`;
       const columns = [{ id: 'field1', field: 'field1', width: 100 }, { id: 'field2', field: 'field2', width: 100 }];
@@ -415,6 +425,7 @@ describe('GraphqlService', () => {
     });
 
     it('should return a query with the new filter', () => {
+      serviceOptions.addListSeparator = false;
       const expectation = `query{users(first:10, offset:0, filterBy:[{field:gender, operator:EQ, value:"female"}]) { totalCount,nodes{ id,field1,field2 } }}`;
       const querySpy = jest.spyOn(service, 'buildQuery');
       const resetSpy = jest.spyOn(service, 'resetPaginationOptions');
@@ -441,9 +452,10 @@ describe('GraphqlService', () => {
     });
 
     it('should return a query with a new filter when previous filters exists', () => {
+      serviceOptions.addListSeparator = true;
       const expectation = `query{users(first:10, offset:0,
                           filterBy:[{field:gender, operator:EQ, value:"female"}, {field:firstName, operator:StartsWith, value:"John"}])
-                          { totalCount,nodes{ id,field1,field2 } }}`;
+                          { listSeparator, totalCount,nodes{ id,field1,field2 } }}`;
       const querySpy = jest.spyOn(service, 'buildQuery');
       const resetSpy = jest.spyOn(service, 'resetPaginationOptions');
       const mockColumn = { id: 'gender', field: 'gender' } as Column;
@@ -476,6 +488,7 @@ describe('GraphqlService', () => {
 
   describe('processOnPaginationChanged method', () => {
     it('should return a query with the new pagination', () => {
+      serviceOptions.addListSeparator = false;
       const expectation = `query{users(first:20, offset:40) { totalCount,nodes { id, field1, field2 }}}`;
       const querySpy = jest.spyOn(service, 'buildQuery');
 
@@ -489,7 +502,8 @@ describe('GraphqlService', () => {
     });
 
     it('should return a query with the new pagination and use pagination size options that was passed to service options when it is not provided as argument to "processOnPaginationChanged"', () => {
-      const expectation = `query{users(first:10, offset:20) { totalCount,nodes { id, field1, field2 }}}`;
+      serviceOptions.addListSeparator = true;
+      const expectation = `query{users(first:10, offset:20) { listSeparator, totalCount,nodes { id, field1, field2 }}}`;
       const querySpy = jest.spyOn(service, 'buildQuery');
 
       service.init(serviceOptions, paginationOptions, gridStub);
@@ -519,6 +533,7 @@ describe('GraphqlService', () => {
 
   describe('processOnSortChanged method', () => {
     it('should return a query with the new sorting when using single sort', () => {
+      serviceOptions.addListSeparator = false;
       const expectation = `query{ users(first:10, offset:0, orderBy:[{field:gender, direction: DESC}]) { totalCount,nodes{ id,field1,field2 } }}`;
       const querySpy = jest.spyOn(service, 'buildQuery');
       const mockColumn = { id: 'gender', field: 'gender' } as Column;
@@ -532,9 +547,10 @@ describe('GraphqlService', () => {
     });
 
     it('should return a query with the multiple new sorting when using multiColumnSort', () => {
+      serviceOptions.addListSeparator = true;
       const expectation = `query{ users(first:10, offset:0,
                             orderBy:[{field:gender, direction: DESC}, {field:firstName, direction: ASC}]) {
-                            totalCount,nodes{ id,field1,field2 } }}`;
+                            listSeparator, totalCount,nodes{ id,field1,field2 } }}`;
       const querySpy = jest.spyOn(service, 'buildQuery');
       const mockColumn = { id: 'gender', field: 'gender' } as Column;
       const mockColumnName = { id: 'firstName', field: 'firstName' } as Column;
@@ -553,6 +569,7 @@ describe('GraphqlService', () => {
   describe('updateFilters method', () => {
     beforeEach(() => {
       serviceOptions.columnDefinitions = [{ id: 'company', field: 'company' }, { id: 'gender', field: 'gender' }, { id: 'name', field: 'name' }];
+      serviceOptions.addListSeparator = false;
     });
 
     it('should throw an error when filter columnId is not found to be part of the column definitions', () => {
@@ -569,7 +586,9 @@ describe('GraphqlService', () => {
     });
 
     it('should return a query with the new filter when filters are passed as a filter trigger by a filter event and is of type ColumnFilters', () => {
-      const expectation = `query{users(first:10, offset:0, filterBy:[{field:gender, operator:EQ, value:"female"}]) { totalCount,nodes{ id,company,gender,name } }}`;
+      serviceOptions.addListSeparator = true;
+      const expectation = `query{users(first:10, offset:0, filterBy:[{field:gender, operator:EQ, value:"female"}]) {
+        listSeparator, totalCount,nodes{ id,company,gender,name } }}`;
       const mockColumn = { id: 'gender', field: 'gender' } as Column;
       const mockColumnFilters = {
         gender: { columnId: 'gender', columnDef: mockColumn, searchTerms: ['female'], operator: 'EQ' },
@@ -913,7 +932,8 @@ describe('GraphqlService', () => {
     });
 
     it('should return a query without any sorting after clearFilters was called', () => {
-      const expectation = `query{ users(first:10,offset:0) { totalCount,nodes{id, company, gender,name} }}`;
+      serviceOptions.addListSeparator = true;
+      const expectation = `query{ users(first:10,offset:0) { listSeparator, totalCount, nodes {id, company, gender,name} }}`;
       const mockColumn = { id: 'gender', field: 'gender' } as Column;
       const mockColumnFilters = {
         gender: { columnId: 'gender', columnDef: mockColumn, searchTerms: ['female'], operator: 'EQ' },
@@ -933,10 +953,13 @@ describe('GraphqlService', () => {
   describe('presets', () => {
     beforeEach(() => {
       serviceOptions.columnDefinitions = [{ id: 'company', field: 'company' }, { id: 'gender', field: 'gender' }, { id: 'duration', field: 'duration' }, { id: 'startDate', field: 'startDate' }];
+      serviceOptions.addListSeparator = false;
     });
 
     it('should return a query with search having a range of exclusive numbers when the search value contains 2 (..) to represent a range of numbers', () => {
-      const expectation = `query{users(first:10, offset:0, filterBy:[{field:duration, operator:GT, value:"2"}, {field:duration, operator:LT, value:"33"}]) { totalCount,nodes{ id,company,gender,duration,startDate } }}`;
+      serviceOptions.addListSeparator = true;
+      const expectation = `query{users(first:10, offset:0, filterBy:[{field:duration, operator:GT, value:"2"}, {field:duration, operator:LT, value:"33"}]) {
+        listSeparator, totalCount,nodes{ id,company,gender,duration,startDate } }}`;
       const presetFilters = [
         { columnId: 'duration', searchTerms: ['2..33'] },
       ] as CurrentFilter[];
@@ -1044,12 +1067,14 @@ describe('GraphqlService', () => {
   describe('updateSorters method', () => {
     beforeEach(() => {
       serviceOptions.columnDefinitions = [{ id: 'company', field: 'company' }, { id: 'gender', field: 'gender' }, { id: 'name', field: 'name' }];
+      serviceOptions.addListSeparator = false;
     });
 
     it('should return a query with the multiple new sorting when using multiColumnSort', () => {
+      serviceOptions.addListSeparator = true;
       const expectation = `query{ users(first:10, offset:0,
                             orderBy:[{field:gender, direction: DESC}, {field:firstName, direction: ASC}]) {
-                            totalCount,nodes{ id, company, gender, name } }}`;
+                            listSeparator, totalCount,nodes{ id, company, gender, name } }}`;
       const mockColumnSort = [
         { columnId: 'gender', sortCol: { id: 'gender', field: 'gender' }, sortAsc: false },
         { columnId: 'firstName', sortCol: { id: 'firstName', field: 'firstName' }, sortAsc: true }
@@ -1136,8 +1161,9 @@ describe('GraphqlService', () => {
     });
 
     it('should return a query without any sorting after clearSorters was called', () => {
+      serviceOptions.addListSeparator = true;
       const expectation = `query { users(first:10, offset:0) {
-        totalCount, nodes { id,company,gender,name }}}`;
+        listSeparator, totalCount, nodes { id,company,gender,name }}}`;
       const mockColumnSort = [
         { columnId: 'gender', sortCol: { id: 'gender', field: 'gender' }, sortAsc: false },
         { columnId: 'firstName', sortCol: { id: 'firstName', field: 'firstName' }, sortAsc: true }