diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/section-view/member-group-section-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/section-view/member-group-section-view.element.ts index b52365cdf1..ee249c1e40 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/section-view/member-group-section-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/section-view/member-group-section-view.element.ts @@ -1,4 +1,5 @@ import { UMB_MEMBER_GROUP_COLLECTION_ALIAS } from '../collection/manifests.js'; +import { UMB_MEMBER_GROUP_ENTITY_TYPE } from '../entity.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -17,7 +18,11 @@ export class UmbMemberGroupSectionViewElement extends UmbLitElement { }, { path: 'member-group', - component: () => import('../workspace/member-group-workspace.element.js'), + component: () => { + const element = document.createElement('umb-workspace'); + element.setAttribute('entityType', UMB_MEMBER_GROUP_ENTITY_TYPE); + return element; + }, }, { path: '', diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/manifests.ts index 22aaf4be85..c4b75d4ca5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/manifests.ts @@ -1,18 +1,19 @@ import { UMB_MEMBER_GROUP_ENTITY_TYPE } from '../entity.js'; import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace'; import type { - ManifestWorkspace, + ManifestWorkspaces, ManifestWorkspaceActions, ManifestWorkspaceView, } from '@umbraco-cms/backoffice/extension-registry'; export const UMB_MEMBER_GROUP_WORKSPACE_ALIAS = 'Umb.Workspace.MemberGroup'; -const workspace: ManifestWorkspace = { +const workspace: ManifestWorkspaces = { type: 'workspace', + kind: 'routable', alias: UMB_MEMBER_GROUP_WORKSPACE_ALIAS, name: 'MemberGroup Workspace', - js: () => import('./member-group-workspace.element.js'), + api: () => import('./member-group-workspace.context.js'), meta: { entityType: UMB_MEMBER_GROUP_ENTITY_TYPE, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace-editor.element.ts index 0d183f8eaf..65180d682c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace-editor.element.ts @@ -1,4 +1,4 @@ -import { UMB_MEMBER_GROUP_WORKSPACE_CONTEXT } from './member-group-workspace.context.js'; +import { UMB_MEMBER_GROUP_WORKSPACE_CONTEXT } from './member-group-workspace.context-token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.context-token.ts new file mode 100644 index 0000000000..e8dc975186 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.context-token.ts @@ -0,0 +1,12 @@ +import type { UmbMemberGroupWorkspaceContext } from './member-group-workspace.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; +import type { UmbSaveableWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace'; + +export const UMB_MEMBER_GROUP_WORKSPACE_CONTEXT = new UmbContextToken< + UmbSaveableWorkspaceContextInterface, + UmbMemberGroupWorkspaceContext +>( + 'UmbWorkspaceContext', + undefined, + (context): context is UmbMemberGroupWorkspaceContext => context.getEntityType?.() === 'member-group', +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.context.ts index 66fb185b5b..1d69d6a74b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.context.ts @@ -1,17 +1,20 @@ import { UmbMemberGroupDetailRepository } from '../repository/index.js'; import type { UmbMemberGroupDetailModel } from '../types.js'; import { UMB_MEMBER_GROUP_WORKSPACE_ALIAS } from './manifests.js'; +import { UmbMemberGroupWorkspaceEditorElement } from './member-group-workspace-editor.element.js'; import { type UmbSaveableWorkspaceContextInterface, UmbEditableWorkspaceContextBase, + UmbWorkspaceRouteManager, + UmbWorkspaceIsNewRedirectController, + type UmbRoutableWorkspaceContext, } from '@umbraco-cms/backoffice/workspace'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; export class UmbMemberGroupWorkspaceContext extends UmbEditableWorkspaceContextBase - implements UmbSaveableWorkspaceContextInterface + implements UmbSaveableWorkspaceContextInterface, UmbRoutableWorkspaceContext { public readonly repository = new UmbMemberGroupDetailRepository(this); #getDataPromise?: Promise; @@ -22,8 +25,34 @@ export class UmbMemberGroupWorkspaceContext readonly unique = this.#data.asObservablePart((data) => data?.unique); readonly name = this.#data.asObservablePart((data) => data?.name); + readonly routes = new UmbWorkspaceRouteManager(this); + constructor(host: UmbControllerHost) { super(host, UMB_MEMBER_GROUP_WORKSPACE_ALIAS); + + this.routes.setRoutes([ + { + path: 'create', + component: UmbMemberGroupWorkspaceEditorElement, + setup: () => { + this.create(); + + new UmbWorkspaceIsNewRedirectController( + this, + this, + this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!, + ); + }, + }, + { + path: 'edit/:unique', + component: UmbMemberGroupWorkspaceEditorElement, + setup: (_component, info) => { + const unique = info.match.params.unique; + this.load(unique); + }, + }, + ]); } public isLoaded() { @@ -112,11 +141,4 @@ export class UmbMemberGroupWorkspaceContext } } -export const UMB_MEMBER_GROUP_WORKSPACE_CONTEXT = new UmbContextToken< - UmbSaveableWorkspaceContextInterface, - UmbMemberGroupWorkspaceContext ->( - 'UmbWorkspaceContext', - undefined, - (context): context is UmbMemberGroupWorkspaceContext => context.getEntityType?.() === 'member-group', -); +export { UmbMemberGroupWorkspaceContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.element.ts deleted file mode 100644 index 225696dc9b..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.element.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { UmbMemberGroupWorkspaceContext } from './member-group-workspace.context.js'; -import { UmbMemberGroupWorkspaceEditorElement } from './member-group-workspace-editor.element.js'; -import { html, customElement } from '@umbraco-cms/backoffice/external/lit'; -import type { UmbRoute } from '@umbraco-cms/backoffice/router'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; - -import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace'; - -@customElement('umb-member-group-workspace') -export class UmbMemberGroupWorkspaceElement extends UmbLitElement { - #workspaceContext = new UmbMemberGroupWorkspaceContext(this); - #createElement = () => new UmbMemberGroupWorkspaceEditorElement(); - - private _routes: UmbRoute[] = [ - { - path: 'create', - component: this.#createElement, - setup: (_component, info) => { - this.#workspaceContext.create(); - - new UmbWorkspaceIsNewRedirectController( - this, - this.#workspaceContext, - this.shadowRoot!.querySelector('umb-router-slot')!, - ); - }, - }, - { - path: 'edit/:unique', - component: this.#createElement, - setup: (_component, info) => { - const unique = info.match.params.unique; - this.#workspaceContext.load(unique); - }, - }, - ]; - - render() { - return html``; - } -} - -export default UmbMemberGroupWorkspaceElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-member-group-workspace': UmbMemberGroupWorkspaceElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.stories.ts deleted file mode 100644 index bad77cbab3..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.stories.ts +++ /dev/null @@ -1,18 +0,0 @@ -import './member-group-workspace.element.js'; - -import type { Meta, Story } from '@storybook/web-components'; - -import type { UmbMemberGroupWorkspaceElement } from './member-group-workspace.element.js'; -import { html } from '@umbraco-cms/backoffice/external/lit'; - -export default { - title: 'Workspaces/MemberGroup', - component: 'umb-member-group-workspace', - id: 'umb-member-group-workspace', -} as Meta; - -export const AAAOverview: Story = () => - html` `; -AAAOverview.storyName = 'Overview'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member/section-view/member-section-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member/section-view/member-section-view.element.ts index 1995d81f56..cfe5ad30f3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member/section-view/member-section-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member/section-view/member-section-view.element.ts @@ -1,8 +1,9 @@ import { UMB_MEMBER_COLLECTION_ALIAS } from '../collection/manifests.js'; +import { UMB_MEMBER_ENTITY_TYPE } from '../entity.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { PageComponent, UmbRoute } from '@umbraco-cms/backoffice/router'; +import type { UmbRoute } from '@umbraco-cms/backoffice/router'; @customElement('umb-member-section-view') export class UmbMemberSectionViewElement extends UmbLitElement { @@ -17,9 +18,10 @@ export class UmbMemberSectionViewElement extends UmbLitElement { }, { path: 'member', - component: () => import('src/packages/core/workspace/workspace.element.js'), - setup(component: PageComponent) { - (component as any).entityType = 'member'; + component: () => { + const element = document.createElement('umb-workspace'); + element.setAttribute('entityType', UMB_MEMBER_ENTITY_TYPE); + return element; }, }, { diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/manifests.ts index 50da2717d3..e1d9e0bbcf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/manifests.ts @@ -1,17 +1,18 @@ import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace'; import type { - ManifestWorkspace, + ManifestWorkspaces, ManifestWorkspaceActions, ManifestWorkspaceView, } from '@umbraco-cms/backoffice/extension-registry'; export const UMB_TEMPLATE_WORKSPACE_ALIAS = 'Umb.Workspace.Template'; -const workspace: ManifestWorkspace = { +const workspace: ManifestWorkspaces = { type: 'workspace', + kind: 'routable', alias: 'Umb.Workspace.Template', name: 'Template Workspace', - js: () => import('./template-workspace.element.js'), + api: () => import('./template-workspace.context.js'), meta: { entityType: 'template', }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts index b4fec1b5af..7005d739f6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts @@ -2,7 +2,7 @@ import { UMB_TEMPLATING_SECTION_PICKER_MODAL } from '../../modals/templating-sec import type { UmbTemplatingInsertMenuElement } from '../../components/templating-item-menu/templating-item-menu.element.js'; import { UMB_TEMPLATE_QUERY_BUILDER_MODAL } from '../modals/query-builder/index.js'; import { getQuerySnippet } from '../../utils/index.js'; -import { UMB_TEMPLATE_WORKSPACE_CONTEXT } from './template-workspace.context.js'; +import { UMB_TEMPLATE_WORKSPACE_CONTEXT } from './template-workspace.context-token.js'; import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor'; import { toCamelCase } from '@umbraco-cms/backoffice/utils'; import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; @@ -174,7 +174,7 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement { ${this._masterTemplateName ? html` - ` + ` : nothing} `; @@ -224,7 +224,7 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement { ? this.#renderCodeEditor() : html`
-
`} + `} `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.context-token.ts new file mode 100644 index 0000000000..808766310c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.context-token.ts @@ -0,0 +1,12 @@ +import type { UmbTemplateWorkspaceContext } from './template-workspace.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; +import type { UmbSaveableWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace'; + +export const UMB_TEMPLATE_WORKSPACE_CONTEXT = new UmbContextToken< + UmbSaveableWorkspaceContextInterface, + UmbTemplateWorkspaceContext +>( + 'UmbWorkspaceContext', + undefined, + (context): context is UmbTemplateWorkspaceContext => context.getEntityType?.() === 'template', +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.context.ts index d87998cd82..2461875df8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.context.ts @@ -2,19 +2,27 @@ import type { UmbTemplateDetailModel } from '../types.js'; import type { UmbTemplateItemModel } from '../repository/index.js'; import { UmbTemplateDetailRepository, UmbTemplateItemRepository } from '../repository/index.js'; import { UMB_TEMPLATE_WORKSPACE_ALIAS } from './manifests.js'; +import { UmbTemplateWorkspaceEditorElement } from './template-workspace-editor.element.js'; import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor'; -import type { UmbSaveableWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace'; -import { UmbEditableWorkspaceContextBase } from '@umbraco-cms/backoffice/workspace'; +import type { + UmbRoutableWorkspaceContext, + UmbSaveableWorkspaceContextInterface, +} from '@umbraco-cms/backoffice/workspace'; +import { + UmbEditableWorkspaceContextBase, + UmbWorkspaceIsNewRedirectController, + UmbWorkspaceRouteManager, +} from '@umbraco-cms/backoffice/workspace'; import { UmbBooleanState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action'; import { UmbReloadTreeItemChildrenRequestEntityActionEvent } from '@umbraco-cms/backoffice/tree'; import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/event'; +import type { IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router'; export class UmbTemplateWorkspaceContext extends UmbEditableWorkspaceContextBase - implements UmbSaveableWorkspaceContextInterface + implements UmbSaveableWorkspaceContextInterface, UmbRoutableWorkspaceContext { public readonly detailRepository = new UmbTemplateDetailRepository(this); public readonly itemRepository = new UmbTemplateItemRepository(this); @@ -34,9 +42,37 @@ export class UmbTemplateWorkspaceContext #isCodeEditorReady = new UmbBooleanState(false); isCodeEditorReady = this.#isCodeEditorReady.asObservable(); + readonly routes = new UmbWorkspaceRouteManager(this); + constructor(host: UmbControllerHost) { super(host, UMB_TEMPLATE_WORKSPACE_ALIAS); this.#loadCodeEditor(); + + this.routes.setRoutes([ + { + path: 'create/parent/:entityType/:parentUnique', + component: UmbTemplateWorkspaceEditorElement, + setup: (component: PageComponent, info: IRoutingInfo) => { + const parentEntityType = info.match.params.entityType; + const parentUnique = info.match.params.parentUnique === 'null' ? null : info.match.params.parentUnique; + this.create({ entityType: parentEntityType, unique: parentUnique }); + + new UmbWorkspaceIsNewRedirectController( + this, + this, + this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!, + ); + }, + }, + { + path: 'edit/:unique', + component: UmbTemplateWorkspaceEditorElement, + setup: (component: PageComponent, info: IRoutingInfo): void => { + const unique = info.match.params.unique; + this.load(unique); + }, + }, + ]); } protected resetState(): void { @@ -194,12 +230,4 @@ ${currentContent}`; super.destroy(); } } - -export const UMB_TEMPLATE_WORKSPACE_CONTEXT = new UmbContextToken< - UmbSaveableWorkspaceContextInterface, - UmbTemplateWorkspaceContext ->( - 'UmbWorkspaceContext', - undefined, - (context): context is UmbTemplateWorkspaceContext => context.getEntityType?.() === 'template', -); +export { UmbTemplateWorkspaceContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts deleted file mode 100644 index 3173a9af67..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { UmbTemplateWorkspaceContext } from './template-workspace.context.js'; -import { UmbTemplateWorkspaceEditorElement } from './template-workspace-editor.element.js'; -import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; -import type { IRoutingInfo, PageComponent, UmbRoute } from '@umbraco-cms/backoffice/router'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; - -import '../../components/templating-item-menu/templating-item-menu.element.js'; -import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace'; - -@customElement('umb-template-workspace') -export class UmbTemplateWorkspaceElement extends UmbLitElement { - #workspaceContext = new UmbTemplateWorkspaceContext(this); - #createElement = () => new UmbTemplateWorkspaceEditorElement(); - - @state() - _routes: UmbRoute[] = [ - { - path: 'create/parent/:entityType/:parentUnique', - component: this.#createElement, - setup: (component: PageComponent, info: IRoutingInfo) => { - const parentEntityType = info.match.params.entityType; - const parentUnique = info.match.params.parentUnique === 'null' ? null : info.match.params.parentUnique; - this.#workspaceContext.create({ entityType: parentEntityType, unique: parentUnique }); - - new UmbWorkspaceIsNewRedirectController( - this, - this.#workspaceContext, - this.shadowRoot!.querySelector('umb-router-slot')!, - ); - }, - }, - { - path: 'edit/:unique', - component: this.#createElement, - setup: (component: PageComponent, info: IRoutingInfo): void => { - const unique = info.match.params.unique; - this.#workspaceContext.load(unique); - }, - }, - ]; - - render() { - return html``; - } -} - -export default UmbTemplateWorkspaceElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-template-workspace': UmbTemplateWorkspaceElement; - } -}