feat: Add local pagination feature (#56)

This commit adds the implementation for local pagination in the `withPagination` function. It allows for displaying a subset of items from a larger collection, based on the current page and page size.

The `withPagination` function accepts an optional `collection` parameter to support multiple paginated collections. It calculates the selected page entities, total count, total pages, and page navigation array based on the provided options.

Additionally, utility functions like `gotoPage`, `setPageSize`, `nextPage`, `previousPage`, `firstPage`, and `setMaxPageNavigationArrayItems` are provided to easily update the pagination state.

Export with-pagination

Downgrade signals package

Update signal package

Author: wolfmanfx

libs/ngrx-toolkit/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/angular-architects/ngrx-toolkit"
   },
   "peerDependencies": {
-    "@ngrx/signals": "^17.0.0"
+    "@ngrx/signals": "^17.2.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

libs/ngrx-toolkit/src/index.ts

@@ -12,3 +12,4 @@ export * from './lib/with-data-service';
 export { withStorageSync, SyncConfig } from './lib/with-storage-sync';
 export * from './lib/redux-connector';
 export * from './lib/redux-connector/rxjs-interop';
+export * from './lib/with-pagination';

libs/ngrx-toolkit/src/lib/with-pagination.spec.ts

@@ -0,0 +1,90 @@
+import { patchState, signalStore, type } from '@ngrx/signals';
+import { createPageArray, gotoPage, setPageSize, withPagination } from './with-pagination';
+import { setAllEntities, withEntities } from '@ngrx/signals/entities';
+
+type Book = { id: number; title: string; author: string };
+const generateBooks = (count = 10) => {
+  const books = [] as Book[];
+  for (let i = 1; i <= count; i++) {
+    books.push({ id: i, title: `Book ${i}`, author: `Author ${i}` });
+  }
+  return books;
+};
+
+describe('withPagination', () => {
+  it('should use and update a pagination', () => {
+    const Store = signalStore(
+      withEntities({ entity: type<Book>() }),
+      withPagination()
+    );
+
+    const store = new Store();
+
+    patchState(store, setAllEntities(generateBooks(55)));
+    expect(store.currentPage()).toBe(1);
+    expect(store.pageCount()).toBe(6);
+  }),
+    it('should use and update a pagination with collection', () => {
+      const Store = signalStore(
+        withEntities({ entity: type<Book>(), collection: 'books' }),
+        withPagination({ collection: 'books' })
+      );
+
+      const store = new Store();
+
+      patchState(
+        store,
+        setAllEntities(generateBooks(55), { collection: 'books' })
+      );
+
+      patchState(store, gotoPage(6, { collection: 'books' }));
+      expect(store.booksCurrentPage()).toBe(6);
+      expect(store.selectedPageBooksEntities().length).toBe(5);
+      expect(store.booksPageCount()).toBe(6);
+    }),
+    it('should react on enitiy changes', () => {
+      const Store = signalStore(
+        withEntities({ entity: type<Book>()}),
+        withPagination()
+      );
+
+      const store = new Store();
+
+      patchState(
+        store,
+        setAllEntities(generateBooks(100))
+      );
+
+      expect(store.pageCount()).toBe(10);
+
+      patchState(
+        store,
+        setAllEntities(generateBooks(20))
+      );
+
+      expect(store.pageCount()).toBe(2);
+
+
+      patchState(
+        store,
+        setPageSize(5)
+      );
+
+      expect(store.pageCount()).toBe(4);
+
+    }),
+    describe('internal pageNavigationArray', () => {
+      it('should return an array of page numbers', () => {
+        const pages = createPageArray(8, 10, 500, 7);
+        expect(pages).toEqual([
+          { label: 5, value: 5 },
+          { label: '...', value: 6 },
+          { label: 7, value: 7 },
+          { label: 8, value: 8 },
+          { label: 9, value: 9 },
+          { label: '...', value: 10 },
+          { label: 50, value: 50 },
+        ]);
+      });
+    });
+});