added form mandate box and logic

aju-alen · Sep 25, 2024 · ce35bb0 · ce35bb0
1 parent d5298c6
commit ce35bb0
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 17 deletions.
diff --git a/client/src/components/SelectMultiScaleCheckBox.jsx b/client/src/components/SelectMultiScaleCheckBox.jsx
@@ -12,6 +12,7 @@ import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 const initialFormData = {
     id: uid(5),
     question: '',
+    formMandate: false,
     options: [
         {
             id: "ak52b",
@@ -111,6 +112,11 @@ const SelectMultiScaleCheckBox = ({ onSaveForm, data, id, options, disableForm,
         onHandleNext();
     };
 
+    const handleMandateForm = () => {
+        console.log('mandate handleMandateForm');
+        setFormData({ ...formData, formMandate: true })
+    }
+
     useEffect(() => {
         if (options) {
             setFormData(data);
@@ -124,7 +130,7 @@ const SelectMultiScaleCheckBox = ({ onSaveForm, data, id, options, disableForm,
     return (
         <React.Fragment>
             <CssBaseline />
-            <Container maxWidth='xl'>
+            <Container sx={{ display: { xs: "", md: "block" } }} maxWidth='xl' >
                 <Box sx={{
                     bgcolor: 'white',
                     display: 'flex',
@@ -166,7 +172,9 @@ const SelectMultiScaleCheckBox = ({ onSaveForm, data, id, options, disableForm,
                     },
                 }}>
                     <TextField
-                        fullWidth id="standard-basic"
+                        fullWidth
+                        multiline
+                        id="standard-basic"
                         label={!disableText ? "Insert input" : ''} variant="standard"
                         name='question'
                         value={formData.question}
@@ -261,6 +269,7 @@ const SelectMultiScaleCheckBox = ({ onSaveForm, data, id, options, disableForm,
 
                                             <TextField
                                                 id="standard-basic"
+                                                multiline
                                                 placeholder={!disableText ? "Type Your Sub Question" : ''}
                                                 variant="standard"
                                                 name='rowQuestion'
@@ -340,6 +349,15 @@ const SelectMultiScaleCheckBox = ({ onSaveForm, data, id, options, disableForm,
                             onClick={handleSaveForm}>
                             Next Question
                         </Button>}
+
+                        {!disableButtons && <Button
+                            variant='contained'
+                            color="primary"
+                            onClick={handleMandateForm}>
+                            Mandate This Form
+                        </Button>}
+
+
                     </Stack>
                 </Box>
             </Container>

diff --git a/client/src/components/SelectMultiScalePoint.jsx b/client/src/components/SelectMultiScalePoint.jsx
@@ -15,6 +15,7 @@ import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 const initialFormData = {
   id: uid(5),
   question: '',
+  formMandate: false,
   options: [
     {
       id: "az56j",
@@ -101,6 +102,11 @@ const SelectMultiScalePoint = ({ onSaveForm, data, id, options, disableForm, dis
     onHandleNext();
   };
 
+  const handleMandateForm = () => {
+    console.log('mandate handleMandateForm');
+    setFormData({ ...formData, formMandate: true })
+  }
+
   const handleRadioChange = (rowIndex, columnIndex) => {
     const newSelectedValue = [...formData.selectedValue];
     newSelectedValue[rowIndex].value = columnIndex;
@@ -331,6 +337,12 @@ const SelectMultiScalePoint = ({ onSaveForm, data, id, options, disableForm, dis
               Next Question
             </Button>}
 
+            {!disableButtons && <Button
+              variant='contained'
+              color="primary"
+              onClick={handleMandateForm}>
+               Mandate This Form
+            </Button>}
 
           </Stack>
         </Box>

diff --git a/client/src/components/SelectSingleCheckBox.jsx b/client/src/components/SelectSingleCheckBox.jsx
@@ -71,10 +71,10 @@ const SelectSingleCheckBox = ({ onSaveForm, data, id, options, disableForm, disa
     })
   };
 
-  // const handleMandateForm = () => {
-  //   console.log('mandate handleMandateForm');
-  //   setFormData({ ...formData, formMandate: true })
-  // }
+  const handleMandateForm = () => {
+    console.log('mandate handleMandateForm');
+    setFormData({ ...formData, formMandate: true })
+  }
 
   const handleSaveForm = () => {
     console.log('save handleSaveForm');
@@ -260,12 +260,12 @@ const SelectSingleCheckBox = ({ onSaveForm, data, id, options, disableForm, disa
                Next Question
             </Button>}
 
-            {/* {!disableButtons && <Button
+            {!disableButtons && <Button
               variant='contained'
               color="primary"
               onClick={handleMandateForm}>
                Mandate This Form
-            </Button>} */}
+            </Button>}
 
           </Stack>
         </Box>

diff --git a/client/src/components/SelectSingleRadio.jsx b/client/src/components/SelectSingleRadio.jsx
@@ -63,10 +63,10 @@ const SelectSingleRadio = ({ onSaveForm, data, id, options, disableForm, disable
     onHandleNext()
   }
 
-  // const handleMandateForm = () => {
-  //   console.log('mandate handleMandateForm');
-  //   setFormData({ ...formData, formMandate: true })
-  // }
+  const handleMandateForm = () => {
+    console.log('mandate handleMandateForm');
+    setFormData({ ...formData, formMandate: true })
+  }
 
   const handleRadioChange = (id) => {
     const newOptions = formData.options.map((option, idx) => {
@@ -259,12 +259,12 @@ const SelectSingleRadio = ({ onSaveForm, data, id, options, disableForm, disable
               onClick={handleSaveForm}>
                Next Question
             </Button>}
-            {/* {!disableButtons && <Button
+            {!disableButtons && <Button
               variant='contained'
               color="primary"
               onClick={handleMandateForm}>
                Mandate This Form
-            </Button>} */}
+            </Button>}
           </Stack>
         </Box>
       </Container>

diff --git a/client/src/pages/UserSubmitSurvey.jsx b/client/src/pages/UserSubmitSurvey.jsx
@@ -200,11 +200,19 @@ const UserSubmitSurvey = () => {
                 console.log(form, 'form');
             })
 
-            const skippedMandatoryFields = mandatoryFields.filter(form => form.selectedValue[0]?.answer === '' || form.selectedValue.length === 0);
+            const skippedMandatoryFields = mandatoryFields.filter((form) => {
+                // Check if 'selectedValue' exists and has items
+                if (form.selectedValue && form.selectedValue.length > 0) {
+                  // Check if any item in 'selectedValue' has an empty 'answer'
+                  return form.selectedValue.some((value) => value.answer === '');
+                }
+                // If 'selectedValue' is empty, consider this form as skipped
+                return true;
+              });
             console.log(skippedMandatoryFields, 'skippedMandatoryFields');
+
 
-
-            if (skippedMandatoryFields.length > 0) {
+            if (skippedMandatoryFields.length > 0  ) {
                 alert('Please fill the mandatory fields');
                 // Optionally, you can set the currentIndex to the first skipped mandatory field index
                 setCurrentIndex(surveyData.surveyForms.findIndex(form => form === skippedMandatoryFields[0]));
@@ -501,6 +509,13 @@ const UserSubmitSurvey = () => {
 
         const hasMandatoryFields = currentItem.formMandate && currentItem.selectedValue.length === 0;
 
+        console.log(currentItem, 'currentItem--in--mandate field');
+        console.log(currentItem.selectedValue.length, 'skippedFields--in--mandate field');
+        console.log(hasMandatoryFields, 'hasMandatoryFields--in--mandate field');
+
+
+
+
         if (hasMandatoryFields && skippedFields.includes(currentItem.id)) {
             // Show alert if mandatory fields are not filled and not skipped
             alert('Please fill the mandatory fields');