From 53aa9dc0c3fd8209c8a667ad27c9ef2e0f88340f Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Thu, 16 Jan 2020 20:08:11 -0500 Subject: [PATCH] feat(pagination): add Pagination to local grid --- src/app/examples/grid-basic.component.html | 31 +++---- src/app/examples/grid-basic.component.ts | 22 +++-- src/app/examples/grid-state.component.ts | 18 +++-- .../angular-slickgrid-constructor.spec.ts | 25 +++++- .../components/angular-slickgrid.component.ts | 37 +++++++-- .../components/slick-pagination.component.ts | 2 +- .../__tests__/gridState.service.spec.ts | 15 +++- .../__tests__/pagination.service.spec.ts | 10 ++- .../services/__tests__/shared.service.spec.ts | 25 +++++- .../services/gridState.service.ts | 14 ++-- .../services/pagination.service.ts | 80 +++++++++++++------ .../services/shared.service.ts | 13 ++- test/cypress/integration/example01.spec.js | 6 +- 13 files changed, 217 insertions(+), 81 deletions(-) diff --git a/src/app/examples/grid-basic.component.html b/src/app/examples/grid-basic.component.html index 5435cbe72..df330d96f 100644 --- a/src/app/examples/grid-basic.component.html +++ b/src/app/examples/grid-basic.component.html @@ -1,25 +1,16 @@
-

{{title}}

-
+

{{title}}

+
-

Grid 1

- - +

Grid 1

+ + -
+
-

Grid 2

- - +

Grid 2 (with local Pagination)

