From c9431f38dc219465e7914b66a824627fc63a7a85 Mon Sep 17 00:00:00 2001 From: TanyaGashtold <61136841+TanyaGashtold@users.noreply.github.com> Date: Thu, 7 Dec 2023 19:11:40 +0300 Subject: [PATCH] FIO-7588: fixed string value for Survey and Select (#5422) * FIO-7588: fixed string value for Survey and Select * fixed render tests --- src/components/select/Select.js | 23 ++++++++++++------- src/components/select/Select.unit.js | 6 +++++ src/components/survey/Survey.js | 11 +++++++++ .../testBasicComponentSettings/values.js | 2 +- ...ponent-bootstrap-survey-string-value1.html | 2 +- ...ponent-bootstrap-survey-string-value2.html | 2 +- test/updateRenders.js | 2 +- 7 files changed, 36 insertions(+), 12 deletions(-) diff --git a/src/components/select/Select.js b/src/components/select/Select.js index d41a252c6d..84c0d86e4d 100644 --- a/src/components/select/Select.js +++ b/src/components/select/Select.js @@ -3,7 +3,7 @@ import { Formio } from '../../Formio'; import ListComponent from '../_classes/list/ListComponent'; import Input from '../_classes/input/Input'; import Form from '../../Form'; -import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes } from '../../utils/utils'; +import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML } from '../../utils/utils'; import Choices from '../../utils/ChoicesWrapper'; export default class SelectComponent extends ListComponent { @@ -1221,10 +1221,10 @@ export default class SelectComponent extends ListComponent { return added; } - getValueAsString(data) { + getValueAsString(data, options) { return (this.component.multiple && Array.isArray(data)) - ? data.map(this.asString.bind(this)).join(', ') - : this.asString(data); + ? data.map((v) => this.asString(v, options)).join(', ') + : this.asString(data, options); } getValue() { @@ -1636,7 +1636,7 @@ export default class SelectComponent extends ListComponent { ); } - asString(value) { + asString(value, options = {}) { value = value ?? this.getValue(); //need to convert values to strings to be able to compare values with available options that are strings const convertToString = (data, valueProperty) => { @@ -1697,13 +1697,20 @@ export default class SelectComponent extends ListComponent { return value; } + const getTemplateValue = (v) => { + const itemTemplate = this.itemTemplate(v); + return options.csv && itemTemplate + ? unescapeHTML(itemTemplate) + : itemTemplate; + }; + if (Array.isArray(value)) { const items = []; - value.forEach(item => items.push(this.itemTemplate(item))); + value.forEach(item => items.push(getTemplateValue(item))); if (this.component.dataSrc === 'resource' && items.length > 0 ) { return items.join(', '); } - else if ( items.length > 0) { + else if (items.length > 0) { return items.join('
'); } else { @@ -1716,7 +1723,7 @@ export default class SelectComponent extends ListComponent { } return !_.isNil(value) - ? this.itemTemplate(value) + ? getTemplateValue(value) : '-'; } diff --git a/src/components/select/Select.unit.js b/src/components/select/Select.unit.js index 51bb3f06fa..b3eef6b391 100644 --- a/src/components/select/Select.unit.js +++ b/src/components/select/Select.unit.js @@ -60,6 +60,12 @@ describe('Select Component', () => { }); }); + it('Should return plain text when csv option is provided', () => { + return Harness.testCreate(SelectComponent, comp1).then((component) => { + assert.equal(component.getView('red', { csv:true }), 'Red'); + }); + }); + it('should correctly determine storage type when dataType is auto', function(done) { Harness.testCreate(SelectComponent, comp4).then((component) => { const value = component.normalizeSingleValue('true'); diff --git a/src/components/survey/Survey.js b/src/components/survey/Survey.js index 28c6f1f02e..db2274bcbe 100644 --- a/src/components/survey/Survey.js +++ b/src/components/survey/Survey.js @@ -179,6 +179,17 @@ export default class SurveyComponent extends Field { return result; } + if (_.isPlainObject(value)) { + const { values = [], questions = [] } = this.component; + return _.isEmpty(value) + ? '' + : _.map(value,(v, q) => { + const valueLabel = _.get(_.find(values, val => _.isEqual(val.value, v)), 'label', v); + const questionLabel = _.get(_.find(questions, quest => _.isEqual(quest.value, q)), 'label', q); + return `${questionLabel}: ${valueLabel}`; + }).join('; '); + } + return super.getValueAsString(value, options); } } diff --git a/test/forms/helpers/testBasicComponentSettings/values.js b/test/forms/helpers/testBasicComponentSettings/values.js index 41bbbcfc48..891e4459fd 100644 --- a/test/forms/helpers/testBasicComponentSettings/values.js +++ b/test/forms/helpers/testBasicComponentSettings/values.js @@ -57,7 +57,7 @@ const stringValues = { day: '01/05/2005', time: '04:15', currency: '$30,000.00', - survey: '{"question1":"yes","question2":"no"}', + survey: 'Question 1: yes; Question 2: no', numberColumn: '1111', textFieldColumn: 'value', numberFieldset: '222222', diff --git a/test/renders/component-bootstrap-survey-string-value1.html b/test/renders/component-bootstrap-survey-string-value1.html index 1b682f4633..522b3b37c1 100644 --- a/test/renders/component-bootstrap-survey-string-value1.html +++ b/test/renders/component-bootstrap-survey-string-value1.html @@ -1 +1 @@ -{"one":"a","two":"b"} \ No newline at end of file +one: a; two: b \ No newline at end of file diff --git a/test/renders/component-bootstrap-survey-string-value2.html b/test/renders/component-bootstrap-survey-string-value2.html index d9e914c041..567ab8ebb9 100644 --- a/test/renders/component-bootstrap-survey-string-value2.html +++ b/test/renders/component-bootstrap-survey-string-value2.html @@ -1 +1 @@ -{"one":"b","two":"a"} \ No newline at end of file +one: b; two: a \ No newline at end of file diff --git a/test/updateRenders.js b/test/updateRenders.js index 5e36e50e95..e3e66a6cb3 100644 --- a/test/updateRenders.js +++ b/test/updateRenders.js @@ -14,7 +14,7 @@ const forms = require('./formtest'); Components.setComponents(AllComponents); const dir = './test/renders'; -const componentDir = './lib/components'; +const componentDir = './lib/cjs/components'; if (!fs.existsSync(dir)) { fs.mkdirSync(dir); }