(pagination): rewrite simpler pagination service and component

src/app/examples/grid-graphql.component.ts

@@ -243,7 +243,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
       setTimeout(() => {
         this.graphqlQuery = this.angularGrid.backendService.buildQuery();
         resolve(mockedResult);
-      }, 250);
+      }, 100);
     });
   }
 

src/app/examples/grid-odata.component.ts

@@ -291,16 +291,17 @@ export class GridOdataComponent implements OnInit {
             countPropName = (this.odataVersion === 4) ? '@odata.count' : 'odata.count';
           }
           const backendResult = { items: updatedData, [countPropName]: countTotalItems, query };
-          console.log('Backend Result', backendResult);
+          // console.log('Backend Result', backendResult);
           resolve(backendResult);
-        }, 250);
+        }, 100);
       });
     });
   }
 
   /** Dispatched event of a Grid State Changed event */
   gridStateChanged(gridStateChanges: GridStateChange) {
-    console.log('Client sample, Grid State changed:: ', gridStateChanges);
+    // console.log('Client sample, Grid State changed:: ', gridStateChanges);
+    console.log('Client sample, Grid State changed:: ', gridStateChanges.change);
   }
 
   // THE FOLLOWING METHODS ARE ONLY FOR DEMO PURPOSES DO NOT USE THIS CODE

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts

@@ -20,7 +20,7 @@ import {
   SharedService,
   SortService,
 } from '../../services';
-import { Column, CurrentFilter, CurrentSorter, GraphqlPaginatedResult, GraphqlServiceApi, GraphqlServiceOption, GridOption, GridState, GridStateChange, GridStateType, Pagination } from '../../models';
+import { Column, CurrentFilter, CurrentSorter, GraphqlPaginatedResult, GraphqlServiceApi, GraphqlServiceOption, GridOption, GridState, GridStateChange, GridStateType, Pagination, ServicePagination } from '../../models';
 import { Filters } from '../../filters';
 import { Editors } from '../../editors';
 import * as utilities from '../../services/backend-utilities';
@@ -116,10 +116,17 @@ const gridStateServiceStub = {
 } as unknown as GridStateService;
 
 const paginationServiceStub = {
+  totalItems: 0,
   init: jest.fn(),
   dispose: jest.fn(),
+  onPaginationChanged: new Subject<ServicePagination>(),
 } as unknown as PaginationService;
 
+Object.defineProperty(paginationServiceStub, 'totalItems', {
+  get: jest.fn(() => 0),
+  set: jest.fn()
+});
+
 const resizerServiceStub = {
   init: jest.fn(),
   dispose: jest.fn(),
@@ -676,6 +683,22 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         expect(component.gridOptions.backendServiceApi.internalPostProcess).toEqual(expect.any(Function));
       });
 
+      it('should execute the "internalPostProcess" callback and expect totalItems to be updated in the PaginationService when "refreshGridData" is called on the 2nd time', () => {
+        jest.spyOn(component.gridOptions.backendServiceApi.service, 'getDatasetName').mockReturnValue('users');
+        const refreshSpy = jest.spyOn(component, 'refreshGridData');
+        const paginationSpy = jest.spyOn(paginationServiceStub, 'totalItems', 'set');
+        const mockDataset = [{ firstName: 'John' }, { firstName: 'Jane' }];
+
+        component.ngAfterViewInit();
+        component.gridOptions.backendServiceApi.internalPostProcess({ data: { users: { nodes: mockDataset, totalCount: mockDataset.length } } } as GraphqlPaginatedResult);
+        component.refreshGridData(mockDataset, 1);
+        component.refreshGridData(mockDataset, 1);
+
+        expect(refreshSpy).toHaveBeenCalledTimes(3);
+        expect(paginationSpy).toHaveBeenCalledWith(2);
+        expect(component.gridOptions.backendServiceApi.internalPostProcess).toEqual(expect.any(Function));
+      });
+
       it('should execute the "internalPostProcess" callback method that was created by "createBackendApiInternalPostProcessCallback" without Pagination (when disabled)', () => {
         component.gridOptions.enablePagination = false;
         jest.spyOn(component.gridOptions.backendServiceApi.service, 'getDatasetName').mockReturnValue('users');
@@ -1100,6 +1123,26 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         });
       });
 
