588 lines
20 KiB
TypeScript
588 lines
20 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;
|
|
patientDataDiplay: any;
|
|
type: string;
|
|
};
|
|
|
|
export default function PainAnalysisSection4({
|
|
handleFormSection4Data,
|
|
patientDataDiplay,
|
|
type,
|
|
}: 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={12}
|
|
xl={10}
|
|
lg={10}
|
|
md={10}
|
|
sm={12}
|
|
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={
|
|
type == 'display'
|
|
? patientDataDiplay && patientDataDiplay.chiefComplaint
|
|
: patient.chiefComplaint
|
|
}
|
|
disabled={type == 'display'}
|
|
/>
|
|
</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' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Bending')}/>
|
|
}
|
|
label='Bending'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox onChange={handlePainWorseChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Standing')}/>
|
|
}
|
|
label='Standing'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox onChange={handlePainWorseChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Sitting')}/>
|
|
}
|
|
label='Sitting'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox onChange={handlePainWorseChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Walking')}/>
|
|
}
|
|
label='Walking'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox onChange={handlePainWorseChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Others')}/>
|
|
}
|
|
label='Others'
|
|
disabled={type == 'display'}
|
|
/>
|
|
</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'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('laying down')}
|
|
/>
|
|
}
|
|
label='laying down'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox onChange={handlePainBetterChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Standing')}/>
|
|
}
|
|
label='Standing'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox onChange={handlePainBetterChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Sitting')}/>
|
|
}
|
|
label='Sitting'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox onChange={handlePainBetterChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Walking')}/>
|
|
}
|
|
label='Walking'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox onChange={handlePainBetterChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Others')}/>
|
|
}
|
|
label='Others'
|
|
disabled={type == 'display'}
|
|
/>
|
|
</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' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Sharp')}/>
|
|
}
|
|
label='Sharp'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox onChange={handlePainQualityChange} name='Dull/Ache' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Dull/Ache')}/>
|
|
}
|
|
label='Dull/Ache'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
onChange={handlePainQualityChange}
|
|
name='Throbbing'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Throbbing')}
|
|
/>
|
|
}
|
|
label='Throbbing'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
onChange={handlePainQualityChange}
|
|
name='Tingling/Numbness/Burning'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Tingling/Numbness/Burning')}
|
|
/>
|
|
}
|
|
label='Tingling/Numbness/Burning'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox onChange={handlePainQualityChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Others')}/>
|
|
}
|
|
label='Others'
|
|
disabled={type == 'display'}
|
|
/>
|
|
</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'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Morning')}
|
|
/>
|
|
}
|
|
label='Morning'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
onChange={handlePainWorstTimeChange}
|
|
name='During day'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('During day')}
|
|
/>
|
|
}
|
|
label='During day'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
onChange={handlePainWorstTimeChange}
|
|
name='Evening'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Evening')}
|
|
/>
|
|
}
|
|
label='Evening'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
onChange={handlePainWorstTimeChange}
|
|
name='Lying in bed'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Lying in bed')}
|
|
/>
|
|
}
|
|
label='Lying in bed'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
onChange={handlePainWorstTimeChange}
|
|
name='Others'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Others')}
|
|
/>
|
|
}
|
|
label='Others'
|
|
disabled={type == 'display'}
|
|
/>
|
|
</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={
|
|
type == 'display'
|
|
? patientDataDiplay && patientDataDiplay.painDuration
|
|
: patient.painDuration
|
|
}
|
|
sx={{ display: 'flex', flexDirection: 'row' }}
|
|
>
|
|
<FormControlLabel
|
|
disabled={type == 'display'}
|
|
value='0-25%'
|
|
control={<Radio />}
|
|
label='0-25%'
|
|
/>
|
|
<FormControlLabel
|
|
disabled={type == 'display'}
|
|
value='25-50%'
|
|
control={<Radio />}
|
|
label='25-50%'
|
|
/>
|
|
<FormControlLabel
|
|
disabled={type == 'display'}
|
|
value='50-75%'
|
|
control={<Radio />}
|
|
label='50-75%'
|
|
/>
|
|
<FormControlLabel
|
|
disabled={type == 'display'}
|
|
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'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Muscle weakness')}
|
|
/>
|
|
}
|
|
label='Muscle weakness'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
onChange={handleCurrentComplaintIssuesTimeChange}
|
|
name='Bowel/Bladder problem'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Bowel/Bladder problem')}
|
|
/>
|
|
}
|
|
label='Bowel/Bladder problem'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
onChange={handleCurrentComplaintIssuesTimeChange}
|
|
name='Digestion'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Digestion')}
|
|
/>
|
|
}
|
|
label='Digestion'
|
|
disabled={type == 'display'}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
onChange={handleCurrentComplaintIssuesTimeChange}
|
|
name='Cardiac/Respiratory'
|
|
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Cardiac/Respiratory')}
|
|
/>
|
|
}
|
|
label='Cardiac/Respiratory'
|
|
disabled={type == 'display'}
|
|
/>
|
|
</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={
|
|
type == 'display'
|
|
? patientDataDiplay && patientDataDiplay.selfTreatment
|
|
: patient.selfTreatment
|
|
}
|
|
sx={{ display: 'flex', flexDirection: 'row' }}
|
|
>
|
|
<FormControlLabel
|
|
disabled={type == 'display'}
|
|
value='yes'
|
|
control={<Radio />}
|
|
label='Yes'
|
|
/>
|
|
<FormControlLabel
|
|
disabled={type == 'display'}
|
|
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={12}
|
|
xl={10}
|
|
lg={10}
|
|
md={10}
|
|
sm={12}
|
|
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={
|
|
type == 'display'
|
|
? patientDataDiplay && patientDataDiplay.treatmentGoal
|
|
: patient.treatmentGoal
|
|
}
|
|
disabled={type == 'display'}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</>
|
|
);
|
|
}
|