From 2eef990d20419ca56cb54afc095cf91faab0fefc Mon Sep 17 00:00:00 2001 From: Hanna Kurban Date: Fri, 19 Apr 2024 11:06:14 +0300 Subject: [PATCH] FIO-8074 Added Storage Type to Radio Components --- src/components/radio/Radio.js | 41 +++++++--- src/components/radio/Radio.unit.js | 35 +++++++- .../radio/editForm/Radio.edit.data.js | 20 +++++ src/components/radio/fixtures/comp11.js | 81 +++++++++++++++++++ src/components/radio/fixtures/index.js | 3 +- 5 files changed, 167 insertions(+), 13 deletions(-) create mode 100644 src/components/radio/fixtures/comp11.js diff --git a/src/components/radio/Radio.js b/src/components/radio/Radio.js index c7ca490196..0644268890 100644 --- a/src/components/radio/Radio.js +++ b/src/components/radio/Radio.js @@ -193,7 +193,8 @@ export default class RadioComponent extends ListComponent { } if (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) { - input.checked = _.isEqual(this.loadedOptions[index].value, this.dataValue); + const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value; + input.checked = _.isEqual(optionValue, this.dataValue); } else { input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url')); @@ -420,21 +421,39 @@ export default class RadioComponent extends ListComponent { * @return {*} */ normalizeValue(value) { + const dataType = this.component.dataType || 'auto'; if (value === this.emptyValue) { return value; } - const isEquivalent = _.toString(value) === Number(value).toString(); + switch (dataType) { + case 'auto': - if (!isNaN(parseFloat(value)) && isFinite(value) && isEquivalent) { - value = +value; - } - if (value === 'true') { - value = true; - } - if (value === 'false') { - value = false; - } + if (!isNaN(parseFloat(value)) && isFinite(value) && _.toString(value) === Number(value).toString()) { + value = +value; + } + if (value === 'true') { + value = true; + } + if (value === 'false') { + value = false; + } + break; + case 'number': + value = +value; + break; + case 'string': + if (typeof value === 'object') { + value = JSON.stringify(value); + } + else { + value = String(value); + } + break; + case 'boolean': + value = !(!value || value.toString() === 'false'); + break; + } if (this.isSelectURL && this.templateData && this.templateData[value]) { const submission = this.root.submission; diff --git a/src/components/radio/Radio.unit.js b/src/components/radio/Radio.unit.js index aa6a77427f..eee51670f4 100644 --- a/src/components/radio/Radio.unit.js +++ b/src/components/radio/Radio.unit.js @@ -14,7 +14,8 @@ import { comp7, comp8, comp9, - comp10 + comp10, + comp11 } from './fixtures'; describe('Radio Component', () => { @@ -114,6 +115,38 @@ describe('Radio Component', () => { }); }); + it('Should set the Value according to Storage Type', (done) => { + const form = _.cloneDeep(comp11); + const element = document.createElement('div'); + + Formio.createForm(element, form).then(form => { + const radioNumber = form.getComponent('radioNumber'); + const radioString = form.getComponent('radioString'); + const radioBoolean = form.getComponent('radioBoolean'); + const value1 = '0'; + const value2 = 'true'; + radioNumber.setValue(value1); + radioString.setValue(value1); + radioBoolean.setValue(value2); + + const submit = form.getComponent('submit'); + const clickEvent = new Event('click'); + const submitBtn = submit.refs.button; + submitBtn.dispatchEvent(clickEvent); + + setTimeout(() => { + assert.equal(form.submission.data.radioNumber, 0); + assert.equal(typeof form.submission.data.radioNumber, 'number'); + assert.equal(form.submission.data.radioString, '0'); + assert.equal(typeof form.submission.data.radioString, 'string'); + assert.equal(form.submission.data.radioBoolean, true); + assert.equal(typeof form.submission.data.radioBoolean, 'boolean'); + document.innerHTML = ''; + done(); + }, 300); + }).catch(done); + }); + it('Should set correct data for 0s values', (done) => { Harness.testCreate(RadioComponent, comp10).then((component) => { component.setValue('01'); diff --git a/src/components/radio/editForm/Radio.edit.data.js b/src/components/radio/editForm/Radio.edit.data.js index f46f60aa22..bcf084468b 100644 --- a/src/components/radio/editForm/Radio.edit.data.js +++ b/src/components/radio/editForm/Radio.edit.data.js @@ -75,6 +75,26 @@ export default [ json: { '===': [{ var: 'data.dataSrc' }, 'values'] }, }, }, + { + type: 'select', + input: true, + label: 'Storage Type', + key: 'dataType', + clearOnHide: true, + tooltip: 'The type to store the data. If you select something other than autotype, it will force it to that type.', + weight: 12, + template: '{{ item.label }}', + dataSrc: 'values', + data: { + values: [ + { label: 'Autotype', value: 'auto' }, + { label: 'String', value: 'string' }, + { label: 'Number', value: 'number' }, + { label: 'Boolean', value: 'boolean' }, + { label: 'Object', value: 'object' }, + ], + }, + }, { key: 'template', conditional: { diff --git a/src/components/radio/fixtures/comp11.js b/src/components/radio/fixtures/comp11.js new file mode 100644 index 0000000000..4a9eb48c25 --- /dev/null +++ b/src/components/radio/fixtures/comp11.js @@ -0,0 +1,81 @@ +export default { + title: 'Test', + name: 'test', + path: 'test', + type: 'form', + display: 'form', + components: [ + { + label: 'Radio', + optionsLabelPosition: 'right', + inline: false, + tableView: false, + values: [ + { + label: '0', + value: '0', + shortcut: '' + }, + { + label: '1', + value: '1', + shortcut: '' + } + ], + key: 'radioNumber', + type: 'radio', + dataType: 'number', + input: true + }, + { + label: 'Radio', + optionsLabelPosition: 'right', + inline: false, + tableView: false, + values: [ + { + label: '0', + value: '0', + shortcut: '' + }, + { + label: '1', + value: '1', + shortcut: '' + }], + key: 'radioString', + dataType: 'string', + type: 'radio', + input: true + }, + { + label: 'Radio', + optionsLabelPosition: 'right', + inline: false, + tableView: false, + values: [ + { + label: 'true', + value: 'true', + shortcut: '' + }, + { + label: 'false', + value: 'false', + shortcut: '' + }], + key: 'radioBoolean', + dataType: 'boolean', + type: 'radio', + input: true + }, + { + type: 'button', + label: 'Submit', + key: 'submit', + disableOnInvalid: true, + input: true, + tableView: false + } + ] +}; diff --git a/src/components/radio/fixtures/index.js b/src/components/radio/fixtures/index.js index 9db3870977..461e633cda 100644 --- a/src/components/radio/fixtures/index.js +++ b/src/components/radio/fixtures/index.js @@ -8,4 +8,5 @@ import comp7 from './comp7'; import comp8 from './comp8'; import comp9 from './comp9'; import comp10 from './comp10'; -export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 }; +import comp11 from './comp11'; +export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };