diff --git a/src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-properties.element.ts index 720ff8432b..90c6c59528 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-properties.element.ts @@ -137,7 +137,7 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { public set containerId(value: string | null | undefined) { if (value === this._containerId) return; this._containerId = value; - this.createPropertyTypeWorkspaceRoutes(); + this.#createPropertyTypeWorkspaceRoutes(); this.#propertyStructureHelper.setContainerId(value); this.#addPropertyModal?.setUniquePathValue('container-id', value === null ? 'root' : value); this.#editPropertyModal?.setUniquePathValue('container-id', value === null ? 'root' : value); @@ -153,6 +153,12 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { >; #propertyStructureHelper = new UmbContentTypePropertyStructureHelper(this); + #initResolver?: () => void; + #initReject?: (reason?: any) => void; + #init = new Promise((resolve, reject) => { + this.#initResolver = resolve; + this.#initReject = reject; + }); @property({ attribute: false }) editContentTypePath?: string; @@ -199,22 +205,34 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { } this._ownerContentTypeUnique = workspaceContext?.structure.getOwnerContentTypeUnique(); - this.createPropertyTypeWorkspaceRoutes(); + this.#createPropertyTypeWorkspaceRoutes(); - this.observe( - workspaceContext?.variesByCulture, - (variesByCulture) => { - this._ownerContentTypeVariesByCulture = variesByCulture; - }, - 'observeOwnerVariesByCulture', - ); - this.observe( - workspaceContext?.variesBySegment, - (variesBySegment) => { - this._ownerContentTypeVariesBySegment = variesBySegment; - }, - 'observeOwnerVariesBySegment', - ); + const varyByCulturePromise = + this.observe( + workspaceContext?.variesByCulture, + (variesByCulture) => { + this._ownerContentTypeVariesByCulture = variesByCulture; + }, + 'observeOwnerVariesByCulture', + )?.asPromise() ?? Promise.reject(); + const varyBySegmentPromise = + this.observe( + workspaceContext?.variesBySegment, + (variesBySegment) => { + this._ownerContentTypeVariesBySegment = variesBySegment; + }, + 'observeOwnerVariesBySegment', + )?.asPromise() ?? Promise.reject(); + + if (this.#initResolver) { + Promise.all([varyByCulturePromise, varyBySegmentPromise]) + .then(() => { + this.#initResolver?.(); + this.#initResolver = undefined; + this.#initReject = undefined; + }) + .catch(() => {}); + } }); this.observe(this.#propertyStructureHelper.propertyStructure, (propertyStructure) => { this._properties = propertyStructure; @@ -222,7 +240,13 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { }); } - createPropertyTypeWorkspaceRoutes() { + override disconnectedCallback(): void { + super.disconnectedCallback(); + this.#initReject?.(new Error('Component disconnected')); + } + + async #createPropertyTypeWorkspaceRoutes() { + await this.#init; if (!this._ownerContentTypeUnique || this._containerId === undefined) return; // Note: Route for adding a new property @@ -247,6 +271,12 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement { } preset.sortOrder = sortOrderInt; } + if (this._ownerContentTypeVariesByCulture) { + preset.variesByCulture = true; + } + if (this._ownerContentTypeVariesBySegment) { + preset.variesBySegment = true; + } return { data: { contentTypeUnique: this._ownerContentTypeUnique, preset: preset } }; }) .observeRouteBuilder((routeBuilder) => {