diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts index 2422691372..1efc1e29fa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts @@ -150,7 +150,7 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement { ${this.#renderContainerHeader()} + .containerId=${this._groupId}> `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts index 0eee13e44d..7e8f9043aa 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-properties.element.ts @@ -46,19 +46,26 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { #sorter = new UmbSorterController(this, { ...SORTER_CONFIG, onChange: ({ model }) => { - this._propertyStructure = model; + this._properties = model; + }, + onContainerChange: ({ item }) => { + if (this._containerId === undefined) { + throw new Error('ContainerId is not set'); + } + this.#propertyStructureHelper.partialUpdateProperty(item.id, { + container: this._containerId ? { id: this._containerId } : null, + }); }, onEnd: ({ item }) => { if (this._containerId === undefined) { - throw new Error('ContainerId is not set, we have not made a local duplicated of this container.'); - return; + throw new Error('ContainerId is not set.'); } /** * Explanation: If the item is the first in list, we compare it to the item behind it to set a sortOrder. * If it's not the first in list, we will compare to the item in before it, and check the following item to see if it caused overlapping sortOrder, then update * the overlap if true, which may cause another overlap, so we loop through them till no more overlaps... */ - const model = this._propertyStructure; + const model = this._properties; const newIndex = model.findIndex((entry) => entry.id === item.id); // Doesn't exist in model @@ -122,7 +129,7 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { editContentTypePath?: string; @state() - private _propertyStructure: Array = []; + private _properties: Array = []; @state() private _ownerContentTypeUnique?: string; @@ -163,8 +170,8 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { this.createPropertyTypeWorkspaceRoutes(); }); this.observe(this.#propertyStructureHelper.propertyStructure, (propertyStructure) => { - this._propertyStructure = propertyStructure; - this.#sorter.setModel(this._propertyStructure); + this._properties = propertyStructure; + this.#sorter.setModel(this._properties); }); } @@ -189,7 +196,7 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { let sortOrderInt = parseInt(params.sortOrder); if (sortOrderInt === -1) { // Find the highest sortOrder and add 1 to it: - sortOrderInt = Math.max(...this._propertyStructure.map((x) => x.sortOrder), -1) + 1; + sortOrderInt = Math.max(...this._properties.map((x) => x.sortOrder), -1) + 1; } preset.sortOrder = sortOrderInt; } @@ -202,6 +209,7 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { containerUnique: this._containerId!, }); }); + if (this._containerId !== undefined) { this.#addPropertyModal?.setUniquePathValue( 'container-id', @@ -237,7 +245,7 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { ? html`
${repeat( - this._propertyStructure, + this._properties, (property) => property.id, (property) => { return html`