From 6ff0d773b6b30e5533310a003e3fa3e3d4688375 Mon Sep 17 00:00:00 2001
From: sonika <>
Date: Mon, 21 Aug 2023 15:38:43 +0530
Subject: [PATCH] policy checkbox

---
 .../PatientForm/PainAnalysisSection4.tsx      | 108 +++++++++++++++++-
 src/Components/PatientForm/PatientForm.tsx    |  34 ++++--
 2 files changed, 132 insertions(+), 10 deletions(-)

diff --git a/src/Components/PatientForm/PainAnalysisSection4.tsx b/src/Components/PatientForm/PainAnalysisSection4.tsx
index 56de339..3d09d87 100644
--- a/src/Components/PatientForm/PainAnalysisSection4.tsx
+++ b/src/Components/PatientForm/PainAnalysisSection4.tsx
@@ -3,10 +3,116 @@ import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, Fo
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 
+interface FormValues {
+    painQuality: string[];
+    painDuration: string;
+    currentTreatment: string;
+    treatmentResults: string;
+  }
+  
+  const validationSchema = Yup.object({
+    painQuality: Yup.array().required('Required'),
+    painDuration: Yup.string().required('Required'),
+    currentTreatment: Yup.string().required('Required'),
+    treatmentResults: Yup.string().required('Required'),
+  });
+
 export default function PainAnalysisSection4(){
+    const formik = useFormik<FormValues>({
+        initialValues:{
+            painQuality:[],
+            painDuration:'',
+            currentTreatment:'',
+            treatmentResults:''
+        },
+        validationSchema,
+        onSubmit:(values)=>{
+            console.log(values);
+        }
+    })
+    const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.checked) {
+          formik.setFieldValue('painQuality', [...formik.values.painQuality, event.target.value]);
+        } else {
+          formik.setFieldValue('painQuality', formik.values.painQuality.filter((item) => item !== event.target.value));
+        }
+    };
+
     return(
         <>
-       
+        <form onSubmit={formik.handleSubmit}>
+        <Grid container direction="row">
+            <Grid item xs={12}>
+                <FormControl>
+                    <FormLabel>Pain Quality</FormLabel>
+                    <FormGroup>
+                        <FormControlLabel
+                            control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
+                            label="Sharp"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
+                            label="Dull"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
+                            label="Burning"
+                        />
+                        <FormControlLabel
+                            control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
+                            label="Aching"
+                        />
+                    </FormGroup>
+                    {formik.touched.painQuality && formik.errors.painQuality ? (
+                        <div>{formik.errors.painQuality}</div>
+                    ) : null}
+                </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+                <FormControl>
+                    <FormLabel>Pain Duration</FormLabel>
+                    <RadioGroup
+                        name="painDuration"
+                        onChange={formik.handleChange}
+                        value={formik.values.painDuration}
+                        >
+                        <FormControlLabel value="<1 week" control={<Radio />} label="<1 week" />
+                        <FormControlLabel value="1-4 weeks" control={<Radio />} label="1-4 weeks" />
+                        <FormControlLabel value="1-6 months" control={<Radio />} label="1-6 months" />
+                        <FormControlLabel value=">6 months" control={<Radio />} label=">6 months" />
+                    </RadioGroup>
+                    {formik.touched.painDuration && formik.errors.painDuration ? (
+                        <div>{formik.errors.painDuration}</div>
+                    ) : null}
+                </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+                <TextField 
+                label="Current Treatment" 
+                name='currentTreatment'
+                onChange={formik.handleChange}
+                value={formik.values.currentTreatment}
+                onBlur={formik.handleBlur}
+                />
+                 {formik.touched.currentTreatment && formik.errors.currentTreatment ? (
+                    <div>{formik.errors.currentTreatment}</div>
+                ) : null}
+            </Grid>
+            <Grid item xs={12}>
+                 <TextField 
+                 label="Treatment Results" 
+                 name='treatmentResults'
+                 onChange={formik.handleChange}
+                 value={formik.values.treatmentResults}
+                 onBlur={formik.handleBlur}
+                 />
+                  {formik.touched.treatmentResults && formik.errors.treatmentResults ? (
+                    <div>{formik.errors.treatmentResults}</div>
+                ) : null}
+            </Grid>
+        </Grid>
+        </form>
+
         </>
     )}
             
\ No newline at end of file
diff --git a/src/Components/PatientForm/PatientForm.tsx b/src/Components/PatientForm/PatientForm.tsx
index e21ef97..167fb9e 100644
--- a/src/Components/PatientForm/PatientForm.tsx
+++ b/src/Components/PatientForm/PatientForm.tsx
@@ -70,6 +70,8 @@ interface Patient {
 
 export default function PatientForm(){
     const [expanded, setExpanded] = React.useState<string | false>('panel1');
+    const [isChecked, setIsChecked] = React.useState(false);
+ 
     const [patient, setPatient] = React.useState<Patient>({
         fullName: "",
         homePhone: "",
@@ -88,14 +90,17 @@ export default function PatientForm(){
     
       const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
-        console.log(patient,"submitedForm");
       };
 
-
       const handleExpandChange =
         (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
         setExpanded(newExpanded ? panel : false);
         };
+ 
+      const handleCheckboxChange = (event:any) => {
+        setIsChecked(event.target.checked);
+      };
+    
 
     return(
         <>
@@ -153,14 +158,25 @@ export default function PatientForm(){
                             </AccordionDetails>
                         </Accordion>
 
-                        <FormGroup sx={{marginTop:3}}>
-                          <FormControlLabel required control={<Checkbox />} label="I hearby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history." />
+                        <FormGroup sx={{ marginTop: 3 }}>
+                          <FormControlLabel
+                            required
+                            control={<Checkbox checked={isChecked} onChange={handleCheckboxChange} />}
+                            label="I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history."
+                          />
                         </FormGroup>
-                       
-                        <Grid >
-                            <Button type="submit" variant="contained" color="primary" sx={{margin:5,left:'40%',width:'200px'}}>
-                                Submit
-                            </Button>
+                     
+
+                        <Grid>
+                          <Button
+                            type="submit"
+                            variant="contained"
+                            color="primary"
+                            sx={{ margin: 5, left: '40%', width: '200px' }}
+                            disabled={isChecked==false}
+                          >
+                            Submit
+                          </Button>
                         </Grid>
                    
                         </Grid>