fix(pagination): reload local grid with pagination presests w/same data

ghiscoding · Jan 20, 2020 · 80eef1a · 80eef1a
1 parent 3e2ad87
commit 80eef1a
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 69 deletions.
diff --git a/src/app/examples/grid-rowselection.component.html b/src/app/examples/grid-rowselection.component.html
@@ -3,6 +3,14 @@ <h2>{{title}}</h2>
   <div class="subtitle" [innerHTML]="subTitle"></div>
 
   <div class="row">
+    <div class="col-sm-1">
+      <button class="btn btn-default btn-xs" data-test="goto-first-page" (click)="goToGrid1FirstPage()">
+        <i class="fa fa-caret-left fa-lg"></i>
+      </button>
+      <button class="btn btn-default btn-xs" data-test="goto-last-page" (click)="goToGrid1LastPage()">
+        <i class="fa fa-caret-right fa-lg"></i>
+      </button>
+    </div>
     <div class="col-sm-8">
       <div class="alert alert-success">
         <strong>(single select) Selected Row:</strong>
@@ -19,6 +27,14 @@ <h2>{{title}}</h2>
   <hr>
 
   <div class="row">
+    <div class="col-sm-1">
+      <button class="btn btn-default btn-xs" data-test="goto-first-page" (click)="goToGrid2FirstPage()">
+        <i class="fa fa-caret-left fa-lg"></i>
+      </button>
+      <button class="btn btn-default btn-xs" data-test="goto-last-page" (click)="goToGrid2LastPage()">
+        <i class="fa fa-caret-right fa-lg"></i>
+      </button>
+    </div>
     <div class="col-sm-8">
       <div class="alert alert-success">
         <strong>(multi-select) Selected Row(s):</strong>

diff --git a/src/app/examples/grid-rowselection.component.ts b/src/app/examples/grid-rowselection.component.ts
@@ -2,7 +2,6 @@ import { Component, Injectable, OnInit } from '@angular/core';
 import {
   AngularGridInstance,
   Column,
-  Editors,
   FieldType,
   Filters,
   Formatters,
@@ -11,7 +10,7 @@ import {
 
 @Component({
   templateUrl: './grid-rowselection.component.html',
-  styles: ['.alert { padding: 8px; margin-bottom: 10px }'],
+  styles: ['.alert { padding: 8px; margin-bottom: 10px }', '.col-sm-1{ max-width: 70px }'],
 })
 @Injectable()
 export class GridRowSelectionComponent implements OnInit {
@@ -55,58 +54,48 @@ export class GridRowSelectionComponent implements OnInit {
 
   prepareGrid() {
     this.columnDefinitions1 = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, editor: { model: Editors.longText } },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, editor: { model: Editors.integer } },
-      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
-      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, editor: { model: Editors.date } },
-      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, editor: { model: Editors.date }, exportWithFormatter: true },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
-    ];
-
-    this.columnDefinitions2 = [
+      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, filterable: true },
+      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, filterable: true },
+      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, filterable: true, sortable: true },
       {
-        id: 'title', name: 'Title', field: 'title',
-        sortable: true,
-        type: FieldType.string,
-        filterable: true
+        id: 'start', name: 'Start', field: 'start',
+        formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date,
+        filterable: true, sortable: true, filter: { model: Filters.compoundDate },
       },
       {
-        id: 'duration', name: 'Duration (days)', field: 'duration',
-        sortable: true,
-        type: FieldType.number,
-        filterable: true
+        id: 'finish', name: 'Finish', field: 'finish',
+        formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date,
+        filterable: true, sortable: true, filter: { model: Filters.compoundDate },
       },
       {
-        id: 'complete', name: '% Complete', field: 'percentComplete',
-        formatter: Formatters.percentCompleteBar,
-        type: FieldType.number,
-        filterable: true,
-        sortable: true
-      },
+        id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
+        formatter: Formatters.checkmark, type: FieldType.boolean,
+        sortable: true, filterable: true,
+        filter: {
+          collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }],
+          model: Filters.singleSelect,
+        }
+      }
+    ];
+
+    this.columnDefinitions2 = [
+      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, filterable: true },
+      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, filterable: true },
+      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, filterable: true, sortable: true },
       {
         id: 'start', name: 'Start', field: 'start',
-        filterable: true,
-        sortable: true,
-        formatter: Formatters.dateIso,
-        exportWithFormatter: true,
-        type: FieldType.date,
-        filter: { model: Filters.compoundDate },
+        formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date,
+        filterable: true, sortable: true, filter: { model: Filters.compoundDate },
       },
       {
         id: 'finish', name: 'Finish', field: 'finish',
-        filterable: true,
-        sortable: true,
-        formatter: Formatters.dateIso,
-        exportWithFormatter: true,
-        type: FieldType.date,
-        filter: { model: Filters.compoundDate },
+        formatter: Formatters.dateIso, exportWithFormatter: true, type: FieldType.date,
+        filterable: true, sortable: true, filter: { model: Filters.compoundDate },
       },
       {
         id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
-        formatter: Formatters.checkmark,
-        type: FieldType.boolean,
-        sortable: true,
-        filterable: true,
+        formatter: Formatters.checkmark, type: FieldType.boolean,
+        sortable: true, filterable: true,
         filter: {
           collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }],
           model: Filters.singleSelect,
