From 5e6e4d262bcd7d18071b8aa6025f1b4654977382 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 28 Oct 2024 18:06:15 +0000 Subject: [PATCH 1/4] Adds Document URL Repository --- .../documents/documents/repository/index.ts | 1 + .../documents/repository/manifests.ts | 8 ++++- .../documents/repository/url/constants.ts | 2 ++ .../repository/url/document-url.repository.ts | 13 +++++++++ .../url/document-url.server.data-source.ts | 29 +++++++++++++++++++ .../url/document-url.store.context-token.ts | 4 +++ .../repository/url/document-url.store.ts | 23 +++++++++++++++ .../documents/repository/url/index.ts | 2 ++ .../documents/repository/url/manifests.ts | 18 ++++++++++++ .../documents/repository/url/types.ts | 9 ++++++ 10 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 src/packages/documents/documents/repository/url/constants.ts create mode 100644 src/packages/documents/documents/repository/url/document-url.repository.ts create mode 100644 src/packages/documents/documents/repository/url/document-url.server.data-source.ts create mode 100644 src/packages/documents/documents/repository/url/document-url.store.context-token.ts create mode 100644 src/packages/documents/documents/repository/url/document-url.store.ts create mode 100644 src/packages/documents/documents/repository/url/index.ts create mode 100644 src/packages/documents/documents/repository/url/manifests.ts create mode 100644 src/packages/documents/documents/repository/url/types.ts diff --git a/src/packages/documents/documents/repository/index.ts b/src/packages/documents/documents/repository/index.ts index f80023cfbe..be04ad8020 100644 --- a/src/packages/documents/documents/repository/index.ts +++ b/src/packages/documents/documents/repository/index.ts @@ -1,6 +1,7 @@ export { UmbDocumentDetailRepository, UMB_DOCUMENT_DETAIL_REPOSITORY_ALIAS } from './detail/index.js'; export { UmbDocumentItemRepository, UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS } from './item/index.js'; export { UmbDocumentPublishingRepository, UMB_DOCUMENT_PUBLISHING_REPOSITORY_ALIAS } from './publishing/index.js'; +export { UmbDocumentUrlRepository, UMB_DOCUMENT_URL_REPOSITORY_ALIAS } from './url/index.js'; export { UmbDocumentPreviewRepository } from './preview/index.js'; export type { UmbDocumentItemModel } from './item/types.js'; diff --git a/src/packages/documents/documents/repository/manifests.ts b/src/packages/documents/documents/repository/manifests.ts index 71c01115e5..c7ab4b7fdc 100644 --- a/src/packages/documents/documents/repository/manifests.ts +++ b/src/packages/documents/documents/repository/manifests.ts @@ -1,5 +1,11 @@ import { manifests as detailManifests } from './detail/manifests.js'; import { manifests as itemManifests } from './item/manifests.js'; import { manifests as publishingManifests } from './publishing/manifests.js'; +import { manifests as urlManifests } from './url/manifests.js'; -export const manifests: Array = [...detailManifests, ...itemManifests, ...publishingManifests]; +export const manifests: Array = [ + ...detailManifests, + ...itemManifests, + ...publishingManifests, + ...urlManifests, +]; diff --git a/src/packages/documents/documents/repository/url/constants.ts b/src/packages/documents/documents/repository/url/constants.ts new file mode 100644 index 0000000000..ba77e1ff72 --- /dev/null +++ b/src/packages/documents/documents/repository/url/constants.ts @@ -0,0 +1,2 @@ +export const UMB_DOCUMENT_URL_REPOSITORY_ALIAS = 'Umb.Repository.Document.Url'; +export const UMB_DOCUMENT_URL_STORE_ALIAS = 'Umb.Store.Document.Url'; diff --git a/src/packages/documents/documents/repository/url/document-url.repository.ts b/src/packages/documents/documents/repository/url/document-url.repository.ts new file mode 100644 index 0000000000..6b65fe3545 --- /dev/null +++ b/src/packages/documents/documents/repository/url/document-url.repository.ts @@ -0,0 +1,13 @@ +import type { UmbDocumentUrlsModel } from './types.js'; +import { UMB_DOCUMENT_URL_STORE_CONTEXT } from './document-url.store.context-token.js'; +import { UmbDocumentUrlServerDataSource } from './document-url.server.data-source.js'; +import { UmbItemRepositoryBase } from '@umbraco-cms/backoffice/repository'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +export class UmbDocumentUrlRepository extends UmbItemRepositoryBase { + constructor(host: UmbControllerHost) { + super(host, UmbDocumentUrlServerDataSource, UMB_DOCUMENT_URL_STORE_CONTEXT); + } +} + +export { UmbDocumentUrlRepository as api }; diff --git a/src/packages/documents/documents/repository/url/document-url.server.data-source.ts b/src/packages/documents/documents/repository/url/document-url.server.data-source.ts new file mode 100644 index 0000000000..2993e37a40 --- /dev/null +++ b/src/packages/documents/documents/repository/url/document-url.server.data-source.ts @@ -0,0 +1,29 @@ +import type { UmbDocumentUrlsModel } from './types.js'; +import { DocumentService } from '@umbraco-cms/backoffice/external/backend-api'; +import { UmbItemServerDataSourceBase } from '@umbraco-cms/backoffice/repository'; +import type { DocumentUrlInfoResponseModel } from '@umbraco-cms/backoffice/external/backend-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; + +/** + * A server data source for Document URLs + * @class UmbDocumentUrlServerDataSource + * @implements {DocumentTreeDataSource} + */ +export class UmbDocumentUrlServerDataSource extends UmbItemServerDataSourceBase< + DocumentUrlInfoResponseModel, + UmbDocumentUrlsModel +> { + /** + * Creates an instance of UmbDocumentUrlServerDataSource. + * @param {UmbControllerHost} host - The controller host for this controller to be appended to + * @memberof UmbDocumentUrlServerDataSource + */ + constructor(host: UmbControllerHost) { + super(host, { getItems, mapper }); + } +} + +/* eslint-disable local-rules/no-direct-api-import */ +const getItems = (uniques: Array) => DocumentService.getDocumentUrls({ id: uniques }); + +const mapper = (item: DocumentUrlInfoResponseModel): UmbDocumentUrlsModel => ({ unique: item.id, urls: item.urlInfos }); diff --git a/src/packages/documents/documents/repository/url/document-url.store.context-token.ts b/src/packages/documents/documents/repository/url/document-url.store.context-token.ts new file mode 100644 index 0000000000..f2ac89657f --- /dev/null +++ b/src/packages/documents/documents/repository/url/document-url.store.context-token.ts @@ -0,0 +1,4 @@ +import type UmbDocumentUrlStore from './document-url.store.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; + +export const UMB_DOCUMENT_URL_STORE_CONTEXT = new UmbContextToken('UmbDocumentUrlStore'); diff --git a/src/packages/documents/documents/repository/url/document-url.store.ts b/src/packages/documents/documents/repository/url/document-url.store.ts new file mode 100644 index 0000000000..3f5a9f514e --- /dev/null +++ b/src/packages/documents/documents/repository/url/document-url.store.ts @@ -0,0 +1,23 @@ +import type { UmbDocumentDetailModel } from '../../types.js'; +import { UMB_DOCUMENT_URL_STORE_CONTEXT } from './document-url.store.context-token.js'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbItemStoreBase } from '@umbraco-cms/backoffice/store'; + +/** + * @class UmbDocumentUrlStore + * @augments {UmbStoreBase} + * @description - Data Store for Document URLs + */ + +export class UmbDocumentUrlStore extends UmbItemStoreBase { + /** + * Creates an instance of UmbDocumentUrlStore. + * @param {UmbControllerHost} host - The controller host for this controller to be appended to + * @memberof UmbDocumentUrlStore + */ + constructor(host: UmbControllerHost) { + super(host, UMB_DOCUMENT_URL_STORE_CONTEXT.toString()); + } +} + +export default UmbDocumentUrlStore; diff --git a/src/packages/documents/documents/repository/url/index.ts b/src/packages/documents/documents/repository/url/index.ts new file mode 100644 index 0000000000..f5bc60dacd --- /dev/null +++ b/src/packages/documents/documents/repository/url/index.ts @@ -0,0 +1,2 @@ +export { UmbDocumentUrlRepository } from './document-url.repository.js'; +export { UMB_DOCUMENT_URL_REPOSITORY_ALIAS } from './constants.js'; diff --git a/src/packages/documents/documents/repository/url/manifests.ts b/src/packages/documents/documents/repository/url/manifests.ts new file mode 100644 index 0000000000..d4545015b2 --- /dev/null +++ b/src/packages/documents/documents/repository/url/manifests.ts @@ -0,0 +1,18 @@ +import { UMB_DOCUMENT_URL_REPOSITORY_ALIAS, UMB_DOCUMENT_URL_STORE_ALIAS } from './constants.js'; +import type { ManifestItemStore, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry'; + +const urlRepository: ManifestRepository = { + type: 'repository', + alias: UMB_DOCUMENT_URL_REPOSITORY_ALIAS, + name: 'Document Url Repository', + api: () => import('./document-url.repository.js'), +}; + +const urlStore: ManifestItemStore = { + type: 'itemStore', + alias: UMB_DOCUMENT_URL_STORE_ALIAS, + name: 'Document Url Store', + api: () => import('./document-url.store.js'), +}; + +export const manifests = [urlRepository, urlStore]; diff --git a/src/packages/documents/documents/repository/url/types.ts b/src/packages/documents/documents/repository/url/types.ts new file mode 100644 index 0000000000..7291179f31 --- /dev/null +++ b/src/packages/documents/documents/repository/url/types.ts @@ -0,0 +1,9 @@ +export interface UmbDocumentUrlsModel { + unique: string; + urls: Array; +} + +export interface UmbDocumentUrlModel { + culture?: string | null; + url?: string; +} From 2d7b2d7c6e97be4eb21d50dc28aa19676ff56e2f Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 28 Oct 2024 18:07:47 +0000 Subject: [PATCH 2/4] Extracts Document Workspace Info Links to its own component Refactored to use the new Document URL Repository. Plus other housekeeping on the main Document Workspace Info component. --- ...ument-workspace-view-info-links.element.ts | 134 ++++++++++++++++++ .../document-workspace-view-info.element.ts | 110 ++------------ 2 files changed, 146 insertions(+), 98 deletions(-) create mode 100644 src/packages/documents/documents/workspace/views/info/document-workspace-view-info-links.element.ts diff --git a/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-links.element.ts b/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-links.element.ts new file mode 100644 index 0000000000..6b0fcb58ab --- /dev/null +++ b/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-links.element.ts @@ -0,0 +1,134 @@ +import { UmbDocumentUrlRepository } from '../../../repository/url/document-url.repository.js'; +import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js'; +import type { UmbDocumentUrlModel } from '../../../repository/url/types.js'; +import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/entity-action'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action'; + +@customElement('umb-document-workspace-view-info-links') +export class UmbDocumentWorkspaceViewInfoLinksElement extends UmbLitElement { + #documentUrlRepository = new UmbDocumentUrlRepository(this); + + #workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE; + + @state() + private _invariantCulture = 'en-US'; + + @state() + private _items?: Array; + + constructor() { + super(); + + this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (context) => { + context.addEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, () => { + this.#requestUrls(); + }); + }); + + this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => { + this.#workspaceContext = context; + this.#requestUrls(); + }); + } + + async #requestUrls() { + const unique = this.#workspaceContext?.getUnique(); + if (!unique) throw new Error('Document unique is required'); + + const { data } = await this.#documentUrlRepository.requestItems([unique]); + + if (data?.length) { + this._items = data[0].urls; + } + } + + override render() { + return html` + + + + `; + } + + #renderUrls() { + if (!this._items) return nothing; + return html` + ${repeat( + this._items!, + (item) => item.culture, + (item) => html` + + ${item.culture} + ${item.url} + + + `, + )} + `; + } + + #renderUnpublished() { + return html` +
+ ${this._invariantCulture} + + + +
+ `; + } + + static override styles = [ + UmbTextStyles, + css` + #link-section { + display: flex; + flex-direction: column; + text-align: left; + } + + .link-item { + padding: var(--uui-size-space-4) var(--uui-size-space-6); + display: grid; + grid-template-columns: auto 1fr auto; + gap: var(--uui-size-6); + color: inherit; + text-decoration: none; + + &:is(a) { + cursor: pointer; + } + + &:is(a):hover { + background: var(--uui-color-divider); + } + + .culture { + color: var(--uui-color-divider-emphasis); + } + + uui-icon { + margin-right: var(--uui-size-space-2); + vertical-align: middle; + } + } + `, + ]; +} + +export default UmbDocumentWorkspaceViewInfoLinksElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-document-workspace-view-info-links': UmbDocumentWorkspaceViewInfoLinksElement; + } +} diff --git a/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts b/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts index c6a42baecf..212f78cf05 100644 --- a/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts +++ b/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts @@ -2,36 +2,29 @@ import { UMB_DOCUMENT_PROPERTY_DATASET_CONTEXT } from '../../../property-dataset import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js'; import type { UmbDocumentVariantModel } from '../../../types.js'; import { TimeOptions } from './utils.js'; -import { css, customElement, html, ifDefined, nothing, repeat, state } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, ifDefined, nothing, state } from '@umbraco-cms/backoffice/external/lit'; import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace'; import { UMB_TEMPLATE_PICKER_MODAL, UmbTemplateItemRepository } from '@umbraco-cms/backoffice/template'; -import type { DocumentUrlInfoModel } from '@umbraco-cms/backoffice/external/backend-api'; import type { UmbDocumentTypeDetailModel } from '@umbraco-cms/backoffice/document-type'; import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router'; // import of local components +import './document-workspace-view-info-links.element.js'; import './document-workspace-view-info-history.element.js'; import './document-workspace-view-info-reference.element.js'; @customElement('umb-document-workspace-view-info') export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement { - @state() - private _invariantCulture = 'en-US'; - @state() private _documentUnique = ''; + // Document Type @state() - private _urls?: Array; - - /**Document Type */ - @state() - private _documentTypeUnique = ''; + private _documentTypeUnique?: string = ''; @state() private _documentTypeName?: string; @@ -42,7 +35,7 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement { @state() private _allowedTemplates?: UmbDocumentTypeDetailModel['allowedTemplates']; - /**Template */ + // Template @state() private _templateUnique = ''; @@ -78,9 +71,8 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement { }); this.consumeContext(UMB_DOCUMENT_PROPERTY_DATASET_CONTEXT, (context) => { - this.observe(context.currentVariant, (value) => { - // TODO: get the correct type automatically - this._variant = value as UmbDocumentVariantModel; + this.observe(context.currentVariant, (currentVariant) => { + this._variant = currentVariant; }); }); } @@ -98,14 +90,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement { '_documentType', ); - this.observe( - this.#workspaceContext.urls, - (urls) => { - this._urls = urls; - }, - '_documentUrls', - ); - this.observe( this.#workspaceContext.unique, (unique) => { @@ -160,50 +144,19 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement { override render() { return html`
- - - - + - - +
- ${this.#renderGeneralSection()} + + ${this.#renderGeneralSection()} +
`; } - #renderLinksSection() { - /** TODO Make sure link section is completed */ - if (this._urls && this._urls.length) { - return html` - ${repeat( - this._urls, - (url) => url.culture, - (url) => html` - - ${url.culture} - ${url.url} - - - `, - )} - `; - } else { - return html` -
- ${this._invariantCulture} - -
- `; - } - } - #renderGeneralSection() { const editDocumentTypePath = this._routeBuilder?.({ entityType: 'document-type' }) ?? ''; const editTemplatePath = this._routeBuilder?.({ entityType: 'template' }) ?? ''; @@ -292,7 +245,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement { } static override styles = [ - UmbTextStyles, css` :host { display: grid; @@ -332,44 +284,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement { .variant-state > span { color: var(--uui-color-divider-emphasis); } - - // Link section - - #link-section { - display: flex; - flex-direction: column; - text-align: left; - } - - .link-item { - padding: var(--uui-size-space-4) var(--uui-size-space-6); - display: grid; - grid-template-columns: auto 1fr auto; - gap: var(--uui-size-6); - color: inherit; - text-decoration: none; - } - - .link-language { - color: var(--uui-color-divider-emphasis); - } - - .link-content.italic { - font-style: italic; - } - - .link-item uui-icon { - margin-right: var(--uui-size-space-2); - vertical-align: middle; - } - - .link-item.with-href { - cursor: pointer; - } - - .link-item.with-href:hover { - background: var(--uui-color-divider); - } `, ]; } From aa8718ebc63483acbbf79bb261b4761ea111cf86 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 28 Oct 2024 18:11:12 +0000 Subject: [PATCH 3/4] Refactored Document Workspace Info History component to listen for the "Request Reload Structure" event --- .../history/history-item.element.ts | 1 + ...ent-workspace-view-info-history.element.ts | 148 +++++++++--------- 2 files changed, 79 insertions(+), 70 deletions(-) diff --git a/src/packages/core/components/history/history-item.element.ts b/src/packages/core/components/history/history-item.element.ts index 92671b347c..a5814884c3 100644 --- a/src/packages/core/components/history/history-item.element.ts +++ b/src/packages/core/components/history/history-item.element.ts @@ -63,6 +63,7 @@ export class UmbHistoryItemElement extends UmbLitElement { .user-info div { display: flex; flex-direction: column; + min-width: var(--uui-size-60); } .detail { diff --git a/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts b/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts index 889c24988a..cfa0bc151a 100644 --- a/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts +++ b/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts @@ -1,33 +1,41 @@ import type { UmbDocumentAuditLogModel } from '../../../audit-log/types.js'; import { UmbDocumentAuditLogRepository } from '../../../audit-log/index.js'; import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js'; -import { TimeOptions, getDocumentHistoryTagStyleAndText } from './utils.js'; -import { css, html, customElement, state, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { getDocumentHistoryTagStyleAndText, TimeOptions } from './utils.js'; +import { css, customElement, html, nothing, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbPaginationManager } from '@umbraco-cms/backoffice/utils'; -import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui'; -import type { UmbUserItemModel } from '@umbraco-cms/backoffice/user'; +import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/entity-action'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UmbUserItemRepository } from '@umbraco-cms/backoffice/user'; +import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action'; +import type { ManifestEntityAction } from '@umbraco-cms/backoffice/entity-action'; +import type { UmbUserItemModel } from '@umbraco-cms/backoffice/user'; +import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-document-workspace-view-info-history') export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement { - @state() - _currentPageNumber = 1; + #allowedActions = new Set(['Umb.EntityAction.Document.Rollback']); - @state() - _totalPages = 1; - - @state() - private _items: Array = []; - - #workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE; #auditLogRepository = new UmbDocumentAuditLogRepository(this); + #pagination = new UmbPaginationManager(); + #userItemRepository = new UmbUserItemRepository(this); #userMap = new Map(); + #workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE; + + @state() + private _currentPageNumber = 1; + + @state() + private _items: Array = []; + + @state() + private _totalPages = 1; + constructor() { super(); @@ -35,12 +43,23 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement { this.observe(this.#pagination.currentPage, (number) => (this._currentPageNumber = number)); this.observe(this.#pagination.totalPages, (number) => (this._totalPages = number)); + this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (context) => { + context.addEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, () => { + this.#requestAuditLogs(); + }); + }); + this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (instance) => { this.#workspaceContext = instance; this.#requestAuditLogs(); }); } + #onPageChange(event: UUIPaginationEvent) { + this.#pagination.setCurrentPageNumber(event.target?.current); + this.#requestAuditLogs(); + } + async #requestAuditLogs() { const unique = this.#workspaceContext?.getUnique(); if (!unique) throw new Error('Document unique is required'); @@ -58,11 +77,6 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement { } } - #onPageChange(event: UUIPaginationEvent) { - this.#pagination.setCurrentPageNumber(event.target?.current); - this.#requestAuditLogs(); - } - async #requestAndCacheUserItems() { const allUsers = this._items?.map((item) => item.user.unique).filter(Boolean) as string[]; const uniqueUsers = [...new Set(allUsers)]; @@ -83,90 +97,84 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement { } override render() { - return html` - History - + manifest.alias === 'Umb.EntityAction.Document.Rollback'}> + .filter=${(manifest: ManifestEntityAction) => this.#allowedActions.has(manifest.alias)}> - ${this._items ? this.#renderHistory() : html` `} + ${when( + this._items, + () => this.#renderHistory(), + () => html`
`, + )} ${this.#renderPagination()} - `; + + `; } #renderHistory() { - if (this._items && this._items.length) { - return html` - - ${repeat( - this._items, - (item) => item.timestamp, - (item) => { - const { text, style } = getDocumentHistoryTagStyleAndText(item.logType); - const user = this.#userMap.get(item.user.unique); - - return html` + ${repeat( + this._items, + (item) => item.timestamp, + (item) => { + const { text, style } = getDocumentHistoryTagStyleAndText(item.logType); + const user = this.#userMap.get(item.user.unique); + + return html` + - - + .imgUrls=${user?.avatarUrls ?? []}> + +
${this.localize.term(text.label, item.parameters)} - ${this.localize.term(text.desc, item.parameters)} - - `; - }, - )} - - `; - } else { - return html`${this.localize.term('content_noItemsToShow')}`; - } + ${this.localize.term(text.desc, item.parameters)} +
+ + `; + }, + )} + + `; } #renderPagination() { + if (this._totalPages <= 1) return nothing; return html` - ${this._totalPages > 1 - ? html` - - ` - : nothing} + `; } static override styles = [ UmbTextStyles, css` - uui-loader-circle { - font-size: 2rem; - } - - uui-tag uui-icon { - margin-right: var(--uui-size-space-1); + #loader { + display: flex; + justify-content: center; } .log-type { - flex-grow: 1; - gap: var(--uui-size-space-2); + display: grid; + grid-template-columns: var(--uui-size-40) auto; + gap: var(--uui-size-layout-1); } uui-pagination { flex: 1; - display: inline-block; - } - - .pagination { display: flex; justify-content: center; margin-top: var(--uui-size-layout-1); From 04a10a4f60e2c6d26aa7735f2264facd70de8a32 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 28 Oct 2024 18:13:07 +0000 Subject: [PATCH 4/4] Refactored Document Workspace Info Reference component --- ...t-workspace-view-info-reference.element.ts | 118 +++++++++--------- 1 file changed, 58 insertions(+), 60 deletions(-) diff --git a/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts b/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts index 28ad1b37ae..12cccd21f1 100644 --- a/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts +++ b/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-reference.element.ts @@ -1,21 +1,18 @@ import { UmbDocumentReferenceRepository } from '../../../reference/index.js'; -import { css, html, customElement, state, nothing, repeat, property } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui'; +import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; +import { isDefaultReference, isDocumentReference, isMediaReference } from '@umbraco-cms/backoffice/relations'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace'; import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router'; -import { - isDefaultReference, - isDocumentReference, - isMediaReference, - type UmbReferenceModel, -} from '@umbraco-cms/backoffice/relations'; +import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace'; +import type { UmbReferenceModel } from '@umbraco-cms/backoffice/relations'; +import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui'; @customElement('umb-document-workspace-view-info-reference') export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement { #itemsPerPage = 10; - #referenceRepository; + + #referenceRepository = new UmbDocumentReferenceRepository(this); @property() documentUnique = ''; @@ -34,7 +31,6 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement constructor() { super(); - this.#referenceRepository = new UmbDocumentReferenceRepository(this); new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) .addAdditionalPath('document') @@ -113,63 +109,65 @@ export class UmbDocumentWorkspaceViewInfoReferenceElement extends UmbLitElement } override render() { - if (this._items && this._items.length > 0) { - return html` - - - - Name - Status - Type Name - Type - - - ${repeat( - this._items, - (item) => item.id, - (item) => - html` - - - - - ${isDocumentReference(item) - ? html` - ${item.name} - ` - : item.name} - - - ${this.#getPublishedStatus(item) - ? this.localize.term('content_published') - : this.localize.term('content_unpublished')} - - ${this.#getContentTypeName(item)} - ${this.#getContentType(item)} - `, - )} - - - ${this.#renderReferencePagination()}`; - } else { - return nothing; - } + if (!this._items?.length) return nothing; + return html` + + + + + Name + Status + Type Name + Type + + ${repeat( + this._items, + (item) => item.id, + (item) => html` + + + + + + ${when( + isDocumentReference(item), + () => html` + + ${item.name} + + `, + () => item.name, + )} + + + ${this.#getPublishedStatus(item) + ? this.localize.term('content_published') + : this.localize.term('content_unpublished')} + + ${this.#getContentTypeName(item)} + ${this.#getContentType(item)} + + `, + )} + + + ${this.#renderReferencePagination()} + `; } #renderReferencePagination() { if (!this._total) return nothing; const totalPages = Math.ceil(this._total / this.#itemsPerPage); - if (totalPages <= 1) return nothing; - return html``; + return html` + + `; } static override styles = [