From 606556f7e6c84174ef1b9c4afbedaa43eededa35 Mon Sep 17 00:00:00 2001 From: Roman Letsuk Date: Tue, 3 Dec 2024 09:25:25 +0200 Subject: [PATCH 1/3] FIO-8724: fixed firing change event for DataGrid component --- src/components/datagrid/DataGrid.js | 4 ++ test/unit/DataGrid.unit.js | 91 ++++++++++++++++++++++++++++- test/unit/Webform.unit.js | 4 +- 3 files changed, 95 insertions(+), 4 deletions(-) diff --git a/src/components/datagrid/DataGrid.js b/src/components/datagrid/DataGrid.js index 0fd9523511..b9aa6e569b 100644 --- a/src/components/datagrid/DataGrid.js +++ b/src/components/datagrid/DataGrid.js @@ -491,6 +491,7 @@ export default class DataGridComponent extends NestedArrayComponent { }); this.checkConditions(); this.triggerChange(); + this.triggerChange({ modified: true }); this.redraw().then(() => { this.focusOnNewRowElement(this.rows[index]); }); @@ -578,6 +579,9 @@ export default class DataGridComponent extends NestedArrayComponent { const options = _.clone(this.options); options.name += `[${rowIndex}]`; options.row = `${rowIndex}-${colIndex}`; + options.onChange = (flags, changed, modified) => { + this.triggerChange({ modified }); + } let columnComponent; diff --git a/test/unit/DataGrid.unit.js b/test/unit/DataGrid.unit.js index 2677611c38..7e03aa81ab 100644 --- a/test/unit/DataGrid.unit.js +++ b/test/unit/DataGrid.unit.js @@ -436,7 +436,7 @@ describe('DataGrid Component', () => { done(); }).catch(done); }, 300); - }, 300); + }, 350); }, 300); }, 300); }) @@ -525,6 +525,93 @@ describe('DataGrid Component', () => { }, 300); }).catch((err) => done(err)); }); + + it('Should trigger DataGrid change event when row component value changes', (done) => { + Formio.createForm(document.createElement('div'), { + type: 'form', + display: 'form', + components: [{ + label: 'Datagrid', + key: 'dataGrid', + type: 'datagrid', + defaultValue: [{ }], + input: true, + components: [ + { + label: 'Number', + key: 'number', + type: 'number', + input: true + }, + ], + }], + }).then((form) => { + form.on('change', ({ changed }) => { + assert(changed.component.key, 'dataGrid'); + done(); + }); + const numberComp = form.getComponent(['dataGrid', 0, 'number']); + numberComp.setValue(1); + }).catch((err) => done(err)); + }); + + it('Should trigger DataGrid change event when adding a new row', (done) => { + Formio.createForm(document.createElement('div'), { + type: 'form', + display: 'form', + components: [{ + label: 'Datagrid', + key: 'dataGrid', + type: 'datagrid', + defaultValue: [{ }], + input: true, + components: [ + { + label: 'Number', + key: 'number', + type: 'number', + input: true + }, + ], + }], + }).then((form) => { + form.on('change', ({ changed }) => { + assert(changed.component.key, 'dataGrid'); + done(); + }); + const dataGrid = form.getComponent(['dataGrid']); + dataGrid.addRow(); + }).catch((err) => done(err)); + }); + + it('Should trigger DataGrid change event when removing the row', (done) => { + Formio.createForm(document.createElement('div'), { + type: 'form', + display: 'form', + components: [{ + label: 'Datagrid', + key: 'dataGrid', + type: 'datagrid', + defaultValue: [{ }], + input: true, + components: [ + { + label: 'Number', + key: 'number', + type: 'number', + input: true + }, + ], + }], + }).then((form) => { + form.on('change', ({ changed }) => { + assert(changed.component.key, 'dataGrid'); + done(); + }); + const dataGrid = form.getComponent(['dataGrid']); + dataGrid.removeRow(0); + }).catch((err) => done(err)); + }); }); describe('DataGrid Panels', () => { @@ -971,7 +1058,7 @@ describe('SaveDraft functionality', () => { { saveDraft: true, skipDraftRestore: true, - saveDraftThrottle: 100 + saveDraftThrottle: 300 } ).then((form) => { setTimeout(() => { diff --git a/test/unit/Webform.unit.js b/test/unit/Webform.unit.js index 145d157693..0161903698 100644 --- a/test/unit/Webform.unit.js +++ b/test/unit/Webform.unit.js @@ -814,7 +814,7 @@ describe('Webform tests', function() { done(); }, 300); }, 300); - }, 300); + }, 450); }).catch((err) => done(err)); }); @@ -3717,7 +3717,7 @@ describe('Webform tests', function() { assert.equal(radio.dataValue, calculatedValues.radio); document.body.innerHTML = ''; done(); - }, 300); + }, 350); }, 300); }, 300); }, 300); From e0a03fbadcaee8975f4a47f2ca31c8fe203e420d Mon Sep 17 00:00:00 2001 From: John Teague <164385719+johnformio@users.noreply.github.com> Date: Tue, 17 Dec 2024 10:37:16 -0600 Subject: [PATCH 2/3] updated timeouts for webform test --- test/unit/Webform.unit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/unit/Webform.unit.js b/test/unit/Webform.unit.js index e55ae513b4..f446ce47da 100644 --- a/test/unit/Webform.unit.js +++ b/test/unit/Webform.unit.js @@ -217,9 +217,9 @@ describe('Webform tests', function() { assert.equal(textArea.visible, true); assert.equal(textField.visible, true); done(); - }, 300); - }, 300); - }, 300); + }, 400); + }, 400); + }, 400); }); }); From 1b570d007d018a8acf49a1d89d93fff3046018c1 Mon Sep 17 00:00:00 2001 From: Roman Letsuk Date: Fri, 27 Dec 2024 16:04:11 +0300 Subject: [PATCH 3/3] FIO-8724: fixed failing test case --- src/components/datagrid/DataGrid.js | 1 - src/components/form/Form.js | 10 +++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/datagrid/DataGrid.js b/src/components/datagrid/DataGrid.js index 294b071a07..c085cef1c0 100644 --- a/src/components/datagrid/DataGrid.js +++ b/src/components/datagrid/DataGrid.js @@ -489,7 +489,6 @@ export default class DataGridComponent extends NestedArrayComponent { row }); this.checkConditions(); - this.triggerChange(); this.triggerChange({ modified: true }); this.redraw().then(() => { this.focusOnNewRowElement(this.rows[index]); diff --git a/src/components/form/Form.js b/src/components/form/Form.js index 6bd19a666a..eee6ef49ae 100644 --- a/src/components/form/Form.js +++ b/src/components/form/Form.js @@ -370,6 +370,10 @@ export default class FormComponent extends Component { && this.formObj._vid !== this.subFormRevision; } + get subFormData() { + return this.dataValue?.data || {}; + } + destroy(all = false) { if (this.subForm) { this.subForm.destroy(all); @@ -535,14 +539,14 @@ export default class FormComponent extends Component { } if (this.subForm) { - return this.subForm.checkConditions(data, flags, row); + return this.subForm.checkConditions(this.subFormData, flags); } // There are few cases when subForm is not loaded when a change is triggered, // so we need to perform checkConditions after it is ready, or some conditional fields might be hidden in View mode else if (this.subFormReady) { this.subFormReady.then(() => { if (this.subForm) { - return this.subForm.checkConditions(data, flags, row); + return this.subForm.checkConditions(this.subFormData, flags); } }); } @@ -552,7 +556,7 @@ export default class FormComponent extends Component { calculateValue(data, flags, row) { if (this.subForm) { - return this.subForm.calculateValue(data, flags, row); + return this.subForm.calculateValue(this.subFormData, flags); } return super.calculateValue(data, flags, row);