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

section4 data to main

Browse Source
This commit is contained in:
sonika 2023-09-04 22:11:48 +05:30
parent f1527188ed
commit 3a994d4269
2 changed files with 185 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,51 +2,122 @@ import * as React from 'react';
import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import path from 'path';
import { useEffect } from 'react';
interface FormValues {
interface Patient {
chiefComplaint:string;
painWorse: string[];
painBetter: string[];
painQuality: string[];
painWorstTime: string[];
currentComplaintIssues: string[];
painDuration: string;
currentTreatment: string;
treatmentResults: string;
treatmentGoal: string;
selfTreatment:string;
}
type Props = {
handleFormSection4Data:(
chiefComplaint:string|undefined,
painWorse: any,
painBetter: any,
painQuality: any,
painWorstTime: any,
currentComplaintIssues: any,
painDuration: string|undefined,
currentTreatment: string|undefined,
treatmentGoal: string|undefined,
selfTreatment:string|undefined,
)=> void
}
const validationSchema = Yup.object({
chiefComplaint:Yup.array().required('Required'),
painQuality: Yup.array().required('Required'),
painDuration: Yup.string().required('Required'),
currentTreatment: Yup.string().required('Required'),
treatmentResults: Yup.string().required('Required'),
treatmentGoal: Yup.string().required('Required'),
});
export default function PainAnalysisSection4(){
const formik = useFormik<FormValues>({
initialValues:{
chiefComplaint:'',
painQuality:[],
painDuration:'',
currentTreatment:'',
treatmentResults:'',
treatmentGoal:'',
},
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));
}
};
export default function PainAnalysisSection4({handleFormSection4Data}:Props){
const [patient, setPatient] = React.useState<Patient>({
chiefComplaint:'',
painWorse:[],
painBetter:[],
painQuality:[],
painWorstTime:[],
currentComplaintIssues:[],
painDuration:'',
currentTreatment:'',
treatmentGoal:'',
selfTreatment:'',
});
useEffect(()=>{
handleFormSection4Data(
patient.chiefComplaint,
patient.painWorse,
patient.painBetter,
patient.painQuality,
patient.painWorstTime,
patient.currentComplaintIssues,
patient.painDuration,
patient.currentTreatment,
patient.treatmentGoal,
patient.selfTreatment,
)
},[patient])
const handlePainWorseChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
painWorse: checked
? [...prevValues.painWorse, name]
: prevValues.painWorse.filter((item) => item !== name),
}));
};
const handlePainBetterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
painBetter: checked
? [...prevValues.painBetter, name]
: prevValues.painBetter.filter((item) => item !== name),
}));
};
const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
painQuality: checked
? [...prevValues.painQuality, name]
: prevValues.painQuality.filter((item) => item !== name),
}));
};
const handlePainWorstTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
painWorstTime: checked
? [...prevValues.painWorstTime, name]
: prevValues.painWorstTime.filter((item) => item !== name),
}));
};
const handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { name, checked } = event.target;
setPatient((prevValues) => ({
...prevValues,
currentComplaintIssues: checked
? [...prevValues.currentComplaintIssues, name]
: prevValues.currentComplaintIssues.filter((item) => item !== name),
}));
};
console.log("dskjjfdsgvd",patient)
return(
<>
<form onSubmit={formik.handleSubmit}>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
</Grid>
@ -56,9 +127,13 @@ export default function PainAnalysisSection4(){
variant="outlined"
label="How did your Chief complaint start?(ex-fell on ice)"
name='chiefComplaint'
onChange={formik.handleChange}
value={formik.values.chiefComplaint}
onBlur={formik.handleBlur}
onChange={(e)=>{
setPatient((prevValues) => ({
...prevValues,
chiefComplaint: e.target.value,
}));
}}
value={patient.chiefComplaint}
/>
</Grid>
@ -67,29 +142,27 @@ export default function PainAnalysisSection4(){
<FormLabel>What makes your pain worse?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
control={<Checkbox onChange={handlePainWorseChange} name="Bending" />}
label="Bending"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
label="Standing"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
label="Sitting"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
label="Walking"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
control={<Checkbox onChange={handlePainWorseChange} name="Others" />}
label="Others"
/>
</FormGroup>
{formik.touched.painQuality && formik.errors.painQuality ? (
<div>{formik.errors.painQuality}</div>
) : null}
</FormControl>
</Grid>
@ -98,23 +171,23 @@ export default function PainAnalysisSection4(){
<FormLabel>What makes your pain better?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
control={<Checkbox onChange={handlePainBetterChange} name="laying down" />}
label="laying down"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
control={<Checkbox onChange={handlePainBetterChange} name="Standing" />}
label="Standing"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
label="Sitting"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
label="Walking"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
control={<Checkbox onChange={handlePainBetterChange} name="Others" />}
label="Others"
/>
</FormGroup>
@ -130,25 +203,22 @@ export default function PainAnalysisSection4(){
label="Sharp"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />}
label="Dull/Ache"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />}
label="Throbbing"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />}
label="Tingling/Numbness/Burning"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
control={<Checkbox onChange={handlePainQualityChange} name="Others" />}
label="Others"
/>
</FormGroup>
{formik.touched.painQuality && formik.errors.painQuality ? (
<div>{formik.errors.painQuality}</div>
) : null}
</FormControl>
</Grid>
@ -157,29 +227,26 @@ export default function PainAnalysisSection4(){
<FormLabel>What is the worst time for your pain?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
control={<Checkbox onChange={handlePainWorstTimeChange} name="Morning" />}
label="Morning"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />}
label="During day"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />}
label="Evening"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />}
label="Lying in bed"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
control={<Checkbox onChange={handlePainWorstTimeChange} name="Others" />}
label="Others"
/>
</FormGroup>
{formik.touched.painQuality && formik.errors.painQuality ? (
<div>{formik.errors.painQuality}</div>
) : null}
</FormControl>
</Grid>
@ -188,8 +255,13 @@ export default function PainAnalysisSection4(){
<FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
<RadioGroup
name="painDuration"
onChange={formik.handleChange}
value={formik.values.painDuration}
onChange={(e)=>{
setPatient((prevValues) => ({
...prevValues,
painDuration: e.target.value,
}));
}}
value={patient.painDuration}
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="0-25%" control={<Radio />} label="0-25%" />
@ -205,19 +277,19 @@ export default function PainAnalysisSection4(){
<FormLabel>Has your current complaint caused any of the following?</FormLabel>
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Muscle weakness" />}
label="Muscle weakness"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="dull" />}
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />}
label="Bowel/Bladder problem"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="burning" />}
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />}
label="Digestion"
/>
<FormControlLabel
control={<Checkbox onChange={handlePainQualityChange} name="aching" />}
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Cardiac/Respiratory" />}
label="Cardiac/Respiratory"
/>
@ -230,16 +302,18 @@ export default function PainAnalysisSection4(){
<FormLabel>Have you tried any self treatment (ex-ice, heat, excercise) or taken any medication(over the counter or prescription)?</FormLabel>
<RadioGroup
name="painDuration"
onChange={formik.handleChange}
value={formik.values.painDuration}
onChange={(e)=>{
setPatient((prevValues) => ({
...prevValues,
selfTreatment: e.target.value,
}));
}}
value={patient.selfTreatment}
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
<FormControlLabel value="no" control={<Radio />} label="No" />
</RadioGroup>
{formik.touched.painDuration && formik.errors.painDuration ? (
<div>{formik.errors.painDuration}</div>
) : null}
</FormControl>
</Grid>
@ -252,14 +326,17 @@ export default function PainAnalysisSection4(){
variant="outlined"
label="What is your goal from treatment?(ex-play golf without pain)"
name='treatmentGoal'
onChange={formik.handleChange}
value={formik.values.treatmentGoal}
onBlur={formik.handleBlur}
onChange={(e)=>{
setPatient((prevValues) => ({
...prevValues,
treatmentGoal: e.target.value,
}));
}}
value={patient.treatmentGoal}
/>
</Grid>
</Grid>
</form>
</>
)}

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

