diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.context.ts index 4608906723..9ccf9d5da0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.context.ts +++ b/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 extends UmbContextBase> @@ -26,11 +27,17 @@ export class UmbDefaultTreeContext 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; #actionEventContext?: UmbActionEventContext; + #paging = { + skip: 0, + take: 3, + }; + #initResolver?: () => void; #initialized = false; @@ -40,19 +47,11 @@ export class UmbDefaultTreeContext 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 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 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.'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.element.ts index c40570aac3..1780ac6ccd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.element.ts +++ b/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; #init: Promise; @@ -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``, )} + ${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` `; + } } export default UmbDefaultTreeElement; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts index e639ee94a1..3aef8a988e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-context-base.ts +++ b/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; - public readonly pagination = new UmbPaginationManager(); - - #filter = { + // TODO: get this from the tree context + #paging = { skip: 0, take: 3, }; constructor(host: UmbControllerHost, getUniqueFunction: UmbTreeItemUniqueFunction) { 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 { const target = event.target as UmbPaginationManager; - this.#filter.skip = target.getSkip(); + this.#paging.skip = target.getSkip(); this.requestChildren(); };