diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts index 651524bbd3..b9276cf6a2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts @@ -1,11 +1,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { css, html } from 'lit'; +import { css, html, nothing } from 'lit'; import { customElement, state, query } from 'lit/decorators.js'; +import { UUIPaginationEvent } from '@umbraco-ui/uui'; import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../core/modal'; import { UmbLitElement } from '@umbraco-cms/element'; import { RedirectManagementResource, RedirectStatus, RedirectUrl, RedirectUrlStatus } from '@umbraco-cms/backend-api'; import { tryExecuteAndNotify } from '@umbraco-cms/resources'; +const itemsPerPage = 5; + @customElement('umb-dashboard-redirect-management') export class UmbDashboardRedirectManagementElement extends UmbLitElement { static styles = [ @@ -18,9 +21,8 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { margin-bottom: 12px; } - uui-input uui-icon { - padding-top: var(--uui-size-space-2); - padding-left: var(--uui-size-space-3); + .actions uui-icon { + transform: translateX(50%); } uui-table { @@ -39,6 +41,10 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { uui-table uui-icon { vertical-align: sub; } + uui-pagination { + display: block; + margin-top: var(--uui-size-space-5); + } .trackerDisabled { position: relative; @@ -73,13 +79,16 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { @state() private _redirectData?: RedirectUrl[]; - @state() - private _redirectDataFiltered?: RedirectUrl[]; - @state() private _trackerStatus = true; - @query('#search') + @state() + private _currentPage = 1; + + @state() + private _total?: number; + + @query('#search-input') private _searchField!: HTMLInputElement; private _modalService?: UmbModalService; @@ -94,7 +103,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { connectedCallback() { super.connectedCallback(); this._getTrackerStatus(); - this._setup(); + this._getRedirectData(); } private async _getTrackerStatus() { @@ -102,15 +111,6 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { if (data && data.status) data.status === RedirectStatus.ENABLED ? true : false; } - private async _setup() { - const { data } = await tryExecuteAndNotify( - this, - RedirectManagementResource.getRedirectManagement({ take: 9999, skip: 0 }) - ); - this._redirectData = data?.items; - this._searchHandler(); - } - private _removeRedirectHandler(data: RedirectUrl) { const modalHandler = this._modalService?.confirm({ headline: 'Delete', @@ -136,7 +136,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { this, RedirectManagementResource.deleteRedirectManagementByKey({ key: r.contentKey }) ); - this._setup(); + this._getRedirectData(); } } @@ -151,37 +151,58 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { if (confirmed) this._toggleRedirect(); }); } + private async _toggleRedirect() { - /*//TODO: postRedirectManagementStatus returns 404 for whatever reason... + //TODO: postRedirectManagementStatus returns 404 for whatever reason... + /* const { data } = await tryExecuteAndNotify( this, RedirectManagementResource.postRedirectManagementStatus({ status: RedirectStatus.ENABLED }) );*/ - this._trackerStatus = !this._trackerStatus; } private _searchHandler() { - this._redirectDataFiltered = this._redirectData?.filter((data) => { - return data.originalUrl?.includes(this._searchField.value); - }); + console.log('search'); + } + + private _onPageChange(event: UUIPaginationEvent) { + if (this._currentPage === event.target.current) return; + this._currentPage = event.target.current; + this._getRedirectData(); + } + + private async _getRedirectData() { + const skip = this._currentPage * itemsPerPage - itemsPerPage; + const { data } = await tryExecuteAndNotify( + this, + RedirectManagementResource.getRedirectManagement({ take: itemsPerPage, skip }) + ); + this._total = data?.total; + this._redirectData = data?.items; } render() { return html`
${this._trackerStatus - ? html` - - - + ? html`
+ + + + Search + +
Disable URL tracker - - ` + ` : html``}
- ${this._redirectDataFiltered?.length + ${this._total && this._total > 0 ? html`
${this.renderTable()}
` : this.renderNoRedirects()} `; } - renderNoRedirects() { + private _renderZeroResults() { return html` - No redirects have been made + No redirects matching this search criteria +

Double check your search for any error or spelling mistakes.

+ `; + } + + private renderNoRedirects() { + return html` + No redirects have been made

When a published page gets renamed or moved, a redirect will automatically be made to the new page.

`; } - renderTable() { + private renderTable() { return html` @@ -213,7 +241,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { Redirected To Actions - ${this._redirectDataFiltered?.map((data) => { + ${this._redirectData?.map((data) => { return html` ${data.culture || '*'} @@ -241,9 +269,19 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { `; })} - + ${this._renderPagination()} + `; } + + private _renderPagination() { + if (this._total && this._total > itemsPerPage) { + return html``; + } else return nothing; + } } export default UmbDashboardRedirectManagementElement; diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts index 7e1e420638..8740d74607 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts @@ -1,10 +1,22 @@ import { rest } from 'msw'; +import { toNumber } from 'lodash-es'; import { umbracoPath } from '@umbraco-cms/utils'; import { PagedRedirectUrl, RedirectUrl, RedirectStatus, RedirectUrlStatus } from '@umbraco-cms/backend-api'; export const handlers = [ rest.get(umbracoPath('/redirect-management'), (_req, res, ctx) => { - return res(ctx.status(200), ctx.json(PagedRedirectUrlData)); + const skip = toNumber(_req.url.searchParams.get('skip')); + const take = toNumber(_req.url.searchParams.get('take')); + + const items = PagedRedirectUrlData.items.slice(skip, skip + take); + + const PagedData: PagedRedirectUrl = { + total: PagedRedirectUrlData.total, + items, + }; + + console.log(PagedData); + return res(ctx.status(200), ctx.json(PagedData)); }), rest.get(umbracoPath('/redirect-management/:key'), async (_req, res, ctx) => {