refactor data path filter generator

src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/content-editor-properties.element.ts

@@ -23,12 +23,13 @@ export class UmbContentWorkspaceViewEditPropertiesElement extends UmbLitElement
 	}
 
 	#propertyStructureHelper = new UmbContentTypePropertyStructureHelper<UmbContentTypeModel>(this);
+	#variantId?: UmbVariantId;
 
 	@state()
 	_propertyStructure?: Array<UmbPropertyTypeModel>;
 
 	@state()
-	_variantId?: UmbVariantId;
+	_dataPaths?: Array<string>;
 
 	constructor() {
 		super();
@@ -40,26 +41,40 @@ export class UmbContentWorkspaceViewEditPropertiesElement extends UmbLitElement
 			);
 		});
 		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
-			this._variantId = datasetContext.getVariantId();
+			this.#variantId = datasetContext.getVariantId();
+			this.#generatePropertyDataPath();
 		});
 		this.observe(
 			this.#propertyStructureHelper.propertyStructure,
 			(propertyStructure) => {
 				this._propertyStructure = propertyStructure;
+				this.#generatePropertyDataPath();
 			},
 			null,
 		);
 	}
 
+	#generatePropertyDataPath() {
+		if (!this.#variantId || !this._propertyStructure) return;
+		this._dataPaths = this._propertyStructure.map(
+			(property) =>
+				`$.values[${UmbDataPathPropertyValueFilter({
+					alias: property.alias,
+					culture: property.variesByCulture ? this.#variantId!.culture : null,
+					segment: property.variesBySegment ? this.#variantId!.segment : null,
+				})}].value`,
+		);
+	}
+
 	render() {
-		return this._propertyStructure
+		return this._propertyStructure && this._dataPaths
 			? repeat(
 					this._propertyStructure,
 					(property) => property.alias,
-					(property) =>
+					(property, index) =>
 						html`<umb-property-type-based-property
 							class="property"
-							.dataPath="$.values[${UmbDataPathPropertyValueFilter(property)}].value"
+							.dataPath=${this._dataPaths![index]}
 							.property=${property}></umb-property-type-based-property> `,
 				)
 			: '';

src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts

@@ -15,4 +15,4 @@ export * from './string/generate-umbraco-alias.function.js';
 export * from './string/increment-string.function.js';
 export * from './string/split-string-to-array.js';
 export * from './string/to-camel-case/to-camel-case.function.js';
-export * from './type/diff.type.js';
+export type * from './type/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/utils/type/index.ts

@@ -0,0 +1,2 @@
+export * from './diff.type.js';
+export * from './partial-some.type.js';

src/Umbraco.Web.UI.Client/src/packages/core/utils/type/partial-some.type.ts

@@ -0,0 +1 @@
+export type PartialSome<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-property-value-filter.function.ts

@@ -1,3 +1,4 @@
+import type { PartialSome } from '@umbraco-cms/backoffice/utils';
 import type { UmbVariantPropertyValueModel } from '@umbraco-cms/backoffice/variant';
 
 /**
@@ -7,7 +8,9 @@ import type { UmbVariantPropertyValueModel } from '@umbraco-cms/backoffice/varia
  * @param value
  * @returns
  */
-export function UmbDataPathPropertyValueFilter(value: Omit<UmbVariantPropertyValueModel, 'value'>): string {
+export function UmbDataPathPropertyValueFilter(
+	value: PartialSome<Omit<UmbVariantPropertyValueModel, 'value'>, 'culture' | 'segment'>,
+): string {
 	// write a array of strings for each property, where alias must be present and culture and segment are optional
 	const filters: Array<string> = [`@.alias = '${value.alias}'`];
 	if (value.culture) {

src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts

@@ -45,7 +45,6 @@ export class UmbPropertyEditorConfigElement extends UmbLitElement {
 					this._properties,
 					(property) => property.alias,
 					(property) =>
-						// TODO: Make a helper method to generate data-path entry for a property.
 						html`<umb-property
 							.dataPath="$.values[${UmbDataPathPropertyValueFilter(property)}].value"
 							label=${property.label}