@@ -115,13 +104,11 @@ export class GridRowSelectionComponent implements OnInit {
     ];
 
     this.gridOptions1 = {
-      editable: true,
-      autoEdit: false,
       enableAutoResize: false,
       enableCellNavigation: true,
-      enableFiltering: false,
-      enableCheckboxSelector: true,
       enableRowSelection: true,
+      enableCheckboxSelector: true,
+      enableFiltering: true,
       checkboxSelector: {
         // remove the unnecessary "Select All" checkbox in header when in single selection mode
         hideSelectAllCheckbox: true,
@@ -130,9 +117,10 @@ export class GridRowSelectionComponent implements OnInit {
         // for example, display the expand icon only on every 2nd row
         // selectableOverride: (row: number, dataContext: any, grid: any) => (dataContext.id % 2 === 1)
       },
+      multiSelect: false,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)
-        selectActiveRow: true
+        selectActiveRow: true,
       },
       columnPicker: {
         hideForceFitButton: true
@@ -170,14 +158,14 @@ export class GridRowSelectionComponent implements OnInit {
       },
     };
 
-    this.dataset1 = this.prepareData();
-    this.dataset2 = this.prepareData();
+    this.dataset1 = this.prepareData(495);
+    this.dataset2 = this.prepareData(525);
   }
 
