340 lines
14 KiB
TypeScript
340 lines
14 KiB
TypeScript
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 Patient {
|
|
chiefComplaint:string;
|
|
painWorse: string[];
|
|
painBetter: string[];
|
|
painQuality: string[];
|
|
painWorstTime: string[];
|
|
currentComplaintIssues: string[];
|
|
painDuration: string;
|
|
currentTreatment: 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
|
|
}
|
|
|
|
|
|
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),
|
|
}));
|
|
};
|
|
|
|
return(
|
|
<>
|
|
<Grid item xs={12} className='collapsable-form-style '>
|
|
<FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
|
|
</Grid>
|
|
<Grid container direction="row">
|
|
<Grid item xs={4} className='collapsable-form-style-form7'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="How did your Chief complaint start?(ex-fell on ice)"
|
|
name='chiefComplaint'
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
chiefComplaint: e.target.value,
|
|
}));
|
|
}}
|
|
value={patient.chiefComplaint}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
|
<FormControl>
|
|
<FormLabel>What makes your pain worse?</FormLabel>
|
|
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainWorseChange} name="Bending" />}
|
|
label="Bending"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
|
|
label="Standing"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
|
|
label="Sitting"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
|
|
label="Walking"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainWorseChange} name="Others" />}
|
|
label="Others"
|
|
/>
|
|
</FormGroup>
|
|
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
|
<FormControl>
|
|
<FormLabel>What makes your pain better?</FormLabel>
|
|
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainBetterChange} name="laying down" />}
|
|
label="laying down"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainBetterChange} name="Standing" />}
|
|
label="Standing"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
|
|
label="Sitting"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
|
|
label="Walking"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainBetterChange} name="Others" />}
|
|
label="Others"
|
|
/>
|
|
</FormGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
|
<FormControl>
|
|
<FormLabel>What is the quality of your pain?</FormLabel>
|
|
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainQualityChange} name="sharp" />}
|
|
label="Sharp"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />}
|
|
label="Dull/Ache"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />}
|
|
label="Throbbing"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />}
|
|
label="Tingling/Numbness/Burning"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainQualityChange} name="Others" />}
|
|
label="Others"
|
|
/>
|
|
</FormGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
|
<FormControl>
|
|
<FormLabel>What is the worst time for your pain?</FormLabel>
|
|
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainWorstTimeChange} name="Morning" />}
|
|
label="Morning"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />}
|
|
label="During day"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />}
|
|
label="Evening"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />}
|
|
label="Lying in bed"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handlePainWorstTimeChange} name="Others" />}
|
|
label="Others"
|
|
/>
|
|
</FormGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
|
<FormControl>
|
|
<FormLabel>How much of the day do you experience your chief complaint?</FormLabel>
|
|
<RadioGroup
|
|
name="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%" />
|
|
<FormControlLabel value="25-50%" control={<Radio />} label="25-50%" />
|
|
<FormControlLabel value="50-75%" control={<Radio />} label="50-75%" />
|
|
<FormControlLabel value="75-100%" control={<Radio />} label="75-100%" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
|
<FormControl>
|
|
<FormLabel>Has your current complaint caused any of the following?</FormLabel>
|
|
<FormGroup sx={{display:'flex', flexDirection:'row'}}>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Muscle weakness" />}
|
|
label="Muscle weakness"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />}
|
|
label="Bowel/Bladder problem"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />}
|
|
label="Digestion"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Cardiac/Respiratory" />}
|
|
label="Cardiac/Respiratory"
|
|
/>
|
|
|
|
</FormGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
|
<FormControl>
|
|
<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={(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>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} className='collapsable-form-style' sx={{marginTop:3 }}>
|
|
<FormLabel sx={{fontWeight:600}}>Expected Treatment Result:</FormLabel>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style-form7'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="What is your goal from treatment?(ex-play golf without pain)"
|
|
name='treatmentGoal'
|
|
onChange={(e)=>{
|
|
setPatient((prevValues) => ({
|
|
...prevValues,
|
|
treatmentGoal: e.target.value,
|
|
}));
|
|
}}
|
|
value={patient.treatmentGoal}
|
|
/>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
|
|
</>
|
|
)}
|
|
|