From 0b101c4a851701cc26e6e71a79b59ec3d33a44c8 Mon Sep 17 00:00:00 2001 From: Maximiliano forlenza Date: Wed, 12 Jul 2023 12:44:58 -0300 Subject: [PATCH] fix(questionBuilder): fix responsive view --- package.json | 2 +- .../FormBuilder/FormBuilder.stories.js | 595 +++++++++++++----- .../QuestionBuilder/QuestionBuilder.js | 4 +- 3 files changed, 454 insertions(+), 147 deletions(-) diff --git a/package.json b/package.json index 9362cd6..78bf58d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@indec/form-builder", - "version": "1.11.1", + "version": "1.11.2", "description": "Form builder", "main": "index.js", "private": false, diff --git a/src/components/FormBuilder/FormBuilder.stories.js b/src/components/FormBuilder/FormBuilder.stories.js index a528907..adad50f 100644 --- a/src/components/FormBuilder/FormBuilder.stories.js +++ b/src/components/FormBuilder/FormBuilder.stories.js @@ -1,5 +1,6 @@ import React from 'react'; import Box from '@mui/material/Box'; +import Container from '@mui/material/Container'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; @@ -15,16 +16,15 @@ export default { const sections = [ { - id: 1, - name: 'S1', - label: 'Sección 1', + name: 'S2', + label: 'INGRESOS', questions: [ { id: 1, - label: 'Write your name', - name: 'S1P1', + label: 'Tipo de Transaccion', + name: 'S2P1', number: '1', - type: 1, + type: 3, options: [ { id: 1, @@ -33,7 +33,28 @@ const sections = [ { id: 1 } - ] + ], + label: '1.1 Manufactura sobre insumos fisicos', + value: '1', + needSpecification: false + }, + { + id: 2, + needSpecification: false, + label: '1.1.1 Bienes recibidos del exterior', + value: '2' + }, + { + id: 3, + needSpecification: false, + label: '1.1.2 Bienes devueltos al exterior', + value: '3' + }, + { + id: 4, + needSpecification: false, + label: '1.2 Mantenimiento y reparaciones', + value: '4' } ], multiple: false, @@ -45,20 +66,22 @@ const sections = [ params: [ { id: 1, - message: 'Must write your name' + message: 'Debe seleccionar un tipo de transaccion' } ], messageType: 'error' } ], - userVarName: 'S1P1', - subQuestions: [] + subQuestions: [], + metadata: {}, + userVarName: 'Transaccion' }, { - label: 'Write your age', - name: 'S1P2', - number: '2', - type: 2, + id: 2, + label: 'Modo de suminstro', + name: 'S2P2', + number: '1', + type: 3, options: [ { id: 1, @@ -67,7 +90,16 @@ const sections = [ { id: 1 } - ] + ], + label: '100%', + value: '1', + needSpecification: false + }, + { + id: 2, + needSpecification: false, + label: '20%', + value: '2' } ], multiple: false, @@ -75,25 +107,23 @@ const sections = [ validations: [ { id: 1, - type: 'required', + type: 'notRequired', params: [ { - id: 1, - message: 'Must write your age' + id: 1 } - ], - messageType: 'error', - dependsOn: '2' + ] } ], - id: 2, - userVarName: 'S1P2', - subQuestions: [] + subQuestions: [], + metadata: {}, + userVarName: 'suminstro' }, { - label: 'Cell number', - name: 'S1P3', - number: '3', + id: 3, + label: 'Monto Total', + name: 'S2P3', + number: '1', type: 2, options: [ { @@ -103,10 +133,13 @@ const sections = [ { id: 1 } - ] + ], + label: '', + value: '', + needSpecification: false } ], - multiple: true, + multiple: false, favorite: false, validations: [ { @@ -115,23 +148,22 @@ const sections = [ params: [ { id: 1, - message: 'Must write your cell number' + message: 'Debe ingresar un monto' } ], - messageType: 'error', - dependsOn: '2' + messageType: 'error' } ], - id: 3, - userVarName: 'S1P3', - subQuestions: [] + subQuestions: [], + metadata: {}, + userVarName: 'Monto' }, { id: 4, - label: 'Select an option', - name: 'S1P4', - number: '4', - type: 4, + label: 'Pais de destino', + name: 'S2P4', + number: '1', + type: 3, options: [ { id: 1, @@ -141,96 +173,104 @@ const sections = [ id: 1 } ], - label: 'Yes', + label: 'Chile', value: '1', - needSpecification: true + needSpecification: false }, { id: 2, - needSpecification: true, - label: 'No', + needSpecification: false, + label: 'MExico', value: '2' } ], - multiple: false, + multiple: true, favorite: false, validations: [ { id: 1, - type: 'required', + type: 'notRequired', params: [ { - id: 1, - message: 'Must select an option' + id: 1 } - ], - messageType: 'error' + ] } ], - subQuestions: [ + subQuestions: [], + metadata: {}, + userVarName: 'Pais' + }, + { + id: 5, + label: 'Servicios', + name: 'S2P5', + number: '1', + type: 7, + options: [ { id: 1, - optionId: 1, - type: '1', - label: 'Add specification', - name: 'S1P1SQ1', - validations: [ + name: 'S1P1O1', + subOptions: [ { id: 1, - type: 'required', - params: [ - { - id: 1, - message: 'Must add a specification for option 1' - } - ], - messageType: 'error' + value: '1', + label: 'Si' }, { id: 2, - type: 'min', - params: [ - { - id: 1, - value: 2, - message: 'Should have at least 2 characters' - } - ], - messageType: 'warning' + value: '2', + label: 'No' } ], - userVarName: 'S1P1E1' + label: '', + value: '', + needSpecification: false, + userVarName: 'ServInf', + title: 'Servicios Informaticos', + repeated: true }, { id: 2, - optionId: 2, - type: '1', - label: 'Add specification', - name: 'S1P1SQ2', - validations: [ + name: 'S1P5O2', + subOptions: [ { id: 1, - type: 'required', - params: [ - { - id: 1, - message: 'Must add a specification for option 2' - } - ], - messageType: 'error' + value: '1', + label: 'Si' + }, + { + id: 2, + value: '2', + label: 'No' } ], - userVarName: 'S1P1E2' + userVarName: 'OtrosServ', + title: 'Otros Servicios' + } + ], + multiple: false, + favorite: false, + validations: [ + { + id: 1, + type: 'notRequired', + params: [ + { + id: 1 + } + ] } ], + subQuestions: [], metadata: {}, - userVarName: 'S1P4' + userVarName: 'ServTot' } ], multiple: true, favorite: false, interruption: { - name: 'S1I1', + name: 'S2I', interruptible: false, reason: '', options: [ @@ -241,26 +281,24 @@ const sections = [ }, headers: [ { - id: 1, - question: 1 - }, - { - id: 2, - question: 2 + id: 1 } ], - userVarName: 'S1' + id: 2, + userVarName: 'Ingreso', + introduction: 'Seleccione aquellos Items para los cuales tuvo Ingresos' }, { - name: 'S2', - label: 'Sección 2', + id: 1, + name: 'S1', + label: 'EGRESOS', questions: [ { id: 1, - label: 'Select the correct option', - name: 'S2P1', + label: 'Tipo de Transaccion', + name: 'S1P1', number: '1', - type: 4, + type: 3, options: [ { id: 1, @@ -270,13 +308,21 @@ const sections = [ id: 1 } ], + label: '2.1 Manufatura sobre insumos fisicos', value: '1', - label: 'Yes' + needSpecification: false }, { id: 2, - value: '2', - label: 'No' + needSpecification: false, + label: '2.1.1 Bienes enviados al exterior', + value: '2' + }, + { + id: 3, + needSpecification: false, + label: '2.2 Mantenimiento y reparaciones', + value: '3' } ], multiple: false, @@ -284,23 +330,198 @@ const sections = [ validations: [ { id: 1, - type: 'required', + type: 'notRequired', + params: [ + { + id: 1 + } + ] + } + ], + subQuestions: [], + metadata: {}, + userVarName: 'Transaccion' + }, + { + id: 2, + label: 'Modo de suminstro', + name: 'S1P2', + number: '1', + type: 3, + options: [ + { + id: 1, + name: 'S1P1O1', + subOptions: [ + { + id: 1 + } + ], + label: '100%', + value: '1', + needSpecification: false + }, + { + id: 2, + needSpecification: false, + label: '75%', + value: '2' + } + ], + multiple: false, + favorite: false, + validations: [ + { + id: 1, + type: 'notRequired', + params: [ + { + id: 1 + } + ] + } + ], + subQuestions: [], + metadata: {}, + userVarName: 'Suministro' + }, + { + id: 4, + label: 'País de destino', + name: 'S1P4', + number: '1', + type: 3, + options: [ + { + id: 1, + name: 'S1P1O1', + subOptions: [ + { + id: 1 + } + ], + label: 'Brasil', + value: '1', + needSpecification: true + }, + { + id: 2, + needSpecification: true, + label: 'Perú', + value: '2' + }, + { + id: 3, + needSpecification: true, + label: 'Corea', + value: '3' + }, + { + id: 4, + needSpecification: true, + label: 'Paraguay', + value: '40' + } + ], + multiple: true, + favorite: false, + validations: [ + { + id: 1, + type: 'notRequired', params: [ + { + id: 1 + } + ] + } + ], + subQuestions: [ + { + id: 1, + optionId: 1, + type: '1', + label: 'Monto pais', + name: 'S2P4SQ1', + validations: [ { id: 1, - message: 'Must select an option' + type: 'notRequired', + params: [ + { + id: 1 + } + ] } ], - messageType: 'error' + userVarName: 'monto1' + }, + { + id: 2, + optionId: 2, + type: '1', + label: 'Monto pais', + name: 'S2P4SQ2', + validations: [ + { + id: 1, + type: 'notRequired', + params: [ + { + id: 1 + } + ] + } + ], + userVarName: 'monto2' + }, + { + id: 3, + optionId: 3, + type: '1', + label: 'Monto pais', + name: 'S2P4SQ3', + validations: [ + { + id: 1, + type: 'notRequired', + params: [ + { + id: 1 + } + ] + } + ], + userVarName: 'monto3' + }, + { + id: 4, + optionId: 4, + type: '1', + label: 'Monto pais', + name: 'S2P4SQ4', + validations: [ + { + id: 1, + type: 'notRequired', + params: [ + { + id: 1 + } + ] + } + ], + userVarName: 'monto4' } ], - userVarName: 'S2P1' + metadata: {}, + userVarName: 'Pais' } ], multiple: false, favorite: false, interruption: { - name: 'S2I', + name: 'S1I1', interruptible: false, reason: '', options: [ @@ -314,8 +535,7 @@ const sections = [ id: 1 } ], - id: 2, - userVarName: 'S2' + userVarName: 'Egresos' } ]; @@ -329,15 +549,16 @@ function Template(args) { }, [page]); return ( - setPage(page + 1)} - onPrevious={() => setPage(page - 1)} - isLastSection={sections.length - 1 === page} - isSurvey - /> + + setPage(page + 1)} + onPrevious={() => setPage(page - 1)} + isLastSection={sections.length - 1 === page} + /> + ); } @@ -346,49 +567,135 @@ export const Basic = Template.bind({}); export const WithInitialValues = Template.bind({}); WithInitialValues.args = { initialValues: { - S1: [ + S2: [ { id: 1, - S1P1: { + S2P1: { id: 1, - answer: {value: 'test'} + answer: { + value: '1' + } }, - S1P2: { + S2P2: { id: 2, - answer: {value: 26} + answer: { + value: '1' + } }, - S1P3: { + S2P3: { id: 3, + answer: { + value: 12345 + } + }, + S2P4: { + id: 4, answer: [ { id: 1, - value: 123456 - }, + value: '1' + } + ] + }, + S2P5: { + id: 5, + answer: { + value: { + S1P1O1: '1', + S1P5O2: '2' + } + } + } + }, + { + id: 2, + S2P1: { + id: 1, + answer: { + value: '3' + } + }, + S2P2: { + id: 2, + answer: { + value: '2' + } + }, + S2P3: { + id: 3, + answer: { + value: 54321 + } + }, + S2P4: { + id: 4, + answer: [ { - id: 2, - value: 12345678 + id: 1, + value: '2' } ] }, + S2P5: { + id: 5, + answer: { + value: { + S1P1O1: '2', + S1P5O2: '2' + } + } + } + } + ], + S1: [ + { + id: 1, + S1P1: { + id: 1, + answer: { + value: '3' + } + }, + S1P2: { + id: 2, + answer: { + value: '2' + } + }, S1P4: { id: 4, - answer: { - value: '1', - specifications: { - S1P1SQ1: { - id: 1, - answer: { - value: 'test' - } - }, - S1P1SQ2: { - id: 2, - answer: { - value: '' + answer: [ + { + id: 1, + value: '3', + specifications: { + S2P4SQ1: { + id: 1, + answer: { + value: '' + } + }, + S2P4SQ2: { + id: 2, + answer: { + value: '' + } + }, + S2P4SQ3: { + id: 3, + answer: { + value: '1234' + } + }, + S2P4SQ4: { + id: 4, + answer: { + value: '' + } } } } - } + ] } } ] diff --git a/src/components/QuestionBuilder/QuestionBuilder.js b/src/components/QuestionBuilder/QuestionBuilder.js index 61d5260..eb1f41a 100644 --- a/src/components/QuestionBuilder/QuestionBuilder.js +++ b/src/components/QuestionBuilder/QuestionBuilder.js @@ -143,9 +143,9 @@ const getComponent = (section, sectionIndex, questionIndex, disabled, warnings, function QuestionBuilder({values, section, index, disabled, warnings}) { return ( - + {Object.values(values).map((value, valueIndex) => value.id && ( - + {getComponent(section, index, valueIndex - 1, disabled, warnings, values)} ))}