diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts index ab8a431de5..e357c39abd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts @@ -18,10 +18,10 @@ import { type PropertyValues, nothing, } from '@umbraco-cms/backoffice/external/lit'; -import { debounce } from '@umbraco-cms/backoffice/utils'; +import { debounce, UmbPaginationManager } from '@umbraco-cms/backoffice/utils'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UMB_CONTENT_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/content'; -import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import type { UUIInputEvent, UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui'; import { isUmbracoFolder } from '@umbraco-cms/backoffice/media-type'; import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; @@ -44,6 +44,12 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement = []; + @state() + private _currentPage = 1; + + @state() + private _currentTotalPages = 0; + @state() private _searchResult: Array = []; @@ -68,6 +74,8 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement(); + constructor() { super(); @@ -109,17 +117,32 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement

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

` : html`
- ${repeat( - this._currentChildren, - (item) => item.unique, - (item) => this.#renderCard(item), - )} -
`} + ${repeat( + this._currentChildren, + (item) => item.unique, + (item) => this.#renderCard(item), + )} + + ${this._currentTotalPages > 1 + ? html`` + : nothing}`} `; } @@ -416,6 +461,11 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement