add paging to root items

src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.context.ts

@@ -11,10 +11,11 @@ import {
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
-import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
+import { UmbPaginationManager, UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
 import type { UmbEntityActionEvent } from '@umbraco-cms/backoffice/entity-action';
 import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 export class UmbDefaultTreeContext<TreeItemType extends UmbTreeItemModelBase>
 	extends UmbContextBase<UmbDefaultTreeContext<TreeItemType>>
@@ -26,11 +27,17 @@ export class UmbDefaultTreeContext<TreeItemType extends UmbTreeItemModelBase>
 	public selectableFilter?: (item: TreeItemType) => boolean = () => true;
 	public filter?: (item: TreeItemType) => boolean = () => true;
 	public readonly selection = new UmbSelectionManager(this._host);
+	public readonly pagination = new UmbPaginationManager();
 
 	#manifest?: ManifestTree;
 	#repository?: UmbTreeRepository<TreeItemType>;
 	#actionEventContext?: UmbActionEventContext;
 
+	#paging = {
+		skip: 0,
+		take: 3,
+	};
+
 	#initResolver?: () => void;
 	#initialized = false;
 
@@ -40,19 +47,11 @@ export class UmbDefaultTreeContext<TreeItemType extends UmbTreeItemModelBase>
 
 	constructor(host: UmbControllerHostElement) {
 		super(host, UMB_DEFAULT_TREE_CONTEXT);
+		this.pagination.setPageSize(this.#paging.take);
+		this.#consumeContexts();
 
-		this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (instance) => {
-			this.#actionEventContext = instance;
-			this.#actionEventContext.removeEventListener(
-				UmbReloadTreeItemChildrenRequestEntityActionEvent.TYPE,
-				this.#onReloadRequest as EventListener,
-			);
-			this.#actionEventContext.addEventListener(
-				UmbReloadTreeItemChildrenRequestEntityActionEvent.TYPE,
-				this.#onReloadRequest as EventListener,
-			);
-		});
-
+		// listen for page changes on the pagination manager
+		this.pagination.addEventListener(UmbChangeEvent.TYPE, this.#onPageChange);
 		this.requestTreeRoot();
 	}
 
@@ -101,7 +100,17 @@ export class UmbDefaultTreeContext<TreeItemType extends UmbTreeItemModelBase>
 
 	public async requestRootItems() {
 		await this.#init;
-		return this.#repository!.requestRootTreeItems({ skip: 0, take: 100 });
+
+		const { data, error, asObservable } = await this.#repository!.requestRootTreeItems({
+			skip: this.#paging.skip,
+			take: this.#paging.take,
+		});
+
+		if (data) {
+			this.pagination.setTotalItems(data.total);
+		}
+
+		return { data, error, asObservable };
 	}
 
 	public async rootItems() {
@@ -109,6 +118,26 @@ export class UmbDefaultTreeContext<TreeItemType extends UmbTreeItemModelBase>
 		return this.#repository!.rootTreeItems();
 	}
 
+	#consumeContexts() {
+		this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (instance) => {
+			this.#actionEventContext = instance;
+			this.#actionEventContext.removeEventListener(
+				UmbReloadTreeItemChildrenRequestEntityActionEvent.TYPE,
+				this.#onReloadRequest as EventListener,
+			);
+			this.#actionEventContext.addEventListener(
+				UmbReloadTreeItemChildrenRequestEntityActionEvent.TYPE,
+				this.#onReloadRequest as EventListener,
+			);
+		});
+	}
+
+	#onPageChange = (event: UmbChangeEvent) => {
+		const target = event.target as UmbPaginationManager;
+		this.#paging.skip = target.getSkip();
+		this.requestRootItems();
+	};
+
 	#observeRepository(repositoryAlias?: string) {
 		if (!repositoryAlias) throw new Error('Tree must have a repository alias.');
 

src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.element.ts

@@ -37,6 +37,12 @@ export class UmbDefaultTreeElement extends UmbLitElement {
 	@state()
 	private _treeRoot?: UmbTreeItemModelBase;
 
+	@state()
+	private _currentPage = 1;
+
+	@state()
+	private _totalPages = 1;
+
 	#treeContext?: UmbDefaultTreeContext<UmbTreeItemModelBase>;
 	#init: Promise<unknown>;
 
@@ -46,6 +52,10 @@ export class UmbDefaultTreeElement extends UmbLitElement {
 		this.#init = Promise.all([
 			this.consumeContext(UMB_DEFAULT_TREE_CONTEXT, (instance) => {
 				this.#treeContext = instance;
+
+				this.observe(this.#treeContext.pagination.currentPage, (value) => (this._currentPage = value));
+				this.observe(this.#treeContext.pagination.totalPages, (value) => (this._totalPages = value));
+
 				this.#observeTreeRoot();
 			}).asPromise(),
 		]);
@@ -136,8 +146,23 @@ export class UmbDefaultTreeElement extends UmbLitElement {
 				(item, index) => item.name + '___' + index,
 				(item) => html`<umb-tree-item .entityType=${item.entityType} .props=${{ item }}></umb-tree-item>`,
 			)}
+			${this.#renderPaging()}
 		`;
 	}
+
+	#onLoadMoreClick = (event: any) => {
+		event.stopPropagation();
+		const next = (this._currentPage = this._currentPage + 1);
+		this.#treeContext?.pagination.setCurrentPageNumber(next);
+	};
+
+	#renderPaging() {
+		if (this._totalPages <= 1 || this._currentPage === this._totalPages) {
+			return nothing;
+		}
+
+		return html` <uui-button @click=${this.#onLoadMoreClick} label="Load more"></uui-button> `;
+	}
 }
 
 export default UmbDefaultTreeElement;

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts

@@ -26,6 +26,7 @@ export abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemMod
 {
 	public unique?: string | null;
 	public entityType?: string;
+	public readonly pagination = new UmbPaginationManager();
 
 	#manifest?: ManifestTreeItem;
 
@@ -63,16 +64,15 @@ export abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemMod
 	#actionEventContext?: UmbActionEventContext;
 	#getUniqueFunction: UmbTreeItemUniqueFunction<TreeItemType>;
 
-	public readonly pagination = new UmbPaginationManager();
-
-	#filter = {
+	// TODO: get this from the tree context
+	#paging = {
 		skip: 0,
 		take: 3,
 	};
 
 	constructor(host: UmbControllerHost, getUniqueFunction: UmbTreeItemUniqueFunction<TreeItemType>) {
 		super(host, UMB_TREE_ITEM_CONTEXT);
-		this.pagination.setPageSize(this.#filter.take);
+		this.pagination.setPageSize(this.#paging.take);
 		this.#getUniqueFunction = getUniqueFunction;
 		this.#consumeContexts();
 
@@ -132,8 +132,8 @@ export abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemMod
 		this.#isLoading.setValue(true);
 		const { data, error, asObservable } = await repository.requestTreeItemsOf({
 			parentUnique: this.unique,
-			skip: this.#filter.skip,
-			take: this.#filter.take,
+			skip: this.#paging.skip,
+			take: this.#paging.take,
 		});
 
 		if (data) {
@@ -282,7 +282,7 @@ export abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemMod
 
 	#onPageChange = (event: UmbChangeEvent) => {
 		const target = event.target as UmbPaginationManager;
-		this.#filter.skip = target.getSkip();
+		this.#paging.skip = target.getSkip();
 		this.requestChildren();
 	};