diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/manifests.ts index 7293e3d26e..09c4468799 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/manifests.ts @@ -6,11 +6,10 @@ export const manifests: Array = [ ...workspaceViewManifests, { type: 'workspace', + kind: 'routable', name: 'Block Grid Type Workspace', alias: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS, - element: () => import('../../block-type/workspace/block-type-workspace.element.js'), api: () => import('../../block-type/workspace/block-type-workspace.context.js'), - weight: 900, meta: { entityType: 'block-grid-type', }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/manifests.ts index 6f1ee88216..c165a35f10 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/manifests.ts @@ -6,11 +6,10 @@ export const manifests: Array = [ ...workspaceViewManifests, { type: 'workspace', + kind: 'routable', name: 'Block List Type Workspace', alias: UMB_BLOCK_LIST_TYPE_WORKSPACE_ALIAS, - element: () => import('../../block-type/workspace/block-type-workspace.element.js'), api: () => import('../../block-type/workspace/block-type-workspace.context.js'), - weight: 900, meta: { entityType: 'block-list-type', }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/manifests.ts index 747d04a400..c98943f4fe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/manifests.ts @@ -6,11 +6,10 @@ export const manifests: Array = [ ...workspaceViewManifests, { type: 'workspace', + kind: 'routable', name: 'Block Rte Type Workspace', alias: UMB_BLOCK_RTE_TYPE_WORKSPACE_ALIAS, - element: () => import('../../block-type/workspace/block-type-workspace.element.js'), api: () => import('../../block-type/workspace/block-type-workspace.context.js'), - weight: 900, meta: { entityType: 'block-rte-type', }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts index c1cf2276f4..16d2b502ae 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace-editor.element.ts @@ -1,4 +1,4 @@ -import { UMB_BLOCK_TYPE_WORKSPACE_CONTEXT } from './block-type-workspace.context.js'; +import { UMB_BLOCK_TYPE_WORKSPACE_CONTEXT } from './block-type-workspace.context-token.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { customElement, css, html, state, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -51,7 +51,7 @@ export class UmbBlockTypeWorkspaceEditorElement extends UmbLitElement { alias=${this.workspaceAlias} headline=${this.localize.term('blockEditor_blockConfigurationOverlayTitle', [this._name])}> - ` + ` : ''; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context-token.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context-token.ts new file mode 100644 index 0000000000..6817e2d795 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context-token.ts @@ -0,0 +1,12 @@ +import type { UmbBlockTypeWorkspaceContext } from './block-type-workspace.context.js'; +import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; +import type { UmbWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace'; + +export const UMB_BLOCK_TYPE_WORKSPACE_CONTEXT = new UmbContextToken< + UmbWorkspaceContextInterface, + UmbBlockTypeWorkspaceContext +>( + 'UmbWorkspaceContext', + undefined, + (context): context is UmbBlockTypeWorkspaceContext => (context as any).IS_BLOCK_TYPE_WORKSPACE_CONTEXT, +); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts index 2e78a52983..c369865d08 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts @@ -1,22 +1,24 @@ import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../types.js'; +import { UmbBlockTypeWorkspaceEditorElement } from './block-type-workspace-editor.element.js'; import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property'; import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; import type { UmbInvariantableWorkspaceContextInterface, - UmbWorkspaceContextInterface, + UmbRoutableWorkspaceContext, } from '@umbraco-cms/backoffice/workspace'; import { UmbEditableWorkspaceContextBase, UmbInvariantWorkspacePropertyDatasetContext, + UmbWorkspaceIsNewRedirectController, + UmbWorkspaceRouteManager, } from '@umbraco-cms/backoffice/workspace'; import { UmbArrayState, UmbObjectState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import type { ManifestWorkspace, PropertyEditorSettingsProperty } from '@umbraco-cms/backoffice/extension-registry'; export class UmbBlockTypeWorkspaceContext extends UmbEditableWorkspaceContextBase - implements UmbInvariantableWorkspaceContextInterface + implements UmbInvariantableWorkspaceContextInterface, UmbRoutableWorkspaceContext { // Just for context token safety: public readonly IS_BLOCK_TYPE_WORKSPACE_CONTEXT = true; @@ -32,11 +34,46 @@ export class UmbBlockTypeWorkspaceContext([], (x) => x.alias); readonly properties = this.#properties.asObservable(); + readonly routes = new UmbWorkspaceRouteManager(this); + constructor(host: UmbControllerHost, workspaceArgs: { manifest: ManifestWorkspace }) { super(host, workspaceArgs.manifest.alias); this.#entityType = workspaceArgs.manifest.meta?.entityType; } + public set manifest(manifest: ManifestWorkspace) { + this.routes.setRoutes([ + { + // Would it make more sense to have groupKey before elementTypeKey? + path: 'create/:elementTypeKey/:groupKey', + component: UmbBlockTypeWorkspaceEditorElement, + setup: async (component, info) => { + (component as UmbBlockTypeWorkspaceEditorElement).workspaceAlias = manifest.alias; + + const elementTypeKey = info.match.params.elementTypeKey; + const groupKey = info.match.params.groupKey === 'null' ? null : info.match.params.groupKey; + this.create(elementTypeKey, groupKey); + + new UmbWorkspaceIsNewRedirectController( + this, + this, + this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!, + ); + }, + }, + { + path: 'edit/:id', + component: UmbBlockTypeWorkspaceEditorElement, + setup: (component, info) => { + (component as UmbBlockTypeWorkspaceEditorElement).workspaceAlias = manifest.alias; + + const id = info.match.params.id; + this.load(id); + }, + }, + ]); + } + protected resetState() { super.resetState(); this.#data.setValue(undefined); @@ -131,13 +168,4 @@ export class UmbBlockTypeWorkspaceContext( - 'UmbWorkspaceContext', - undefined, - (context): context is UmbBlockTypeWorkspaceContext => (context as any).IS_BLOCK_TYPE_WORKSPACE_CONTEXT, -); +export { UmbBlockTypeWorkspaceContext as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.element.ts deleted file mode 100644 index 9aba23cbc5..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.element.ts +++ /dev/null @@ -1,81 +0,0 @@ -import type { UmbBlockTypeWorkspaceContext } from './block-type-workspace.context.js'; -import { UmbBlockTypeWorkspaceEditorElement } from './block-type-workspace-editor.element.js'; -import { html, customElement, state } 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'; -import type { UmbApi } from '@umbraco-cms/backoffice/extension-api'; -import { UmbExtensionsApiInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api'; -import type { ManifestWorkspace } from '@umbraco-cms/backoffice/extension-registry'; -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; - -@customElement('umb-block-type-workspace') -export class UmbBlockTypeWorkspaceElement extends UmbLitElement { - // - #manifest?: ManifestWorkspace; - #workspaceContext?: UmbBlockTypeWorkspaceContext; - #editorElement = () => { - const element = new UmbBlockTypeWorkspaceEditorElement(); - element.workspaceAlias = this.#manifest!.alias; - return element; - }; - - @state() - _routes: UmbRoute[] = []; - - public set manifest(manifest: ManifestWorkspace) { - this.#manifest = manifest; - createExtensionApi(this, manifest, [{ manifest: manifest }]).then((context) => { - if (context) { - this.#gotWorkspaceContext(context); - } - }); - } - - #gotWorkspaceContext(context: UmbApi) { - this.#workspaceContext = context as UmbBlockTypeWorkspaceContext; - - this._routes = [ - { - // Would it make more sense to have groupKey before elementTypeKey? - path: 'create/:elementTypeKey/:groupKey', - component: this.#editorElement, - setup: async (_component, info) => { - const elementTypeKey = info.match.params.elementTypeKey; - const groupKey = info.match.params.groupKey === 'null' ? null : info.match.params.groupKey; - this.#workspaceContext!.create(elementTypeKey, groupKey); - - new UmbWorkspaceIsNewRedirectController( - this, - this.#workspaceContext!, - this.shadowRoot!.querySelector('umb-router-slot')!, - ); - }, - }, - { - path: 'edit/:id', - component: this.#editorElement, - setup: (_component, info) => { - const id = info.match.params.id; - this.#workspaceContext!.load(id); - }, - }, - ]; - - // TODO: We need to recreate when ID changed? - new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'workspaceContext', [this, this.#workspaceContext]); - } - - render() { - return html``; - } -} - -export default UmbBlockTypeWorkspaceElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-block-type-workspace': UmbBlockTypeWorkspaceElement; - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts index 37a833dc0c..7e5cc0affb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts @@ -1,6 +1,12 @@ import type { UmbBlockDataType, UmbBlockLayoutBaseModel } from '../types.js'; import { UmbBlockElementManager } from './block-element-manager.js'; -import { UmbEditableWorkspaceContextBase } from '@umbraco-cms/backoffice/workspace'; +import { UmbBlockWorkspaceEditorElement } from './block-workspace-editor.element.js'; +import { + UmbEditableWorkspaceContextBase, + UmbWorkspaceRouteManager, + type UmbRoutableWorkspaceContext, + UmbWorkspaceIsNewRedirectController, +} from '@umbraco-cms/backoffice/workspace'; import { UmbBooleanState, UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { ManifestWorkspace } from '@umbraco-cms/backoffice/extension-registry'; @@ -10,11 +16,13 @@ import { type UmbBlockWorkspaceData, } from '@umbraco-cms/backoffice/block'; import { UMB_MODAL_CONTEXT } from '@umbraco-cms/backoffice/modal'; +import { decodeFilePath } from '@umbraco-cms/backoffice/utils'; export type UmbBlockWorkspaceElementManagerNames = 'content' | 'settings'; -export class UmbBlockWorkspaceContext< - LayoutDataType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, -> extends UmbEditableWorkspaceContextBase { +export class UmbBlockWorkspaceContext + extends UmbEditableWorkspaceContextBase + implements UmbRoutableWorkspaceContext +{ // Just for context token safety: public readonly IS_BLOCK_WORKSPACE_CONTEXT = true; // @@ -52,6 +60,8 @@ export class UmbBlockWorkspaceContext< #label = new UmbStringState(undefined); readonly name = this.#label.asObservable(); + readonly routes = new UmbWorkspaceRouteManager(this); + constructor(host: UmbControllerHost, workspaceArgs: { manifest: ManifestWorkspace }) { super(host, workspaceArgs.manifest.alias); this.#entityType = workspaceArgs.manifest.meta?.entityType; @@ -81,6 +91,36 @@ export class UmbBlockWorkspaceContext< }).asPromise(); } + set manifest(manifest: ManifestWorkspace) { + this.routes.setRoutes([ + { + path: 'create/:elementTypeKey', + component: UmbBlockWorkspaceEditorElement, + setup: async (component, info) => { + (component as UmbBlockWorkspaceEditorElement).workspaceAlias = manifest.alias; + + const elementTypeKey = info.match.params.elementTypeKey; + this.create(elementTypeKey); + + new UmbWorkspaceIsNewRedirectController( + this, + this, + this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!, + ); + }, + }, + { + path: 'edit/:udi', + component: UmbBlockWorkspaceEditorElement, + setup: (component, info) => { + (component as UmbBlockWorkspaceEditorElement).workspaceAlias = manifest.alias; + const udi = decodeFilePath(info.match.params.udi); + this.load(udi); + }, + }, + ]); + } + async load(unique: string) { await this.#retrieveBlockManager; await this.#retrieveBlockEntries; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/manifests.ts index 87009bf7f7..53f8332c15 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/manifests.ts @@ -22,11 +22,10 @@ export const manifests: Array = [ }, { type: 'workspace', + kind: 'routable', name: 'Block List Type Workspace', alias: UMB_BLOCK_WORKSPACE_ALIAS, - element: () => import('./block-workspace.element.js'), api: () => import('./block-workspace.context.js'), - weight: 900, meta: { entityType: 'block', },