fix(pagination): out of boundaries page Grid Preset should be unset (#…

…1534)

* fix(pagination): out of boundaries page Grid Preset should be unset
- in the OData example, we have a Grid Preset of page number 2 and that demo also uses local storage, if we keep the Gender filter and also add a Name filter like "G", it results to a total of 9 items and when our page size is set to 20, we are now out of bound and the 9 items weren't showing up because the system thought it was on page 2... So let's make sure to reset to first page when out of boundaries (or page 0 when no items found)
- also add an prop observer on the `gridOptions.pagination.totalItems` since the user could change it but forgets to call `refreshPagination()`

examples/vite-demo-vanilla-bundle/src/examples/example09.ts

@@ -267,8 +267,8 @@ export default class Example09 {
         throw new Error('Server could not sort using the field "Company"');
       }
 
-      // read the json and create a fresh copy of the data that we are free to modify
-      let data = Data as unknown as { name: string; gender: string; company: string; id: string, category: { id: string; name: string } }[];
+      // read the JSON and create a fresh copy of the data that we are free to modify
+      let data = Data as unknown as { name: string; gender: string; company: string; id: string, category: { id: string; name: string; }; }[];
       data = JSON.parse(JSON.stringify(data));
 
       // Sort the data
@@ -299,7 +299,7 @@ export default class Example09 {
       }
 
       // Read the result field from the JSON response.
-      const firstRow = skip;
+      let firstRow = skip;
       let filteredData = data;
       if (columnFilters) {
         for (const columnId in columnFilters) {
@@ -338,6 +338,12 @@ export default class Example09 {
         }
         countTotalItems = filteredData.length;
       }
+
+      // make sure page skip is not out of boundaries, if so reset to first page & remove skip from query
+      if (firstRow > filteredData.length) {
+        query = query.replace(`$skip=${firstRow}`, '');
+        firstRow = 0;
+      }
       const updatedData = filteredData.slice(firstRow, firstRow + top);
 
       setTimeout(() => {

examples/vite-demo-vanilla-bundle/src/examples/example15.ts

@@ -335,7 +335,7 @@ export default class Example15 {
       }
 
       // Read the result field from the JSON response.
-      const firstRow = skip;
+      let firstRow = skip;
       let filteredData = data;
       if (columnFilters) {
         for (const columnId in columnFilters) {
@@ -362,6 +362,12 @@ export default class Example15 {
         }
         countTotalItems = filteredData.length;
       }
+
+      // make sure page skip is not out of boundaries, if so reset to first page & remove skip from query
+      if (firstRow > filteredData.length) {
+        query = query.replace(`$skip=${firstRow}`, '');
+        firstRow = 0;
+      }
       const updatedData = filteredData.slice(firstRow, firstRow + top);
 
       setTimeout(() => {

packages/common/src/services/__tests__/pagination.service.spec.ts

@@ -1,3 +1,4 @@
+import 'jest-extended';
 import { of, throwError } from 'rxjs';
 
 import { PaginationService } from './../pagination.service';
@@ -376,7 +377,7 @@ describe('PaginationService', () => {
       service.goToPreviousPage(null, false);
 
       expect(service.getCurrentPageNumber()).toBe(1);
-      expect(spy).not.toHaveBeenCalled()
+      expect(spy).not.toHaveBeenCalled();
     });
 
     it('should not expect "processOnPageChanged" method to be called when we are already on first page', () => {

packages/common/src/services/pagination.service.ts

@@ -11,6 +11,7 @@ import type {
 } from '../interfaces/index';
 import type { BackendUtilityService } from './backendUtility.service';
 import type { SharedService } from './shared.service';
+import { propertyObserver } from './observers';
 import type { Observable, RxJsFacade } from './rxjsFacade';
 import { type SlickDataView, SlickEventHandler, type SlickGrid } from '../core/index';
 
@@ -156,6 +157,9 @@ export class PaginationService {
     this._previousPagination = { pageNumber: pagination.pageNumber, pageSize: pagination.pageSize, pageSizes: pagination.pageSizes, totalItems: this.totalItems };
 
     this._initialized = true;
+
+    // observe for pagination total items change and update our local totalItems ref
+    propertyObserver(paginationOptions, 'totalItems', (newTotal) => this._totalItems = newTotal);
   }
 
   dispose() {
@@ -168,7 +172,7 @@ export class PaginationService {
     this.pubSubService.unsubscribeAll(this._subscriptions);
   }
 
-  getCurrentPagination(): CurrentPagination & { pageSizes: number[] } {
+  getCurrentPagination(): CurrentPagination & { pageSizes: number[]; } {
     return {
       pageNumber: this._pageNumber,
       pageSize: this._itemsPerPage,
@@ -382,7 +386,7 @@ export class PaginationService {
       this.recalculateFromToIndexes();
 
       if (this._isLocalGrid && this.dataView) {
-        this.dataView.setPagingOptions({ pageSize: this._itemsPerPage, pageNum: (pageNumber - 1) }); // dataView page starts at 0 instead of 1
+        this.dataView.setPagingOptions({ pageSize: this._itemsPerPage, pageNum: pageNumber - 1 }); // dataView page starts at 0 instead of 1
         this.pubSubService.publish(`onPaginationChanged`, this.getFullPagination());
         this.pubSubService.publish(`onPaginationRefreshed`, this.getFullPagination());
         resolve(this.getFullPagination());
@@ -446,6 +450,11 @@ export class PaginationService {
   }
 
   recalculateFromToIndexes() {
+    // when page is out of boundaries, reset it to page 1
+    if (((this._pageNumber - 1) * this._itemsPerPage > this._totalItems) || (this._totalItems > 0 && this._pageNumber === 0)) {
+      this._pageNumber = 1;
+    }
+
     if (this._totalItems === 0) {
       this._dataFrom = 0;
       this._dataTo = 1;
@@ -457,9 +466,8 @@ export class PaginationService {
         this._dataTo = this._totalItems;
       }
     }
-    this._pageNumber = (this._totalItems > 0 && this._pageNumber === 0) ? 1 : this._pageNumber;
 
-    // do a final check on the From/To and make sure they are not over or below min/max acceptable values
+    // do a final check on the From/To and make sure they are not greater or smaller than min/max acceptable values
     if (this._dataTo > this._totalItems) {
       this._dataTo = this._totalItems;
     } else if (this._totalItems < this._itemsPerPage) {