diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace-editor.element.ts index 68326fa8ab..76bd4ad7ff 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace-editor.element.ts @@ -1,16 +1,15 @@ import type { MemberGroupDetails } from '../types.js'; -import { UmbWorkspaceMemberGroupContext } from './member-group-workspace.context.js'; +import { UMB_MEMBER_TYPE_WORKSPACE_CONTEXT } from './member-group-workspace.context.js'; import { UUITextStyles, UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; /** * @element umb-member-group-edit-workspace * @description - Element for displaying a Member Group Workspace */ @customElement('umb-member-group-workspace-editor') export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement { - #workspaceContext?: UmbWorkspaceMemberGroupContext; + #workspaceContext?: typeof UMB_MEMBER_TYPE_WORKSPACE_CONTEXT.TYPE; @state() private _memberGroup?: MemberGroupDetails; @@ -18,8 +17,8 @@ export class UmbMemberGroupWorkspaceEditorElement extends UmbLitElement { constructor() { super(); - this.consumeContext(UMB_WORKSPACE_CONTEXT, (instance) => { - this.#workspaceContext = instance as UmbWorkspaceMemberGroupContext; + this.consumeContext(UMB_MEMBER_TYPE_WORKSPACE_CONTEXT, (instance) => { + this.#workspaceContext = instance; this.#observeMemberGroup(); }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.context.ts index e62fd10d22..a098cf5302 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.context.ts @@ -3,9 +3,10 @@ import type { MemberGroupDetails } from '../types.js'; import { UmbEntityWorkspaceContextInterface, UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; type EntityType = MemberGroupDetails; -export class UmbWorkspaceMemberGroupContext +export class UmbMemberGroupWorkspaceContext extends UmbWorkspaceContext implements UmbEntityWorkspaceContextInterface { @@ -63,3 +64,10 @@ export class UmbWorkspaceMemberGroupContext this.#data.complete(); } } + + + +export const UMB_MEMBER_TYPE_WORKSPACE_CONTEXT = new UmbContextToken( + 'UmbWorkspaceContext', + (context): context is UmbMemberGroupWorkspaceContext => context.getEntityType?.() === 'member-group' +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.element.ts index a3f7dd6275..a7b397d6b3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/member-group-workspace.element.ts @@ -1,4 +1,4 @@ -import { UmbWorkspaceMemberGroupContext } from './member-group-workspace.context.js'; +import { UmbMemberGroupWorkspaceContext } from './member-group-workspace.context.js'; import { UmbMemberGroupWorkspaceEditorElement } from './member-group-workspace-editor.element.js'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; @@ -11,7 +11,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; */ @customElement('umb-member-group-workspace') export class UmbMemberGroupWorkspaceElement extends UmbLitElement { - #workspaceContext = new UmbWorkspaceMemberGroupContext(this); + #workspaceContext = new UmbMemberGroupWorkspaceContext(this); #element = new UmbMemberGroupWorkspaceEditorElement(); @state() diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts index 668e27a38b..5eb6ebdf7c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-groups/workspace/views/info/workspace-view-member-group-info.element.ts @@ -1,22 +1,20 @@ -import { UmbWorkspaceMemberGroupContext } from '../../member-group-workspace.context.js'; +import { UMB_MEMBER_TYPE_WORKSPACE_CONTEXT } from '../../member-group-workspace.context.js'; import type { MemberGroupDetails } from '../../../types.js'; import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui'; import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; -import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; @customElement('umb-workspace-view-member-group-info') export class UmbWorkspaceViewMemberGroupInfoElement extends UmbLitElement { @state() private _memberGroup?: MemberGroupDetails; - #workspaceContext?: UmbWorkspaceMemberGroupContext; + #workspaceContext?: typeof UMB_MEMBER_TYPE_WORKSPACE_CONTEXT.TYPE; constructor() { super(); - // TODO: Figure out if this is the best way to consume the context or if it can be strongly typed with an UmbContextToken - this.consumeContext(UMB_WORKSPACE_CONTEXT, (instance) => { - this.#workspaceContext = instance as UmbWorkspaceMemberGroupContext; + this.consumeContext(UMB_MEMBER_TYPE_WORKSPACE_CONTEXT, (instance) => { + this.#workspaceContext = instance; this.#observeMemberGroup(); }); } @@ -26,10 +24,7 @@ export class UmbWorkspaceViewMemberGroupInfoElement extends UmbLitElement { this.observe(this.#workspaceContext.data, (memberGroup) => { if (!memberGroup) return; - - // TODO: handle if model is not of the type wanted. - // TODO: Make method to identify wether data is of type MemberGroupDetails - this._memberGroup = memberGroup as MemberGroupDetails; + this._memberGroup = memberGroup; }); }