From b53014f12e4e881464ecc52312dd6ef8e606f237 Mon Sep 17 00:00:00 2001 From: HannaKurban <96909212+HannaKurban@users.noreply.github.com> Date: Thu, 21 Nov 2024 13:19:56 +0300 Subject: [PATCH 1/4] FIO-8518 fixed adding checkbox with radio type to pdf design page (#5911) --- src/WebformBuilder.js | 24 ++++++------------------ 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/src/WebformBuilder.js b/src/WebformBuilder.js index 6581e6b4a1..c56bd31f7e 100644 --- a/src/WebformBuilder.js +++ b/src/WebformBuilder.js @@ -933,32 +933,20 @@ export default class WebformBuilder extends Component { const compKey = (group === 'resource') ? `component-${key}` : key; const draggableComponent = this.groups[group]?.components[compKey] || {}; - if (draggableComponent.disableSiblings) { + if (draggableComponent.disableSiblings || draggableComponent.uniqueComponent) { let isCompAlreadyExists = false; eachComponent(this.webform.components, (component) => { - if (component.type === draggableComponent.schema.type) { - isCompAlreadyExists = true; - return; - } - }, true); - if (isCompAlreadyExists) { - this.webform.redraw(); - this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`); - return; - } - } - - if (draggableComponent.uniqueComponent) { - let isCompAlreadyExists = false; - eachComponent(this.webform.components, (component) => { - if (component.key === draggableComponent.schema.key) { + if ( + (draggableComponent.disableSiblings && component.type === draggableComponent.schema.type) || + (draggableComponent.uniqueComponent && component.component.key === draggableComponent.schema.key) + ) { isCompAlreadyExists = true; return; } }, true); if (isCompAlreadyExists) { this.webform.redraw(); - this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`); + this.webform.setAlert('danger', `You cannot add more than one ${_.get(draggableComponent, draggableComponent.uniqueComponent ? 'title' : 'key')} component to one page.`); return; } } From 01ac3c796a59f8a63047d231c039103e3690594b Mon Sep 17 00:00:00 2001 From: Roman Date: Thu, 21 Nov 2024 12:20:07 +0200 Subject: [PATCH 2/4] FIO-9347: Fixed select preview issue in form builder (#5915) * FIO-9347 fixed select preivew issue in form builder * FIO-9347 fixed test cases --- src/WebformBuilder.js | 1 + test/unit/WebformBuilder.unit.js | 148 +++++++++++++++++++++++++++++++ 2 files changed, 149 insertions(+) diff --git a/src/WebformBuilder.js b/src/WebformBuilder.js index c56bd31f7e..9f401a9908 100644 --- a/src/WebformBuilder.js +++ b/src/WebformBuilder.js @@ -1349,6 +1349,7 @@ export default class WebformBuilder extends Component { const rebuild = parentComponent.rebuild() || Promise.resolve(); return rebuild.then(() => { + parentComponent.resetValue(); const schema = parentContainer ? parentContainer[index] : (comp ? comp.schema : []); this.emitSaveComponentEvent( schema, diff --git a/test/unit/WebformBuilder.unit.js b/test/unit/WebformBuilder.unit.js index 3352982454..e9413a5c18 100644 --- a/test/unit/WebformBuilder.unit.js +++ b/test/unit/WebformBuilder.unit.js @@ -602,6 +602,154 @@ describe('Select Component selectData property', () => { }).catch(done); }); + it('Should show correct default value for select component in form builder', (done) => { + const builder = Harness.getBuilder(); + builder.setForm({}).then(() => { + Harness.buildComponent('select'); + + setTimeout(() => { + const dataSrc = builder.editForm.getComponent('dataSrc'); + dataSrc.setValue('url'); + const url = builder.editForm.getComponent(['data.url']); + const valueProperty = builder.editForm.getComponent('valueProperty'); + url.setValue('htts//fakeurl.com'); + valueProperty.setValue('value'); + + setTimeout(() => { + const defaultValue = builder.editForm.getComponent('defaultValue'); + assert.equal(defaultValue.type, 'select'); + defaultValue.setValue('value1'); + defaultValue.updateItems(null, true); + + setTimeout(() => { + assert.deepEqual(builder.editForm.data.selectData, { + label: 'Label 1', + }); + Harness.saveComponent(); + setTimeout(() => { + assert.equal( + builder.webform.getComponent('select').element.querySelector('[aria-selected="true"] span').innerHTML, + 'Label 1', + ); + + const click = new MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true + }); + + builder.webform.getComponent('select').element + .querySelector('.component-settings-button-edit') + .dispatchEvent(click); + + setTimeout(() => { + const defaultValue = builder.editForm.getComponent('defaultValue'); + assert.equal(defaultValue.type, 'select'); + defaultValue.setValue('value2'); + defaultValue.updateItems(null, true); + + setTimeout(() => { + assert.deepEqual(builder.editForm.data.selectData, { + label: 'Label 2', + }); + Harness.saveComponent(); + setTimeout(() => { + assert.equal( + builder.webform.getComponent('select').element.querySelector('[aria-selected="true"] span').innerHTML, + 'Label 2', + ); + done(); + }, 150); + }, 250); + }, 500); + }, 150); + }, 250); + }, 250); + }, 150); + }).catch(done); + }); + + it('Should show correct default value for multiple select component in form builder', (done) => { + const builder = Harness.getBuilder(); + builder.setForm({}).then(() => { + Harness.buildComponent('select'); + + setTimeout(() => { + const multiple = builder.editForm.getComponent('multiple'); + multiple.setValue(true); + const dataSrc = builder.editForm.getComponent('dataSrc'); + dataSrc.setValue('url'); + const url = builder.editForm.getComponent(['data.url']); + const valueProperty = builder.editForm.getComponent('valueProperty'); + url.setValue('htts//fakeurl.com'); + valueProperty.setValue('value'); + + setTimeout(() => { + const defaultValue = builder.editForm.getComponent('defaultValue'); + assert.equal(defaultValue.type, 'select'); + defaultValue.setValue(['value1', 'value3']); + defaultValue.updateItems(null, true); + + setTimeout(() => { + assert.deepEqual(builder.editForm.data.selectData, { + value1: { + label: 'Label 1', + }, + value3: { + label: 'Label 3', + }, + }); + Harness.saveComponent(); + setTimeout(() => { + const elements = builder.webform.getComponent('select').element.querySelectorAll('.choices__list--multiple span'); + assert.deepEqual( + Array.prototype.map.call(elements, (element) => element.innerHTML), + ['Label 1', 'Label 3'], + ); + + const click = new MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true + }); + + builder.webform.getComponent('select').element + .querySelector('.component-settings-button-edit') + .dispatchEvent(click); + + setTimeout(() => { + const defaultValue = builder.editForm.getComponent('defaultValue'); + assert.equal(defaultValue.type, 'select'); + defaultValue.setValue(['value2', 'value3']); + defaultValue.updateItems(null, true); + + setTimeout(() => { + assert.deepEqual(builder.editForm.data.selectData, { + value2: { + label: 'Label 2', + }, + value3: { + label: 'Label 3', + }, + }); + Harness.saveComponent(); + setTimeout(() => { + const elements = builder.webform.getComponent('select').element.querySelectorAll('.choices__list--multiple span'); + assert.deepEqual( + Array.prototype.map.call(elements, (element) => element.innerHTML), + ['Label 2', 'Label 3'], + ); + done(); + }, 150); + }, 250); + }, 500); + }, 150); + }, 250); + }, 250); + }, 150); + }).catch(done); + }); + after((done) => { Formio.makeRequest = originalMakeRequest; Harness.builderAfter(done); From 417014a19974f2ef7c18c85d3510545439f4c0f8 Mon Sep 17 00:00:00 2001 From: Jacob Nichols <32579287+ZenMasterJacob20011@users.noreply.github.com> Date: Thu, 21 Nov 2024 04:20:18 -0600 Subject: [PATCH 3/4] made select data property a hidden component and changed hidden component empty value to null (#5910) --- src/components/hidden/Hidden.js | 2 +- src/components/select/editForm/Select.edit.data.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/hidden/Hidden.js b/src/components/hidden/Hidden.js index 23f954f4e5..977152ac2a 100644 --- a/src/components/hidden/Hidden.js +++ b/src/components/hidden/Hidden.js @@ -51,7 +51,7 @@ export default class HiddenComponent extends Input { } get emptyValue() { - return ''; + return null; } setValue(value, flags = {}) { diff --git a/src/components/select/editForm/Select.edit.data.js b/src/components/select/editForm/Select.edit.data.js index 48e32661f6..f1c41fd010 100644 --- a/src/components/select/editForm/Select.edit.data.js +++ b/src/components/select/editForm/Select.edit.data.js @@ -686,6 +686,7 @@ export default [ }, { key: 'selectData', + type: 'hidden', conditional: { json: { and: [ From 0b7cea4d2bdc8d34ee892e1f0704d73eb5123cdf Mon Sep 17 00:00:00 2001 From: TanyaGashtold <61136841+TanyaGashtold@users.noreply.github.com> Date: Thu, 21 Nov 2024 13:21:51 +0300 Subject: [PATCH 4/4] Update Changelog.md --- Changelog.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Changelog.md b/Changelog.md index 72f84c28b9..1dccd26bde 100644 --- a/Changelog.md +++ b/Changelog.md @@ -114,6 +114,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - FIO-7195: Fixes an issue where Radio/SelectBoxes will show values instead of labels on View tab and in DataTable - FIO-9217 Fix: allow moment.js datetime custom default values in calendar widget-text field components - FIO-8677: Fixes an issue where its possible to draweon Signature on the View tab of PDF form + - FIO-9314: made select data property a hidden component and changed hidden component empty value to null + - FIO-9347: fixed select preview issue in form builder + - FIO-8518: fixed adding checkbox with radio type to pdf design page ### New Features