Merge pull request #1239 from umbraco/feature/table-column-layout-element

Feature: `UmbTableColumnLayoutElement` interface

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;

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`<uui-button
+			look="default"
+			color="default"
+			compact
+			href="${this._editDocumentPath}edit/${this.value.unique}"
+			label="${this.value.name}"
+			@click=${this.#onClick}></uui-button>`;
+	}
+
+	static styles = [
+		css`
+			uui-button {
+				text-align: left;
+			}
+		`,
+	];
+}
+
+export default UmbDocumentTableColumnNameElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-table-column-name': UmbDocumentTableColumnNameElement;
+	}
+}

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`<uui-tag color="positive" look="secondary">${this.localize.term('content_published')}</uui-tag>`;
+			case 'PublishedPendingChanges':
+				return html`<uui-tag color="warning" look="secondary">${this.localize.term('content_publishedPendingChanges')}</uui-tag>`;
+			case 'Draft':
+				return html`<uui-tag color="default" look="secondary">${this.localize.term('content_unpublished')}</uui-tag>`;
+			case 'NotCreated':
+				return html`<uui-tag color="danger" look="secondary">${this.localize.term('content_notCreated')}</uui-tag>`;
+			default:
+				// TODO: [LK] Check if we have a `SplitPascalCase`-esque utility function that could be used here.
+				return html`<uui-tag color="danger" look="secondary">${this.value.state.replace(/([A-Z])/g, ' $1')}</uui-tag>`;
+		}
+	}
+}
+
+export default UmbDocumentTableColumnStateElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-document-table-column-state': UmbDocumentTableColumnStateElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/table/document-table-collection-view.element.ts

@@ -16,6 +16,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()
@@ -37,8 +39,15 @@ export class UmbDocumentTableCollectionViewElement extends UmbLitElement {
 
 	#systemColumns: Array<UmbTableColumn> = [
 		{
-			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,
 		},
 	];