added table

src/Umbraco.Web.UI.Client/src/backoffice/shared/collection/views/collection-view-media-table.element.ts

@@ -4,16 +4,56 @@ import { customElement, state } from 'lit/decorators.js';
 import type { UmbCollectionContext } from '../collection.context';
 import type { MediaDetails } from '@umbraco-cms/models';
 import { UmbLitElement } from '@umbraco-cms/element';
+import {
+	UmbTableColumn,
+	UmbTableConfig,
+	UmbTableDeselectedEvent,
+	UmbTableElement,
+	UmbTableItem,
+	UmbTableOrderedEvent,
+	UmbTableSelectedEvent,
+} from '../../components/table';
 
 @customElement('umb-collection-view-media-table')
 export class UmbCollectionViewMediaTableElement extends UmbLitElement {
-	static styles = [UUITextStyles, css``];
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				box-sizing: border-box;
+				height: 100%;
+				width: 100%;
+				padding: var(--uui-size-space-3) var(--uui-size-space-6);
+			}
+
+			umb-table {
+				padding: 0; /* To fix the embedded padding in the table component. */
+			}
+		`,
+	];
 
 	@state()
 	private _mediaItems?: Array<MediaDetails>;
 
 	@state()
-	private _selection?: Array<string>;
+	private _tableConfig: UmbTableConfig = {
+		allowSelection: true,
+	};
+
+	@state()
+	private _tableColumns: Array<UmbTableColumn> = [
+		{
+			name: 'Name',
+			alias: 'mediaName',
+		},
+	];
+
+	@state()
+	private _tableItems: Array<UmbTableItem> = [];
+
+	@state()
+	private _selection: Array<string> = [];
 
 	private _collectionContext?: UmbCollectionContext<MediaDetails>;
 
@@ -30,6 +70,7 @@ export class UmbCollectionViewMediaTableElement extends UmbLitElement {
 
 		this.observe(this._collectionContext.data, (nodes) => {
 			this._mediaItems = nodes;
+			this._createTableItems(this._mediaItems);
 		});
 
 		this.observe(this._collectionContext.selection, (selection) => {
@@ -37,17 +78,52 @@ export class UmbCollectionViewMediaTableElement extends UmbLitElement {
 		});
 	}
 
+	private _createTableItems(mediaItems: Array<MediaDetails>) {
+		// TODO: I guess the type error below will go away when we get an entity based MediaDetails model instead of tree based.
+		// @ts-ignore // TODO: Remove ts-ignore when Media type gets fixed.
+		this._tableItems = mediaItems.map((item) => {
+			return {
+				key: item.key,
+				icon: item.icon,
+				data: [
+					{
+						columnAlias: 'mediaName',
+						value: item.name || 'Untitled',
+					},
+				],
+			};
+		});
+		console.log('NAME??', this._tableColumns);
+	}
+
+	private _handleSelected(event: UmbTableSelectedEvent) {
+		event.stopPropagation();
+		console.log('HANDLE SELECT');
+	}
+
+	private _handleDeselected(event: UmbTableDeselectedEvent) {
+		event.stopPropagation();
+		console.log('HANDLE DESELECT');
+	}
+
+	private _handleOrdering(event: UmbTableOrderedEvent) {
+		const table = event.target as UmbTableElement;
+		const orderingColumn = table.orderingColumn;
+		const orderingDesc = table.orderingDesc;
+		console.log(`fetch media items, order column: ${orderingColumn}, desc: ${orderingDesc}`);
+	}
+
 	render() {
-		return html`<h1>umb-collection-view-media-table</h1>
-			<div>
-				<h3>Selected Media Items:</h3>
-				<ul>
-					${this._selection?.map((key) => {
-						const mediaItem = this._mediaItems?.find((item) => item.key === key);
-						return html`<li>${mediaItem?.name}</li>`;
-					})}
-				</ul>
-			</div> `;
+		return html`
+			<umb-table
+				.config=${this._tableConfig}
+				.columns=${this._tableColumns}
+				.items=${this._tableItems}
+				.selection=${this._selection}
+				@selected="${this._handleSelected}"
+				@deselected="${this._handleDeselected}"
+				@ordered="${this._handleOrdering}"></umb-table>
+		`;
 	}
 }