add router to media

src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace-edit.element.ts

@@ -0,0 +1,58 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html, nothing } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { UmbMediaWorkspaceContext } from './media-workspace.context';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-media-workspace-edit')
+export class UmbMediaWorkspaceEditElement extends UmbLitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
+
+	@state()
+	_key?: string;
+
+	#umbWorkspaceContext?: UmbMediaWorkspaceContext;
+
+	constructor() {
+		super();
+
+		this.consumeContext<UmbMediaWorkspaceContext>('umbWorkspaceContext', (instance) => {
+			this.#umbWorkspaceContext = instance;
+			this.#observeKey();
+		});
+	}
+
+	#observeKey() {
+		this.observe(this.#umbWorkspaceContext?.data, (data) => (this._key = data.key));
+	}
+
+	render() {
+		return html`<umb-workspace-content alias="Umb.Workspace.Media">
+			${this._key
+				? html`
+						<umb-workspace-action-menu
+							slot="action-menu"
+							entity-type="media"
+							unique="${this._key}"></umb-workspace-action-menu>
+				  `
+				: nothing}
+		</umb-workspace-content>`;
+	}
+}
+
+export default UmbMediaWorkspaceEditElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-media-workspace-edit': UmbMediaWorkspaceEditElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.context.ts

@@ -22,6 +22,7 @@ export class UmbMediaWorkspaceContext
 		return this.#data.getValue();
 	}
 
+	// TODO: this should be async because it can only return the key if the data is loaded.
 	getEntityKey() {
 		return this.getData()?.key || '';
 	}

src/Umbraco.Web.UI.Client/src/backoffice/media/media/workspace/media-workspace.element.ts

@@ -1,12 +1,13 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { css, html, nothing } from 'lit';
+import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import type { UmbWorkspaceEntityElement } from '../../../shared/components/workspace/workspace-entity-element.interface';
+import { IRoute, IRoutingInfo } from '@umbraco-cms/router';
 import { UmbMediaWorkspaceContext } from './media-workspace.context';
+import { UmbMediaWorkspaceEditElement } from './media-workspace-edit.element';
 import { UmbLitElement } from '@umbraco-cms/element';
 
 @customElement('umb-media-workspace')
-export class UmbMediaWorkspaceElement extends UmbLitElement implements UmbWorkspaceEntityElement {
+export class UmbMediaWorkspaceElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -18,31 +19,23 @@ export class UmbMediaWorkspaceElement extends UmbLitElement implements UmbWorksp
 		`,
 	];
 
-	private _workspaceContext: UmbMediaWorkspaceContext = new UmbMediaWorkspaceContext(this);
+	#workspaceContext = new UmbMediaWorkspaceContext(this);
+	#element = new UmbMediaWorkspaceEditElement();
 
 	@state()
-	_unique?: string;
-
-	public load(entityKey: string) {
-		this._workspaceContext.load(entityKey);
-		this._unique = entityKey;
-	}
-
-	public create(parentKey: string | null) {
-		this._workspaceContext.createScaffold(parentKey);
-	}
+	_routes: IRoute[] = [
+		{
+			path: 'edit/:key',
+			component: () => this.#element,
+			setup: (component: HTMLElement, info: IRoutingInfo) => {
+				const key = info.match.params.key;
+				this.#workspaceContext.load(key);
+			},
+		},
+	];
 
 	render() {
-		return html`<umb-workspace-content alias="Umb.Workspace.Media">
-			${this._unique
-				? html`
-						<umb-workspace-action-menu
-							slot="action-menu"
-							entity-type="media"
-							unique="${this._unique}"></umb-workspace-action-menu>
-				  `
-				: nothing}
-		</umb-workspace-content>`;
+		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
 }