add routes to member group

src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace-edit.element.ts

@@ -0,0 +1,34 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+/**
+ * @element umb-member-group-edit-workspace
+ * @description - Element for displaying a Member Group Workspace
+ */
+@customElement('umb-member-group-workspace-edit')
+export class UmbMemberGroupWorkspaceEditElement extends UmbLitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
+
+	render() {
+		return html` <umb-workspace-layout alias="Umb.Workspace.MemberGroup"> Member Group </umb-workspace-layout> `;
+	}
+}
+
+export default UmbMemberGroupWorkspaceEditElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-member-group-workspace-edit': UmbMemberGroupWorkspaceEditElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/members/member-groups/workspace/member-group-workspace.element.ts

@@ -1,9 +1,9 @@
-import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbWorkspaceEntityElement } from '../../../../backoffice/shared/components/workspace/workspace-entity-element.interface';
+import { IRoutingInfo } from 'router-slot';
 import { UmbWorkspaceMemberGroupContext } from './member-group-workspace.context';
+import { UmbMemberGroupWorkspaceEditElement } from './member-group-workspace-edit.element';
 import { UmbLitElement } from '@umbraco-cms/element';
 
 /**
@@ -11,7 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/element';
  * @description - Element for displaying a Member Group Workspace
  */
 @customElement('umb-member-group-workspace')
-export class UmbMemberGroupWorkspaceElement extends UmbLitElement implements UmbWorkspaceEntityElement {
+export class UmbMemberGroupWorkspaceElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -20,59 +20,26 @@ export class UmbMemberGroupWorkspaceElement extends UmbLitElement implements Umb
 				width: 100%;
 				height: 100%;
 			}
-
-			#header {
-				/* TODO: can this be applied from layout slot CSS? */
-				margin: 0 var(--uui-size-layout-1);
-				flex: 1 1 auto;
-			}
 		`,
 	];
-	
+
+	#workspaceContext = new UmbWorkspaceMemberGroupContext(this);
+	#element = new UmbMemberGroupWorkspaceEditElement();
+
 	@state()
-	_unique?: string;
-	
-	@state()
-	private _memberGroupName = '';
-	
-	#workspaceContext: UmbWorkspaceMemberGroupContext = new UmbWorkspaceMemberGroupContext(this);
-
-	public load(entityKey: string) {
-		this.#workspaceContext.load(entityKey);
-		this._unique = entityKey;
-	}
-
-	public create() {
-		this.#workspaceContext.createScaffold();
-	}
-
-	async connectedCallback() {
-		super.connectedCallback();
-
-		this.observe(this.#workspaceContext.data, (memberGroup) => {
-			if (memberGroup && memberGroup.name !== this._memberGroupName) {
-				this._memberGroupName = memberGroup.name ?? '';
-			}
-		});
-	}
-
-	// TODO. find a way where we don't have to do this for all Workspaces.
-	private _handleInput(event: UUIInputEvent) {
-		if (event instanceof UUIInputEvent) {
-			const target = event.composedPath()[0] as UUIInputElement;
-
-			if (typeof target?.value === 'string') {
-				this.#workspaceContext.setName(target.value);
-			}
-		}
-	}
+	_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.MemberGroup">
-				<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> `;
 	}
 }