Property type: Vary in the same way as the owner Document Type (#20751)

set new property type preset to vary if document type varies

Author: nielslyngsoe

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<UmbContentTypeModel>(this);
+	#initResolver?: () => void;
+	#initReject?: (reason?: any) => void;
+	#init = new Promise<void>((resolve, reject) => {
+		this.#initResolver = resolve;
+		this.#initReject = reject;
+	});
 
 	@property({ attribute: false })
 	editContentTypePath?: string;
@@ -199,30 +205,48 @@ export class UmbContentTypeDesignEditorPropertiesElement extends UmbLitElement {
 			}
 
 			this._ownerContentTypeUnique = workspaceContext?.structure.getOwnerContentTypeUnique();
-			this.createPropertyTypeWorkspaceRoutes();
-
-			this.observe(
-				workspaceContext?.variesByCulture,
-				(variesByCulture) => {
-					this._ownerContentTypeVariesByCulture = variesByCulture;
-				},
-				'observeOwnerVariesByCulture',
-			);
-			this.observe(
-				workspaceContext?.variesBySegment,
-				(variesBySegment) => {
-					this._ownerContentTypeVariesBySegment = variesBySegment;
-				},
-				'observeOwnerVariesBySegment',
-			);
+			this.#createPropertyTypeWorkspaceRoutes();
+
+			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;
 			this.#sorter.setModel(this._properties);
 		});
 	}
 
-	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) => {