Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: implement cross validations #96

Merged
merged 1 commit into from
Feb 14, 2024
Merged

refactor: implement cross validations #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@indec/form-builder",
"version": "2.6.1",
"version": "3.0.0",
"description": "Form builder",
"main": "index.js",
"private": false,
Expand Down
189 changes: 96 additions & 93 deletions src/components/FormBuilder/FormBuilder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Box from '@mui/material/Box';
import modals from '@/constants/modals';
import NavigationButtons from '@/components/NavigationButtons';
import QuestionBuilder from '@/components/QuestionBuilder';
import FormProvider from '@/context/form';
import getWarnings from '@/utils/getWarnings';
import sectionPropTypes from '@/utils/propTypes/section';

Expand Down Expand Up @@ -35,109 +36,111 @@ function FormBuilder({sections, onSubmit, components, initialValues, isReadOnly}

const handleSubmit = values => {
if (!isLastSection) {
// TODO redirect next page
setPage(page + 1);
}
onSubmit(values);
onSubmit(values, isLastSection);
};

return (
<Formik
initialValues={formInitialValues}
validateOnMount
enableReinitialize
validationSchema={validateSchema}
onSubmit={handleSubmit}
validateOnChange={false}
>
{({values, setValues}) => {
const warnings = getWarnings(warningSchema, values) || {};
return (
<Form>
<FieldArray
name={section.name}
render={sectionHelpers =>
values?.[section.name]?.map((currentSection, index) => (
<Box key={currentSection.id} mb={2}>
{components.SectionHeader ? (
<components.SectionHeader
onView={() => handleShowSurvey(currentSection.id, true)}
onEdit={() => handleShowSurvey(currentSection.id, false)}
onDelete={() => handleOpenModal(modals.CONFIRM_DELETE_SECTION_MODAL, currentSection.id)}
sectionsLength={values[section.name].length}
section={section}
values={currentSection}
isReadOnly={isReadOnly}
isValid={validateSchema.isValidSync({[section.name]: values?.[section.name]})}
/>
) : (
<SectionHeader
onView={() => handleShowSurvey(currentSection.id, true)}
onEdit={() => handleShowSurvey(currentSection.id, false)}
onDelete={() => handleOpenModal(modals.CONFIRM_DELETE_SECTION_MODAL, currentSection.id)}
sectionsLength={values[section.name].length}
section={transformedSection}
values={currentSection}
isReadOnly={isReadOnly}
isValid={validateSchema.isValidSync({[section.name]: values?.[section.name]})}
/>
)}
{showSurvey === currentSection.id && (
<Box sx={{boxShadow: 2, p: 2}}>
<QuestionBuilder
<FormProvider section={transformedSection} sections={sections} initialValues={initialValues}>
<Formik
initialValues={formInitialValues}
validateOnMount
enableReinitialize
validationSchema={validateSchema}
onSubmit={handleSubmit}
validateOnChange={false}
>
{({values, setValues}) => {
const warnings = getWarnings(warningSchema, values) || {};
return (
<Form>
<FieldArray
name={section.name}
render={sectionHelpers =>
values?.[section.name]?.map((currentSection, index) => (
<Box key={currentSection.id} mb={2}>
{components.SectionHeader ? (
<components.SectionHeader
onView={() => handleShowSurvey(currentSection.id, true)}
onEdit={() => handleShowSurvey(currentSection.id, false)}
onDelete={() => handleOpenModal(modals.CONFIRM_DELETE_SECTION_MODAL, currentSection.id)}
sectionsLength={values[section.name].length}
section={section}
values={currentSection}
index={index}
isReadOnly={isReadOnly}
isValid={validateSchema.isValidSync({[section.name]: [currentSection]})}
/>
) : (
<SectionHeader
onView={() => handleShowSurvey(currentSection.id, true)}
onEdit={() => handleShowSurvey(currentSection.id, false)}
onDelete={() => handleOpenModal(modals.CONFIRM_DELETE_SECTION_MODAL, currentSection.id)}
sectionsLength={values[section.name].length}
section={transformedSection}
disabled={readOnlyMode}
warnings={warnings}
values={currentSection}
isReadOnly={isReadOnly}
isValid={validateSchema.isValidSync({[section.name]: [currentSection]})}
/>
</Box>
)}
<Modals
open={selectedSectionId}
options={section.interruption.options}
label={{text: section.interruption.reason}}
name={`${section.name}.${index}.${section.interruption.name}`}
onAccept={
[modals.CONFIRM_DELETE_SECTION_MODAL, modals.INTERRUPTION_MODAL].includes(openModal)
? () => handleAcceptModal(values[section.name], sectionHelpers)
: undefined
}
onClose={() => setOpenModal(undefined)}
modal={openModal}
/>
</Box>
))
}
/>
{components.NavigationButtons ? (
<components.NavigationButtons
schema={validateSchema}
values={values ? values[section.name] : {}}
onAddNew={section.multiple ? () => addNewSection(setValues, values) : undefined}
onInterrupt={
section.interruption.interruptible
? () => handleOpenModal(modals.INTERRUPTION_MODAL, section.id)
: undefined
}
/>
) : (
<NavigationButtons
onPrevious={() => setPage(page - 1)}
disablePreviousButton={page === 0}
isLastSection={isLastSection}
onAddNew={section.multiple ? () => addNewSection(setValues, values) : undefined}
onInterrupt={
section.interruption.interruptible
? () => handleOpenModal(modals.INTERRUPTION_MODAL, section.id)
: undefined
)}
{showSurvey === currentSection.id && (
<Box sx={{boxShadow: 2, p: 2}}>
<QuestionBuilder
values={currentSection}
index={index}
disabled={readOnlyMode}
warnings={warnings}
/>
</Box>
)}
<Modals
open={selectedSectionId}
options={section.interruption.options}
label={{text: section.interruption.reason}}
name={`${section.name}.${index}.${section.interruption.name}`}
onAccept={
[modals.CONFIRM_DELETE_SECTION_MODAL, modals.INTERRUPTION_MODAL].includes(openModal)
? () => handleAcceptModal(values[section.name], sectionHelpers)
: undefined
}
onClose={() => setOpenModal(undefined)}
modal={openModal}
/>
</Box>
))
}
readOnlyMode={isReadOnly}
/>
)}
</Form>
);
}}
</Formik>
{components.NavigationButtons ? (
<components.NavigationButtons
schema={validateSchema}
values={values ? values[section.name] : {}}
onAddNew={section.multiple ? () => addNewSection(setValues, values) : undefined}
onInterrupt={
section.interruption.interruptible
? () => handleOpenModal(modals.INTERRUPTION_MODAL, section.id)
: undefined
}
/>
) : (
<NavigationButtons
onPrevious={() => setPage(page - 1)}
disablePreviousButton={page === 0}
isLastSection={isLastSection}
onAddNew={section.multiple ? () => addNewSection(setValues, values) : undefined}
onInterrupt={
section.interruption.interruptible
? () => handleOpenModal(modals.INTERRUPTION_MODAL, section.id)
: undefined
}
readOnlyMode={isReadOnly}
/>
)}
</Form>
);
}}
</Formik>
</FormProvider>
);
}

Expand Down
48 changes: 40 additions & 8 deletions src/components/FormBuilder/FormBuilder.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,26 @@ const sections = [
],
multiple: true,
favorite: false,
validations: [],
validations: [
{
id: 1,
rules: [
{
id: 1,
conditions: [
{
id: 1,
type: 'eq',
question: 'S2P4',
value: '',
section: 'S2'
}
]
}
],
message: {type: 'error', text: 'Debe completar el campo'}
}
],
navigation: [],
subQuestions: [],
metadata: {},
Expand Down Expand Up @@ -443,14 +462,14 @@ const sections = [
type: 'eq',
question: 'S2P4SQ1',
value: '',
section: 'S2'
section: 'S1'
},
{
id: 2,
type: 'eq',
question: 'S1P4',
value: '1',
section: 'S2'
section: 'S1'
}
]
}
Expand All @@ -470,7 +489,7 @@ const sections = [
type: 'ne',
question: 'S1P4',
value: '1',
section: 'S2'
section: 'S1'
}
]
}
Expand Down Expand Up @@ -499,7 +518,7 @@ const sections = [
type: 'ne',
question: 'S1P4',
value: '2',
section: 'S2'
section: 'S1'
}
]
}
Expand Down Expand Up @@ -528,7 +547,7 @@ const sections = [
type: 'ne',
question: 'S1P4',
value: '3',
section: 'S2'
section: 'S1'
}
]
}
Expand Down Expand Up @@ -557,7 +576,7 @@ const sections = [
type: 'ne',
question: 'S1P4',
value: '4',
section: 'S2'
section: 'S1'
}
]
}
Expand Down Expand Up @@ -594,9 +613,22 @@ const sections = [
];

