diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 2a96c2e0c0..6c3e347419 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -15,9 +15,11 @@ import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router'; import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; -import type { UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/block'; +import { UmbVariantValuesValidationPathTranslator, type UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/block'; import '../../components/block-list-entry/index.js'; +import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; +import { UmbValidationContext } from '@umbraco-cms/backoffice/validation'; const SORTER_CONFIG: UmbSorterConfig = { getUniqueOfElement: (element) => { @@ -44,6 +46,8 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement }, }); + #contentDataPathTranslator?: UmbVariantValuesValidationPathTranslator; + //#catalogueModal: UmbModalRouteRegistrationController; private _value: UmbBlockListValueModel = { @@ -117,10 +121,34 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement #managerContext = new UmbBlockListManagerContext(this); #entriesContext = new UmbBlockListEntriesContext(this); + #validationContext = new UmbValidationContext(this); constructor() { super(); + this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => { + this.observe( + context.dataPath, + (dataPath) => { + // + // TODO: Make translator for settings. + + this.#contentDataPathTranslator?.destroy(); + if (dataPath) { + // Set the data path for the local validation context: + this.#validationContext.setDataPath(dataPath); + + this.#contentDataPathTranslator = new UmbVariantValuesValidationPathTranslator( + this, + dataPath, + 'contentData', + ); + } + }, + 'observeDataPath', + ); + }); + this.observe(this.#entriesContext.layoutEntries, (layouts) => { this._layouts = layouts; // Update sorter. diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts index 70eae81ddd..0e7cb3f0dc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/index.ts @@ -1,5 +1,5 @@ export * from './context/index.js'; export * from './modals/index.js'; -export * from './utils/data-path-content-data-filter.function.js'; export * from './types.js'; +export * from './validation/index.js'; export * from './workspace/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-data-validation-path-translator.controller.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-data-validation-path-translator.controller.ts new file mode 100644 index 0000000000..f507fb8f55 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/block-data-validation-path-translator.controller.ts @@ -0,0 +1,45 @@ +import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbValidationPathTranslatorBase } from '@umbraco-cms/backoffice/validation'; +import { UmbDataPathBlockElementDataFilter } from './data-path-element-data-filter.function.js'; + +export class UmbVariantValuesValidationPathTranslator extends UmbValidationPathTranslatorBase { + #pathStart: string; + + constructor(host: UmbControllerHost, baseDataPath: string, propertyName: 'contentData' | 'settingsData') { + super(host); + this.#pathStart = baseDataPath + '.' + propertyName + '['; + console.log('UmbVariantValuesValidationPathTranslator', this.#pathStart); + } + + translate(path: string) { + if (!this._context) return; + console.log('translate', path); + if (path.indexOf(this.#pathStart) !== 0) { + // We do not handle this path. + return false; + } + const startLength = this.#pathStart.length; + console.log('translate got a match on step one'); + const pathEnd = path.indexOf(']', startLength); + if (pathEnd === -1) { + // We do not handle this path. + return false; + } + // retrieve the number from the message values index: [NL] + const index = parseInt(path.substring(startLength, pathEnd)); + + console.log('translate index', path.substring(startLength, pathEnd), index); + if (isNaN(index)) { + // index is not a number, this means its not a path we want to translate. [NL] + return false; + } + + // Get the data from the validation request, the context holds that for us: [NL] + const data = this._context.getData(); + console.log('go to this point', data); + + const specificValue = data.contentData[index]; + // replace the values[ number ] with JSON-Path filter values[@.(...)], continues by the rest of the path: + return this.#pathStart + UmbDataPathBlockElementDataFilter(specificValue) + path.substring(path.indexOf(']')); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/utils/data-path-content-data-filter.function.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/data-path-element-data-filter.function.ts similarity index 50% rename from src/Umbraco.Web.UI.Client/src/packages/block/block/utils/data-path-content-data-filter.function.ts rename to src/Umbraco.Web.UI.Client/src/packages/block/block/validation/data-path-element-data-filter.function.ts index adc9b07110..be01a28c10 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/utils/data-path-content-data-filter.function.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/data-path-element-data-filter.function.ts @@ -1,12 +1,14 @@ +import type { UmbBlockDataType } from '../types.js'; + /** - * Validation Data Path filter for Block Content Data. + * Validation Data Path filter for Block Element Data. * write a JSON-Path filter similar to `?(@.udi = 'my-udi://1234')` - * @param udi {string} - The udi of the block content data. + * @param udi {string} - The udi of the block Element data. * @returns */ -export function UmbDataPathBlockContentDataFilter(udi: string): string { +export function UmbDataPathBlockElementDataFilter(data: UmbBlockDataType): string { // write a array of strings for each property, where alias must be present and culture and segment are optional //const filters: Array = [`@.udi = '${udi}'`]; //return `?(${filters.join(' && ')})`; - return `?(@.udi = '${udi}')`; + return `?(@.udi = '${data.udi}')`; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/index.ts new file mode 100644 index 0000000000..34a563d9d5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/validation/index.ts @@ -0,0 +1,2 @@ +export * from './block-data-validation-path-translator.controller.js'; +export * from './data-path-element-data-filter.function.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/context/validation.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/validation/context/validation.context.ts index f74b25ae27..fcc03148d5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/context/validation.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/validation/context/validation.context.ts @@ -3,6 +3,7 @@ import type { UmbValidator } from '../interfaces/validator.interface.js'; import { UmbValidationMessage, UmbValidationMessagesManager } from './validation-messages.manager.js'; import { UMB_VALIDATION_CONTEXT } from './validation.context-token.js'; import { type UmbClassInterface, UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; +import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; function ReplaceStartOfString(path: string, startFrom: string, startTo: string): string { if (path.startsWith(startFrom + '.')) { @@ -26,6 +27,10 @@ export class UmbValidationContext extends UmbControllerBase implements UmbValida public readonly messages = new UmbValidationMessagesManager(); + constructor(host: UmbControllerHost) { + super(host); + } + /** * Provides the validation context to the current host, if not already provided to a different host. * @returns instance {UmbValidationContext} - Returns it self.