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

@@ -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('<br />');
       }
       else {
@@ -1716,7 +1723,7 @@ export default class SelectComponent extends ListComponent {
     }
 
     return !_.isNil(value)
-      ? this.itemTemplate(value)
+      ? getTemplateValue(value)
       : '-';
   }
 

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');

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);
   }
 }

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',

test/renders/component-bootstrap-survey-string-value1.html

@@ -1 +1 @@
-{"one":"a","two":"b"}
+one: a; two: b

test/renders/component-bootstrap-survey-string-value2.html

@@ -1 +1 @@
-{"one":"b","two":"a"}
+one: b; two: a

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);
 }