From 5e472c935237c1cefd5434f88d5afc027ebac04f Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Tue, 7 Jan 2025 14:40:31 +0200 Subject: [PATCH] Fix collection variables not listening correctly --- .../model/DataVariableListenerManager.ts | 9 ++ .../CollectionComponent.ts | 2 +- .../CollectionVariable.ts | 4 + .../CollectionComponent.ts | 85 ++++++++++++------- 4 files changed, 70 insertions(+), 30 deletions(-) diff --git a/packages/core/src/data_sources/model/DataVariableListenerManager.ts b/packages/core/src/data_sources/model/DataVariableListenerManager.ts index ccd119aa9..a43ef0b63 100644 --- a/packages/core/src/data_sources/model/DataVariableListenerManager.ts +++ b/packages/core/src/data_sources/model/DataVariableListenerManager.ts @@ -6,6 +6,8 @@ import DataVariable, { DataVariableType } from './DataVariable'; import { DynamicValue } from '../types'; import { DataCondition, ConditionalVariableType } from './conditional_variables/DataCondition'; import ComponentDataVariable from './ComponentDataVariable'; +import { CollectionVariableType } from './collection_component/constants'; +import CollectionVariable from './collection_component/CollectionVariable'; export interface DynamicVariableListenerManagerOptions { em: EditorModel; @@ -41,6 +43,13 @@ export default class DynamicVariableListenerManager { const type = dynamicVariable.get('type'); let dataListeners: DataVariableListener[] = []; switch (type) { + case CollectionVariableType: + const collectionVariable = dynamicVariable as CollectionVariable; + if (collectionVariable.hasDynamicValue()) { + dataListeners = this.listenToDataVariable(collectionVariable.dataVariable!, em); + } + + break; case DataVariableType: dataListeners = this.listenToDataVariable(dynamicVariable as DataVariable | ComponentDataVariable, em); break; diff --git a/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts b/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts index c5c29ea1a..ae925e416 100644 --- a/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts +++ b/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts @@ -1,7 +1,7 @@ import DataVariable, { DataVariableType } from './../DataVariable'; import { isArray } from 'underscore'; import Component, { keySymbol, keySymbolOvrd, keySymbols } from '../../../dom_components/model/Component'; -import { ComponentDefinition, ComponentOptions, ComponentProperties } from '../../../dom_components/model/types'; +import { ComponentOptions, ComponentProperties } from '../../../dom_components/model/types'; import { toLowerCase } from '../../../utils/mixins'; import DataSource from '../DataSource'; import { ObjectAny } from '../../../common'; diff --git a/packages/core/src/data_sources/model/collection_component/CollectionVariable.ts b/packages/core/src/data_sources/model/collection_component/CollectionVariable.ts index de6eecedb..113ecd30f 100644 --- a/packages/core/src/data_sources/model/collection_component/CollectionVariable.ts +++ b/packages/core/src/data_sources/model/collection_component/CollectionVariable.ts @@ -24,6 +24,10 @@ export default class CollectionVariable extends Model { let dsm: DataSourceManager; let dataSource: DataSource; let wrapper: Component; + let firstRecord: DataRecord; + let secondRecord: DataRecord; beforeEach(() => { ({ em, dsm } = setupTestEditor()); @@ -28,6 +30,9 @@ describe('Collection component', () => { { id: 'user3', user: 'user3', age: '16' }, ], }); + + firstRecord = dataSource.getRecord('user1')!; + secondRecord = dataSource.getRecord('user2')!; }); afterEach(() => { @@ -85,39 +90,57 @@ describe('Collection component', () => { }); describe('Collection variables', () => { - test('Properties', () => { - const cmp = wrapper.components({ - type: CollectionComponentType, - collectionDefinition: { - block: { - type: 'default', - content: { - type: CollectionVariableType, - variable_type: CollectionStateVariableType.current_item, - path: 'user', - }, - custom_property: { - type: CollectionVariableType, - variable_type: CollectionStateVariableType.current_item, - path: 'user', + describe('Properties', () => { + let cmp: Component; + let firstChild!: Component; + let secondChild!: Component; + + beforeEach(() => { + cmp = wrapper.components({ + type: CollectionComponentType, + collectionDefinition: { + block: { + type: 'default', + content: { + type: CollectionVariableType, + variable_type: CollectionStateVariableType.current_item, + path: 'user', + }, + custom_property: { + type: CollectionVariableType, + variable_type: CollectionStateVariableType.current_item, + path: 'user', + }, }, - }, - config: { - dataSource: { - type: DataVariableType, - path: 'my_data_source_id', + config: { + dataSource: { + type: DataVariableType, + path: 'my_data_source_id', + }, }, }, - }, - })[0]; - const firstChild = cmp.components().at(0); - const secondChild = cmp.components().at(1); + })[0]; + + firstChild = cmp.components().at(0); + secondChild = cmp.components().at(1); + }); + + test('Evaluating to static value', () => { + expect(firstChild.get('content')).toBe('user1'); + expect(firstChild.get('custom_property')).toBe('user1'); + + expect(secondChild.get('content')).toBe('user2'); + expect(secondChild.get('custom_property')).toBe('user2'); + }); - expect(firstChild.get('content')).toBe('user1'); - expect(firstChild.get('custom_property')).toBe('user1'); + test('Updating the record', async () => { + firstRecord.set('user', 'new_user1_value'); + expect(firstChild.get('content')).toBe('new_user1_value'); + expect(firstChild.get('custom_property')).toBe('new_user1_value'); - expect(secondChild.get('content')).toBe('user2'); - expect(secondChild.get('custom_property')).toBe('user2'); + expect(secondChild.get('content')).toBe('user2'); + expect(secondChild.get('custom_property')).toBe('user2'); + }); }); test('Attributes', () => { @@ -332,3 +355,7 @@ describe('Collection component', () => { }); }); }); + +function delay(ms: number): Promise { + return new Promise((resolve) => setTimeout(resolve, ms)); +}