From 987f3a3edefbc7377cea0a4c34d09d6c9e681f97 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 19 Feb 2024 13:20:17 +0000 Subject: [PATCH 1/2] Introduces `UmbTableColumnLayoutElement` interface --- .../src/packages/core/components/table/table.element.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts index a10cd863ba..21a6b29b5a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts @@ -32,6 +32,12 @@ export interface UmbTableColumn { allowSorting?: boolean; } +export interface UmbTableColumnLayoutElement extends HTMLElement { + column: UmbTableColumn; + item: UmbTableItem; + value: any; +} + export interface UmbTableConfig { allowSelection: boolean; hideIcon?: boolean; @@ -243,7 +249,7 @@ export class UmbTableElement extends LitElement { const value = item.data.find((data) => data.columnAlias === column.alias)?.value; if (column.elementName) { - const element = document.createElement(column.elementName) as any; // TODO: add interface for UmbTableColumnLayoutElement + const element = document.createElement(column.elementName) as UmbTableColumnLayoutElement; element.column = column; element.item = item; element.value = value; From 1ffaa3a4ee66cd0a69e0520cc2e7fa2b74b56ed5 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 19 Feb 2024 13:22:02 +0000 Subject: [PATCH 2/2] Adds table column layouts for Document name and state --- .../document-table-column-name.element.ts | 65 +++++++++++++++++++ .../document-table-column-state.element.ts | 40 ++++++++++++ .../document-table-collection-view.element.ts | 11 +++- 3 files changed, 115 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-name.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-name.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-name.element.ts new file mode 100644 index 0000000000..2ee3f9321e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-name.element.ts @@ -0,0 +1,65 @@ +import type { UmbDocumentCollectionItemModel } from '../../../types.js'; +import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; +import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; + +@customElement('umb-document-table-column-name') +export class UmbDocumentTableColumnNameElement extends UmbLitElement implements UmbTableColumnLayoutElement { + @state() + private _editDocumentPath = ''; + + @property({ type: Object, attribute: false }) + column!: UmbTableColumn; + + @property({ type: Object, attribute: false }) + item!: UmbTableItem; + + @property({ attribute: false }) + value!: UmbDocumentCollectionItemModel; + + constructor() { + super(); + + new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL) + .addAdditionalPath('document') + .onSetup(() => { + return { data: { entityType: 'document', preset: {} } }; + }) + .observeRouteBuilder((routeBuilder) => { + this._editDocumentPath = routeBuilder({}); + }); + } + + #onClick(event: Event) { + // TODO: [LK] Review the `stopPropagation` usage, as it causes a page reload. + // But we still need a say to prevent the `umb-table` from triggering a selection event. + event.stopPropagation(); + } + + render() { + return html``; + } + + static styles = [ + css` + uui-button { + text-align: left; + } + `, + ]; +} + +export default UmbDocumentTableColumnNameElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-document-table-column-name': UmbDocumentTableColumnNameElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts new file mode 100644 index 0000000000..b060f53e49 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/column-layouts/document-table-column-state.element.ts @@ -0,0 +1,40 @@ +import type { UmbDocumentCollectionItemModel } from '../../../types.js'; +import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import type { UmbTableColumn, UmbTableColumnLayoutElement, UmbTableItem } from '@umbraco-cms/backoffice/components'; + +@customElement('umb-document-table-column-state') +export class UmbDocumentTableColumnStateElement extends UmbLitElement implements UmbTableColumnLayoutElement { + @property({ type: Object, attribute: false }) + column!: UmbTableColumn; + + @property({ type: Object, attribute: false }) + item!: UmbTableItem; + + @property({ attribute: false }) + value!: UmbDocumentCollectionItemModel; + + render() { + switch (this.value.state) { + case 'Published': + return html`${this.localize.term('content_published')}`; + case 'PublishedPendingChanges': + return html`${this.localize.term('content_publishedPendingChanges')}`; + case 'Draft': + return html`${this.localize.term('content_unpublished')}`; + case 'NotCreated': + return html`${this.localize.term('content_notCreated')}`; + default: + // TODO: [LK] Check if we have a `SplitPascalCase`-esque utility function that could be used here. + return html`${this.value.state.replace(/([A-Z])/g, ' $1')}`; + } + } +} + +export default UmbDocumentTableColumnStateElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-document-table-column-state': UmbDocumentTableColumnStateElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts index 1824226cde..00dd967f02 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts @@ -14,6 +14,8 @@ import type { } from '@umbraco-cms/backoffice/components'; import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; +import './column-layouts/document-table-column-name.element.js'; +import './column-layouts/document-table-column-state.element.js'; @customElement('umb-document-table-collection-view') export class UmbDocumentTableCollectionViewElement extends UmbLitElement { @state() @@ -35,8 +37,15 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement { #systemColumns: Array = [ { - name: 'Name', + name: this.localize.term('general_name'), alias: 'entityName', + elementName: 'umb-document-table-column-name', + allowSorting: true, + }, + { + name: this.localize.term('content_publishStatus'), + alias: 'entityState', + elementName: 'umb-document-table-column-state', allowSorting: true, }, ];