structure manager refactor implementation

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.ts

@@ -4,7 +4,7 @@ import { css, html, customElement, state, repeat, nothing } from '@umbraco-cms/b
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
+import type { UmbPropertyTypeContainerMergedModel } from '@umbraco-cms/backoffice/content-type';
 import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace';
 
 /**
@@ -20,10 +20,10 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 	private _hasRootGroups = false;
 
 	@state()
-	private _tabs?: Array<UmbPropertyTypeContainerModel>;
+	private _tabs?: Array<UmbPropertyTypeContainerMergedModel>;
 
 	@state()
-	private _activeTabId?: string | null | undefined;
+	private _activeTabKey?: string | null | undefined;
 
 	//@state()
 	//private _activeTabName?: string | null | undefined;
@@ -36,7 +36,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 
 		this.#tabsStructureHelper.setIsRoot(true);
 		this.#tabsStructureHelper.setContainerChildType('Tab');
-		this.observe(this.#tabsStructureHelper.mergedContainers, (tabs) => {
+		this.observe(this.#tabsStructureHelper.childContainers, (tabs) => {
 			this._tabs = tabs;
 			this.#checkDefaultTabName();
 		});
@@ -68,20 +68,20 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 		if (!this._tabs || !this.#blockWorkspace) return;
 
 		// Find the default tab to grab:
-		if (this._activeTabId === undefined) {
+		if (this._activeTabKey === undefined) {
 			if (this._hasRootGroups) {
 				//this._activeTabName = null;
-				this._activeTabId = null;
+				this._activeTabKey = null;
 			} else if (this._tabs.length > 0) {
 				//this._activeTabName = this._tabs[0].name;
-				this._activeTabId = this._tabs[0].id;
+				this._activeTabKey = this._tabs[0].key;
 			}
 		}
 	}
 
-	#setTabName(tabName: string | undefined | null, tabId: string | null | undefined) {
+	#setTabName(tabName: string | undefined | null, tabKey: string | null | undefined) {
 		//this._activeTabName = tabName;
-		this._activeTabId = tabId;
+		this._activeTabKey = tabKey;
 	}
 
 	override render() {
@@ -93,7 +93,7 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 							? html`
 									<uui-tab
 										label="Content"
-										.active=${null === this._activeTabId}
+										.active=${null === this._activeTabKey}
 										@click=${() => this.#setTabName(null, null)}
 										>Content</uui-tab
 									>
@@ -105,19 +105,19 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
 							(tab) => {
 								return html`<uui-tab
 									label=${tab.name ?? 'Unnamed'}
-									.active=${tab.id === this._activeTabId}
-									@click=${() => this.#setTabName(tab.name, tab.id)}
+									.active=${tab.key === this._activeTabKey}
+									@click=${() => this.#setTabName(tab.name, tab.key)}
 									>${tab.name}</uui-tab
 								>`;
 							},
 						)}
 					</uui-tab-group>`
 				: nothing}
-			${this._activeTabId !== undefined
+			${this._activeTabKey !== undefined
 				? html`<umb-block-workspace-view-edit-tab
 						.managerName=${'content'}
 						.hideSingleGroup=${true}
-						.containerId=${this._activeTabId}>
+						.containerId=${this._activeTabKey}>
 					</umb-block-workspace-view-edit-tab>`
 				: nothing}
 		`;

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts

@@ -1,7 +1,7 @@
 import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context-token.js';
 import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { UmbContentTypeModel, UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
+import type { UmbContentTypeModel, UmbPropertyTypeContainerMergedModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
@@ -42,7 +42,7 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 	hideSingleGroup = false;
 
 	@state()
-	private _groups: Array<UmbPropertyTypeContainerModel> = [];
+	private _groups: Array<UmbPropertyTypeContainerMergedModel> = [];
 
 	@state()
 	private _hasProperties = false;
@@ -60,7 +60,7 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 		if (!this.#blockWorkspace || !this.#managerName) return;
 		this.#groupStructureHelper.setStructureManager(this.#blockWorkspace[this.#managerName].structure);
 		this.observe(
-			this.#groupStructureHelper.mergedContainers,
+			this.#groupStructureHelper.childContainers,
 			(groups) => {
 				this._groups = groups;
 			},
@@ -89,18 +89,18 @@ export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
 				? this.renderGroup(this._groups[0])
 				: repeat(
 						this._groups,
-						(group) => group.id,
+						(group) => group.key,
 						(group) => html` <uui-box .headline=${group.name}>${this.renderGroup(group)}</uui-box>`,
 					)}
 		`;
 	}
 
-	renderGroup(group: UmbPropertyTypeContainerModel) {
+	renderGroup(group: UmbPropertyTypeContainerMergedModel) {
 		return html`
 			<umb-block-workspace-view-edit-properties
 				.managerName=${this.#managerName}
 				data-mark="property-group:${group.name}"
-				.containerId=${group.id}></umb-block-workspace-view-edit-properties>
+				.containerId=${group.ids[0]}></umb-block-workspace-view-edit-properties>
 		`;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts

@@ -3,7 +3,7 @@ import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context-token
 import type { UmbBlockWorkspaceViewEditTabElement } from './block-workspace-view-edit-tab.element.js';
 import { css, html, customElement, state, repeat, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { UmbContentTypeModel, UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
+import type { UmbContentTypeModel, UmbPropertyTypeContainerMergedModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
 import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
 import { encodeFolderName } from '@umbraco-cms/backoffice/router';
@@ -34,7 +34,7 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
 	private _routes: UmbRoute[] = [];
 
 	@state()
-	private _tabs?: Array<UmbPropertyTypeContainerModel>;
+	private _tabs?: Array<UmbPropertyTypeContainerMergedModel>;
 
 	@state()
 	private _routerPath?: string;
@@ -48,7 +48,7 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
 		this.#tabsStructureHelper.setIsRoot(true);
 		this.#tabsStructureHelper.setContainerChildType('Tab');
 		this.observe(
-			this.#tabsStructureHelper.mergedContainers,
+			this.#tabsStructureHelper.childContainers,
 			(tabs) => {
 				this._tabs = tabs;
 				this.#createRoutes();
@@ -102,7 +102,7 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
 					component: () => import('./block-workspace-view-edit-tab.element.js'),
 					setup: (component) => {
 						(component as UmbBlockWorkspaceViewEditTabElement).managerName = this.#managerName;
-						(component as UmbBlockWorkspaceViewEditTabElement).containerId = tab.id;
+						(component as UmbBlockWorkspaceViewEditTabElement).containerId = tab.ids[0];
 					},
 				});
 			});