fix(pagination): fixed a few pagination problem used by backend service

- also fixed GraphQL to work correctly when "enablePagination" is set to False, it shouldn't add pagination into the GraphQL query (first, offset)

Author: Ghislain Beaulac

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

@@ -638,7 +638,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
         if (!this.gridOptions.pagination) {
           this.gridOptions.pagination = (this.gridOptions.pagination) ? this.gridOptions.pagination : undefined;
         }
-        if (this.gridOptions.pagination && totalCount) {
+        if (this.gridOptions.pagination && totalCount !== undefined) {
           this.gridOptions.pagination.totalItems = totalCount;
         }
         if (this.gridOptions.presets && this.gridOptions.presets.pagination && this.gridOptions.pagination) {

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

@@ -2,11 +2,11 @@
     <div class="slick-pagination-nav">
         <nav aria-label="Page navigation">
         <ul class="pagination">
-            <li class="page-item" [ngClass]="pageNumber === 1 ? 'disabled' : ''">
+            <li class="page-item" [ngClass]="(pageNumber === 1 || totalItems === 0) ? 'disabled' : ''">
             <a class="page-link icon-seek-first fa fa-angle-double-left" aria-label="First" (click)="changeToFirstPage($event)">
             </a>
             </li>
-            <li class="page-item" [ngClass]="pageNumber === 1 ? 'disabled' : ''">
+            <li class="page-item" [ngClass]="(pageNumber === 1 || totalItems === 0) ? 'disabled' : ''">
             <a class="page-link icon-seek-prev fa fa-angle-left" aria-label="Previous" (click)="changeToPreviousPage($event)">
             </a>
             </li>
@@ -15,17 +15,17 @@
 
         <div class="slick-page-number">
             <span [translate]="'PAGE'"></span>
-            <input type="text" class="form-control" value="{{pageNumber}}" size="1"  (change)="changeToCurrentPage($event)">
+            <input type="text" class="form-control" [value]="pageNumber" size="1" [readOnly]="totalItems === 0" (change)="changeToCurrentPage($event)">
             <span [translate]="'OF'"></span><span> {{pageCount}}</span>
         </div>
 
         <nav aria-label="Page navigation">
         <ul class="pagination">
-            <li class="page-item" [ngClass]="pageNumber === pageCount ? 'disabled' : ''">
+            <li class="page-item" [ngClass]="(pageNumber === pageCount || totalItems === 0) ? 'disabled' : ''">
             <a class="page-link icon-seek-next text-center fa fa-lg fa-angle-right" aria-label="Next" (click)="changeToNextPage($event)">
             </a>
             </li>
-            <li class="page-item" [ngClass]="pageNumber === pageCount ? 'disabled' : ''">
+            <li class="page-item" [ngClass]="(pageNumber === pageCount || totalItems === 0) ? 'disabled' : ''">
             <a class="page-link icon-seek-end fa fa-lg fa-angle-double-right" aria-label="Last" (click)="changeToLastPage($event)">
             </a>
             </li>

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

@@ -90,11 +90,11 @@ export class SlickPaginationComponent implements AfterViewInit, OnDestroy {
   }
 
   changeToCurrentPage(event: any) {
-    this.pageNumber = event.currentTarget.value;
+    this.pageNumber = +event.currentTarget.value;
     if (this.pageNumber < 1) {
-          this.pageNumber = 1;
+      this.pageNumber = 1;
     } else if (this.pageNumber > this.pageCount) {
-          this.pageNumber = this.pageCount;
+      this.pageNumber = this.pageCount;
     }
 
     this.onPageChanged(event, this.pageNumber);
@@ -110,7 +110,7 @@ export class SlickPaginationComponent implements AfterViewInit, OnDestroy {
   onChangeItemPerPage(event: any) {
     const itemsPerPage = +event.target.value;
     this.pageCount = Math.ceil(this.totalItems / itemsPerPage);
-    this.pageNumber = 1;
+    this.pageNumber = (this.totalItems > 0) ? 1 : 0;
     this.itemsPerPage = itemsPerPage;
     this.onPageChanged(event, this.pageNumber);
   }
@@ -221,7 +221,13 @@ export class SlickPaginationComponent implements AfterViewInit, OnDestroy {
   }
 
   recalculateFromToIndexes() {
-    this.dataFrom = (this.pageNumber * this.itemsPerPage) - this.itemsPerPage + 1;
-    this.dataTo = (this.totalItems < this.itemsPerPage) ? this.totalItems : (this.pageNumber * this.itemsPerPage);
+    if (this.totalItems === 0) {
+      this.dataFrom = 0;
+      this.dataTo = 0;
+      this.pageNumber = 0;
+    } else {
+      this.dataFrom = (this.pageNumber * this.itemsPerPage) - this.itemsPerPage + 1;
+      this.dataTo = (this.totalItems < this.itemsPerPage) ? this.totalItems : (this.pageNumber * this.itemsPerPage);
+    }
   }
 }

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

@@ -104,13 +104,18 @@ export class GraphqlService implements BackendService {
     }
 
     // add dataset filters, could be Pagination and SortingFilters and/or FieldFilters
-    const datasetFilters: GraphqlDatasetFilter = {
-      ...this.options.paginationOptions,
-      first: ((this.options.paginationOptions && this.options.paginationOptions.first) ? this.options.paginationOptions.first : ((this.pagination && this.pagination.pageSize) ? this.pagination.pageSize : null)) || this.defaultPaginationOptions.first
-    };
+    let datasetFilters: GraphqlDatasetFilter = {};
+
+    // only add pagination if it's enabled in the grid options
+    if (this._gridOptions.enablePagination !== false) {
+      datasetFilters = {
+        ...this.options.paginationOptions,
+        first: ((this.options.paginationOptions && this.options.paginationOptions.first) ? this.options.paginationOptions.first : ((this.pagination && this.pagination.pageSize) ? this.pagination.pageSize : null)) || this.defaultPaginationOptions.first
+      };
 
-    if (!this.options.isWithCursor) {
-      datasetFilters.offset = ((this.options.paginationOptions && this.options.paginationOptions.hasOwnProperty('offset')) ? +this.options.paginationOptions['offset'] : 0);
+      if (!this.options.isWithCursor) {
+        datasetFilters.offset = ((this.options.paginationOptions && this.options.paginationOptions.hasOwnProperty('offset')) ? +this.options.paginationOptions['offset'] : 0);
+      }
     }
 
     if (this.options.sortingOptions && Array.isArray(this.options.sortingOptions) && this.options.sortingOptions.length > 0) {