From 73619d1d009d6dc3a9ebed378d60241c338e93c9 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 2 Nov 2023 16:31:57 +0100
Subject: [PATCH] request new collection items when page changes

---
 .../packages/core/collection/collection.context.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.context.ts
index 8b81916fa4..2feb7ad7f5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/collection/collection.context.ts
@@ -12,6 +12,7 @@ import { ManifestCollectionView, umbExtensionsRegistry } from '@umbraco-cms/back
 import type { UmbCollectionFilterModel } from '@umbraco-cms/backoffice/collection';
 import { map } from '@umbraco-cms/backoffice/external/rxjs';
 import { UmbSelectionManager, UmbPaginationManager } from '@umbraco-cms/backoffice/utils';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 export class UmbCollectionContext<ItemType, FilterModelType extends UmbCollectionFilterModel> extends UmbBaseController {
 	protected entityType: string;
@@ -44,8 +45,8 @@ export class UmbCollectionContext<ItemType, FilterModelType extends UmbCollectio
 		super(host);
 		this.entityType = entityType;
 
-		// TODO: get configuration from somewhere
-		this.#configure({ pageSize: 1 });
+		// listen for page changes on the pagination manager
+		this.pagination.addEventListener(UmbChangeEvent.TYPE, this.#onPageChange);
 
 		const currentUrl = new URL(window.location.href);
 		this.collectionRootPathname = currentUrl.pathname.substring(0, currentUrl.pathname.lastIndexOf('/'));
@@ -55,6 +56,9 @@ export class UmbCollectionContext<ItemType, FilterModelType extends UmbCollectio
 			this.#observeViews().asPromise(),
 		]);
 
+		// TODO: get configuration from somewhere
+		this.#configure({ pageSize: 2 });
+
 		this.provideContext(UMB_COLLECTION_CONTEXT, this);
 	}
 
@@ -200,6 +204,12 @@ export class UmbCollectionContext<ItemType, FilterModelType extends UmbCollectio
 		}, 'umbCollectionViewsObserver');
 	}
 
+	#onPageChange = (event: UmbChangeEvent) => {
+		const target = event.target as UmbPaginationManager;
+		const skipFilter = { skip: target.getSkip() };
+		this.setFilter(skipFilter);
+	}
+
 	#setCurrentView() {
 		const currentUrl = new URL(window.location.href);
 		const lastPathSegment = currentUrl.pathname.split('/').pop();