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

aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts

@@ -638,7 +638,7 @@ export class AureliaSlickgridCustomElement {
         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) {

aurelia-slickgrid/src/aurelia-slickgrid/index.ts

@@ -22,6 +22,7 @@ export { GraphqlService, GridOdataService } from './services/index';
 export function configure(aurelia: any, callback: any) {
   aurelia.globalResources(PLATFORM.moduleName('./aurelia-slickgrid'));
   aurelia.globalResources(PLATFORM.moduleName('./slick-pagination'));
+  aurelia.globalResources(PLATFORM.moduleName('./value-converters/number'));
 
   // must register a transient so the container will get a new instance everytime
   aurelia.container.registerTransient(Filters.compoundDate);

aurelia-slickgrid/src/aurelia-slickgrid/services/graphql.service.ts

@@ -106,13 +106,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) {

aurelia-slickgrid/src/aurelia-slickgrid/slick-pagination.html

@@ -1,47 +1,75 @@
 <template>
-  <div id="pager" style="width:100%;">
+  <div id="pager"
+       style="width:100%;">
     <div class="slick-pagination">
       <div class="slick-pagination-nav">
         <nav aria-label="Page navigation">
           <ul class="pagination">
-            <li class="page-item" class.bind="pageNumber === 1 ? 'disabled' : ''">
-              <a class="page-link icon-seek-first fa fa-angle-double-left" href="" aria-label="First" click.delegate="changeToFirstPage()">
+            <li class="page-item"
+                class.bind="(pageNumber === 1 || totalItems === 0) ? 'disabled' : ''">
+              <a class="page-link icon-seek-first fa fa-angle-double-left"
+                 href=""
+                 aria-label="First"
+                 click.delegate="changeToFirstPage()">
               </a>
             </li>
-            <li class="page-item" class.bind="pageNumber === 1 ? 'disabled' : ''">
-              <a class="page-link icon-seek-prev fa fa-angle-left" href="" aria-label="Previous" click.delegate="changeToPreviousPage()">
+            <li class="page-item"
+                class.bind="(pageNumber === 1 || totalItems === 0) ? 'disabled' : ''">
+              <a class="page-link icon-seek-prev fa fa-angle-left"
+                 href=""
+                 aria-label="Previous"
+                 click.delegate="changeToPreviousPage()">
               </a>
             </li>
           </ul>
         </nav>
 
         <div class="slick-page-number">
           <span t="PAGE"></span>
-          <input type="text" class="form-control" value.bind="pageNumber" size="1" change.delegate="changeToCurrentPage($event)">
+          <input type="text"
+                 class="form-control"
+                 value.bind="pageNumber | number"
+                 size="1"
+                 readonly.bind="totalItems === 0"
+                 change.delegate="changeToCurrentPage($event)">
           <span t="OF"></span>
           <span> ${pageCount}</span>
         </div>
 
         <nav aria-label="Page navigation">
           <ul class="pagination">
-            <li class="page-item" class.bind="pageNumber === pageCount ? 'disabled' : ''">
-              <a class="page-link icon-seek-next fa fa-angle-right" href="" aria-label="Next" click.delegate="changeToNextPage()">
+            <li class="page-item"
+                class.bind="(pageNumber === pageCount || totalItems === 0) ? 'disabled' : ''">
+              <a class="page-link icon-seek-next fa fa-angle-right"
+                 href=""
+                 aria-label="Next"
+                 click.delegate="changeToNextPage()">
               </a>
             </li>
-            <li class="page-item" class.bind="pageNumber === pageCount ? 'disabled' : ''">
-              <a class="page-link icon-seek-end fa fa-angle-double-right" href="" aria-label="Last" click.delegate="changeToLastPage()">
+            <li class="page-item"
+                class.bind="(pageNumber === pageCount || totalItems === 0) ? 'disabled' : ''">
+              <a class="page-link icon-seek-end fa fa-angle-double-right"
+                 href=""
+                 aria-label="Last"
+                 click.delegate="changeToLastPage()">
               </a>
             </li>
           </ul>
         </nav>
       </div>
       <span class="slick-pagination-settings">
-        <select id="items-per-page-label" value.bind="itemsPerPage" change.delegate="onChangeItemPerPage($event)">
-          <option value="${pageSize}" repeat.for="pageSize of paginationPageSizes" model.bind="pageSize">${pageSize}</option>
+        <select id="items-per-page-label"
+                value.bind="itemsPerPage | number"
+                change.delegate="onChangeItemPerPage($event)">
+          <option value="${pageSize}"
+                  repeat.for="pageSize of paginationPageSizes"
+                  model.bind="pageSize">${pageSize}</option>
         </select>
         <span t="ITEMS_PER_PAGE">items per page</span>,
         <span class="slick-pagination-count">
-          <span t="FROM_TO_OF_TOTAL_ITEMS" t-params.bind="{ from: dataFrom, to: dataTo, totalItems: totalItems }">${dataFrom}-${dataTo} of ${totalItems} items</span>
+          <span t="FROM_TO_OF_TOTAL_ITEMS"
+                t-params.bind="{ from: dataFrom, to: dataTo, totalItems: totalItems }">${dataFrom}-${dataTo} of
+            ${totalItems} items</span>
         </span>
       </span>
     </div>

aurelia-slickgrid/src/aurelia-slickgrid/slick-pagination.ts

@@ -1,14 +1,12 @@
 import { bindable, inject } from 'aurelia-framework';
 import { Subscription, EventAggregator } from 'aurelia-event-aggregator';
 import { GridOption } from './models/index';
-import { FilterService } from './services/index';
 
 const aureliaEventPrefix = 'asg';
 
-@inject(Element, EventAggregator, FilterService)
+@inject(Element, EventAggregator)
 export class SlickPaginationCustomElement {
   private _filterSubscriber: Subscription;
-  private _sorterSubscriber: Subscription;
   @bindable() grid: any;
   @bindable() gridPaginationOptions: GridOption;
   private _gridPaginationOptions: GridOption;
@@ -23,14 +21,14 @@ export class SlickPaginationCustomElement {
   paginationCallback: () => void;
   paginationPageSizes = [25, 75, 100];
 
-  constructor(private elm: Element, private ea: EventAggregator, private filterService: FilterService) {
-    this.filterService = filterService;
-  }
+  constructor(private elm: Element, private ea: EventAggregator) { }
 
   bind(binding: any, contexts: any) {
     this._gridPaginationOptions = binding.gridPaginationOptions;
     if (!binding.gridPaginationOptions || (binding.gridPaginationOptions.pagination && binding.gridPaginationOptions.pagination.totalItems !== this.totalItems)) {
       this.refreshPagination();
+    } else if (binding.gridPaginationOptions.pagination.totalItems === 0) {
+      this.recalculateFromToIndexes();
     }
 
     // Subscribe to Filter changed and go back to page 1 when that happen
@@ -84,7 +82,7 @@ export class SlickPaginationCustomElement {
   }
 
   changeToCurrentPage(event: any) {
-    this.pageNumber = (event && event.target && event.target.value) ? event.target.value : 1;
+    this.pageNumber = +((event && event.target && event.target.value) ? event.target.value : 1);
     if (this.pageNumber < 1) {
       this.pageNumber = 1;
     } else if (this.pageNumber > this.pageCount) {
@@ -102,7 +100,7 @@ export class SlickPaginationCustomElement {
   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);
   }
@@ -216,7 +214,13 @@ export class SlickPaginationCustomElement {
   }
 
   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);
+    }
   }
 }

aurelia-slickgrid/src/aurelia-slickgrid/value-converters/number.ts

@@ -0,0 +1,6 @@
+export class NumberValueConverter {
+  fromView(value: any, format: string): number {
+    const number = parseFloat(value);
+    return isNaN(number) ? value : number;
+  }
+}