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 7fe74f0be1..327498248a 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 @@ -10,6 +10,7 @@ import { UMB_BLOCK_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/block'; import { buildUdi } from '@umbraco-cms/backoffice/utils'; import { UMB_MODAL_CONTEXT } from '@umbraco-cms/backoffice/modal'; +export type UmbBlockWorkspaceElementManagerNames = 'content' | 'settings'; export class UmbBlockWorkspaceContext< LayoutDataType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel, > extends UmbEditableWorkspaceContextBase { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-no-router.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-no-router.element.ts index 3a216eb3c9..e6c7aa0e48 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-no-router.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-no-router.element.ts @@ -39,7 +39,6 @@ export class UmbBlockWorkspaceViewEditNoRouterElement extends UmbLitElement impl this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => { this._workspaceContext = workspaceContext; - console.log('workspaceContext.content.structure', workspaceContext.content.structure); this._tabsStructureHelper.setStructureManager(workspaceContext.content.structure); this._observeRootGroups(); }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts index 8eec2efdeb..65dc3eaf34 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts @@ -1,36 +1,46 @@ import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context-token.js'; +import type { UmbBlockWorkspaceElementManagerNames } from '../../block-workspace.context.js'; import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { PropertyContainerTypes, // UmbPropertyTypeBasedPropertyElement, - UmbContentTypeModel} from '@umbraco-cms/backoffice/content-type'; -import { - UmbContentTypePropertyStructureHelper + UmbContentTypeModel, } from '@umbraco-cms/backoffice/content-type'; +import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { PropertyTypeModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; @customElement('umb-block-workspace-view-edit-properties') export class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement { + @property({ attribute: false }) + public get managerName(): UmbBlockWorkspaceElementManagerNames | undefined { + return this.#managerName; + } + public set managerName(value: UmbBlockWorkspaceElementManagerNames | undefined) { + this.#managerName = value; + this.#setStructureManager(); + } + #managerName?: UmbBlockWorkspaceElementManagerNames; + #blockWorkspace?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE; + #propertyStructureHelper = new UmbContentTypePropertyStructureHelper(this); + @property({ type: String, attribute: 'container-name', reflect: false }) public get containerName(): string | undefined { - return this._propertyStructureHelper.getContainerName(); + return this.#propertyStructureHelper.getContainerName(); } public set containerName(value: string | undefined) { - this._propertyStructureHelper.setContainerName(value); + this.#propertyStructureHelper.setContainerName(value); } @property({ type: String, attribute: 'container-type', reflect: false }) public get containerType(): PropertyContainerTypes | undefined { - return this._propertyStructureHelper.getContainerType(); + return this.#propertyStructureHelper.getContainerType(); } public set containerType(value: PropertyContainerTypes | undefined) { - this._propertyStructureHelper.setContainerType(value); + this.#propertyStructureHelper.setContainerType(value); } - _propertyStructureHelper = new UmbContentTypePropertyStructureHelper(this); - @state() _propertyStructure: Array = []; @@ -38,13 +48,23 @@ export class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement { super(); this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => { - this._propertyStructureHelper.setStructureManager(workspaceContext.content.structure); - }); - this.observe(this._propertyStructureHelper.propertyStructure, (propertyStructure) => { - this._propertyStructure = propertyStructure; + this.#blockWorkspace = workspaceContext; + this.#setStructureManager(); }); } + #setStructureManager() { + if (!this.#blockWorkspace || !this.#managerName) return; + this.#propertyStructureHelper.setStructureManager(this.#blockWorkspace[this.#managerName].structure); + this.observe( + this.#propertyStructureHelper.propertyStructure, + (propertyStructure) => { + this._propertyStructure = propertyStructure; + }, + 'observePropertyStructure', + ); + } + render() { return repeat( this._propertyStructure, diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts index 3cac991532..03a27f78bc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts @@ -7,29 +7,42 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; import './block-workspace-view-edit-properties.element.js'; +// eslint-disable-next-line import/order +import type { UmbBlockWorkspaceElementManagerNames } from '../../block-workspace.context.js'; @customElement('umb-block-workspace-view-edit-tab') export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement { - private _tabName?: string | undefined; + @property({ attribute: false }) + public get managerName(): UmbBlockWorkspaceElementManagerNames | undefined { + return this.#managerName; + } + public set managerName(value: UmbBlockWorkspaceElementManagerNames | undefined) { + this.#managerName = value; + this.#setStructureManager(); + } + #managerName?: UmbBlockWorkspaceElementManagerNames; + #blockWorkspace?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE; + #groupStructureHelper = new UmbContentTypeContainerStructureHelper(this); @property({ type: String }) public get tabName(): string | undefined { - return this._groupStructureHelper.getName(); + return this.#groupStructureHelper.getName(); } public set tabName(value: string | undefined) { if (value === this._tabName) return; const oldValue = this._tabName; this._tabName = value; - this._groupStructureHelper.setName(value); + this.#groupStructureHelper.setName(value); this.requestUpdate('tabName', oldValue); } + private _tabName?: string | undefined; @property({ type: Boolean }) public get noTabName(): boolean { - return this._groupStructureHelper.getIsRoot(); + return this.#groupStructureHelper.getIsRoot(); } public set noTabName(value: boolean) { - this._groupStructureHelper.setIsRoot(value); + this.#groupStructureHelper.setIsRoot(value); } private _ownerTabId?: string | null; @@ -40,7 +53,7 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement { public set ownerTabId(value: string | null | undefined) { if (value === this._ownerTabId) return; this._ownerTabId = value; - this._groupStructureHelper.setOwnerId(value); + this.#groupStructureHelper.setOwnerId(value); } /** @@ -50,8 +63,6 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement { @property({ type: Boolean, reflect: false }) hideSingleGroup = false; - _groupStructureHelper = new UmbContentTypeContainerStructureHelper(this); - @state() _groups: Array = []; @@ -62,16 +73,30 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement { super(); this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => { - this._groupStructureHelper.setStructureManager(workspaceContext.content.structure); - }); - this.observe(this._groupStructureHelper.containers, (groups) => { - this._groups = groups; - }); - this.observe(this._groupStructureHelper.hasProperties, (hasProperties) => { - this._hasProperties = hasProperties; + this.#blockWorkspace = workspaceContext; + this.#setStructureManager(); }); } + #setStructureManager() { + if (!this.#blockWorkspace || !this.#managerName) return; + this.#groupStructureHelper.setStructureManager(this.#blockWorkspace[this.#managerName].structure); + this.observe( + this.#groupStructureHelper.containers, + (groups) => { + this._groups = groups; + }, + 'observeGroups', + ); + this.observe( + this.#groupStructureHelper.hasProperties, + (hasProperties) => { + this._hasProperties = hasProperties; + }, + 'observeHasProperties', + ); + } + render() { return html` ${this._hasProperties ? this.#renderPart(this._tabName) : ''} @@ -86,11 +111,13 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement { #renderPart(groupName: string | null | undefined, boxName?: string | null | undefined) { return this.hideSingleGroup && this._groups.length === 1 ? html` ` : html` (this); + + //@state() //private _hasRootProperties = false; + + @state() private _hasRootGroups = false; @state() @@ -32,44 +43,44 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U @state() private _activePath = ''; - private _workspaceContext?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE; - - private _tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this); - constructor() { super(); - this._tabsStructureHelper.setIsRoot(true); - this._tabsStructureHelper.setContainerChildType('Tab'); - this.observe(this._tabsStructureHelper.containers, (tabs) => { - this._tabs = tabs; - this._createRoutes(); - }); + this.#tabsStructureHelper.setIsRoot(true); + this.#tabsStructureHelper.setContainerChildType('Tab'); // _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently. this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => { - this._workspaceContext = workspaceContext; - this._tabsStructureHelper.setStructureManager(workspaceContext.content.structure); - this._observeRootGroups(); + this.#blockWorkspace = workspaceContext; + this.#setStructureManager(); }); } - private _observeRootGroups() { - if (!this._workspaceContext) return; + #setStructureManager() { + if (!this.#blockWorkspace || !this.#managerName) return; + this.#tabsStructureHelper.setStructureManager(this.#blockWorkspace[this.#managerName].structure); this.observe( - this._workspaceContext.content.structure.hasRootContainers('Group'), + this.#blockWorkspace![this.#managerName!].structure.hasRootContainers('Group'), (hasRootGroups) => { this._hasRootGroups = hasRootGroups; this._createRoutes(); }, - '_observeGroups', + 'observeGroups', + ); + this.observe( + this.#tabsStructureHelper.containers, + (tabs) => { + this._tabs = tabs; + this._createRoutes(); + }, + 'observeTabs', ); } private _createRoutes() { - if (!this._tabs || !this._workspaceContext) return; + if (!this._tabs || !this.#blockWorkspace) return; const routes: UmbRoute[] = []; if (this._tabs.length > 0) { @@ -79,10 +90,11 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U path: `tab/${encodeFolderName(tabName).toString()}`, component: () => import('./block-workspace-view-edit-tab.element.js'), setup: (component) => { + (component as UmbBlockWorkspaceViewEditTabElement).managerName = this.#managerName; (component as UmbBlockWorkspaceViewEditTabElement).tabName = tabName; // TODO: Consider if we can link these more simple, and not parse this on. // Instead have the structure manager looking at wether one of the OwnerALikecontainers is in the owner document. - (component as UmbBlockWorkspaceViewEditTabElement).ownerTabId = this._tabsStructureHelper.isOwnerContainer( + (component as UmbBlockWorkspaceViewEditTabElement).ownerTabId = this.#tabsStructureHelper.isOwnerContainer( tab.id!, ) ? tab.id @@ -97,6 +109,7 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U path: '', component: () => import('./block-workspace-view-edit-tab.element.js'), setup: (component) => { + (component as UmbBlockWorkspaceViewEditTabElement).managerName = this.#managerName; (component as UmbBlockWorkspaceViewEditTabElement).noTabName = true; (component as UmbBlockWorkspaceViewEditTabElement).ownerTabId = null; },