+      it('should call trigger a gridStage change event when "onPaginationChanged" from the Pagination Service is triggered', () => {
+        const mockPagination = { pageNumber: 2, pageSize: 20, pageSizes: [5, 10, 15, 20] } as Pagination;
+        const mockServicePagination = {
+          ...mockPagination,
+          dataFrom: 5,
+          dataTo: 10,
+          pageCount: 1,
+        } as ServicePagination;
+        const spy = jest.spyOn(gridStateServiceStub.onGridStateChanged, 'next');
+        jest.spyOn(gridStateServiceStub, 'getCurrentGridState').mockReturnValue({ columns: [], pagination: mockPagination } as GridState);
+
+        component.ngAfterViewInit();
+        paginationServiceStub.onPaginationChanged.next(mockServicePagination);
+
+        expect(spy).toHaveBeenCalledWith({
+          change: { newValues: mockPagination, type: GridStateType.pagination },
+          gridState: { columns: [], pagination: mockPagination }
+        });
+      });
+
       it('should call trigger a gridStage change and reset selected rows when pagination change is triggered and "enableRowSelection" is set', () => {
         const mockPagination = { pageNumber: 2, pageSize: 20 } as Pagination;
         const stateChangedSpy = jest.spyOn(gridStateServiceStub.onGridStateChanged, 'next');

src/app/modules/angular-slickgrid/components/__tests__/slick-pagination-without-translate.component.spec.ts

@@ -3,56 +3,19 @@ import { By } from '@angular/platform-browser';
 import { Subject } from 'rxjs';
 
 import { SlickPaginationComponent } from '../slick-pagination.component';
-import { Column, GridOption, Locale, Pager } from '../../models';
+import { Locale, ServicePagination } from '../../models';
 import { PaginationService } from '../../services';
 
-const dataviewStub = {
-  onPagingInfoChanged: jest.fn(),
-  onRowCountChanged: jest.fn(),
-  onRowsChanged: jest.fn(),
-};
-
-const mockBackendService = {
-  resetPaginationOptions: jest.fn(),
-  buildQuery: jest.fn(),
-  updateOptions: jest.fn(),
-  processOnFilterChanged: jest.fn(),
-  processOnSortChanged: jest.fn(),
-  processOnPaginationChanged: jest.fn(),
-};
-
-const mockGridOption = {
-  enableAutoResize: true,
-  enablePagination: true,
-  backendServiceApi: {
-    service: mockBackendService,
-    process: jest.fn(),
-    options: {
-      columnDefinitions: [{ id: 'name', field: 'name' }] as Column[],
-      datasetName: 'user',
-    }
-  },
-  pagination: {
-    pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
-    pageSize: 25,
-    totalItems: 85
-  }
-} as GridOption;
-
-const gridStub = {
-  autosizeColumns: jest.fn(),
-  getColumnIndex: jest.fn(),
-  getOptions: () => mockGridOption,
-  getColumns: jest.fn(),
-  setColumns: jest.fn(),
-  onColumnsReordered: jest.fn(),
-  onColumnsResized: jest.fn(),
-  registerPlugin: jest.fn(),
-};
-
 const paginationServiceStub = {
-  onPaginationRefreshed: new Subject<boolean>(),
-  onPaginationChanged: new Subject<Pager>(),
+  dataFrom: 5,
+  dataTo: 10,
+  pageNumber: 2,
+  pageCount: 1,
+  itemsPerPage: 5,
+  pageSize: 10,
+  totalItems: 100,
+  availablePageSizes: [5, 10, 15, 20],
+  pageInfoTotalItems: jest.fn(),
   goToFirstPage: jest.fn(),
   goToLastPage: jest.fn(),
   goToNextPage: jest.fn(),
@@ -61,12 +24,14 @@ const paginationServiceStub = {
   changeItemPerPage: jest.fn(),
   dispose: jest.fn(),
   init: jest.fn(),
+  onPaginationRefreshed: new Subject<boolean>(),
+  onPaginationChanged: new Subject<ServicePagination>(),
 } as unknown as PaginationService;
 
 describe('without ngx-translate', () => {
   let fixture: ComponentFixture<SlickPaginationComponent>;
   let component: SlickPaginationComponent;
-  let mockPager: Pager;
+  let mockServicePagination: ServicePagination;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -82,34 +47,24 @@ describe('without ngx-translate', () => {
     fixture = TestBed.createComponent(SlickPaginationComponent);
     component = fixture.debugElement.componentInstance;
 
-    mockPager = {
-      from: 5,
-      to: 10,
-      itemsPerPage: 5,
+    mockServicePagination = {
+      dataFrom: 5,
+      dataTo: 10,
+      pageSize: 5,
       pageCount: 1,
       pageNumber: 2,
-      availablePageSizes: [5, 10, 15, 20],
+      pageSizes: [5, 10, 15, 20],
       totalItems: 100,
     };
     component.enableTranslate = false;
-    component.grid = gridStub;
-    component.options = {
-      pageNumber: mockPager.pageNumber,
-      pageSizes: mockPager.availablePageSizes,
-      pageSize: mockPager.itemsPerPage,
-      totalItems: mockPager.totalItems,
-    };
-    component.backendServiceApi = mockGridOption.backendServiceApi;
-    component.totalItems = mockPager.totalItems;
     component.locales = {
       TEXT_ITEMS_PER_PAGE: 'items per page',
       TEXT_ITEMS: 'items',
       TEXT_OF: 'of',
       TEXT_PAGE: 'page'
     } as Locale;
 
-    paginationServiceStub.init(gridStub, dataviewStub, component.options, component.backendServiceApi);
-    paginationServiceStub.onPaginationChanged.next(mockPager);
+    paginationServiceStub.onPaginationChanged.next(mockServicePagination);
     fixture.detectChanges();
   }));
 
@@ -137,7 +92,6 @@ describe('without ngx-translate', () => {
   it('should have defined locale and expect new text in the UI', (done) => {
     component.enableTranslate = false;
     fixture.detectChanges();
-    paginationServiceStub.onPaginationRefreshed.next(true);
 
     setTimeout(() => {
       fixture.detectChanges();

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

@@ -4,56 +4,19 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 
 import { SlickPaginationComponent } from '../slick-pagination.component';
-import { Column, GridOption, Pager } from '../../models';
+import { ServicePagination } from '../../models';
 import { PaginationService } from '../../services';
 
-const dataviewStub = {
-  onPagingInfoChanged: jest.fn(),
-  onRowCountChanged: jest.fn(),
-  onRowsChanged: jest.fn(),
-};
-
-const mockBackendService = {
-  resetPaginationOptions: jest.fn(),
-  buildQuery: jest.fn(),
-  updateOptions: jest.fn(),
-  processOnFilterChanged: jest.fn(),
-  processOnSortChanged: jest.fn(),
-  processOnPaginationChanged: jest.fn(),
-};
-
-const mockGridOption = {
-  enableAutoResize: true,
-  enablePagination: true,
-  backendServiceApi: {
-    service: mockBackendService,
-    process: jest.fn(),
-    options: {
-      columnDefinitions: [{ id: 'name', field: 'name' }] as Column[],
-      datasetName: 'user',
-    }
-  },
-  pagination: {
-    pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
-    pageSize: 25,
-    totalItems: 85
-  }
-} as GridOption;
-
-const gridStub = {
-  autosizeColumns: jest.fn(),
-  getColumnIndex: jest.fn(),
-  getOptions: () => mockGridOption,
-  getColumns: jest.fn(),
-  setColumns: jest.fn(),
-  onColumnsReordered: jest.fn(),
-  onColumnsResized: jest.fn(),
-  registerPlugin: jest.fn(),
-};
-
 const paginationServiceStub = {
-  onPaginationRefreshed: new Subject<boolean>(),
-  onPaginationChanged: new Subject<Pager>(),
+  dataFrom: 5,
+  dataTo: 10,
+  pageNumber: 2,
+  pageCount: 1,
+  itemsPerPage: 5,
+  pageSize: 10,
+  totalItems: 100,
+  availablePageSizes: [5, 10, 15, 20],
+  pageInfoTotalItems: jest.fn(),
   goToFirstPage: jest.fn(),
   goToLastPage: jest.fn(),
   goToNextPage: jest.fn(),
@@ -62,13 +25,15 @@ const paginationServiceStub = {
   changeItemPerPage: jest.fn(),
   dispose: jest.fn(),
   init: jest.fn(),
+  onPaginationRefreshed: new Subject<boolean>(),
+  onPaginationChanged: new Subject<ServicePagination>(),
 } as unknown as PaginationService;
 
 describe('App Component', () => {
   let fixture: ComponentFixture<SlickPaginationComponent>;
   let component: SlickPaginationComponent;
   let translate: TranslateService;
-  let mockPager: Pager;
+  let mockServicePagination: ServicePagination;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -113,28 +78,17 @@ describe('App Component', () => {
 
   describe('Integration Tests', () => {
     beforeEach(() => {
-      mockPager = {
-        from: 5,
-        to: 10,
-        itemsPerPage: 5,
+      mockServicePagination = {
+        dataFrom: 5,
+        dataTo: 10,
+        pageSize: 5,
         pageCount: 1,
         pageNumber: 2,
-        availablePageSizes: [5, 10, 15, 20],
+        pageSizes: [5, 10, 15, 20],
         totalItems: 100,
       };
       component.enableTranslate = true;
-      component.grid = gridStub;
-      component.options = {
-        pageNumber: mockPager.pageNumber,
-        pageSizes: mockPager.availablePageSizes,
-        pageSize: mockPager.itemsPerPage,
-        totalItems: mockPager.totalItems,
-      };
-      component.backendServiceApi = mockGridOption.backendServiceApi;
-      component.totalItems = mockPager.totalItems;
-
-      paginationServiceStub.init(gridStub, dataviewStub, component.options, component.backendServiceApi);
-      paginationServiceStub.onPaginationChanged.next(mockPager);
+      paginationServiceStub.onPaginationChanged.next(mockServicePagination);
       fixture.detectChanges();
     });
 
@@ -145,6 +99,16 @@ describe('App Component', () => {
       fixture.destroy();
     });
 
+    describe('getters & setters', () => {
+      // the following 2 setters unit test are simply here for code coverage,
+      // these 2 setters don't actually do anything
+      it('should use the "itemsPerPage" setter but do nothing with it', () => {
+        fixture.detectChanges();
+        component.pageNumber = 3;
+        expect(component.pageNumber).toBe(2);
+      });
+    });
+
     it('should create a the Slick-Pagination component in the DOM', () => {
       fixture.detectChanges();
 

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

@@ -4,9 +4,7 @@
 
   <!-- Pagination section under the grid -->
   <slick-pagination id="slickPagingContainer-{{gridId}}" *ngIf="showPagination"
-    (onPaginationChanged)="paginationChanged($event)" [enableTranslate]="gridOptions.enableTranslate"
-    [dataView]="dataView" [grid]="grid" [options]="paginationOptions" [locales]="locales" [totalItems]="totalItems"
-    [backendServiceApi]="backendServiceApi">
+    [enableTranslate]="gridOptions.enableTranslate" [locales]="locales">
   </slick-pagination>
 
   <!-- Custom Footer section under the grid -->