add route to media types

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

@@ -0,0 +1,69 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
+import { UmbWorkspaceMediaTypeContext } from './media-type-workspace.context';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-media-type-workspace-edit')
+export class UmbMediaTypeWorkspaceEditElement extends UmbLitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			#header {
+				display: flex;
+				padding: 0 var(--uui-size-space-6);
+				gap: var(--uui-size-space-4);
+				width: 100%;
+			}
+			uui-input {
+				width: 100%;
+			}
+		`,
+	];
+
+	@state()
+	private _mediaTypeName?: string | null = '';
+	#workspaceContext?: UmbWorkspaceMediaTypeContext;
+
+	constructor() {
+		super();
+
+		this.consumeContext<UmbWorkspaceMediaTypeContext>('umbWorkspaceContext', (instance) => {
+			this.#workspaceContext = instance;
+			this.#observeName();
+		});
+	}
+
+	#observeName() {
+		if (!this.#workspaceContext) return;
+		this.observe(this.#workspaceContext.name, (name) => {
+			this._mediaTypeName = name;
+		});
+	}
+
+	// TODO. find a way where we don't have to do this for all Workspaces.
+	#handleInput(event: UUIInputEvent) {
+		if (event instanceof UUIInputEvent) {
+			const target = event.composedPath()[0] as UUIInputElement;
+
+			if (typeof target?.value === 'string') {
+				this.#workspaceContext?.setName(target.value);
+			}
+		}
+	}
+
+	render() {
+		return html`<umb-workspace-layout alias="Umb.Workspace.MediaType">
+			<uui-input id="header" slot="header" .value=${this._mediaTypeName} @input="${this.#handleInput}"></uui-input>
+		</umb-workspace-layout>`;
+	}
+}
+
+export default UmbMediaTypeWorkspaceEditElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-media-type-workspace-edit': UmbMediaTypeWorkspaceEditElement;
+	}
+}

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

@@ -1,13 +1,13 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
-import { UmbWorkspaceEntityElement } from '../../../../backoffice/shared/components/workspace/workspace-entity-element.interface';
+import { customElement, state } from 'lit/decorators.js';
 import { UmbWorkspaceMediaTypeContext } from './media-type-workspace.context';
+import { UmbMediaTypeWorkspaceEditElement } from './media-type-workspace-edit.element';
 import { UmbLitElement } from '@umbraco-cms/element';
+import { IRoutingInfo } from '@umbraco-cms/router';
 
 @customElement('umb-media-type-workspace')
-export class UmbMediaTypeWorkspaceElement extends UmbLitElement implements UmbWorkspaceEntityElement {
+export class UmbMediaTypeWorkspaceElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -23,49 +23,23 @@ export class UmbMediaTypeWorkspaceElement extends UmbLitElement implements UmbWo
 		`,
 	];
 
-	@state()
-	private _unique?: string;
-
-	@state()
-	private _mediaTypeName?: string | null = '';
-
-	@property()
-	id!: string;
-
 	#workspaceContext = new UmbWorkspaceMediaTypeContext(this);
+	#element = new UmbMediaTypeWorkspaceEditElement();
 
-	public load(entityKey: string) {
-		this.#workspaceContext.load(entityKey);
-		this._unique = entityKey;
-	}
-
-	public create() {
-		this.#workspaceContext.createScaffold();
-	}
-
-	async connectedCallback() {
-		super.connectedCallback();
-
-		this.observe(this.#workspaceContext.name, (name) => {
-			this._mediaTypeName = name;
-		});
-	}
-
-	// TODO. find a way where we don't have to do this for all Workspaces.
-	#handleInput(event: UUIInputEvent) {
-		if (event instanceof UUIInputEvent) {
-			const target = event.composedPath()[0] as UUIInputElement;
-
-			if (typeof target?.value === 'string') {
-				this.#workspaceContext.setName(target.value);
-			}
-		}
-	}
+	@state()
+	_routes: any[] = [
+		{
+			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-layout alias="Umb.Workspace.MediaType">
-			<uui-input id="header" slot="header" .value=${this._unique} @input="${this.#handleInput}"></uui-input>
-		</umb-workspace-layout>`;
+		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
 	}
 }
 

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

@@ -32,7 +32,8 @@ export class UmbMediaWorkspaceEditElement extends UmbLitElement {
 	}
 
 	#observeKey() {
-		this.observe(this.#umbWorkspaceContext?.data, (data) => (this._key = data.key));
+		if (!this.#umbWorkspaceContext) return;
+		this.observe(this.#umbWorkspaceContext.data, (data) => (this._key = data?.key));
 	}
 
 	render() {