diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/logviewer.context.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/logviewer.context.ts index 6dbbe79933..39fc6efa54 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/logviewer.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/logviewer.context.ts @@ -67,7 +67,7 @@ export class UmbLogViewerWorkspaceContext extends UmbControllerBase implements U }; #savedSearches = new UmbObjectState(undefined); - savedSearches = this.#savedSearches.asObservablePart((data) => data?.items); + savedSearches = this.#savedSearches.asObservablePart((data) => data); #logCount = new UmbObjectState(null); logCount = this.#logCount.asObservable(); @@ -168,8 +168,8 @@ export class UmbLogViewerWorkspaceContext extends UmbControllerBase implements U return this.#dateRange.getValue(); } - async getSavedSearches() { - const { data } = await this.#repository.getSavedSearches({ skip: 0, take: 100 }); + async getSavedSearches({ skip = 0, take = 15 }: { skip?: number; take?: number } = {}) { + const { data } = await this.#repository.getSavedSearches({ skip, take }); if (data) { this.#savedSearches.setValue(data); } else { diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/logviewer/logviewer-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/logviewer/logviewer-workspace.element.ts index c0aed6bc80..aea79e21e9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/logviewer/logviewer-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/logviewer/logviewer-workspace.element.ts @@ -33,7 +33,11 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement { } render() { - return html` `; + return html` + + `; } static styles = [ diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts index 56e67450cd..b4b8c53919 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts @@ -1,25 +1,31 @@ import type { UmbLogViewerWorkspaceContext } from '../../../logviewer.context.js'; import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../../logviewer.context.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { - PagedLogTemplateResponseModel, + LogTemplateResponseModel, SavedLogSearchResponseModel, } from '@umbraco-cms/backoffice/external/backend-api'; +import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui'; -//TODO: fix pagination bug when API is fixed @customElement('umb-log-viewer-message-templates-overview') export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement { + #itemsPerPage = 10; + #currentPage = 1; + @state() - private _messageTemplates: PagedLogTemplateResponseModel | null = null; + private _total = 0; + + @state() + private _messageTemplates: Array = []; #logViewerContext?: UmbLogViewerWorkspaceContext; constructor() { super(); this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => { this.#logViewerContext = instance; - this.#logViewerContext?.getMessageTemplates(0, 10); + this.#logViewerContext?.getMessageTemplates(0, this.#itemsPerPage); this.#observeStuff(); }); } @@ -27,13 +33,20 @@ export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement { #observeStuff() { if (!this.#logViewerContext) return; this.observe(this.#logViewerContext.messageTemplates, (templates) => { - this._messageTemplates = templates ?? null; + this._messageTemplates = templates?.items ?? []; + this._total = templates?.total ?? 0; }); } #getMessageTemplates() { - const take = this._messageTemplates?.items?.length ?? 0; - this.#logViewerContext?.getMessageTemplates(0, take + 10); + //const take = this._messageTemplates?.length ?? 0; + const skip = this.#currentPage * this.#itemsPerPage - this.#itemsPerPage; + this.#logViewerContext?.getMessageTemplates(skip, this.#itemsPerPage); + } + + #onChangePage(event: UUIPaginationEvent) { + this.#currentPage = event.target.current; + this.#getMessageTemplates(); } #renderSearchItem = (searchListItem: SavedLogSearchResponseModel) => { @@ -54,11 +67,11 @@ export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement { render() { return html` -

Total Unique Message types: ${this._messageTemplates?.total}

+

Total Unique Message types: ${this._total}

${this._messageTemplates - ? this._messageTemplates.items.map( + ? this._messageTemplates.map( (template) => html` @@ -70,17 +83,15 @@ export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement { `, - ) + ) : ''} - - - Show more - + ${this._total > this.#itemsPerPage + ? html`` + : nothing}
`; } @@ -88,6 +99,10 @@ export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement { static styles = [ UmbTextStyles, css` + uui-pagination { + margin-top: var(--uui-size-layout-1); + } + #show-more-templates-btn { margin-top: var(--uui-size-space-5); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts index 517a46d848..ca34b34fcd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts @@ -1,23 +1,30 @@ import type { UmbLogViewerWorkspaceContext } from '../../../logviewer.context.js'; import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../../logviewer.context.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { SavedLogSearchResponseModel } from '@umbraco-cms/backoffice/external/backend-api'; +import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui'; //TODO: implement the saved searches pagination when the API total bug is fixed @customElement('umb-log-viewer-saved-searches-overview') export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement { + #itemsPerPage = 15; + #currentPage = 1; + @state() private _savedSearches: SavedLogSearchResponseModel[] = []; + @state() + private _total = 0; + #logViewerContext?: UmbLogViewerWorkspaceContext; constructor() { super(); this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => { this.#logViewerContext = instance; - this.#logViewerContext?.getSavedSearches(); + this.#logViewerContext?.getSavedSearches({ skip: 0, take: this.#itemsPerPage }); this.#observeStuff(); }); } @@ -25,10 +32,21 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement { #observeStuff() { if (!this.#logViewerContext) return; this.observe(this.#logViewerContext.savedSearches, (savedSearches) => { - this._savedSearches = savedSearches ?? []; + this._savedSearches = savedSearches?.items ?? []; + this._total = savedSearches?.total ?? 0; }); } + #getSavedSearches() { + const skip = this.#currentPage * this.#itemsPerPage - this.#itemsPerPage; + this.#logViewerContext?.getSavedSearches({ skip, take: this.#itemsPerPage }); + } + + #onChangePage(event: UUIPaginationEvent) { + this.#currentPage = event.target.current; + this.#getSavedSearches(); + } + #renderSearchItem = (searchListItem: SavedLogSearchResponseModel) => { return html`
  • ${this.#renderSearchItem({ name: 'All logs', query: '' })} ${this._savedSearches.map(this.#renderSearchItem)} + ${this._total > this.#itemsPerPage + ? html`` + : nothing} `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-messages-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-messages-list.element.ts index ec98da6550..88a8fa48a1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-messages-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-messages-list.element.ts @@ -89,12 +89,12 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement { .properties=${log.properties ?? []} .exception=${log.exception ?? ''} .messageTemplate=${log.messageTemplate ?? ''}>`, - )}` + )}` : html` Sorry, we cannot find what you are looking for. - `}`; + `}`; } render() { @@ -124,6 +124,10 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement { static styles = [ css` + uui-pagination { + display: block; + margin-bottom: var(--uui-size-layout-1); + } uui-box { --uui-box-default-padding: 0; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/log-search-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/log-search-view.element.ts index 9443eb507a..7ca2dd25cd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/log-search-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/log-search-view.element.ts @@ -57,6 +57,10 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { static styles = [ UmbTextStyles, css` + :host { + margin-bottom: var(--uui-size-space-2); + } + uui-box { --uui-box-default-padding: 0; }