add routes to member workspace

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

@@ -0,0 +1,29 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('umb-member-workspace-edit')
+export class UmbMemberWorkspaceEditElement extends LitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+	];
+
+	render() {
+		return html` <umb-workspace-layout alias="Umb.Workspace.Member">Member Workspace</umb-workspace-layout> `;
+	}
+}
+
+export default UmbMemberWorkspaceEditElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-member-workspace-edit': UmbMemberWorkspaceEditElement;
+	}
+}

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

@@ -1,39 +1,38 @@
-import { UmbEntityWorkspaceManager } from '../../../shared/components/workspace/workspace-context/entity-manager-controller';
 import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
-import { UmbWorkspaceEntityContextInterface } from '../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
-import { UMB_MEMBER_STORE_CONTEXT_TOKEN } from '../member.detail.store';
+import { UmbWorkspaceEntityContextInterface as UmbEntityWorkspaceContextInterface } from '../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
 import { UmbMemberRepository } from '../repository/member.repository';
 import type { MemberDetails } from '@umbraco-cms/models';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 
-export class UmbWorkspaceMemberContext
+export class UmbMemberWorkspaceContext
 	extends UmbWorkspaceContext<UmbMemberRepository>
-	implements UmbWorkspaceEntityContextInterface<MemberDetails | undefined>
+	implements UmbEntityWorkspaceContextInterface<MemberDetails | undefined>
 {
-	#manager = new UmbEntityWorkspaceManager(this.host, 'member', UMB_MEMBER_STORE_CONTEXT_TOKEN);
-
-	public readonly data = this.#manager.state.asObservable();
-	public readonly name = this.#manager.state.getObservablePart((state) => state?.name);
-
 	constructor(host: UmbControllerHostInterface) {
 		super(host, new UmbMemberRepository(host));
 	}
 
-	setPropertyValue(alias: string, value: string) {
-		return;
+	getEntityType(): string {
+		return 'member';
 	}
 
-	setName(name: string) {
-		this.#manager.state.update({ name });
+	getEntityKey() {
+		return '1234';
 	}
 
-	getEntityType = this.#manager.getEntityType;
-	getUnique = this.#manager.getEntityKey;
-	getEntityKey = this.#manager.getEntityKey;
-	getStore = this.#manager.getStore;
-	getData = this.#manager.getData as any; // TODO: fix this type mismatch, but this will be done when we move to repositories.
-	load = this.#manager.load;
-	create = this.#manager.create;
-	save = this.#manager.save;
-	destroy = this.#manager.destroy;
+	getData() {
+		return 'fake' as unknown as MemberDetails;
+	}
+
+	async save() {
+		console.log('save');
+	}
+
+	async load() {
+		console.log('load');
+	}
+
+	public destroy(): void {
+		console.log('destroy');
+	}
 }

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

@@ -1,9 +1,13 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { IRoutingInfo } from 'router-slot';
+import { UmbMemberWorkspaceEditElement } from './member-workspace-edit.element';
+import { UmbMemberWorkspaceContext } from './member-workspace.context';
+import { UmbLitElement } from '@umbraco-cms/element';
 
 @customElement('umb-member-workspace')
-export class UmbMemberWorkspaceElement extends LitElement {
+export class UmbMemberWorkspaceElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -15,11 +19,23 @@ export class UmbMemberWorkspaceElement extends LitElement {
 		`,
 	];
 
-	@property()
-	id!: string;
+	#workspaceContext = new UmbMemberWorkspaceContext(this);
+	#element = new UmbMemberWorkspaceEditElement();
+
+	@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.Member">Member Workspace</umb-workspace-layout> `;
+		return html` <umb-router-slot .routes=${this._routes}></umb-router-slot> `;
 	}
 }