From ba26e8f1c1133e5d6c170f3e4965398a90a6ffb1 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 24 Jan 2023 14:13:08 +0100 Subject: [PATCH 01/19] Allows for uui-box to have some padding/margin at bottom --- .../section/section-dashboards/section-dashboards.element.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts index ba493baa14..dd054a42e8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/section/section-dashboards/section-dashboards.element.ts @@ -38,10 +38,9 @@ export class UmbSectionDashboardsElement extends UmbLitElement { #router-slot { width: 100%; - height: 100%; box-sizing: border-box; display: block; - padding:var(--uui-size-5); + padding: var(--uui-size-5); } `, ]; From bbd501475f5173e1de357102d47f75987bf71447 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 24 Jan 2023 14:13:23 +0100 Subject: [PATCH 02/19] handlers --- .../src/core/mocks/browser-handlers.ts | 2 + .../domains/redirect-management.handlers.ts | 137 ++++++++++++++++++ 2 files changed, 139 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts index 1d9c6a796c..8f135952c9 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts @@ -18,6 +18,7 @@ import { handlers as dictionaryHandlers } from './domains/dictionary.handlers'; import { handlers as mediaTypeHandlers } from './domains/media-type.handlers'; import { handlers as memberGroupHandlers } from './domains/member-group.handlers'; import { handlers as memberTypeHandlers } from './domains/member-type.handlers'; +import { handlers as redirectManagement } from './domains/redirect-management.handlers'; const handlers = [ serverHandlers.serverVersionHandler, @@ -40,6 +41,7 @@ const handlers = [ ...modelsBuilderHandlers, ...profilingHandlers, ...dictionaryHandlers, + ...redirectManagement, ]; switch (import.meta.env.VITE_UMBRACO_INSTALL_STATUS) { 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 new file mode 100644 index 0000000000..2b614239fa --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts @@ -0,0 +1,137 @@ +import { rest } from 'msw'; +import { umbracoPath } from '@umbraco-cms/utils'; +import { PagedRedirectUrl, RedirectUrl, RedirectStatus, RedirectUrlStatus } from '@umbraco-cms/backend-api'; + +const UrlTracker: RedirectUrlStatus = { status: RedirectStatus.ENABLED, userIsAdmin: true }; + +export const handlers = [ + rest.get(umbracoPath('/redirect-management'), (_req, res, ctx) => { + return res(ctx.status(200), ctx.json(PagedRedirectUrlData)); + }), + + rest.get(umbracoPath('/redirect-management/:key'), async (_req, res, ctx) => { + const key = _req.params.key as string; + if (!key) return res(ctx.status(404)); + + const PagedRedirectUrlObject = _getRedirectUrlByKey(key); + + return res(ctx.status(200), ctx.json(PagedRedirectUrlObject)); + }), + + rest.delete(umbracoPath('/redirect-management/:key'), async (_req, res, ctx) => { + const key = _req.params.key as string; + if (!key) return res(ctx.status(404)); + + const PagedRedirectUrlObject = _deleteRedirectUrlByKey(key); + + return res(ctx.status(200), ctx.json(PagedRedirectUrlObject)); + }), + + rest.get(umbracoPath('/redirect-management/status'), (_req, res, ctx) => { + return res(ctx.status(200), ctx.json(UrlTracker)); + }), + + rest.post(umbracoPath('redirect-management/status'), async (_req, res, ctx) => { + UrlTracker.status = UrlTracker.status === RedirectStatus.ENABLED ? RedirectStatus.DISABLED : RedirectStatus.ENABLED; + return res(ctx.status(200), ctx.json(UrlTracker.status)); + }), +]; + +const _getRedirectUrlByKey = (key: string) => { + const PagedResult: PagedRedirectUrl = { + total: 0, + items: [], + }; + RedirectUrlData.forEach((data) => { + if (data.key?.includes(key)) { + PagedResult.items.push(data); + PagedResult.total++; + } + }); + return PagedResult; +}; + +const _deleteRedirectUrlByKey = (key: string) => { + const index = RedirectUrlData.findIndex((data) => data.contentKey === key); + if (index > -1) RedirectUrlData.splice(index, 1); + const PagedResult: PagedRedirectUrl = { + items: RedirectUrlData, + total: RedirectUrlData.length, + }; + return PagedResult; +}; + +const RedirectUrlData: RedirectUrl[] = [ + { + culture: 'DA-dk', + created: '2022-12-05T13:59:43.6827244', + destinationUrl: 'kitty.com', + originalUrl: 'kitty.dk', + contentKey: '7191c911-6747-4824-849e-5208e2b31d9f2', + }, + { + created: '2022-13-05T13:59:43.6827244', + destinationUrl: 'umbraco.com', + originalUrl: 'umbraco.dk', + contentKey: '7191c911-6747-4824-849e-5208e2b31d9f', + }, + { + created: '2022-12-05T13:59:43.6827244', + destinationUrl: 'uui.umbraco.com', + originalUrl: 'uui.umbraco.dk', + contentKey: '7191c911-6747-4824-849e-5208e2b31d9f23', + }, + { + created: '2022-13-05T13:59:43.6827244', + destinationUrl: 'umbracoffee.com', + originalUrl: 'umbracoffee.dk', + contentKey: '7191c911-6747-4824-849e-5208e2b31d9fdsaa', + }, + { + created: '2022-12-05T13:59:43.6827244', + destinationUrl: 'section/settings', + originalUrl: 'section/settings/123', + contentKey: '7191c911-6747-4824-849e-5208e2b31d9f2e23', + }, + { + created: '2022-13-05T13:59:43.6827244', + destinationUrl: 'dxp.com', + originalUrl: 'dxp.dk', + contentKey: '7191c911-6747-4824-849e-5208e2b31d9fsafsfd', + }, + { + created: '2022-12-05T13:59:43.6827244', + destinationUrl: 'google.com', + originalUrl: 'google.dk', + contentKey: '7191c911-6747-4824-849e-5208e2b31d9f2cxza', + }, + { + created: '2022-13-05T13:59:43.6827244', + destinationUrl: 'unicorns.com', + originalUrl: 'unicorns.dk', + contentKey: '7191c911-6747-4824-849e-5208e2b31d9fweds', + }, + { + created: '2022-12-05T13:59:43.6827244', + destinationUrl: 'h5yr.com', + originalUrl: 'h5yr.dk', + contentKey: '7191c911-6747-4824-849e-5208e2b31ddsfsdsfadsfdx9f2', + }, + { + created: '2022-13-05T13:59:43.6827244', + destinationUrl: 'our.umbraco.com', + originalUrl: 'our.umbraco.dk', + contentKey: '7191c911-6747-4824-849e-52dsacx08e2b31d9dsafdsff', + }, + { + created: '2022-13-05T13:59:43.6827244', + destinationUrl: 'your.umbraco.com', + originalUrl: 'your.umbraco.dk', + contentKey: '7191c911-6747-4824-849e-52dsacx08e2b31d9fsda', + }, +]; + +const PagedRedirectUrlData: PagedRedirectUrl = { + total: RedirectUrlData.length, + items: RedirectUrlData, +}; From feb0d36ea7129b090c1dc7d9cf0520415ea70494 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 24 Jan 2023 14:13:30 +0100 Subject: [PATCH 03/19] dashboard --- .../dashboard-redirect-management.element.ts | 250 +++++++++++++++++- 1 file changed, 241 insertions(+), 9 deletions(-) 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 387d22bdf6..d64f6f160b 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,17 +1,249 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { css, html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import { css, html } from 'lit'; +import { customElement, state, query } from 'lit/decorators.js'; +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'; @customElement('umb-dashboard-redirect-management') -export class UmbDashboardRedirectManagementElement extends LitElement { - static styles = [UUITextStyles, css``]; +export class UmbDashboardRedirectManagementElement extends UmbLitElement { + static styles = [ + UUITextStyles, + css` + .actions { + display: flex; + gap: 4px; + justify-content: space-between; + margin-bottom: 12px; + } + + uui-input uui-icon { + padding-top: var(--uui-size-space-2); + padding-left: var(--uui-size-space-3); + } + + uui-table { + table-layout: fixed; + } + + uui-table-head-cell:nth-child(2*n) { + width: 10%; + } + + uui-table-head-cell:last-child, + uui-table-cell:last-child { + text-align: right; + } + + uui-table uui-icon { + vertical-align: sub; + } + + .trackerDisabled { + position: relative; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + } + .trackerDisabled::after { + content: ''; + background-color: rgba(250, 250, 250, 0.7); + position: absolute; + border-radius: 2px; + left: 0; + right: 0; + top: 0; + bottom: 0; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + } + + a { + color: var(--uui-color-interactive); + } + a:hover, + a:focus { + color: var(--uui-color-interactive-emphasis); + } + `, + ]; + + @state() + private _redirectData?: RedirectUrl[]; + + @state() + private _redirectDataFiltered?: RedirectUrl[]; + + @state() + private _trackerStatus = true; + + @query('#search') + private _searchField!: HTMLInputElement; + + private _modalService?: UmbModalService; + + constructor() { + super(); + this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (_instance) => { + this._modalService = _instance; + }); + } + + connectedCallback() { + super.connectedCallback(); + this._getTrackerStatus(); + this._setup(); + } + + private async _getTrackerStatus() { + const { data } = await tryExecuteAndNotify(this, RedirectManagementResource.getRedirectManagementStatus()); + //console.log(data); + //if (data?.status) this._trackerStatus = data.status; + } + + 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', + content: html` +
+

This will remove the redirect

+ Original URL: ${data.originalUrl}
+ Redirected To: ${data.destinationUrl} +

Are you sure you want to delete?

+
+ `, + color: 'danger', + confirmLabel: 'Delete', + }); + modalHandler?.onClose().then(({ confirmed }: any) => { + if (confirmed) this._removeRedirect(data); + }); + } + + private async _removeRedirect(r: RedirectUrl) { + if (r.contentKey) { + const { data } = await tryExecuteAndNotify( + this, + RedirectManagementResource.deleteRedirectManagementByKey({ key: r.contentKey }) + ); + this._setup(); + } + } + + private _disableRedirectHandler() { + const modalHandler = this._modalService?.confirm({ + headline: 'Disable URL tracker', + content: html`Are you sure you want to disable the URL tracker?`, + color: 'danger', + confirmLabel: 'Disable', + }); + modalHandler?.onClose().then(({ confirmed }: any) => { + if (confirmed) this._toggleRedirect(); + }); + } + private async _toggleRedirect() { + /*//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); + }); + } render() { - return html` - -

Redirect Management

- - `; + return html`
+ ${this._trackerStatus + ? html` + + + + + Disable URL tracker + + ` + : html` + Enable URL tracker + `} +
+ + ${this._redirectDataFiltered?.length + ? html`
${this.renderTable()}
` + : this.renderNoRedirects()} `; + } + + 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() { + return html` + + + Culture + Original URL + + Redirected To + Actions + + ${this._redirectDataFiltered?.map((data) => { + return html` + ${data.culture || '*'} + + ${data.originalUrl} + + + + + + + ${data.destinationUrl} + + + + + + + + + + `; + })} + + `; } } From 84816098da7432a31960c3799738a90c48c2edfd Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Tue, 24 Jan 2023 14:24:24 +0100 Subject: [PATCH 04/19] small touch --- .../dashboard-redirect-management.element.ts | 3 +-- .../src/core/mocks/domains/redirect-management.handlers.ts | 6 ++++-- 2 files changed, 5 insertions(+), 4 deletions(-) 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 d64f6f160b..651524bbd3 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 @@ -99,8 +99,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { private async _getTrackerStatus() { const { data } = await tryExecuteAndNotify(this, RedirectManagementResource.getRedirectManagementStatus()); - //console.log(data); - //if (data?.status) this._trackerStatus = data.status; + if (data && data.status) data.status === RedirectStatus.ENABLED ? true : false; } private async _setup() { 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 2b614239fa..7e1e420638 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 @@ -2,8 +2,6 @@ import { rest } from 'msw'; import { umbracoPath } from '@umbraco-cms/utils'; import { PagedRedirectUrl, RedirectUrl, RedirectStatus, RedirectUrlStatus } from '@umbraco-cms/backend-api'; -const UrlTracker: RedirectUrlStatus = { status: RedirectStatus.ENABLED, userIsAdmin: true }; - export const handlers = [ rest.get(umbracoPath('/redirect-management'), (_req, res, ctx) => { return res(ctx.status(200), ctx.json(PagedRedirectUrlData)); @@ -37,6 +35,10 @@ export const handlers = [ }), ]; +// Mock Data + +const UrlTracker: RedirectUrlStatus = { status: RedirectStatus.ENABLED, userIsAdmin: true }; + const _getRedirectUrlByKey = (key: string) => { const PagedResult: PagedRedirectUrl = { total: 0, From 5b77d7931cd119f1ca02a446351092a9688e7a02 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 25 Jan 2023 21:07:40 +0100 Subject: [PATCH 05/19] pagination --- .../dashboard-redirect-management.element.ts | 110 ++++++++++++------ .../domains/redirect-management.handlers.ts | 14 ++- 2 files changed, 87 insertions(+), 37 deletions(-) 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) => { From 5ffdeedc935ea10ed58e28a21e366afe792b49db Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 26 Jan 2023 08:27:51 +0100 Subject: [PATCH 06/19] pagination, filter search & delete --- .../dashboard-redirect-management.element.ts | 59 ++++++++++++++----- .../domains/redirect-management.handlers.ts | 41 ++++++++++--- 2 files changed, 77 insertions(+), 23 deletions(-) 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 b9276cf6a2..d3517859f6 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,7 +1,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, nothing } from 'lit'; import { customElement, state, query } from 'lit/decorators.js'; -import { UUIPaginationEvent } from '@umbraco-ui/uui'; +import { UUIButtonState, UUIPaginationElement, 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'; @@ -88,9 +88,18 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { @state() private _total?: number; + @state() + private _buttonState: UUIButtonState; + + @state() + private _filter?: string; + @query('#search-input') private _searchField!: HTMLInputElement; + @query('uui-pagination') + private _pagination!: UUIPaginationElement; + private _modalService?: UmbModalService; constructor() { @@ -131,12 +140,15 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private async _removeRedirect(r: RedirectUrl) { - if (r.contentKey) { - const { data } = await tryExecuteAndNotify( + if (r.key) { + const res = await tryExecuteAndNotify( this, - RedirectManagementResource.deleteRedirectManagementByKey({ key: r.contentKey }) + RedirectManagementResource.deleteRedirectManagementByKey({ key: r.key }) ); - this._getRedirectData(); + if (!res.error) { + // or just run a this._getRedirectData() again? + this.shadowRoot?.getElementById(`redirect-key-${r.key}`)?.remove(); + } } } @@ -162,8 +174,18 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { this._trackerStatus = !this._trackerStatus; } - private _searchHandler() { - console.log('search'); + private _inputHandler(pressed: KeyboardEvent) { + if (pressed.key === 'Enter') this._searchHandler(); + } + + private async _searchHandler() { + this._filter = this._searchField.value; + this._pagination.current = 1; + this._currentPage = 1; + if (this._filter.length) { + this._buttonState = 'waiting'; + } + this._getRedirectData(); } private _onPageChange(event: UUIPaginationEvent) { @@ -176,10 +198,13 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { const skip = this._currentPage * itemsPerPage - itemsPerPage; const { data } = await tryExecuteAndNotify( this, - RedirectManagementResource.getRedirectManagement({ take: itemsPerPage, skip }) + RedirectManagementResource.getRedirectManagement({ filter: this._filter, take: itemsPerPage, skip }) ); - this._total = data?.total; - this._redirectData = data?.items; + if (data) { + this._total = data?.total; + this._redirectData = data?.items; + if (this._filter?.length) this._buttonState = 'success'; + } } render() { @@ -190,9 +215,15 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { id="search-input" placeholder="Original URL" label="input for search" - @keyup="${this._searchHandler}"> + @keypress="${this._inputHandler}"> - + Search @@ -242,7 +273,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { Actions ${this._redirectData?.map((data) => { - return html` + return html` ${data.culture || '*'} ${data.originalUrl} @@ -276,7 +307,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private _renderPagination() { - if (this._total && this._total > itemsPerPage) { + if (this._total) { return html``; 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 8740d74607..560a91e2e8 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 @@ -5,18 +5,31 @@ import { PagedRedirectUrl, RedirectUrl, RedirectStatus, RedirectUrlStatus } from export const handlers = [ rest.get(umbracoPath('/redirect-management'), (_req, res, ctx) => { + const filter = _req.url.searchParams.get('filter'); const skip = toNumber(_req.url.searchParams.get('skip')); const take = toNumber(_req.url.searchParams.get('take')); - const items = PagedRedirectUrlData.items.slice(skip, skip + take); + console.log('handler file', filter); + if (filter) { + const filtered: RedirectUrl[] = []; - const PagedData: PagedRedirectUrl = { - total: PagedRedirectUrlData.total, - items, - }; + PagedRedirectUrlData.items.forEach((item) => { + if (item.originalUrl?.includes(filter)) filtered.push(item); + }); + const filteredPagedData: PagedRedirectUrl = { + total: filtered.length, + items: filtered.slice(skip, skip + take), + }; + return res(ctx.status(200), ctx.json(filteredPagedData)); + } else { + const items = PagedRedirectUrlData.items.slice(skip, skip + take); - console.log(PagedData); - return res(ctx.status(200), ctx.json(PagedData)); + const PagedData: PagedRedirectUrl = { + total: PagedRedirectUrlData.total, + items, + }; + return res(ctx.status(200), ctx.json(PagedData)); + } }), rest.get(umbracoPath('/redirect-management/:key'), async (_req, res, ctx) => { @@ -66,7 +79,7 @@ const _getRedirectUrlByKey = (key: string) => { }; const _deleteRedirectUrlByKey = (key: string) => { - const index = RedirectUrlData.findIndex((data) => data.contentKey === key); + const index = RedirectUrlData.findIndex((data) => data.key === key); if (index > -1) RedirectUrlData.splice(index, 1); const PagedResult: PagedRedirectUrl = { items: RedirectUrlData, @@ -77,67 +90,77 @@ const _deleteRedirectUrlByKey = (key: string) => { const RedirectUrlData: RedirectUrl[] = [ { - culture: 'DA-dk', + key: '1', created: '2022-12-05T13:59:43.6827244', destinationUrl: 'kitty.com', originalUrl: 'kitty.dk', contentKey: '7191c911-6747-4824-849e-5208e2b31d9f2', }, { + key: '2', created: '2022-13-05T13:59:43.6827244', destinationUrl: 'umbraco.com', originalUrl: 'umbraco.dk', contentKey: '7191c911-6747-4824-849e-5208e2b31d9f', }, { + key: '3', created: '2022-12-05T13:59:43.6827244', destinationUrl: 'uui.umbraco.com', originalUrl: 'uui.umbraco.dk', contentKey: '7191c911-6747-4824-849e-5208e2b31d9f23', }, { + key: '4', created: '2022-13-05T13:59:43.6827244', destinationUrl: 'umbracoffee.com', originalUrl: 'umbracoffee.dk', contentKey: '7191c911-6747-4824-849e-5208e2b31d9fdsaa', }, { + key: '5', created: '2022-12-05T13:59:43.6827244', destinationUrl: 'section/settings', originalUrl: 'section/settings/123', contentKey: '7191c911-6747-4824-849e-5208e2b31d9f2e23', }, { + key: '6', created: '2022-13-05T13:59:43.6827244', destinationUrl: 'dxp.com', originalUrl: 'dxp.dk', contentKey: '7191c911-6747-4824-849e-5208e2b31d9fsafsfd', }, { + key: '7', created: '2022-12-05T13:59:43.6827244', destinationUrl: 'google.com', originalUrl: 'google.dk', contentKey: '7191c911-6747-4824-849e-5208e2b31d9f2cxza', }, { + key: '8', created: '2022-13-05T13:59:43.6827244', destinationUrl: 'unicorns.com', originalUrl: 'unicorns.dk', contentKey: '7191c911-6747-4824-849e-5208e2b31d9fweds', }, { + key: '9', created: '2022-12-05T13:59:43.6827244', destinationUrl: 'h5yr.com', originalUrl: 'h5yr.dk', contentKey: '7191c911-6747-4824-849e-5208e2b31ddsfsdsfadsfdx9f2', }, { + key: '10', created: '2022-13-05T13:59:43.6827244', destinationUrl: 'our.umbraco.com', originalUrl: 'our.umbraco.dk', contentKey: '7191c911-6747-4824-849e-52dsacx08e2b31d9dsafdsff', }, { + key: '11', created: '2022-13-05T13:59:43.6827244', destinationUrl: 'your.umbraco.com', originalUrl: 'your.umbraco.dk', From b72845b0a701c1f3ca225fa74857733c4f84eccd Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 26 Jan 2023 08:31:37 +0100 Subject: [PATCH 07/19] items per page --- .../dashboard-redirect-management.element.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) 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 d3517859f6..b9f5f3b461 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,14 +1,12 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, nothing } from 'lit'; -import { customElement, state, query } from 'lit/decorators.js'; +import { customElement, state, query, property } from 'lit/decorators.js'; import { UUIButtonState, UUIPaginationElement, 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 = [ @@ -76,6 +74,9 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { `, ]; + @property({ type: Number, attribute: 'items-per-page' }) + itemsPerPage = 5; + @state() private _redirectData?: RedirectUrl[]; @@ -195,10 +196,10 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private async _getRedirectData() { - const skip = this._currentPage * itemsPerPage - itemsPerPage; + const skip = this._currentPage * this.itemsPerPage - this.itemsPerPage; const { data } = await tryExecuteAndNotify( this, - RedirectManagementResource.getRedirectManagement({ filter: this._filter, take: itemsPerPage, skip }) + RedirectManagementResource.getRedirectManagement({ filter: this._filter, take: this.itemsPerPage, skip }) ); if (data) { this._total = data?.total; @@ -309,7 +310,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { private _renderPagination() { if (this._total) { return html``; } else return nothing; } From 7885c584be1403ecc97bddf65b4e56574dc37f61 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 26 Jan 2023 08:40:15 +0100 Subject: [PATCH 08/19] handle zero search results --- .../dashboard-redirect-management.element.ts | 2 ++ 1 file changed, 2 insertions(+) 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 b9f5f3b461..5b884de25d 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 @@ -246,6 +246,8 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { ${this._total && this._total > 0 ? html`
${this.renderTable()}
` + : this._filter?.length + ? this._renderZeroResults() : this.renderNoRedirects()} `; } From 2a1827ca82421c9b8ba30e0e828bb665878b8775 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 26 Jan 2023 08:42:29 +0100 Subject: [PATCH 09/19] pagination error fix --- .../dashboard-redirect-management.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 5b884de25d..784c94cfd8 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 @@ -99,7 +99,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { private _searchField!: HTMLInputElement; @query('uui-pagination') - private _pagination!: UUIPaginationElement; + private _pagination?: UUIPaginationElement; private _modalService?: UmbModalService; @@ -181,7 +181,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { private async _searchHandler() { this._filter = this._searchField.value; - this._pagination.current = 1; + if (this._pagination) this._pagination.current = 1; this._currentPage = 1; if (this._filter.length) { this._buttonState = 'waiting'; From 5c8af55fbfc8c67c68263b7eef3d1d3fd9a0a2b8 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 26 Jan 2023 08:55:33 +0100 Subject: [PATCH 10/19] remove console --- .../src/core/mocks/domains/redirect-management.handlers.ts | 1 - 1 file changed, 1 deletion(-) 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 560a91e2e8..b4a2141ef2 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 @@ -9,7 +9,6 @@ export const handlers = [ const skip = toNumber(_req.url.searchParams.get('skip')); const take = toNumber(_req.url.searchParams.get('take')); - console.log('handler file', filter); if (filter) { const filtered: RedirectUrl[] = []; From 1b19dee93474b0f5905e55dce779e2b11520ec65 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 26 Jan 2023 14:55:04 +0100 Subject: [PATCH 11/19] e2e --- src/Umbraco.Web.UI.Client/src/core/mocks/e2e-handlers.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/e2e-handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/e2e-handlers.ts index 7006b4c3f9..509876d95c 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/e2e-handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/e2e-handlers.ts @@ -10,6 +10,7 @@ import { handlers as telemetryHandlers } from './domains/telemetry.handlers'; import { handlers as examineManagementHandlers } from './domains/examine-management.handlers'; import { handlers as modelsBuilderHandlers } from './domains/modelsbuilder.handlers'; import { handlers as profileHandlers } from './domains/performance-profiling.handlers'; +import { handlers as redirectManagementHandlers } from './domains/redirect-management.handlers'; export const handlers = [ serverHandlers.serverRunningHandler, @@ -26,4 +27,5 @@ export const handlers = [ ...examineManagementHandlers, ...modelsBuilderHandlers, ...profileHandlers, + ...redirectManagementHandlers, ]; From 5c5b9775408e9bbe57656db1073a893f48e51e0b Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 26 Jan 2023 15:20:55 +0100 Subject: [PATCH 12/19] adjustments --- .../dashboard-redirect-management.element.ts | 30 +++++++++---------- .../domains/redirect-management.handlers.ts | 2 +- 2 files changed, 15 insertions(+), 17 deletions(-) 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 784c94cfd8..ba0d403d23 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 @@ -40,7 +40,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { vertical-align: sub; } uui-pagination { - display: block; + display: inline-block; margin-top: var(--uui-size-space-5); } @@ -75,7 +75,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { ]; @property({ type: Number, attribute: 'items-per-page' }) - itemsPerPage = 5; + itemsPerPage = 20; @state() private _redirectData?: RedirectUrl[]; @@ -117,8 +117,9 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private async _getTrackerStatus() { + //TODO: This resource calls the wrong api const { data } = await tryExecuteAndNotify(this, RedirectManagementResource.getRedirectManagementStatus()); - if (data && data.status) data.status === RedirectStatus.ENABLED ? true : false; + //if (data && data.status) this._trackerStatus = data.status === RedirectStatus.ENABLED ? true : false; } private _removeRedirectHandler(data: RedirectUrl) { @@ -141,15 +142,14 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private async _removeRedirect(r: RedirectUrl) { - if (r.key) { - const res = await tryExecuteAndNotify( - this, - RedirectManagementResource.deleteRedirectManagementByKey({ key: r.key }) - ); - if (!res.error) { - // or just run a this._getRedirectData() again? - this.shadowRoot?.getElementById(`redirect-key-${r.key}`)?.remove(); - } + if (!r.key) return; + const res = await tryExecuteAndNotify( + this, + RedirectManagementResource.deleteRedirectManagementByKey({ key: r.key }) + ); + if (!res.error) { + // or just run a this._getRedirectData() again? + this.shadowRoot?.getElementById(`redirect-key-${r.key}`)?.remove(); } } @@ -166,12 +166,10 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private async _toggleRedirect() { - //TODO: postRedirectManagementStatus returns 404 for whatever reason... - /* const { data } = await tryExecuteAndNotify( this, RedirectManagementResource.postRedirectManagementStatus({ status: RedirectStatus.ENABLED }) - );*/ + ); this._trackerStatus = !this._trackerStatus; } @@ -310,7 +308,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private _renderPagination() { - if (this._total) { + if (this._total && Math.ceil(this._total / this.itemsPerPage) > 1) { return html``; 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 b4a2141ef2..ccfcf0d373 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 @@ -53,7 +53,7 @@ export const handlers = [ return res(ctx.status(200), ctx.json(UrlTracker)); }), - rest.post(umbracoPath('redirect-management/status'), async (_req, res, ctx) => { + rest.post(umbracoPath('/redirect-management/status'), async (_req, res, ctx) => { UrlTracker.status = UrlTracker.status === RedirectStatus.ENABLED ? RedirectStatus.DISABLED : RedirectStatus.ENABLED; return res(ctx.status(200), ctx.json(UrlTracker.status)); }), From ec353fc4dc4825d60e373e8fe8ff8f8f02a7196f Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 26 Jan 2023 16:02:27 +0100 Subject: [PATCH 13/19] pagination width, e2e fix, status call adjustments --- .../dashboard-redirect-management.element.ts | 21 ++++++++++++------- .../domains/redirect-management.handlers.ts | 10 ++++----- 2 files changed, 19 insertions(+), 12 deletions(-) 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 ba0d403d23..5767b3e8d4 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 @@ -41,6 +41,10 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } uui-pagination { display: inline-block; + } + .pagination { + display: flex; + justify-content: center; margin-top: var(--uui-size-space-5); } @@ -75,7 +79,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { ]; @property({ type: Number, attribute: 'items-per-page' }) - itemsPerPage = 20; + itemsPerPage = 5; @state() private _redirectData?: RedirectUrl[]; @@ -117,9 +121,8 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private async _getTrackerStatus() { - //TODO: This resource calls the wrong api const { data } = await tryExecuteAndNotify(this, RedirectManagementResource.getRedirectManagementStatus()); - //if (data && data.status) this._trackerStatus = data.status === RedirectStatus.ENABLED ? true : false; + if (data && data.status) this._trackerStatus = data.status === RedirectStatus.ENABLED ? true : false; } private _removeRedirectHandler(data: RedirectUrl) { @@ -243,7 +246,9 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { ${this._total && this._total > 0 - ? html`
${this.renderTable()}
` + ? html`
+ ${this.renderTable()} +
` : this._filter?.length ? this._renderZeroResults() : this.renderNoRedirects()} `; @@ -309,9 +314,11 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { private _renderPagination() { if (this._total && Math.ceil(this._total / this.itemsPerPage) > 1) { - return html``; + return html``; } else return nothing; } } 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 ccfcf0d373..b60e0430a4 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,13 +1,12 @@ 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) => { const filter = _req.url.searchParams.get('filter'); - const skip = toNumber(_req.url.searchParams.get('skip')); - const take = toNumber(_req.url.searchParams.get('take')); + const skip = parseInt(_req.url.searchParams.get('skip') ?? '0', 10); + const take = parseInt(_req.url.searchParams.get('take') ?? '20', 10); if (filter) { const filtered: RedirectUrl[] = []; @@ -34,6 +33,7 @@ export const handlers = [ rest.get(umbracoPath('/redirect-management/:key'), async (_req, res, ctx) => { const key = _req.params.key as string; if (!key) return res(ctx.status(404)); + if (key === 'status') return res(ctx.status(200), ctx.json(UrlTracker)); const PagedRedirectUrlObject = _getRedirectUrlByKey(key); @@ -49,9 +49,9 @@ export const handlers = [ return res(ctx.status(200), ctx.json(PagedRedirectUrlObject)); }), - rest.get(umbracoPath('/redirect-management/status'), (_req, res, ctx) => { + /*rest.get(umbracoPath('/redirect-management/status'), (_req, res, ctx) => { return res(ctx.status(200), ctx.json(UrlTracker)); - }), + }),*/ rest.post(umbracoPath('/redirect-management/status'), async (_req, res, ctx) => { UrlTracker.status = UrlTracker.status === RedirectStatus.ENABLED ? RedirectStatus.DISABLED : RedirectStatus.ENABLED; From 68254f086672962c9bc7dedf1527eacb822ecb32 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 26 Jan 2023 16:02:57 +0100 Subject: [PATCH 14/19] itemsperpage back to 20 --- .../dashboard-redirect-management.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5767b3e8d4..e918415399 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 @@ -79,7 +79,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { ]; @property({ type: Number, attribute: 'items-per-page' }) - itemsPerPage = 5; + itemsPerPage = 20; @state() private _redirectData?: RedirectUrl[]; From 749cbaedf20800634373e66711a298523bced650 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 26 Jan 2023 16:24:54 +0100 Subject: [PATCH 15/19] create test file --- .../dashboard-redirect-management.test.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.test.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.test.ts b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.test.ts new file mode 100644 index 0000000000..2d960a1757 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.test.ts @@ -0,0 +1,20 @@ +import { expect, fixture, html } from '@open-wc/testing'; + +import { UmbDashboardRedirectManagementElement } from './dashboard-redirect-management.element'; +import { defaultA11yConfig } from '@umbraco-cms/test-utils'; + +describe('UmbDashboardRedirectManagement', () => { + let element: UmbDashboardRedirectManagementElement; + + beforeEach(async () => { + element = await fixture(html``); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UmbDashboardRedirectManagementElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).to.be.accessible(defaultA11yConfig); + }); +}); From af97b42baccb94017646a3d557c00106c95bd7e8 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 27 Jan 2023 13:54:48 +0100 Subject: [PATCH 16/19] add check for error --- .../dashboard-redirect-management.element.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) 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 e918415399..1d58972530 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 @@ -169,11 +169,14 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private async _toggleRedirect() { - const { data } = await tryExecuteAndNotify( + const { error } = await tryExecuteAndNotify( this, RedirectManagementResource.postRedirectManagementStatus({ status: RedirectStatus.ENABLED }) ); - this._trackerStatus = !this._trackerStatus; + + if (!error) { + this._trackerStatus = !this._trackerStatus; + } } private _inputHandler(pressed: KeyboardEvent) { From afd81644dfb62c90be1b641c3f0782cbe5ac57d1 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 27 Jan 2023 13:54:58 +0100 Subject: [PATCH 17/19] clean imports --- .../dashboard-redirect-management.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1d58972530..f3b0b85592 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 @@ -4,7 +4,7 @@ import { customElement, state, query, property } from 'lit/decorators.js'; import { UUIButtonState, UUIPaginationElement, 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 { RedirectManagementResource, RedirectStatus, RedirectUrl } from '@umbraco-cms/backend-api'; import { tryExecuteAndNotify } from '@umbraco-cms/resources'; @customElement('umb-dashboard-redirect-management') From bbf3bd5a07703e2a37c6ce101571d4377d859eae Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 27 Jan 2023 13:55:34 +0100 Subject: [PATCH 18/19] remove any --- .../dashboard-redirect-management.element.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 f3b0b85592..9b63e58f88 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 @@ -139,7 +139,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { color: 'danger', confirmLabel: 'Delete', }); - modalHandler?.onClose().then(({ confirmed }: any) => { + modalHandler?.onClose().then(({ confirmed }) => { if (confirmed) this._removeRedirect(data); }); } @@ -163,7 +163,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { color: 'danger', confirmLabel: 'Disable', }); - modalHandler?.onClose().then(({ confirmed }: any) => { + modalHandler?.onClose().then(({ confirmed }) => { if (confirmed) this._toggleRedirect(); }); } From 0ba4347a0d702288891cb910e904a15f2893dddd Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 27 Jan 2023 14:24:37 +0100 Subject: [PATCH 19/19] make constant for total variable --- .../dashboard-redirect-management.element.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) 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 9b63e58f88..595da98b54 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 @@ -316,13 +316,15 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement { } private _renderPagination() { - if (this._total && Math.ceil(this._total / this.itemsPerPage) > 1) { - return html``; - } else return nothing; + if (!this._total) return nothing; + + const totalPages = Math.ceil(this._total / this.itemsPerPage); + + if (totalPages <= 1) return nothing; + + return html``; } }