function Template(args) {
const [values, setValues] = React.useState();

React.useEffect(() => {
if (args?.initialValues) {
setValues(args?.initialValues);
}
}, [args]);

return (
<Container>
<FormBuilder {...args} sections={sections} onSubmit={() => {}} />
<FormBuilder
{...args}
sections={sections}
onSubmit={sectionValues => setValues(values ? {...values, ...sectionValues} : values)}
initialValues={values}
/>
</Container>
);
}
Expand Down
10 changes: 5 additions & 5 deletions src/components/FormBuilder/useFormBuilder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const useFormBuilder = ({isReadOnly, sections, initialValues, page}) => {
const addNewSection = (setValues, values) => {
const newValues = values;
const lastSection = getLastId(values[section.name]);
const emptySection = buildQuestions([section])[section.name][0];
const emptySection = buildQuestions(section)[section.name][0];
newValues[section.name].push({...emptySection, id: lastSection + 1});
setValues(newValues);
};
Expand Down Expand Up @@ -65,7 +65,7 @@ const useFormBuilder = ({isReadOnly, sections, initialValues, page}) => {
conditions: [
{
id: 1,
section: 'S2',
section: section.name,
question: question.name,
value: '',
type:
Expand Down Expand Up @@ -93,7 +93,7 @@ const useFormBuilder = ({isReadOnly, sections, initialValues, page}) => {
conditions: [
{
id: 1,
section: 'S2',
section: section.name,
question: question.name,
value: option.value,
type:
Expand All @@ -113,8 +113,8 @@ const useFormBuilder = ({isReadOnly, sections, initialValues, page}) => {
return {...section, questions};
}, [section]);

const {initialValues: formInitialValues} = useSectionInitialValues(initialValues, sections);
const {errorSchema: validateSchema, warningSchema} = getSchemas({sections});
const {initialValues: formInitialValues} = useSectionInitialValues(initialValues, transformedSection);
const {errorSchema: validateSchema, warningSchema} = getSchemas({section: transformedSection, sections, initialValues});

return {
readOnlyMode,
Expand Down
Loading
Loading