diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace-edit.element.ts new file mode 100644 index 0000000000..abebd0f1da --- /dev/null +++ b/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` Member Workspace `; + } +} + +export default UmbMemberWorkspaceEditElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-member-workspace-edit': UmbMemberWorkspaceEditElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.context.ts index a032a5fefc..efa785a32c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.context.ts +++ b/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 - implements UmbWorkspaceEntityContextInterface + implements UmbEntityWorkspaceContextInterface { - #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'); + } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.element.ts index a7d516bdf0..dc78cf8575 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/members/members/workspace/member-workspace.element.ts +++ b/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` Member Workspace `; + return html` `; } }