diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/content-editor-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/content-editor-properties.element.ts index 3f7c897c09..6fa1107a5b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/content/workspace/views/edit/content-editor-properties.element.ts +++ b/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(this); + #variantId?: UmbVariantId; @state() _propertyStructure?: Array; @state() - _variantId?: UmbVariantId; + _dataPaths?: Array; 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` `, ) : ''; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts index ad688e29d5..903ec84c9c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts +++ b/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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/type/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/type/index.ts new file mode 100644 index 0000000000..1aac725c2b --- /dev/null +++ b/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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/type/partial-some.type.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/type/partial-some.type.ts new file mode 100644 index 0000000000..d5fd502f1a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/type/partial-some.type.ts @@ -0,0 +1 @@ +export type PartialSome = Omit & Partial>; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-property-value-filter.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-property-value-filter.function.ts index dacbabeece..5de89688b5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/utils/data-path-property-value-filter.function.ts +++ b/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): string { +export function UmbDataPathPropertyValueFilter( + value: PartialSome, '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 = [`@.alias = '${value.alias}'`]; if (value.culture) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts index 4d1a01c262..e8e6660b81 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/property-editor-config/property-editor-config.element.ts +++ b/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`