+ +
- diff --git a/src/app/examples/grid-basic.component.ts b/src/app/examples/grid-basic.component.ts index be2e54ec1..e6bfc96a6 100644 --- a/src/app/examples/grid-basic.component.ts +++ b/src/app/examples/grid-basic.component.ts @@ -1,6 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { Column, GridOption } from './../modules/angular-slickgrid'; +const NB_ITEMS = 600; + @Component({ templateUrl: './grid-basic.component.html' }) @@ -35,18 +37,28 @@ export class GridBasicComponent implements OnInit { }; // copy the same Grid Options and Column Definitions to 2nd grid + // but also add Pagination in this grid this.columnDefinitions2 = this.columnDefinitions1; - this.gridOptions2 = this.gridOptions1; + this.gridOptions2 = { + ...this.gridOptions1, + ...{ + enablePagination: true, + pagination: { + pageSizes: [5, 10, 15, 20, 25, 50, 75, 100], + pageSize: 5 + }, + } + }; // mock some data (different in each dataset) - this.dataset1 = this.mockData(); - this.dataset2 = this.mockData(); + this.dataset1 = this.mockData(NB_ITEMS); + this.dataset2 = this.mockData(NB_ITEMS); } - mockData() { + mockData(count: number) { // mock a dataset const mockDataset = []; - for (let i = 0; i < 1000; 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)); diff --git a/src/app/examples/grid-state.component.ts b/src/app/examples/grid-state.component.ts index 8ba0d4e0e..4a8b909dd 100644 --- a/src/app/examples/grid-state.component.ts +++ b/src/app/examples/grid-state.component.ts @@ -150,6 +150,11 @@ export class GridStateComponent implements OnInit { gridMenu: { hideForceFitButton: true }, + enablePagination: true, + pagination: { + pageSizes: [5, 10, 15, 20, 25, 30, 40, 50, 75, 100], + pageSize: 25 + }, }; // reload the Grid State with the grid options presets @@ -157,13 +162,13 @@ export class GridStateComponent implements OnInit { this.gridOptions.presets = gridStatePresets; } - this.getData(); + this.dataset = this.getData(NB_ITEMS); } - getData() { + getData(count: number) { // mock a dataset - this.dataset = []; - for (let i = 0; i < NB_ITEMS; i++) { + const tmpData = []; + for (let i = 0; i < count; i++) { const randomDuration = Math.round(Math.random() * 100); const randomYear = randomBetween(2000, 2025); const randomYearShort = randomBetween(10, 25); @@ -174,7 +179,7 @@ export class GridStateComponent implements OnInit { const randomHour = randomBetween(10, 23); const randomTime = randomBetween(10, 59); - this.dataset[i] = { + tmpData[i] = { id: i, title: 'Task ' + i, etc: 'Something hidden ' + i, @@ -188,6 +193,7 @@ export class GridStateComponent implements OnInit { completed: (i % 3 === 0) }; } + return tmpData; } /** Dispatched event of a Grid State Changed event */ @@ -231,6 +237,6 @@ export class GridStateComponent implements OnInit { { columnId: 'duration', direction: 'DESC' }, { columnId: 'complete', direction: 'ASC' } ], - }; + } as GridState; } } diff --git a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts index 275cae35a..5491e7109 100644 --- a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts +++ b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts @@ -10,7 +10,6 @@ import { ExportService, ExtensionService, FilterService, - GraphqlPaginatedResult, GraphqlService, GridService, GridEventService, @@ -21,7 +20,7 @@ import { SharedService, SortService, } from '../../services'; -import { Column, CurrentFilter, CurrentSorter, GridOption, GridState, GridStateChange, GridStateType, Pagination, GraphqlServiceApi, GraphqlServiceOption } from '../../models'; +import { Column, CurrentFilter, CurrentSorter, GraphqlPaginatedResult, GraphqlServiceApi, GraphqlServiceOption, GridOption, GridState, GridStateChange, GridStateType, Pagination } from '../../models'; import { Filters } from '../../filters'; import { Editors } from '../../editors'; import * as utilities from '../../services/backend-utilities'; @@ -579,6 +578,28 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = expect(spy).toHaveBeenCalledWith(); }); + + it('should refresh a local grid and change pagination options pagination when a preset for it is defined in grid options', (done) => { + const expectedPageNumber = 3; + const refreshSpy = jest.spyOn(component, 'refreshGridData'); + + const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }]; + component.gridOptions = { + enablePagination: true, + presets: { pagination: { pageSize: 10, pageNumber: expectedPageNumber } } + }; + component.paginationOptions = { pageSize: 10, pageNumber: 2, pageSizes: [10, 25, 50], totalItems: 100 }; + + component.ngAfterViewInit(); + component.dataset = mockData; + + setTimeout(() => { + expect(component.paginationOptions.pageSize).toBe(10); + expect(component.paginationOptions.pageNumber).toBe(expectedPageNumber); + expect(refreshSpy).toHaveBeenCalledWith(mockData); + done(); + }); + }); }); describe('Backend Service API', () => { diff --git a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts index 9a3612bbc..896da0d34 100644 --- a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts +++ b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts @@ -302,7 +302,10 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn if (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) { this.gridService.setSelectedRows([]); } - + if (this.sharedService) { + const { pageNumber, pageSize } = pagination; + this.sharedService.currentPagination = { pageNumber, pageSize }; + } this.gridStateService.onGridStateChanged.next({ change: { newValues: pagination, type: GridStateType.pagination }, gridState: this.gridStateService.getCurrentGridState() @@ -314,6 +317,15 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn * @param dataset */ refreshGridData(dataset: any[], totalCount?: number) { + // local grid + if (this.gridOptions && this.gridOptions.enablePagination && !this.gridOptions.backendServiceApi) { + this.totalItems = dataset.length; + setTimeout(() => { + this.showPagination = true; + this.setPaginationOptionsWhenPresetDefined(); + }); + } + if (Array.isArray(dataset) && this.grid && this.dataView && typeof this.dataView.setItems === 'function') { this.dataView.setItems(dataset, this.gridOptions.datasetIdPropertyName); if (!this.gridOptions.backendServiceApi) { @@ -326,13 +338,10 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn } // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly - this.showPagination = ((this.gridOptions && this.gridOptions.enablePagination && (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined)) ? true : this.gridOptions.enablePagination) || false; + this.showPagination = (this.gridOptions && (this.gridOptions.enablePagination || (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined))) ? true : false; if (this.gridOptions && this.gridOptions.backendServiceApi && this.gridOptions.pagination) { - if (this.gridOptions.presets && this.gridOptions.presets.pagination && this.gridOptions.pagination) { - this.paginationOptions.pageSize = this.gridOptions.presets.pagination.pageSize; - this.paginationOptions.pageNumber = this.gridOptions.presets.pagination.pageNumber; - } + this.setPaginationOptionsWhenPresetDefined(); // when we have a totalCount use it, else we'll take it from the pagination object // only update the total items if it's different to avoid refreshing the UI @@ -353,6 +362,13 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn } } + setPaginationOptionsWhenPresetDefined() { + if (this.gridOptions.presets && this.gridOptions.presets.pagination && this.gridOptions.pagination) { + this.paginationOptions.pageSize = this.gridOptions.presets.pagination.pageSize; + this.paginationOptions.pageNumber = this.gridOptions.presets.pagination.pageNumber; + } + } + /** * Dynamically change or update the column definitions list. * We will re-render the grid so that the new header and data shows up correctly. @@ -775,7 +791,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn gridOptions.enablePagination = ((gridOptions.backendServiceApi && gridOptions.enablePagination === undefined) ? true : gridOptions.enablePagination) || false; // use jquery extend to deep merge & copy to avoid immutable properties being changed in GlobalGridOptions after a route change - const options = $.extend(true, {}, GlobalGridOptions, this.forRootConfig, gridOptions); + const options = $.extend(true, {}, GlobalGridOptions, this.forRootConfig, gridOptions) as GridOption; // using jQuery extend to do a deep clone has an unwanted side on objects and pageSizes but ES6 spread has other worst side effects // so we will just overwrite the pageSizes when needed, this is the only one causing issues so far. @@ -791,6 +807,13 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn if (options.enableFiltering && !options.showHeaderRow) { options.showHeaderRow = options.enableFiltering; } + + // when we use Pagination on Local Grid, it doesn't seem to work without enableFiltering + // so we'll enable the filtering but we'll keep the header row hidden + if (!options.enableFiltering && options.enablePagination && !options.backendServiceApi) { + options.enableFiltering = true; + options.showHeaderRow = false; + } return options; } diff --git a/src/app/modules/angular-slickgrid/components/slick-pagination.component.ts b/src/app/modules/angular-slickgrid/components/slick-pagination.component.ts index 42377810a..7b0549d65 100644 --- a/src/app/modules/angular-slickgrid/components/slick-pagination.component.ts +++ b/src/app/modules/angular-slickgrid/components/slick-pagination.component.ts @@ -83,7 +83,7 @@ export class SlickPaginationComponent implements AfterViewInit, OnDestroy { throw new Error('[Angular-Slickgrid] requires "ngx-translate" to be installed and configured when the grid option "enableTranslate" is enabled.'); } // Angular throws the infamous "ExpressionChangedAfterItHasBeenCheckedError" - // none of the code refactoring worked to go over the error expect adding a delay, so we'll keep that for now + // none of the code refactoring worked to go over the error except adding a delay, so we'll keep that for now setTimeout(() => this.paginationService.init(this.grid, this.dataView, this.options, this.backendServiceApi)); } diff --git a/src/app/modules/angular-slickgrid/services/__tests__/gridState.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/gridState.service.spec.ts index bbd1b86b2..002f58478 100644 --- a/src/app/modules/angular-slickgrid/services/__tests__/gridState.service.spec.ts +++ b/src/app/modules/angular-slickgrid/services/__tests__/gridState.service.spec.ts @@ -232,8 +232,21 @@ describe('GridStateService', () => { expect(output).toBeNull(); }); + it('should call "getCurrentPagination" and return Pagination when using a Local Grid', () => { + const gridOptionsMock = { enablePagination: true } as GridOption; + const paginationMock = { pageNumber: 2, pageSize: 50 } as CurrentPagination; + const gridSpy = jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); + const sharedSpy = jest.spyOn(SharedService.prototype, 'currentPagination', 'get').mockReturnValue(paginationMock); + + const output = service.getCurrentPagination(); + + expect(gridSpy).toHaveBeenCalled(); + expect(sharedSpy).toHaveBeenCalled(); + expect(output).toBe(paginationMock); + }); + it('should call "getCurrentPagination" and return Pagination when a BackendService is used', () => { - const gridOptionsMock = { backendServiceApi: { service: backendServiceStub } } as GridOption; + const gridOptionsMock = { backendServiceApi: { service: backendServiceStub }, enablePagination: true } as GridOption; const paginationMock = { pageNumber: 2, pageSize: 50 } as CurrentPagination; const gridSpy = jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock); const backendSpy = jest.spyOn(backendServiceStub, 'getCurrentPagination').mockReturnValue(paginationMock); diff --git a/src/app/modules/angular-slickgrid/services/__tests__/pagination.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/pagination.service.spec.ts index 8485dd86f..989a3d45f 100644 --- a/src/app/modules/angular-slickgrid/services/__tests__/pagination.service.spec.ts +++ b/src/app/modules/angular-slickgrid/services/__tests__/pagination.service.spec.ts @@ -1,6 +1,7 @@ import { Subject, of, throwError } from 'rxjs'; import { PaginationService } from './../pagination.service'; +import { SharedService } from '../shared.service'; import { FilterService, GridService } from '../index'; import { Column, GridOption, CurrentFilter } from '../../models'; import * as utilities from '../backend-utilities'; @@ -69,9 +70,11 @@ const gridServiceStub = { describe('PaginationService', () => { let service: PaginationService; + let sharedService: SharedService; beforeEach(() => { - service = new PaginationService(filterServiceStub, gridServiceStub); + sharedService = new SharedService(); + service = new PaginationService(filterServiceStub, gridServiceStub, sharedService); }); afterEach(() => { @@ -452,9 +455,10 @@ describe('PaginationService', () => { }; }); - it('should throw an error when no backendServiceApi is provided', (done) => { + it('should throw an error when backendServiceApi is defined without a "process" method', (done) => { try { - mockGridOption.backendServiceApi = null; + // @ts-ignore + mockGridOption.backendServiceApi = {}; service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi); service.refreshPagination(); } catch (e) { diff --git a/src/app/modules/angular-slickgrid/services/__tests__/shared.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/shared.service.spec.ts index 601307be9..28a2f9789 100644 --- a/src/app/modules/angular-slickgrid/services/__tests__/shared.service.spec.ts +++ b/src/app/modules/angular-slickgrid/services/__tests__/shared.service.spec.ts @@ -1,5 +1,5 @@ import { SharedService } from '..'; -import { Column, GridOption } from '../../models'; +import { Column, CurrentPagination, GridOption } from '../../models'; jest.mock('flatpickr', () => { }); @@ -66,6 +66,29 @@ describe('Shared Service', () => { expect(columns).toEqual(mockColumns); }); + it('should call "currentPagination" GETTER and return the currentPagination object', () => { + const expectedResult = { pageNumber: 2, pageSize: 10 } as CurrentPagination; + const spy = jest.spyOn(service, 'currentPagination', 'get').mockReturnValue(expectedResult); + + const output = service.currentPagination; + + expect(spy).toHaveBeenCalled(); + expect(output).toEqual(expectedResult); + }); + + it('should call "currentPagination" SETTER and expect GETTER to return the same', () => { + const expectedResult = { pageNumber: 2, pageSize: 10 } as CurrentPagination; + const getSpy = jest.spyOn(service, 'currentPagination', 'get'); + const setSpy = jest.spyOn(service, 'currentPagination', 'set'); + + service.currentPagination = expectedResult; + const output = service.currentPagination; + + expect(getSpy).toHaveBeenCalled(); + expect(setSpy).toHaveBeenCalled(); + expect(output).toEqual(expectedResult); + }); + it('should call "dataView" GETTER and return a dataView', () => { const spy = jest.spyOn(service, 'dataView', 'get').mockReturnValue(dataviewStub); diff --git a/src/app/modules/angular-slickgrid/services/gridState.service.ts b/src/app/modules/angular-slickgrid/services/gridState.service.ts index ff815680b..a72cfa1a4 100644 --- a/src/app/modules/angular-slickgrid/services/gridState.service.ts +++ b/src/app/modules/angular-slickgrid/services/gridState.service.ts @@ -177,13 +177,15 @@ export class GridStateService { * @return current pagination state */ getCurrentPagination(): CurrentPagination | null { - if (this._gridOptions && this._gridOptions.backendServiceApi) { - const backendService = this._gridOptions.backendServiceApi.service; - if (backendService && backendService.getCurrentPagination) { - return backendService.getCurrentPagination(); + if (this._gridOptions.enablePagination) { + if (this._gridOptions && this._gridOptions.backendServiceApi) { + const backendService = this._gridOptions.backendServiceApi.service; + if (backendService && backendService.getCurrentPagination) { + return backendService.getCurrentPagination(); + } + } else { + return this.sharedService.currentPagination; } - } else { - // TODO implement this whenever local pagination gets implemented } return null; } diff --git a/src/app/modules/angular-slickgrid/services/pagination.service.ts b/src/app/modules/angular-slickgrid/services/pagination.service.ts index cc1c262cb..e11d9b7eb 100644 --- a/src/app/modules/angular-slickgrid/services/pagination.service.ts +++ b/src/app/modules/angular-slickgrid/services/pagination.service.ts @@ -1,9 +1,10 @@ import { Injectable } from '@angular/core'; import { Subscription, isObservable, Subject } from 'rxjs'; -import { BackendServiceApi, GraphqlResult, GraphqlPaginatedResult, Pager, Pagination } from '../models'; +import { BackendServiceApi, CurrentPagination, GraphqlResult, GraphqlPaginatedResult, Pager, Pagination } from '../models'; import { FilterService } from './filter.service'; import { GridService } from './grid.service'; +import { SharedService } from './shared.service'; import { executeBackendProcessesCallback, onBackendError } from './backend-utilities'; import { unsubscribeAllObservables } from './utilities'; @@ -12,24 +13,8 @@ declare var Slick: any; @Injectable() export class PaginationService { - set paginationOptions(paginationOptions: Pagination) { - this._paginationOptions = paginationOptions; - } - get paginationOptions(): Pagination { - return this._paginationOptions; - } - - set totalItems(totalItems: number) { - this._totalItems = totalItems; - if (this._initialized) { - this.refreshPagination(); - } - } - get totalItems(): number { - return this._totalItems; - } - private _initialized = false; + private _isLocalGrid = true; private _backendServiceApi: BackendServiceApi; private _dataFrom = 1; private _dataTo = 1; @@ -41,7 +26,6 @@ export class PaginationService { private _eventHandler = new Slick.EventHandler(); private _paginationOptions: Pagination; private _subscriptions: Subscription[] = []; - onPaginationRefreshed = new Subject(); onPaginationChanged = new Subject(); @@ -49,7 +33,15 @@ export class PaginationService { grid: any; /** Constructor */ - constructor(private filterService: FilterService, private gridService: GridService) { } + constructor(private filterService: FilterService, private gridService: GridService, private sharedService: SharedService) { } + + set paginationOptions(paginationOptions: Pagination) { + this._paginationOptions = paginationOptions; + } + + get paginationOptions(): Pagination { + return this._paginationOptions; + } get pager(): Pager { return { @@ -63,17 +55,39 @@ export class PaginationService { }; } - init(grid: any, dataView: any, paginationOptions: Pagination, backendServiceApi: BackendServiceApi) { + set totalItems(totalItems: number) { + this._totalItems = totalItems; + if (this._initialized) { + this.refreshPagination(); + } + } + + get totalItems(): number { + return this._totalItems; + } + + init(grid: any, dataView: any, paginationOptions: Pagination, backendServiceApi?: BackendServiceApi) { this._availablePageSizes = paginationOptions.pageSizes; this.dataView = dataView; this.grid = grid; this._backendServiceApi = backendServiceApi; this._paginationOptions = paginationOptions; + this._isLocalGrid = !backendServiceApi; - if (!backendServiceApi || !backendServiceApi.service || !backendServiceApi.process) { + if (backendServiceApi && (!backendServiceApi.service || !backendServiceApi.process)) { throw new Error(`BackendServiceApi requires the following 2 properties "process" and "service" to be defined.`); } + if (this._isLocalGrid) { + this.dataView.onPagingInfoChanged.subscribe((e, pagingInfo) => { + if (this._totalItems !== pagingInfo.totalRows) { + this._totalItems = pagingInfo.totalRows; + } + }); + dataView.setRefreshHints({ isFilterUnchanged: true }); + dataView.setPagingOptions({ pageSize: this.paginationOptions.pageSize, pageNum: 0 }); // dataView page starts at 0 instead of 1 + } + // Subscribe to Filter Clear & Changed and go back to page 1 when that happen this._subscriptions.push(this.filterService.onFilterChanged.subscribe(() => this.refreshPagination(true))); this._subscriptions.push(this.filterService.onFilterCleared.subscribe(() => this.refreshPagination(true))); @@ -104,6 +118,13 @@ export class PaginationService { return this._pageNumber; } + getCurrentPagination(): CurrentPagination { + return { + pageNumber: this._pageNumber, + pageSize: this._itemsPerPage + }; + } + getCurrentItemPerPageCount(): number { return this._itemsPerPage; } @@ -167,9 +188,14 @@ export class PaginationService { if (this._paginationOptions) { const pagination = this._paginationOptions; + // set the number of items per page if not already set if (!this._itemsPerPage) { - this._itemsPerPage = +((this._backendServiceApi && this._backendServiceApi.options && this._backendServiceApi.options.paginationOptions && this._backendServiceApi.options.paginationOptions.first) ? this._backendServiceApi.options.paginationOptions.first : this._paginationOptions.pageSize); + if (this._isLocalGrid) { + this._itemsPerPage = this._paginationOptions.pageSize; + } else { + this._itemsPerPage = +((this._backendServiceApi && this._backendServiceApi.options && this._backendServiceApi.options.paginationOptions && this._backendServiceApi.options.paginationOptions.first) ? this._backendServiceApi.options.paginationOptions.first : this._paginationOptions.pageSize); + } } // if totalItems changed, we should always go back to the first page and recalculation the From-To indexes @@ -181,7 +207,7 @@ export class PaginationService { } // when page number is set to 1 then also reset the "offset" of backend service - if (this._pageNumber === 1) { + if (this._pageNumber === 1 && this._backendServiceApi) { this._backendServiceApi.service.resetPaginationOptions(); } } @@ -195,6 +221,7 @@ export class PaginationService { } this._pageCount = Math.ceil(this._totalItems / this._itemsPerPage); this.onPaginationChanged.next(this.pager); + this.sharedService.currentPagination = this.getCurrentPagination(); } processOnPageChanged(pageNumber: number, event?: Event | undefined): Promise { @@ -207,7 +234,10 @@ export class PaginationService { this._dataTo = this._totalItems; } - if (this._backendServiceApi) { + if (this._isLocalGrid) { + this.dataView.setPagingOptions({ pageSize: this._itemsPerPage, pageNum: (pageNumber - 1) }); // dataView page starts at 0 instead of 1 + this.onPaginationChanged.next(this.pager); + } else { const itemsPerPage = +this._itemsPerPage; // keep start time & end timestamps & return it after process execution diff --git a/src/app/modules/angular-slickgrid/services/shared.service.ts b/src/app/modules/angular-slickgrid/services/shared.service.ts index 2013e0431..78f716092 100644 --- a/src/app/modules/angular-slickgrid/services/shared.service.ts +++ b/src/app/modules/angular-slickgrid/services/shared.service.ts @@ -1,6 +1,6 @@ import { Subject } from 'rxjs'; -import { Column, GridOption } from '../models'; +import { Column, CurrentPagination, GridOption } from '../models'; export class SharedService { private _allColumns: Column[]; @@ -8,6 +8,7 @@ export class SharedService { private _groupItemMetadataProvider: any; private _grid: any; private _gridOptions: GridOption; + private _currentPagination: CurrentPagination; private _visibleColumns: Column[]; onColumnsChanged = new Subject(); @@ -28,6 +29,16 @@ export class SharedService { return (this._grid && this._grid.getColumns) ? this._grid.getColumns() : []; } + /** Getter for the Current Pagination (when Pagination is enabled) */ + get currentPagination(): CurrentPagination | undefined { + return this._currentPagination; + } + + /** Setter for the Current Pagination (when Pagination is enabled) */ + set currentPagination(currentPagination: CurrentPagination) { + this._currentPagination = currentPagination; + } + /** Getter for SlickGrid DataView object */ get dataView(): any { return this._dataView; diff --git a/test/cypress/integration/example01.spec.js b/test/cypress/integration/example01.spec.js index c36ec83d5..fed50c593 100644 --- a/test/cypress/integration/example01.spec.js +++ b/test/cypress/integration/example01.spec.js @@ -8,18 +8,18 @@ describe('Example 1 - Basic Grids', () => { cy.get('h2').should('contain', 'Example 1: Basic Grid'); }); - it('should have 2 grids of size 800 by 300px', () => { + it('should have 2 grids of size 800 by 225px', () => { cy.get('#slickGridContainer-grid1') .should('have.css', 'width', '800px'); cy.get('#slickGridContainer-grid1 > .slickgrid-container') - .should('have.css', 'height', '300px'); + .should('have.css', 'height', '225px'); cy.get('#slickGridContainer-grid2') .should('have.css', 'width', '800px'); cy.get('#slickGridContainer-grid2 > .slickgrid-container') - .should('have.css', 'height', '300px'); + .should('have.css', 'height', '225px'); }); it('should have exact column titles on 1st grid', () => {