yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination, filter search & delete

Browse Source
This commit is contained in:
Lone Iversen
2023-01-26 08:27:51 +01:00
parent 5b77d7931c
commit 5ffdeedc93
2 changed files with 77 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/Umbraco.Web.UI.Client/src/backoffice/documents/dashboards/redirect-management/dashboard-redirect-management.element.ts
View File

@@ -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}">
</uui-input>
<uui-button id="search-button" look="primary" color="positive" label="search">
<uui-button
id="search-button"
look="primary"
color="positive"
label="search"
.state="${this._buttonState}"
@click="${this._searchHandler}">
Search<uui-icon name="umb:search"></uui-icon>
</uui-button>
</div>
@@ -242,7 +273,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
<uui-table-head-cell style="width:10%;">Actions</uui-table-head-cell>
</uui-table-head>
${this._redirectData?.map((data) => {
return html` <uui-table-row>
return html` <uui-table-row id="redirect-key-${data.key}">
<uui-table-cell> ${data.culture || '*'} </uui-table-cell>
<uui-table-cell>
<a href="${data.originalUrl || '#'}" target="_blank"> ${data.originalUrl}</a>
@@ -276,7 +307,7 @@ export class UmbDashboardRedirectManagementElement extends UmbLitElement {
}
private _renderPagination() {
if (this._total && this._total > itemsPerPage) {
if (this._total) {
return html`<uui-pagination
total="${Math.ceil(this._total / itemsPerPage)}"
@change="${this._onPageChange}"></uui-pagination>`;

41
src/Umbraco.Web.UI.Client/src/core/mocks/domains/redirect-management.handlers.ts
View File

@@ -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<PagedRedirectUrl>(filteredPagedData));
} else {
const items = PagedRedirectUrlData.items.slice(skip, skip + take);
console.log(PagedData);
return res(ctx.status(200), ctx.json<PagedRedirectUrl>(PagedData));
const PagedData: PagedRedirectUrl = {
total: PagedRedirectUrlData.total,
items,
};
return res(ctx.status(200), ctx.json<PagedRedirectUrl>(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',