Merge pull request #329 from ghiscoding/bugfix/graphql-negative-pagination

fix(graphql): pagination offset should never be below zero

Author: ghiscoding

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, EventEmitter, Injectable, Input, OnDestroy, Optional, Output } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, Optional, Output } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 
@@ -47,6 +47,7 @@ export class SlickPaginationComponent implements AfterViewInit, OnDestroy {
   /** Constructor */
   constructor(private paginationService: PaginationService, @Optional() private translate: TranslateService) {
     // translate all the text using ngx-translate or custom locales
+    this.translateAllUiTexts(this.locales);
     if (translate && translate.onLangChange) {
       this.subscriptions.push(this.translate.onLangChange.subscribe(() => this.translateAllUiTexts(this.locales)));
     }

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

@@ -221,6 +221,28 @@ describe('GraphqlService', () => {
       expect(removeSpaces(query)).toBe(removeSpaces(expectation));
     });
 
+    it('should make sure the offset pagination is never below zero, even when new page is 0', () => {
+      const expectation = `query{ users(first:20, offset:0){ 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 }, paginationOptions, gridStub);
+      service.updatePagination(0, 20);
+      const query = service.buildQuery();
+
+      expect(removeSpaces(query)).toBe(removeSpaces(expectation));
+    });
+
+    it('should make sure the offset pagination is never below zero, even when new is 1 the offset should remain 0', () => {
+      const expectation = `query{ users(first:20, offset:0){ 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 }, paginationOptions, gridStub);
+      service.updatePagination(1, 20);
+      const query = service.buildQuery();
+
+      expect(removeSpaces(query)).toBe(removeSpaces(expectation));
+    });
+
     it('should be able to provide "sortingOptions" and see the query string include the sorting', () => {
       const expectation = `query{ users(first:20, offset:40,orderBy:[{field:field1, direction:DESC}]){ totalCount, nodes{ id, field1, field2 }}}`;
       const columns = [{ id: 'field1', field: 'field1', width: 100 }, { id: 'field2', field: 'field2', width: 100 }];

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

@@ -462,7 +462,7 @@ export class GraphqlService implements BackendService {
     } else {
       paginationOptions = {
         first: pageSize,
-        offset: (newPage - 1) * pageSize
+        offset: (newPage > 1) ? ((newPage - 1) * pageSize) : 0 // recalculate offset but make sure the result is always over 0
       };
     }
 

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

@@ -121,7 +121,7 @@ export class PaginationService {
   }
 
   goToLastPage(event?: any): Promise<any> {
-    this._pageNumber = this._pageCount;
+    this._pageNumber = this._pageCount || 1;
     return this.processOnPageChanged(this._pageNumber, event);
   }
 
@@ -253,7 +253,7 @@ export class PaginationService {
       this._dataTo = 0;
       this._pageNumber = 0;
     } else {
-      this._dataFrom = (this._pageNumber * this._itemsPerPage) - this._itemsPerPage + 1;
+      this._dataFrom = this._pageNumber > 1 ? ((this._pageNumber * this._itemsPerPage) - this._itemsPerPage + 1) : 1;
       this._dataTo = (this._totalItems < this._itemsPerPage) ? this._totalItems : (this._pageNumber * this._itemsPerPage);
       if (this._dataTo > this._totalItems) {
         this._dataTo = this._totalItems;