@ -80,6 +80,7 @@ export default function PatientForm(){
const [section1Data, setSection1Data] = React.useState<any>({});
const [section2Data, setSection2Data] = React.useState<any>({});
const [section3Data, setSection3Data] = React.useState<any>({});
const [section4Data, setSection4Data] = React.useState<any>({});
const handleFormSection1Data = (
fullName?: string|undefined,
@ -168,6 +169,32 @@ export default function PatientForm(){
cellPhoneProvider,
})
}
const handleFormSection4Data = (
chiefComplaint:string|undefined,
painWorse: any,
painBetter: any,
painQuality: any,
painWorstTime: any,
currentComplaintIssues: any,
painDuration: string|undefined,
currentTreatment: string|undefined,
treatmentGoal: string|undefined,
selfTreatment:string|undefined,
) =>{
setSection4Data({
chiefComplaint,
painWorse,
painBetter,
painQuality,
painWorstTime,
currentComplaintIssues,
painDuration,
currentTreatment,
treatmentGoal,
selfTreatment,
})
}
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
@ -182,7 +209,7 @@ export default function PatientForm(){
setIsChecked(event.target.checked);
};
console.log(section3Data,"wyeytweevfde",section2Data)
console.log("wyeytweevfde",section4Data)
return(
@ -237,7 +264,7 @@ export default function PatientForm(){
</AccordionSummary>
<AccordionDetails>
<PainAnalysisSection4/>
<PainAnalysisSection4 handleFormSection4Data={handleFormSection4Data}/>
</AccordionDetails>
</Accordion>