From 3b399133e5caa6bfe29a9dc6edcba0ba9174d2e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 4 Dec 2023 09:35:40 +0100 Subject: [PATCH] two way binding test --- .../workspace/data-type-workspace.context.ts | 22 ++++++++++++++++++- ...-block-list-block-configuration.element.ts | 19 +++++++++++++++- .../variant-context/basic-variant-context.ts | 7 ++++-- 3 files changed, 44 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts index 36ed65fe3f..f92a0d4cb4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts @@ -151,17 +151,37 @@ export class UmbDataTypeWorkspaceContext createVariantContext(host: UmbControllerHost) { const context = new UmbBasicVariantContext(host); + + // Observe workspace name: + this.observe(this.name, (name) => { + context.setName(name ?? ''); + }); + // Observe the variant name: + this.observe(context.name, (name) => { + this.setName(name); + }); + this.observe( this.properties, (properties) => { if (properties) { properties.forEach(async (property) => { + // Observe value of workspace: this.observe( await this.propertyValueByAlias(property.alias), (value) => { context.setPropertyValue(property.alias, value); }, - 'observePropertyOf_' + property.alias, + 'observeWorkspacePropertyOf_' + property.alias, + ); + // Observe value of variant: + this.observe( + context.propertyValueByAlias(property.alias), + (value) => { + console.log('gets value back...'); + this.setPropertyValue(property.alias, value); + }, + 'observeVariantPropertyOf_' + property.alias, ); }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts index abd1a82bd5..04d4aa8f3d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts @@ -4,6 +4,7 @@ import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/prope import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from 'src/packages/core/data-type/workspace/data-type-workspace.context'; /** * @element umb-property-editor-ui-block-list-block-configuration @@ -19,12 +20,21 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement @property({ type: Object, attribute: false }) public config?: UmbPropertyEditorConfigCollection; + private _workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE; + constructor() { super(); this.consumeContext(UMB_VARIANT_CONTEXT, async (variantContext) => { console.log('variantContext', variantContext); this.observe(await variantContext.propertyValueByAlias('validationLimit'), (x) => - console.log('validationLimit', x), + console.log('variant_ validationLimit', x), + ); + }); + this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (workspaceContext) => { + this._workspaceContext = workspaceContext; + console.log('workspaceContext', workspaceContext); + this.observe(await workspaceContext.propertyValueByAlias('validationLimit'), (x) => + console.log('workspace_ validationLimit', x), ); }); } @@ -34,6 +44,13 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement
umb-property-editor-ui-block-list-block-configuration
Temporary used for the Variant Context tester.. + + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/basic-variant-context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/basic-variant-context.ts index 97f2ff4923..8022923681 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/basic-variant-context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/basic-variant-context.ts @@ -5,6 +5,10 @@ import { UMB_VARIANT_CONTEXT, UmbVariantContext } from '@umbraco-cms/backoffice/ import { UmbArrayState, UmbStringState } from '@umbraco-cms/backoffice/observable-api'; import { UmbVariantId } from '@umbraco-cms/backoffice/variant'; +/** + * A basic variant context, holds a name and a a set of properties. + * This is the base type for all variant contexts. + */ export class UmbBasicVariantContext extends UmbContextBase implements UmbVariantContext @@ -31,6 +35,7 @@ export class UmbBasicVariantContext getVariantId() { return UmbVariantId.CreateInvariant(); } + // variant id for a specific property? constructor(host: UmbControllerHost) { // The controller alias, is a very generic name cause we want only one of these for this controller host. @@ -39,7 +44,6 @@ export class UmbBasicVariantContext /** * TODO: Write proper JSDocs here. - * Ideally do not use these methods, its better to communicate directly with the workspace, but if you do not know the property variant id, then this will figure it out for you. So good for externals to set or get values of a property. */ propertyValueByAlias(propertyAlias: string) { return this.#values.asObservablePart((values) => { @@ -50,7 +54,6 @@ export class UmbBasicVariantContext /** * TODO: Write proper JSDocs here. - * Ideally do not use these methods, its better to communicate directly with the workspace, but if you do not know the property variant id, then this will figure it out for you. So good for externals to set or get values of a property. */ setPropertyValue(alias: string, value: unknown) { this.#values.appendOne({ alias, value });