diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/pagination-manager/pagination.manager.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/pagination-manager/pagination.manager.ts index 9c1db36e9c..508d233482 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/pagination-manager/pagination.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/pagination-manager/pagination.manager.ts @@ -138,4 +138,22 @@ export class UmbPaginationManager extends EventTarget { const skip = Math.max(0, (this.#currentPage.getValue() - 1) * this.#pageSize.getValue()); this.#skip.setValue(skip); } + + /** + * Gets the index of the first item on the current page (for display). + * @returns {number} + * @memberof UmbPaginationManager + */ + public getDisplayStart(): number { + return this.getSkip() + 1; + } + + /** + * Gets the index of the last item on the current page (for display). + * @returns {number} + * @memberof UmbPaginationManager + */ + public getDisplayEnd(): number { + return Math.min(this.getSkip() + this.getPageSize(), this.getTotalItems()); + } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts index 3e31005701..684bc19d31 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/search/examine-management-dashboard/views/section-view-examine-searchers.ts @@ -8,6 +8,8 @@ import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/rou import { SearcherService } from '@umbraco-cms/backoffice/external/backend-api'; import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element'; import { tryExecute } from '@umbraco-cms/backoffice/resources'; +import { UmbPaginationManager } from '@umbraco-cms/backoffice/utils'; +import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui'; interface ExposedSearchResultField { name: string; @@ -34,6 +36,17 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement { @state() private _workspacePath = 'aa'; + @state() + _totalPages = 1; + + @state() + _currentPage = 1; + + @state() + _totalNumberOfResults = 0; + + #paginationManager = new UmbPaginationManager(); + private _onKeyPress(e: KeyboardEvent) { if (e.key == 'Enter') { this._onSearch(); @@ -44,6 +57,12 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement { constructor() { super(); + + this.#paginationManager.setPageSize(100); + + this.observe(this.#paginationManager.currentPage, (number) => (this._currentPage = number)); + this.observe(this.#paginationManager.totalPages, (number) => (this._totalPages = number)); + new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) .addAdditionalPath(':entityType') .onSetup((routingInfo) => { @@ -64,13 +83,15 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement { path: { searcherName: this.searcherName }, query: { term: this._searchInput.value, - take: 100, - skip: 0, + take: this.#paginationManager.getPageSize(), + skip: this.#paginationManager.getSkip(), }, }), ); this._searchResults = data?.items ?? []; + this.#paginationManager.setTotalItems(data.total); + this._totalNumberOfResults = data.total; this._updateFieldFilter(); this._searchLoading = false; } @@ -158,13 +179,29 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement { } } + #onPageChange(event: UUIPaginationEvent) { + this.#paginationManager.setCurrentPageNumber(event.target?.current); + this._onSearch(); + } + private renderSearchResults() { if (this._searchLoading) return html``; if (!this._searchResults) return nothing; if (!this._searchResults.length) { return html`

${this.localize.term('examineManagement_noResults')}

`; } - return html`
+ return html` +
+ ${this.localize.term( + 'examineManagement_searchResultsFound', + this.#paginationManager.getDisplayStart(), + this.#paginationManager.getDisplayEnd(), + this._totalNumberOfResults, + this._currentPage, + this._totalPages, + )} +
+
@@ -212,7 +249,16 @@ export class UmbDashboardExamineSearcherElement extends UmbLitElement { -
`; +
+ + `; } renderHeadCells() {