sonika/patient_Information_reactProject
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

policy checkbox

Browse Source
This commit is contained in:
sonika 2023-08-21 15:38:43 +05:30
parent 712729d1b8
commit 6ff0d773b6
2 changed files with 132 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/Components/PatientForm/PainAnalysisSection4.tsx
View File

@ -3,9 +3,115 @@ 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>
</>
)}

28
src/Components/PatientForm/PatientForm.tsx
View File

@ -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,15 +90,18 @@ 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(
<>
<Paper elevation={0} className='app-screen-constants'>
@ -153,12 +158,23 @@ 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'}}>
<Grid>
<Button
type="submit"
variant="contained"
color="primary"
sx={{ margin: 5, left: '40%', width: '200px' }}
disabled={isChecked==false}
>
Submit
</Button>
</Grid>