Merge pull request #48 from indec-it/fix/warningsForSubQuesitons

fix(subQuestions): send warnings prop
indec-it · Feb 19, 2023 · 445e9cc · 445e9cc
2 parents 650322d + 9b6a698
commit 445e9cc
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/form-builder",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Form builder",
   "main": "index.js",
   "private": false,

diff --git a/src/components/FormBuilder/FormBuilder.stories.js b/src/components/FormBuilder/FormBuilder.stories.js
@@ -125,6 +125,106 @@ const sections = [
         id: 3,
         userVarName: 'S1P3',
         subQuestions: []
+      },
+      {
+        id: 4,
+        label: 'Select an option',
+        name: 'S1P4',
+        number: '4',
+        type: 4,
+        options: [
+          {
+            id: 1,
+            name: 'S1P1O1',
+            subOptions: [
+              {
+                id: 1
+              }
+            ],
+            label: 'Yes',
+            value: '1',
+            needSpecification: true
+          },
+          {
+            id: 2,
+            needSpecification: true,
+            label: 'No',
+            value: '2'
+          }
+        ],
+        multiple: false,
+        favorite: false,
+        validations: [
+          {
+            id: 1,
+            type: 'required',
+            params: [
+              {
+                id: 1,
+                message: 'Must select an option'
+              }
+            ],
+            messageType: 'error'
+          }
+        ],
+        subQuestions: [
+          {
+            id: 1,
+            optionId: 1,
+            type: '1',
+            label: 'Add specification',
+            name: 'S1P1SQ1',
+            validations: [
+              {
+                id: 1,
+                type: 'required',
+                params: [
+                  {
+                    id: 1,
+                    message: 'Must add a specification for option 1'
+                  }
+                ],
+                messageType: 'error'
+              },
+              {
+                id: 2,
+                type: 'min',
+                params: [
+                  {
+                    id: 1,
+                    value: 2,
+                    message: 'Should have at least 2 characters'
+                  }
+                ],
+                messageType: 'warning'
+              }
+            ],
+            userVarName: 'S1P1E1'
+          },
+          {
+            id: 2,
+            optionId: 2,
+            type: '1',
+            label: 'Add specification',
+            name: 'S1P1SQ2',
+            validations: [
+              {
+                id: 1,
+                type: 'required',
+                params: [
+                  {
+                    id: 1,
+                    message: 'Must add a specification for option 2'
+                  }
+                ],
+                messageType: 'error'
+              }
+            ],
+            userVarName: 'S1P1E2'
+          }
+        ],
+        metadata: {},
+        userVarName: 'S1P4'
       }
     ],
     multiple: true,

diff --git a/src/components/QuestionBuilder/Wrapper.js b/src/components/QuestionBuilder/Wrapper.js
@@ -12,7 +12,7 @@ import subQuestionPropTypes from '@/utils/propTypes/subQuestion';
 import valuesPropTypes from '@/utils/propTypes/values';
 
 function Wrapper({
-  isMultiple, name, values, subQuestions, options, readOnlyMode, ...props
+  isMultiple, name, values, subQuestions, options, readOnlyMode, warnings, ...props
 }) {
   let Component;
   if (isMultiple) {
@@ -21,7 +21,13 @@ function Wrapper({
         name={name}
         render={helpers => values.answer.map((answer, index) => (
           <Stack key={answer.id} direction="row" spacing={2}>
-            <FastField {...props} options={options} name={`${name}.${index}.value`} readOnlyMode={readOnlyMode} />
+            <FastField
+              {...props}
+              options={options}
+              name={`${name}.${index}.value`}
+              readOnlyMode={readOnlyMode}
+              warnings={warnings}
+            />
             {values.answer.length === index + 1 && (
               <Button
                 startIcon={<AddCircleIcon />}
@@ -40,7 +46,15 @@ function Wrapper({
       />
     );
   } else {
-    Component = <FastField {...props} options={options} name={`${name}.value`} readOnlyMode={readOnlyMode} />;
+    Component = (
+      <FastField
+        {...props}
+        options={options}
+        name={`${name}.value`}
+        readOnlyMode={readOnlyMode}
+        warnings={warnings}
+      />
+    );
   }
   if (subQuestions.length > 0 && options.length > 0) {
     Component = (
@@ -51,6 +65,7 @@ function Wrapper({
           subQuestions={subQuestions}
           readOnlyMode={readOnlyMode}
           Component={TextField}
+          warnings={warnings}
         />
       </>
     );
@@ -62,11 +77,13 @@ Wrapper.propTypes = {
   isMultiple: PropTypes.bool.isRequired,
   name: PropTypes.string.isRequired,
   values: valuesPropTypes.isRequired,
-  subQuestions: PropTypes.arrayOf(subQuestionPropTypes)
+  subQuestions: PropTypes.arrayOf(subQuestionPropTypes),
+  warnings: PropTypes.shape({})
 };
 
 Wrapper.defaultProps = {
-  subQuestions: []
+  subQuestions: [],
+  warnings: {}
 };
 
 export default Wrapper;
diff --git a/src/components/SubQuestions/SubQuestions.js b/src/components/SubQuestions/SubQuestions.js
@@ -6,7 +6,7 @@ import castArray from '@/utils/castArray';
 import subQuestionPropTypes from '@/utils/propTypes/subQuestion';
 import valuesPropTypes from '@/utils/propTypes/values';
 
-function SubQuestions({values, subQuestions, readOnlyMode, Component}) {
+function SubQuestions({values, subQuestions, Component, ...props}) {
   const selectedQuestions = subQuestions.filter(
     subQuestion => castArray(values.answer.value).includes(subQuestion.optionId.toString())
   );
@@ -22,7 +22,7 @@ function SubQuestions({values, subQuestions, readOnlyMode, Component}) {
               label={subQuestion.label}
               placeholder={subQuestion.placeholder}
               required={isRequired}
-              readOnlyMode={readOnlyMode}
+              {...props}
             />
           </Box>
         );
@@ -34,7 +34,6 @@ function SubQuestions({values, subQuestions, readOnlyMode, Component}) {
 SubQuestions.propTypes = {
   values: valuesPropTypes.isRequired,
   subQuestions: PropTypes.arrayOf(subQuestionPropTypes).isRequired,
-  readOnlyMode: PropTypes.bool.isRequired,
   Component: PropTypes.node.isRequired
 };