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',