fix pagination should changed on Filter & Sort changed

Author: Ghislain Beaulac

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

@@ -1,4 +1,6 @@
 import { castToPromise } from './../services/utilities';
+import { FilterService } from '../services/filter.service';
+import { SortService } from './../services/sort.service';
 import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
 import { Column, GridOption } from './../models';
 
@@ -29,7 +31,7 @@ export class SlickPaginationComponent implements AfterViewInit, OnInit {
   paginationCallback: Function;
   paginationPageSizes = [25, 75, 100];
 
-  constructor() { }
+  constructor(private filterService: FilterService, private sortService: SortService) { }
 
   ngOnInit() {
   }
@@ -39,49 +41,56 @@ export class SlickPaginationComponent implements AfterViewInit, OnInit {
     if (!this._gridPaginationOptions || !this._gridPaginationOptions.pagination || (this._gridPaginationOptions.pagination.totalItems !== this.totalItems)) {
       this.refreshPagination();
     }
+
+    // Subscribe to Event Emitter of Filter & Sort changed, go back to page 1 when that happen
+    this.filterService.onFilterChanged.subscribe((data) => {
+      this.refreshPagination(true);
+    });
+    this.sortService.onSortChanged.subscribe((data) => {
+      this.refreshPagination(true);
+    });
   }
 
   ceil(number: number) {
     return Math.ceil(number);
   }
-  onChangeItemPerPage(event: any) {
-    const itemsPerPage = event.target.value as number;
-    this.pageCount = Math.ceil(this.totalItems / itemsPerPage);
-    this.pageNumber = 1;
-    this.itemsPerPage = itemsPerPage;
-    this.onPageChanged(event, this.pageNumber);
-  }
 
   changeToFirstPage(event: any) {
     this.pageNumber = 1;
     this.onPageChanged(event, this.pageNumber);
   }
+
   changeToLastPage(event: any) {
     this.pageNumber = this.pageCount;
     this.onPageChanged(event, this.pageNumber);
   }
+
   changeToNextPage(event: any) {
     if (this.pageNumber < this.pageCount) {
       this.pageNumber++;
       this.onPageChanged(event, this.pageNumber);
     }
   }
+
   changeToPreviousPage(event: any) {
     if (this.pageNumber > 0) {
       this.pageNumber--;
       this.onPageChanged(event, this.pageNumber);
     }
   }
 
-  gotoFirstPage() {
+  onChangeItemPerPage(event: any) {
+    const itemsPerPage = event.target.value as number;
+    this.pageCount = Math.ceil(this.totalItems / itemsPerPage);
     this.pageNumber = 1;
-    this.onPageChanged(undefined, this.pageNumber);
+    this.itemsPerPage = itemsPerPage;
+    this.onPageChanged(event, this.pageNumber);
   }
 
-  refreshPagination() {
+  refreshPagination(isPageNumberReset?: boolean) {
     if (this._gridPaginationOptions && this._gridPaginationOptions.pagination) {
       // if totalItems changed, we should always go back to the first page and recalculation the From-To indexes
-      if (this.totalItems !== this._gridPaginationOptions.pagination.totalItems) {
+      if (isPageNumberReset || this.totalItems !== this._gridPaginationOptions.pagination.totalItems) {
         this.pageNumber = 1;
         this.recalculateFromToIndexes();
       }

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '@angular/core';
 import { castToPromise } from './utilities';
 import { FilterConditions } from './../filter-conditions';
 import { FilterTemplates } from './../filter-templates';
@@ -24,6 +25,7 @@ export class FilterService {
   _gridOptions: GridOption;
   _onFilterChangedOptions: any;
   subscriber: SlickEvent;
+  onFilterChanged = new EventEmitter<string>();
 
   init(grid: any, gridOptions: GridOption, columnDefinitions: Column[]): void {
     this._columnDefinitions = columnDefinitions;
@@ -38,6 +40,7 @@ export class FilterService {
    */
   attachBackendOnFilter(grid: any, options: GridOption) {
     this.subscriber = new Slick.Event();
+    this.emitFilterChangedBy('remote');
     this.subscriber.subscribe(this.attachBackendOnFilterSubscribe);
 
     grid.onHeaderRowCellRendered.subscribe((e: Event, args: any) => {
@@ -117,6 +120,7 @@ export class FilterService {
   attachLocalOnFilter(grid: any, options: GridOption, dataView: any) {
     this._dataView = dataView;
     this.subscriber = new Slick.Event();
+    this.emitFilterChangedBy('remote');
 
     dataView.setFilterArgs({ columnFilters: this._columnFilters, grid: this._grid });
     dataView.setFilter(this.customFilter);
@@ -266,6 +270,15 @@ export class FilterService {
     }
   }
 
+  /**
+   * A simple function that is attached to the subscriber and emit a change when the sort is called.
+   * Other services, like Pagination, can then subscribe to it.
+   * @param {string} sender
+   */
+  emitFilterChangedBy(sender: string) {
+    this.subscriber.subscribe(() => this.onFilterChanged.emit(`onFilterChanged by ${sender}`));
+  }
+
   private keepColumnFilters(searchTerm: string, listTerm: any, columnDef: any) {
     if (searchTerm) {
       this._columnFilters[columnDef.id] = {

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

@@ -1,9 +1,11 @@
+import { EventEmitter } from '@angular/core';
 import { castToPromise } from './utilities';
 import { BackendServiceOption, FieldType, GridOption, Sorter } from './../models';
 import { Sorters } from './../sorters';
 
 export class SortService {
   subscriber: any;
+  onSortChanged = new EventEmitter<string>();
 
   /**
    * Attach a backend sort (single/multi) hook to the grid
@@ -12,6 +14,7 @@ export class SortService {
    */
   attachBackendOnSort(grid: any, gridOptions: GridOption) {
     this.subscriber = grid.onSort;
+    this.emitSortChangedBy('remote');
     this.subscriber.subscribe(this.attachBackendOnSortSubscribe);
   }
 
@@ -48,6 +51,7 @@ export class SortService {
    */
   attachLocalOnSort(grid: any, gridOptions: GridOption, dataView: any) {
     this.subscriber = grid.onSort;
+    this.emitSortChangedBy('local');
     this.subscriber.subscribe((e: any, args: any) => {
       // multiSort and singleSort are not exactly the same, but we want to structure it the same for the (for loop) after
       // also to avoid having to rewrite the for loop in the sort, we will make the singleSort an array of 1 object
@@ -97,4 +101,13 @@ export class SortService {
   destroy() {
     this.subscriber.unsubscribe();
   }
+
+  /**
+   * A simple function that is attached to the subscriber and emit a change when the sort is called.
+   * Other services, like Pagination, can then subscribe to it.
+   * @param {string} sender
+   */
+  emitSortChangedBy(sender: string) {
+    this.subscriber.subscribe(() => this.onSortChanged.emit(`onSortChanged by ${sender}`));
+  }
 }