-  prepareData() {
+  prepareData(count: number) {
     // mock a dataset
     const mockDataset = [];
-    for (let i = 0; i < 500; i++) {
+    for (let i = 0; i < count; i++) {
       const randomYear = 2000 + Math.floor(Math.random() * 10);
       const randomMonth = Math.floor(Math.random() * 11);
       const randomDay = Math.floor((Math.random() * 29));
@@ -197,6 +185,22 @@ export class GridRowSelectionComponent implements OnInit {
     return mockDataset;
   }
 
+  goToGrid1FirstPage() {
+    this.angularGrid1.paginationService.goToFirstPage();
+  }
+
+  goToGrid1LastPage() {
+    this.angularGrid1.paginationService.goToLastPage();
+  }
+
+  goToGrid2FirstPage() {
+    this.angularGrid2.paginationService.goToFirstPage();
+  }
+
+  goToGrid2LastPage() {
+    this.angularGrid2.paginationService.goToLastPage();
+  }
+
   handleSelectedRowsChanged1(e, args) {
     if (Array.isArray(args.rows)) {
       this.selectedTitle = args.rows.map(idx => {

diff --git a/src/app/examples/grid-state.component.ts b/src/app/examples/grid-state.component.ts
@@ -15,9 +15,9 @@ import {
 function randomBetween(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min);
 }
+const DEFAULT_PAGE_SIZE = 25;
 const LOCAL_STORAGE_KEY = 'gridState';
 const NB_ITEMS = 500;
-const DEFAULT_PAGE_SIZE = 25;
 
 @Component({
   templateUrl: './grid-state.component.html'

diff --git a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
@@ -511,7 +511,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
           startTime: new Date(),
           endTime: new Date(),
           itemCount: args && args.current || 0,
-          totalItemCount: this.dataset.length || 0
+          totalItemCount: Array.isArray(this.dataset) ? this.dataset.length : 0
         };
       });
 
@@ -804,7 +804,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
    */
   private loadLocalGridPagination() {
     if (this.gridOptions) {
-      this.totalItems = this.dataset.length;
+      this.totalItems = Array.isArray(this.dataset) ? this.dataset.length : 0;
       if (this.paginationOptions && this.dataView && this.dataView.getPagingInfo) {
         const slickPagingInfo = this.dataView.getPagingInfo() || {};
         if (slickPagingInfo.hasOwnProperty('totalRows') && this.paginationOptions.totalItems !== slickPagingInfo.totalRows) {

diff --git a/src/app/modules/angular-slickgrid/models/pagination.interface.ts b/src/app/modules/angular-slickgrid/models/pagination.interface.ts
@@ -1,6 +1,22 @@
 export interface Pagination {
+  /** How many pages do we have in total to display the entire dataset? */
+  pageCount?: number;
+
+  /** Current page number that we are we currently displaying. */
   pageNumber?: number;
+
+  /** The available page sizes */
   pageSizes: number[];
+
+  /** Current page size chosen */
   pageSize: number;
+
+  /** The full total count of items for the entire dataset */
   totalItems?: number;
+
+  /** Current From count (which displayed items are we starting from) */
+  dataFrom?: number;
+
+  /** Current To count (which displayed items are we ending to) */
+  dataTo?: number;
 }
diff --git a/src/app/modules/angular-slickgrid/services/pagination.service.ts b/src/app/modules/angular-slickgrid/services/pagination.service.ts
@@ -83,10 +83,11 @@ export class PaginationService {
       this.dataView.onPagingInfoChanged.subscribe((e, pagingInfo) => {
         if (this._totalItems !== pagingInfo.totalRows) {
           this._totalItems = pagingInfo.totalRows;
+          this.refreshPagination(false, false);
         }
       });
       dataView.setRefreshHints({ isFilterUnchanged: true });
-      dataView.setPagingOptions({ pageSize: this.paginationOptions.pageSize, pageNum: 0 }); // dataView page starts at 0 instead of 1
+      dataView.setPagingOptions({ pageSize: this.paginationOptions.pageSize, pageNum: (this._pageNumber - 1) }); // dataView page starts at 0 instead of 1
     }
 
     // Subscribe to Filter Clear & Changed and go back to page 1 when that happen

diff --git a/test/cypress/integration/example10.spec.js b/test/cypress/integration/example10.spec.js
@@ -173,7 +173,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => {
 
       cy.get('@grid1')
         .find('[data-test=page-count]')
-        .contains('100');
+        .contains('99');
 
       cy.get('@grid1')
         .find('[data-test=item-from]')
@@ -185,12 +185,12 @@ describe('Example 10 - Multiple Grids with Row Selection', () => {
 
       cy.get('@grid1')
         .find('[data-test=total-items]')
-        .contains('500');
+        .contains('495');
 
       // 2nd Grid
       cy.get('@grid2')
         .find('[data-test=page-count]')
-        .contains('100');
+        .contains('105');
 
       cy.get('@grid2')
         .find('[data-test=item-from]')
@@ -202,7 +202,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => {
 
       cy.get('@grid2')
         .find('[data-test=total-items]')
-        .contains('500');
+        .contains('525');
     });
 
     it('should change Page Number in Grid1 and expect the Pagination to have correct values', () => {
@@ -216,7 +216,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => {
 
       cy.get('@grid1')
         .find('[data-test=page-count]')
-        .contains('100');
+        .contains('99');
 
       cy.get('@grid1')
         .find('[data-test=item-from]')
@@ -228,7 +228,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => {
 
       cy.get('@grid1')
         .find('[data-test=total-items]')
-        .contains('500');
+        .contains('495');
     });
 
     it('should change Page Number and Page Size in Grid2 and expect the Pagination to have correct values', () => {
@@ -242,7 +242,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => {
 
       cy.get('@grid2')
         .find('[data-test=page-count]')
-        .contains('100');
+        .contains('105');
 
       cy.get('@grid2')
         .find('[data-test=item-from]')
@@ -254,7 +254,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => {
 
       cy.get('@grid2')
         .find('[data-test=total-items]')
-        .contains('500');
+        .contains('525');
 
       cy.get('@grid2')
         .find('#items-per-page-label').select('75');
@@ -277,7 +277,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => {
 
       cy.get('@grid1')
         .find('[data-test=page-count]')
-        .contains('100');
+        .contains('99');
 
       cy.get('@grid1')
         .find('[data-test=item-from]')
@@ -289,7 +289,7 @@ describe('Example 10 - Multiple Grids with Row Selection', () => {
 
       cy.get('@grid1')
         .find('[data-test=total-items]')
-        .contains('500');
+        .contains('495');
     });
   });
 });