mobile responsive changes
This commit is contained in:
vipeeshpavithran
parent
66f0b3941e
commit
d1e1952298
57
src/App.css
57
src/App.css
@ -1,37 +1,34 @@
|
||||
.app-screen-constants .MuiInputBase-root{
|
||||
/* .app-screen-constants .MuiInputBase-root{
|
||||
margin:auto;
|
||||
max-width:1500;
|
||||
height:800 !important;
|
||||
}
|
||||
} */
|
||||
|
||||
.collapsable-form-style .MuiInputBase-root {
|
||||
width: 300px !important;
|
||||
margin: 5%;
|
||||
/* .collapsable-form-style .MuiInputBase-root {
|
||||
margin:3%;
|
||||
height: 50px
|
||||
}
|
||||
|
||||
.collapsable-form-style-form7 .MuiInputBase-root {
|
||||
width: 350px !important;
|
||||
margin: 3%;
|
||||
height: 50px
|
||||
}
|
||||
|
||||
.collapsable-form-style-multiline .MuiInputBase-root {
|
||||
width: 350px !important;
|
||||
margin: 5%;
|
||||
min-height: 100px
|
||||
}
|
||||
.collapsable-form-style-multiline label {
|
||||
} */
|
||||
/* .collapsable-form-style-multiline label {
|
||||
padding: 15px;
|
||||
}
|
||||
} */
|
||||
|
||||
.collapsable-form-style label {
|
||||
/* .collapsable-form-style label {
|
||||
padding: 15px;
|
||||
}
|
||||
} */
|
||||
|
||||
.collapsable-form-style-form7 label {
|
||||
/* .collapsable-form-style-form7 label {
|
||||
padding: 13px;
|
||||
}
|
||||
} */
|
||||
|
||||
.collapsable-form-style-radioButtons{
|
||||
width: 300px !important;
|
||||
@ -41,7 +38,6 @@
|
||||
}
|
||||
|
||||
.collapsable-form-style-radioButtons-fullwidth{
|
||||
/* width: 300px !important; */
|
||||
margin: 5%;
|
||||
padding-top: 12px;
|
||||
padding-left: 16px;
|
||||
@ -57,4 +53,33 @@
|
||||
|
||||
.addNew-form-table-style label {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
.MuiFormControl-root {
|
||||
width: 95% !important;
|
||||
}
|
||||
|
||||
.MuiGrid-root .MuiTextField-root {
|
||||
margin-top: 3%;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
/* .MuiFormControl-root{
|
||||
width: 90% !important;
|
||||
height: 50px !important;
|
||||
margin-bottom: 1% !important;
|
||||
}
|
||||
|
||||
.MuiTextField-root {
|
||||
margin-top: 3% !important;
|
||||
margin-bottom: 5% !important;
|
||||
}
|
||||
|
||||
.collapsable-form-style-multiline label {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.collapsable-form-style-radioButtons-fullwidth {
|
||||
margin: 5%;
|
||||
padding-top: 12px;
|
||||
padding-left: 16px;
|
||||
} */
|
||||
@ -1,4 +1,17 @@
|
||||
import { Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, Paper, Grid, FormLabel, FormControl } from '@mui/material';
|
||||
import {
|
||||
Button,
|
||||
TableContainer,
|
||||
Table,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableBody,
|
||||
TextField,
|
||||
Paper,
|
||||
Grid,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
} from '@mui/material';
|
||||
import * as React from 'react';
|
||||
|
||||
interface RowData {
|
||||
@ -13,51 +26,64 @@ interface DataTableProps {
|
||||
onAddRow: () => void;
|
||||
}
|
||||
|
||||
type Props={
|
||||
handleFormSection5Data:(
|
||||
generalHealth: string|undefined,
|
||||
presentProblemBefore: string|undefined,
|
||||
ifYespresentProblemBefore:string|undefined,
|
||||
ifYestreatmentProvided: string|undefined,
|
||||
ifYesOutcome: string|undefined,
|
||||
strokeBloodclotting: string|undefined,
|
||||
ifYesstrokeBloodclotting: string|undefined,
|
||||
dizzinessFetigue: string|undefined,
|
||||
ifyesdizzinessFetigue: string|undefined,
|
||||
antiColligent: string|undefined,
|
||||
injuriesHospitalization: string|undefined,
|
||||
supplementsOrDrugs: string|undefined,
|
||||
)=> void
|
||||
patientDataDiplay:any;
|
||||
type:string;
|
||||
|
||||
}
|
||||
|
||||
function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
|
||||
type Props = {
|
||||
handleFormSection5Data: (
|
||||
generalHealth: string | undefined,
|
||||
presentProblemBefore: string | undefined,
|
||||
ifYespresentProblemBefore: string | undefined,
|
||||
ifYestreatmentProvided: string | undefined,
|
||||
ifYesOutcome: string | undefined,
|
||||
strokeBloodclotting: string | undefined,
|
||||
ifYesstrokeBloodclotting: string | undefined,
|
||||
dizzinessFetigue: string | undefined,
|
||||
ifyesdizzinessFetigue: string | undefined,
|
||||
antiColligent: string | undefined,
|
||||
injuriesHospitalization: string | undefined,
|
||||
supplementsOrDrugs: string | undefined
|
||||
) => void;
|
||||
patientDataDiplay: any;
|
||||
type: string;
|
||||
};
|
||||
|
||||
function DataTable({ handleFormSection5Data, patientDataDiplay, type }: Props) {
|
||||
const [illnessFromData, setIllnessFromData] = React.useState<any>({
|
||||
id:0,date:'',illness:'',treatment:'',results:''
|
||||
})
|
||||
id: 0,
|
||||
date: '',
|
||||
illness: '',
|
||||
treatment: '',
|
||||
results: '',
|
||||
});
|
||||
const [illnessData, setIllnessData] = React.useState<any[]>([
|
||||
{id:0,date:'ex-12-01-2020',illness:'knee pain',treatment:'surgery',results:'cured'}
|
||||
{
|
||||
id: 0,
|
||||
date: 'ex-12-01-2020',
|
||||
illness: 'knee pain',
|
||||
treatment: 'surgery',
|
||||
results: 'cured',
|
||||
},
|
||||
]);
|
||||
|
||||
const deleteIllnessData = (idToDelete:number) => {
|
||||
const updatedIllnessData = illnessData.filter(item => item.id !== idToDelete);
|
||||
const deleteIllnessData = (idToDelete: number) => {
|
||||
const updatedIllnessData = illnessData.filter(
|
||||
(item) => item.id !== idToDelete
|
||||
);
|
||||
setIllnessData(updatedIllnessData);
|
||||
};
|
||||
|
||||
|
||||
const handleAddRow = () => {
|
||||
if(illnessFromData.date!='' && illnessFromData.illness!='' && illnessFromData.treatment!='' && illnessFromData.results!=''){
|
||||
|
||||
const newId = Math.max(...illnessData.map(item => item.id)) + 1;
|
||||
if (
|
||||
illnessFromData.date != '' &&
|
||||
illnessFromData.illness != '' &&
|
||||
illnessFromData.treatment != '' &&
|
||||
illnessFromData.results != ''
|
||||
) {
|
||||
const newId = Math.max(...illnessData.map((item) => item.id)) + 1;
|
||||
const newIllnessData = [
|
||||
...illnessData,
|
||||
{
|
||||
...illnessFromData,
|
||||
id: newId
|
||||
}
|
||||
id: newId,
|
||||
},
|
||||
];
|
||||
setIllnessData(newIllnessData);
|
||||
setIllnessFromData({
|
||||
@ -65,88 +91,136 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
|
||||
date: '',
|
||||
illness: '',
|
||||
treatment: '',
|
||||
results: ''
|
||||
results: '',
|
||||
});
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormLabel>If yes, Please enter the details below:</FormLabel><br></br>
|
||||
{type!=="display"?
|
||||
<FormControl>
|
||||
<Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
|
||||
<Grid item xs={2} className='addNew-form-table-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Date"
|
||||
<FormLabel>If yes, Please enter the details below:</FormLabel>
|
||||
<br></br>
|
||||
{type !== 'display' ? (
|
||||
<FormControl>
|
||||
<Grid container spacing={1.5}>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={3}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='addNew-form-table-style'
|
||||
>
|
||||
<TextField
|
||||
required
|
||||
variant='outlined'
|
||||
label='Date'
|
||||
value={illnessFromData.date}
|
||||
onChange={(event) => {
|
||||
setIllnessFromData((prevValues:any) => ({
|
||||
setIllnessFromData((prevValues: any) => ({
|
||||
...prevValues,
|
||||
date: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3.7} className='addNew-form-table-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Injury/Illness/Surgeries"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={3}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='addNew-form-table-style'
|
||||
>
|
||||
<TextField
|
||||
required
|
||||
variant='outlined'
|
||||
label='Injury/Illness/Surgeries'
|
||||
value={illnessFromData.illness}
|
||||
onChange={(event) => {
|
||||
setIllnessFromData((prevValues:any) => ({
|
||||
setIllnessFromData((prevValues: any) => ({
|
||||
...prevValues,
|
||||
illness: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3.5} className='addNew-form-table-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Treatment"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={3}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='addNew-form-table-style'
|
||||
>
|
||||
<TextField
|
||||
required
|
||||
variant='outlined'
|
||||
label='Treatment'
|
||||
value={illnessFromData.treatment}
|
||||
onChange={(event) => {
|
||||
setIllnessFromData((prevValues:any) => ({
|
||||
setIllnessFromData((prevValues: any) => ({
|
||||
...prevValues,
|
||||
treatment: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={2} className='addNew-form-table-style'>
|
||||
<TextField
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={3}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='addNew-form-table-style'
|
||||
>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Results"
|
||||
variant='outlined'
|
||||
label='Results'
|
||||
value={illnessFromData.results}
|
||||
onChange={(event) => {
|
||||
setIllnessFromData((prevValues:any) => ({
|
||||
setIllnessFromData((prevValues: any) => ({
|
||||
...prevValues,
|
||||
results: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={0.8} className='addNew-form-table-style'>
|
||||
<Button sx={{height:'40px', bgcolor:'skyblue'}} onClick={handleAddRow}>Add</Button>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</FormControl>
|
||||
:""}
|
||||
|
||||
|
||||
<TableContainer sx={{width:800}} className='illness-table-style'>
|
||||
<Table aria-label="simple table">
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={3}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='addNew-form-table-style'
|
||||
>
|
||||
<Button
|
||||
sx={{ height: '40px', bgcolor: 'skyblue' }}
|
||||
onClick={handleAddRow}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</FormControl>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
|
||||
<TableContainer className='illness-table-style'>
|
||||
<Table aria-label='simple table'>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align='left'>Date</TableCell>
|
||||
<TableCell align='center'>Injury/Fracture/Illness/Surgeries</TableCell>
|
||||
<TableCell align='center'>
|
||||
Injury/Fracture/Illness/Surgeries
|
||||
</TableCell>
|
||||
<TableCell align='left'>Treatment</TableCell>
|
||||
<TableCell align='left'>Results</TableCell>
|
||||
<TableCell align='left'></TableCell>
|
||||
@ -155,25 +229,23 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
|
||||
<TableBody>
|
||||
{illnessData.map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell align='left'>{row.date}</TableCell>
|
||||
<TableCell align='center'>{row.illness}</TableCell>
|
||||
<TableCell align='left'>{row.treatment}</TableCell>
|
||||
<TableCell align='left'>{row.results}</TableCell>
|
||||
<TableCell align='left'>
|
||||
{row.date}
|
||||
</TableCell>
|
||||
<TableCell align='center'>
|
||||
{row.illness}
|
||||
</TableCell>
|
||||
<TableCell align='left'>
|
||||
{row.treatment}
|
||||
</TableCell>
|
||||
<TableCell align='left'>
|
||||
{row.results}
|
||||
</TableCell>
|
||||
<TableCell align='left'>
|
||||
{type!=="display"?
|
||||
<Button sx={{height:'30x',width:20, bgcolor:'skyblue'}}
|
||||
onClick={(e)=>{deleteIllnessData(row.id)}}>
|
||||
Delete
|
||||
</Button>
|
||||
:""}
|
||||
{type !== 'display' ? (
|
||||
<Button
|
||||
sx={{ height: '30x', width: 20, bgcolor: 'skyblue' }}
|
||||
onClick={(e) => {
|
||||
deleteIllnessData(row.id);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
@ -182,6 +254,6 @@ function DataTable({handleFormSection5Data,patientDataDiplay,type}:Props) {
|
||||
</TableContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default DataTable;
|
||||
|
||||
@ -69,6 +69,10 @@
|
||||
gap: 0;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.image-marker-div .marker-div {
|
||||
/* margin-right: 5%; */
|
||||
margin-top: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
|
||||
@ -1,10 +1,38 @@
|
||||
import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
|
||||
import { useFormik } from "formik";
|
||||
import * as yup from "yup";
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
FormGroup,
|
||||
FormLabel,
|
||||
Grid,
|
||||
Paper,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
TextField,
|
||||
} from '@mui/material';
|
||||
import { useFormik } from 'formik';
|
||||
import * as yup from 'yup';
|
||||
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
interface Patient {
|
||||
maritalStatus: string | undefined;
|
||||
numberOfChildren: string | undefined;
|
||||
occupation: string | undefined;
|
||||
hoursPerWeek: number | string | undefined;
|
||||
employer: string | undefined;
|
||||
businessPhone: string | undefined;
|
||||
spouseName: string | undefined;
|
||||
spouseEmployer: string | undefined;
|
||||
spouseBusinessPhone: string | undefined;
|
||||
emergencyContact: string | undefined;
|
||||
relationship: string | undefined;
|
||||
spousePhone: string | undefined;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
handleFormSection2Data: (
|
||||
maritalStatus: string | undefined,
|
||||
numberOfChildren: string | undefined,
|
||||
occupation: string | undefined,
|
||||
@ -16,360 +44,438 @@ interface Patient {
|
||||
spouseBusinessPhone: string | undefined,
|
||||
emergencyContact: string | undefined,
|
||||
relationship: string | undefined,
|
||||
spousePhone: string | undefined,
|
||||
}
|
||||
|
||||
type Props = {
|
||||
handleFormSection2Data:(
|
||||
maritalStatus: string | undefined,
|
||||
numberOfChildren: string | undefined,
|
||||
occupation: string | undefined,
|
||||
hoursPerWeek: number | string | undefined,
|
||||
employer: string | undefined,
|
||||
businessPhone: string | undefined,
|
||||
spouseName: string | undefined,
|
||||
spouseEmployer: string | undefined,
|
||||
spouseBusinessPhone: string | undefined,
|
||||
emergencyContact: string | undefined,
|
||||
relationship: string | undefined,
|
||||
spousePhone: string | undefined,
|
||||
)=> void
|
||||
patientDataDiplay:any;
|
||||
type:string;
|
||||
}
|
||||
|
||||
|
||||
export default function FamilyFormSection({handleFormSection2Data,patientDataDiplay,type}:Props){
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
maritalStatus:'',
|
||||
numberOfChildren:'',
|
||||
occupation:'',
|
||||
hoursPerWeek:'',
|
||||
employer:'',
|
||||
businessPhone:'',
|
||||
spouseName:'',
|
||||
spouseEmployer:'',
|
||||
spouseBusinessPhone:'',
|
||||
emergencyContact:'',
|
||||
relationship:'',
|
||||
spousePhone:''
|
||||
});
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection2Data(
|
||||
patient.maritalStatus,
|
||||
patient.numberOfChildren,
|
||||
patient.occupation,
|
||||
patient.hoursPerWeek,
|
||||
patient.employer,
|
||||
patient.businessPhone,
|
||||
patient.spouseName,
|
||||
patient.spouseEmployer,
|
||||
patient.spouseBusinessPhone,
|
||||
patient.emergencyContact,
|
||||
patient.relationship,
|
||||
patient.spousePhone,
|
||||
)
|
||||
},[patient])
|
||||
|
||||
return(
|
||||
<>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={8} className='collapsable-form-style-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>Marital Status</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
name="maritalStatus"
|
||||
defaultValue={type=='display'?patientDataDiplay.maritalStatus:patient.maritalStatus}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
maritalStatus: e.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel value="married" control={<Radio />} label="Married" disabled={type=='display'}/>
|
||||
<FormControlLabel value="single" control={<Radio />} label="Single" disabled={type=='display'}/>
|
||||
<FormControlLabel value="widowed" control={<Radio />} label="Widowed" disabled={type=='display'}/>
|
||||
<FormControlLabel value="seperated" control={<Radio />} label="Seperated" disabled={type=='display'}/>
|
||||
<FormControlLabel value="divorced" control={<Radio />} label="Divorced" disabled={type=='display'}/>
|
||||
</RadioGroup>
|
||||
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style '></Grid>
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '>
|
||||
<TextField
|
||||
|
||||
variant="outlined"
|
||||
type="number"
|
||||
label="Number of Children/Ages"
|
||||
className='collapsable-form-style'
|
||||
name='numberOfChildren'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
numberOfChildren: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.numberOfChildren:patient.numberOfChildren}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '>
|
||||
<TextField
|
||||
// required
|
||||
variant="outlined"
|
||||
label="Occupation"
|
||||
className='collapsable-form-style'
|
||||
name='occupation'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
occupation: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.occupation:patient.occupation}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
|
||||
</Grid>
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Hours/Week"
|
||||
type="number"
|
||||
className='collapsable-form-style'
|
||||
name='hoursPerWeek'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
hoursPerWeek: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.hoursPerWeek:patient.hoursPerWeek}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
|
||||
</Grid>
|
||||
<Grid
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Employer"
|
||||
className='collapsable-form-style'
|
||||
name='employer'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
employer: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.employer:patient.employer}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Business Phone"
|
||||
type="number"
|
||||
className='collapsable-form-style'
|
||||
name='businessPhone'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
businessPhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.businessPhone:patient.businessPhone}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '></Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
|
||||
</Grid>
|
||||
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12} className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Spouse's Name"
|
||||
className='collapsable-form-style'
|
||||
name='spouseName'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
spouseName: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.spouseName:patient.spouseName}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Spouse's Employer"
|
||||
className='collapsable-form-style'
|
||||
name='spouseEmployer'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
spouseEmployer: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.spouseEmployer:patient.spouseEmployer}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Business Phone"
|
||||
type="number"
|
||||
className='collapsable-form-style'
|
||||
name='spouseBusinessPhone'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
spouseBusinessPhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.spouseBusinessPhone:patient.spouseBusinessPhone}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel>
|
||||
</Grid>
|
||||
|
||||
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Emergency Contact"
|
||||
className='collapsable-form-style'
|
||||
name='emergencyContact'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
emergencyContact: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.emergencyContact:patient.emergencyContact}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Relationship"
|
||||
className='collapsable-form-style'
|
||||
name='relationship'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
relationship: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.relationship:patient.relationship}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12} className='collapsable-form-style '>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
type="number"
|
||||
label="Phone"
|
||||
className='collapsable-form-style'
|
||||
name='spousePhone'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues:any) => ({
|
||||
...prevValues,
|
||||
spousePhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.spousePhone:patient.spousePhone}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
spousePhone: string | undefined
|
||||
) => void;
|
||||
patientDataDiplay: any;
|
||||
type: string;
|
||||
};
|
||||
|
||||
export default function FamilyFormSection({
|
||||
handleFormSection2Data,
|
||||
patientDataDiplay,
|
||||
type,
|
||||
}: Props) {
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
maritalStatus: '',
|
||||
numberOfChildren: '',
|
||||
occupation: '',
|
||||
hoursPerWeek: '',
|
||||
employer: '',
|
||||
businessPhone: '',
|
||||
spouseName: '',
|
||||
spouseEmployer: '',
|
||||
spouseBusinessPhone: '',
|
||||
emergencyContact: '',
|
||||
relationship: '',
|
||||
spousePhone: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
handleFormSection2Data(
|
||||
patient.maritalStatus,
|
||||
patient.numberOfChildren,
|
||||
patient.occupation,
|
||||
patient.hoursPerWeek,
|
||||
patient.employer,
|
||||
patient.businessPhone,
|
||||
patient.spouseName,
|
||||
patient.spouseEmployer,
|
||||
patient.spouseBusinessPhone,
|
||||
patient.emergencyContact,
|
||||
patient.relationship,
|
||||
patient.spousePhone
|
||||
);
|
||||
}, [patient]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid container direction='row'>
|
||||
<Grid item xs={8} className='collapsable-form-style-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>Marital Status</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby='demo-radio-buttons-group-label'
|
||||
name='maritalStatus'
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay.maritalStatus
|
||||
: patient.maritalStatus
|
||||
}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
maritalStatus: e.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
value='married'
|
||||
control={<Radio />}
|
||||
label='Married'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value='single'
|
||||
control={<Radio />}
|
||||
label='Single'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value='widowed'
|
||||
control={<Radio />}
|
||||
label='Widowed'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value='seperated'
|
||||
control={<Radio />}
|
||||
label='Seperated'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value='divorced'
|
||||
control={<Radio />}
|
||||
label='Divorced'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style '></Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
type='number'
|
||||
label='Number of Children/Ages'
|
||||
className='collapsable-form-style'
|
||||
name='numberOfChildren'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
numberOfChildren: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.numberOfChildren
|
||||
: patient.numberOfChildren
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
// required
|
||||
variant='outlined'
|
||||
label='Occupation'
|
||||
className='collapsable-form-style'
|
||||
name='occupation'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
occupation: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.occupation
|
||||
: patient.occupation
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='Hours/Week'
|
||||
type='number'
|
||||
className='collapsable-form-style'
|
||||
name='hoursPerWeek'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
hoursPerWeek: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.hoursPerWeek
|
||||
: patient.hoursPerWeek
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='Employer'
|
||||
className='collapsable-form-style'
|
||||
name='employer'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
employer: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display' ? patientDataDiplay.employer : patient.employer
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='Business Phone'
|
||||
type='number'
|
||||
className='collapsable-form-style'
|
||||
name='businessPhone'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
businessPhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.businessPhone
|
||||
: patient.businessPhone
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
></Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{ fontWeight: 600 }}>Spouse's Information:</FormLabel>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label="Spouse's Name"
|
||||
className='collapsable-form-style'
|
||||
name='spouseName'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
spouseName: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.spouseName
|
||||
: patient.spouseName
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label="Spouse's Employer"
|
||||
className='collapsable-form-style'
|
||||
name='spouseEmployer'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
spouseEmployer: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.spouseEmployer
|
||||
: patient.spouseEmployer
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='Business Phone'
|
||||
type='number'
|
||||
className='collapsable-form-style'
|
||||
name='spouseBusinessPhone'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
spouseBusinessPhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.spouseBusinessPhone
|
||||
: patient.spouseBusinessPhone
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{ fontWeight: 600 }}>Emergency:</FormLabel>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='Emergency Contact'
|
||||
className='collapsable-form-style'
|
||||
name='emergencyContact'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
emergencyContact: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.emergencyContact
|
||||
: patient.emergencyContact
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='Relationship'
|
||||
className='collapsable-form-style'
|
||||
name='relationship'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
relationship: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.relationship
|
||||
: patient.relationship
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style '
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
type='number'
|
||||
label='Phone'
|
||||
className='collapsable-form-style'
|
||||
name='spousePhone'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
spousePhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.spousePhone
|
||||
: patient.spousePhone
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,212 +1,318 @@
|
||||
import { Grid, FormLabel, TextField, FormControl, RadioGroup, FormControlLabel, Radio } from "@mui/material";
|
||||
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
|
||||
import React, { useEffect } from "react";
|
||||
import {
|
||||
Grid,
|
||||
FormLabel,
|
||||
TextField,
|
||||
FormControl,
|
||||
RadioGroup,
|
||||
FormControlLabel,
|
||||
Radio,
|
||||
} from '@mui/material';
|
||||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||
import React, { useEffect } from 'react';
|
||||
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
||||
import dayjs from "dayjs";
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
interface Patient {
|
||||
familyHistory: string;
|
||||
sleep: string;
|
||||
pillow:string;
|
||||
orthotics:string;
|
||||
brestExam: any;
|
||||
pregnancy:string;
|
||||
menstralCycle: any;
|
||||
}
|
||||
familyHistory: string;
|
||||
sleep: string;
|
||||
pillow: string;
|
||||
orthotics: string;
|
||||
brestExam: any;
|
||||
pregnancy: string;
|
||||
menstralCycle: any;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
handleFormSection8Data:(
|
||||
familyHistory: string|undefined,
|
||||
sleep: string|undefined,
|
||||
pillow:string|undefined,
|
||||
orthotics:string|undefined,
|
||||
brestExam: any,
|
||||
pregnancy:string|undefined,
|
||||
menstralCycle: any,
|
||||
)=> void
|
||||
patientDataDiplay:any;
|
||||
type:string;
|
||||
}
|
||||
type Props = {
|
||||
handleFormSection8Data: (
|
||||
familyHistory: string | undefined,
|
||||
sleep: string | undefined,
|
||||
pillow: string | undefined,
|
||||
orthotics: string | undefined,
|
||||
brestExam: any,
|
||||
pregnancy: string | undefined,
|
||||
menstralCycle: any
|
||||
) => void;
|
||||
patientDataDiplay: any;
|
||||
type: string;
|
||||
};
|
||||
|
||||
export default function OtherDetails8({handleFormSection8Data,patientDataDiplay,type}:Props){
|
||||
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
familyHistory: '',
|
||||
sleep: '',
|
||||
pillow:'',
|
||||
orthotics:'',
|
||||
brestExam: dayjs('2022-04-17'),
|
||||
pregnancy:'',
|
||||
menstralCycle: dayjs('2022-04-17'),
|
||||
});
|
||||
export default function OtherDetails8({
|
||||
handleFormSection8Data,
|
||||
patientDataDiplay,
|
||||
type,
|
||||
}: Props) {
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
familyHistory: '',
|
||||
sleep: '',
|
||||
pillow: '',
|
||||
orthotics: '',
|
||||
brestExam: dayjs('2022-04-17'),
|
||||
pregnancy: '',
|
||||
menstralCycle: dayjs('2022-04-17'),
|
||||
});
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection8Data(
|
||||
patient.familyHistory,
|
||||
patient.sleep,
|
||||
patient.pillow,
|
||||
patient.orthotics,
|
||||
patient.brestExam=dayjs(patient.brestExam),
|
||||
patient.pregnancy,
|
||||
patient.menstralCycle=dayjs(patient.menstralCycle)
|
||||
)
|
||||
},[patient])
|
||||
useEffect(() => {
|
||||
handleFormSection8Data(
|
||||
patient.familyHistory,
|
||||
patient.sleep,
|
||||
patient.pillow,
|
||||
patient.orthotics,
|
||||
(patient.brestExam = dayjs(patient.brestExam)),
|
||||
patient.pregnancy,
|
||||
(patient.menstralCycle = dayjs(patient.menstralCycle))
|
||||
);
|
||||
}, [patient]);
|
||||
|
||||
const formatDate = (inputDate:any) => {
|
||||
const date = new Date(inputDate);
|
||||
const year = date.getUTCFullYear();
|
||||
const month = String(date.getUTCMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getUTCDate()+1).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
const formatDate = (inputDate: any) => {
|
||||
const date = new Date(inputDate);
|
||||
const year = date.getUTCFullYear();
|
||||
const month = String(date.getUTCMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getUTCDate() + 1).padStart(2, '0');
|
||||
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={12} className='collapsable-form-style-multiline'>
|
||||
<FormLabel>Family history and health status:</FormLabel><br></br>
|
||||
<TextField
|
||||
multiline
|
||||
variant="outlined"
|
||||
label=""
|
||||
value={type=='display'?patientDataDiplay.familyHistory:patient.familyHistory}
|
||||
disabled={type=='display'}
|
||||
onChange={(event:any) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
familyHistory: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
return (
|
||||
<>
|
||||
<Grid container direction='row'>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style-multiline'
|
||||
>
|
||||
<FormLabel>Family history and health status:</FormLabel>
|
||||
<br></br>
|
||||
<TextField
|
||||
multiline
|
||||
variant='outlined'
|
||||
label=''
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.familyHistory
|
||||
: patient.familyHistory
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(event: any) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
familyHistory: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>How do you sleep?</FormLabel>
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.sleep:patient.sleep}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
sleep: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel disabled={type=='display'} value="Back" control={<Radio />} label="Back" />
|
||||
<FormControlLabel disabled={type=='display'} value="Side" control={<Radio />} label="Side" />
|
||||
<FormControlLabel disabled={type=='display'} value="Stomach" control={<Radio />} label="Stomach" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<FormControl>
|
||||
<FormLabel>How do you sleep?</FormLabel>
|
||||
<RadioGroup
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
defaultValue={
|
||||
type == 'display' ? patientDataDiplay.sleep : patient.sleep
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
sleep: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Back'
|
||||
control={<Radio />}
|
||||
label='Back'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Side'
|
||||
control={<Radio />}
|
||||
label='Side'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Stomach'
|
||||
control={<Radio />}
|
||||
label='Stomach'
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>Do you use a pillow?</FormLabel>
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.pillow:patient.pillow}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
pillow: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>Do you use a pillow?</FormLabel>
|
||||
<RadioGroup
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
defaultValue={
|
||||
type == 'display' ? patientDataDiplay.pillow : patient.pillow
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
pillow: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>Do you wear orthotics or arch support?</FormLabel>
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.orthotics:patient.orthotics}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
orthotics: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>Do you wear orthotics or arch support?</FormLabel>
|
||||
<RadioGroup
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay.orthotics
|
||||
: patient.orthotics
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
orthotics: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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-radioButtons'>
|
||||
<FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br>
|
||||
<FormControl>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DatePicker
|
||||
value={type=='display'?patientDataDiplay.brestExam:patient.brestExam}
|
||||
disabled={type=='display'}
|
||||
onChange={(event) => {
|
||||
const formattedDate = formatDate(event)
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
brestExam: formattedDate,
|
||||
}));
|
||||
}}
|
||||
renderInput={(params) => <TextField variant="outlined" {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style-radioButtons'
|
||||
>
|
||||
<FormLabel>Date of last gynecological and brest exam?</FormLabel>
|
||||
<br></br>
|
||||
<FormControl>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DatePicker
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.brestExam
|
||||
: patient.brestExam
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(event) => {
|
||||
const formattedDate = formatDate(event);
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
brestExam: formattedDate,
|
||||
}));
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField variant='outlined' {...params} />
|
||||
)}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
{/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}>
|
||||
{/* <Grid item xs={6} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}>
|
||||
<FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel>
|
||||
</Grid> */}
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>Possible pregnancy?</FormLabel>
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.pregnancy:patient.pregnancy}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
pregnancy: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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-radioButtons'>
|
||||
<FormLabel>Date of last menstrual cycle?</FormLabel><br></br>
|
||||
<FormControl>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DatePicker
|
||||
value={type=='display'?patientDataDiplay.menstralCycle:patient.menstralCycle}
|
||||
disabled={type=='display'}
|
||||
onChange={(event) => {
|
||||
const formattedDate = formatDate(event)
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
menstralCycle: formattedDate,
|
||||
}));
|
||||
}}
|
||||
renderInput={(params) => <TextField variant="outlined" {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
|
||||
<FormControl>
|
||||
<FormLabel>Possible pregnancy?</FormLabel>
|
||||
<RadioGroup
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay.pregnancy
|
||||
: patient.pregnancy
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
pregnancy: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style-radioButtons'
|
||||
>
|
||||
<FormLabel>Date of last menstrual cycle?</FormLabel>
|
||||
<br></br>
|
||||
<FormControl>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DatePicker
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.menstralCycle
|
||||
: patient.menstralCycle
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(event) => {
|
||||
const formattedDate = formatDate(event);
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
menstralCycle: formattedDate,
|
||||
}));
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField variant='outlined' {...params} />
|
||||
)}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,368 +1,578 @@
|
||||
import * as React from 'react';
|
||||
import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
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:'',
|
||||
});
|
||||
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),
|
||||
}));
|
||||
};
|
||||
useEffect(() => {
|
||||
handleFormSection4Data(
|
||||
patient.chiefComplaint,
|
||||
patient.painWorse,
|
||||
patient.painBetter,
|
||||
patient.painQuality,
|
||||
patient.painWorstTime,
|
||||
patient.currentComplaintIssues,
|
||||
patient.painDuration,
|
||||
patient.currentTreatment,
|
||||
patient.treatmentGoal,
|
||||
patient.selfTreatment
|
||||
);
|
||||
}, [patient]);
|
||||
|
||||
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 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 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 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 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 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 handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
currentComplaintIssues: checked
|
||||
? [...prevValues.currentComplaintIssues, name]
|
||||
: prevValues.currentComplaintIssues.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),
|
||||
}));
|
||||
};
|
||||
|
||||
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={type=='display'?patientDataDiplay.chiefComplaint:patient.chiefComplaint}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
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),
|
||||
}));
|
||||
};
|
||||
|
||||
<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"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
|
||||
label="Standing"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
|
||||
label="Sitting"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
|
||||
label="Walking"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainWorseChange} name="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" />}
|
||||
label="laying down"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainBetterChange} name="Standing" />}
|
||||
label="Standing"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
|
||||
label="Sitting"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
|
||||
label="Walking"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainBetterChange} name="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" />}
|
||||
label="Sharp"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />}
|
||||
label="Dull/Ache"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />}
|
||||
label="Throbbing"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />}
|
||||
label="Tingling/Numbness/Burning"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainQualityChange} name="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" />}
|
||||
label="Morning"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />}
|
||||
label="During day"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />}
|
||||
label="Evening"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />}
|
||||
label="Lying in bed"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handlePainWorstTimeChange} name="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.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" />}
|
||||
label="Muscle weakness"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />}
|
||||
label="Bowel/Bladder problem"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />}
|
||||
label="Digestion"
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="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.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={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={type=='display'?patientDataDiplay.treatmentGoal:patient.treatmentGoal}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
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.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' />
|
||||
}
|
||||
label='Bending'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainWorseChange} name='Standing' />
|
||||
}
|
||||
label='Standing'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainWorseChange} name='Sitting' />
|
||||
}
|
||||
label='Sitting'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainWorseChange} name='Walking' />
|
||||
}
|
||||
label='Walking'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainWorseChange} name='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'
|
||||
/>
|
||||
}
|
||||
label='laying down'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainBetterChange} name='Standing' />
|
||||
}
|
||||
label='Standing'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainBetterChange} name='Sitting' />
|
||||
}
|
||||
label='Sitting'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainBetterChange} name='Walking' />
|
||||
}
|
||||
label='Walking'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainBetterChange} name='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' />
|
||||
}
|
||||
label='Sharp'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainQualityChange}
|
||||
name='Dull/Ache'
|
||||
/>
|
||||
}
|
||||
label='Dull/Ache'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainQualityChange}
|
||||
name='Throbbing'
|
||||
/>
|
||||
}
|
||||
label='Throbbing'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainQualityChange}
|
||||
name='Tingling/Numbness/Burning'
|
||||
/>
|
||||
}
|
||||
label='Tingling/Numbness/Burning'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainQualityChange} name='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'
|
||||
/>
|
||||
}
|
||||
label='Morning'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainWorstTimeChange}
|
||||
name='During day'
|
||||
/>
|
||||
}
|
||||
label='During day'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainWorstTimeChange}
|
||||
name='Evening'
|
||||
/>
|
||||
}
|
||||
label='Evening'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainWorstTimeChange}
|
||||
name='Lying in bed'
|
||||
/>
|
||||
}
|
||||
label='Lying in bed'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainWorstTimeChange}
|
||||
name='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.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'
|
||||
/>
|
||||
}
|
||||
label='Muscle weakness'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handleCurrentComplaintIssuesTimeChange}
|
||||
name='Bowel/Bladder problem'
|
||||
/>
|
||||
}
|
||||
label='Bowel/Bladder problem'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handleCurrentComplaintIssuesTimeChange}
|
||||
name='Digestion'
|
||||
/>
|
||||
}
|
||||
label='Digestion'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handleCurrentComplaintIssuesTimeChange}
|
||||
name='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.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.treatmentGoal
|
||||
: patient.treatmentGoal
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,13 @@
|
||||
import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
|
||||
import {
|
||||
TextField,
|
||||
FormControlLabel,
|
||||
Grid,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
} from '@mui/material';
|
||||
import * as React from 'react';
|
||||
import Table from '../Helper/AddNewTable';
|
||||
import { useEffect } from 'react';
|
||||
@ -6,7 +15,7 @@ import { useEffect } from 'react';
|
||||
interface Patient {
|
||||
generalHealth: string;
|
||||
presentProblemBefore: string;
|
||||
ifYespresentProblemBefore:string;
|
||||
ifYespresentProblemBefore: string;
|
||||
ifYestreatmentProvided: string;
|
||||
ifYesOutcome: string;
|
||||
strokeBloodclotting: string;
|
||||
@ -19,313 +28,511 @@ interface Patient {
|
||||
}
|
||||
|
||||
type Props = {
|
||||
handleFormSection5Data:(
|
||||
generalHealth: string|undefined,
|
||||
presentProblemBefore: string|undefined,
|
||||
ifYespresentProblemBefore:string|undefined,
|
||||
ifYestreatmentProvided: string|undefined,
|
||||
ifYesOutcome: string|undefined,
|
||||
strokeBloodclotting: string|undefined,
|
||||
ifYesstrokeBloodclotting: string|undefined,
|
||||
dizzinessFetigue: string|undefined,
|
||||
ifyesdizzinessFetigue: string|undefined,
|
||||
antiColligent: string|undefined,
|
||||
injuriesHospitalization: string|undefined,
|
||||
supplementsOrDrugs: string|undefined,
|
||||
)=> void
|
||||
patientDataDiplay:any;
|
||||
type:string;
|
||||
handleFormSection5Data: (
|
||||
generalHealth: string | undefined,
|
||||
presentProblemBefore: string | undefined,
|
||||
ifYespresentProblemBefore: string | undefined,
|
||||
ifYestreatmentProvided: string | undefined,
|
||||
ifYesOutcome: string | undefined,
|
||||
strokeBloodclotting: string | undefined,
|
||||
ifYesstrokeBloodclotting: string | undefined,
|
||||
dizzinessFetigue: string | undefined,
|
||||
ifyesdizzinessFetigue: string | undefined,
|
||||
antiColligent: string | undefined,
|
||||
injuriesHospitalization: string | undefined,
|
||||
supplementsOrDrugs: string | undefined
|
||||
) => void;
|
||||
patientDataDiplay: any;
|
||||
type: string;
|
||||
};
|
||||
|
||||
export default function PastTreatment5({
|
||||
handleFormSection5Data,
|
||||
patientDataDiplay,
|
||||
type,
|
||||
}: Props) {
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
generalHealth: '',
|
||||
presentProblemBefore: '',
|
||||
ifYespresentProblemBefore: '',
|
||||
ifYestreatmentProvided: '',
|
||||
ifYesOutcome: '',
|
||||
strokeBloodclotting: '',
|
||||
ifYesstrokeBloodclotting: '',
|
||||
dizzinessFetigue: '',
|
||||
ifyesdizzinessFetigue: '',
|
||||
antiColligent: '',
|
||||
injuriesHospitalization: '',
|
||||
supplementsOrDrugs: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
handleFormSection5Data(
|
||||
patient.generalHealth,
|
||||
patient.presentProblemBefore,
|
||||
patient.ifYespresentProblemBefore,
|
||||
patient.ifYestreatmentProvided,
|
||||
patient.ifYesOutcome,
|
||||
patient.strokeBloodclotting,
|
||||
patient.ifYesstrokeBloodclotting,
|
||||
patient.dizzinessFetigue,
|
||||
patient.ifyesdizzinessFetigue,
|
||||
patient.antiColligent,
|
||||
patient.injuriesHospitalization,
|
||||
patient.supplementsOrDrugs
|
||||
);
|
||||
}, [patient]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<form>
|
||||
<Grid container direction='row'>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>Overall your General Healgth is:</FormLabel>
|
||||
<RadioGroup
|
||||
name='painDuration'
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay.generalHealth
|
||||
: patient.generalHealth
|
||||
}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
generalHealth: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Excellent'
|
||||
control={<Radio />}
|
||||
label='Excellent'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Very Good'
|
||||
control={<Radio />}
|
||||
label='Very Good'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Good'
|
||||
control={<Radio />}
|
||||
label='Good'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Fair'
|
||||
control={<Radio />}
|
||||
label='Fair'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Poor'
|
||||
control={<Radio />}
|
||||
label='Poor'
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
Have you experienced your present problem before?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
name='painDuration'
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay.presentProblemBefore
|
||||
: patient.presentProblemBefore
|
||||
}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
presentProblemBefore: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style-form7'
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='If yes, when?'
|
||||
name='treatmentGoal'
|
||||
disabled={
|
||||
patient.presentProblemBefore !== 'Yes' || type == 'display'
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYespresentProblemBefore: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style-form7'
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='Was treatment provided?If yes, by whom?'
|
||||
name='treatmentGoal'
|
||||
disabled={
|
||||
patient.presentProblemBefore !== 'Yes' || type == 'display'
|
||||
}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.ifYestreatmentProvided
|
||||
: patient.ifYestreatmentProvided
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYestreatmentProvided: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style-form7'
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='Outcome?'
|
||||
name='treatmentGoal'
|
||||
disabled={
|
||||
patient.presentProblemBefore !== 'Yes' || type == 'display'
|
||||
}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.ifYesOutcome
|
||||
: patient.ifYesOutcome
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYesOutcome: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
Have you ever had a stroke or issues with blood clotting?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
name='painDuration'
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay.strokeBloodclotting
|
||||
: patient.strokeBloodclotting
|
||||
}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.strokeBloodclotting
|
||||
: patient.strokeBloodclotting
|
||||
}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
strokeBloodclotting: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
xl={10}
|
||||
lg={10}
|
||||
md={10}
|
||||
sm={12}
|
||||
className='collapsable-form-style-form7'
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='If yes, when?'
|
||||
name='treatmentGoal'
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.ifYesstrokeBloodclotting
|
||||
: patient.ifYesstrokeBloodclotting
|
||||
}
|
||||
disabled={
|
||||
patient.strokeBloodclotting !== 'Yes' || type == 'display'
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYesstrokeBloodclotting: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
Have you recently experienced dizziness, unexplained fatigue,
|
||||
weight loss or blood loss?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
name='painDuration'
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay.dizzinessFetigue
|
||||
: patient.dizzinessFetigue
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
dizzinessFetigue: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
xl={10}
|
||||
lg={10}
|
||||
md={10}
|
||||
sm={12}
|
||||
className='collapsable-form-style-form7'
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='If yes, when?'
|
||||
name='treatmentGoal'
|
||||
disabled={patient.dizzinessFetigue !== 'Yes'}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.ifyesdizzinessFetigue
|
||||
: patient.ifyesdizzinessFetigue
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifyesdizzinessFetigue: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
Are you currently taking anti-coagulant or blood thinning
|
||||
medication?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
name='painDuration'
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay.antiColligent
|
||||
: patient.antiColligent
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
antiColligent: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
Have you ever had any major illness, injuries, hospitalization
|
||||
or surgeries?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
name='painDuration'
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay.injuriesHospitalization
|
||||
: patient.injuriesHospitalization
|
||||
}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
injuriesHospitalization: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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} sx={{ marginLeft: 2, marginBottom: 3 }}>
|
||||
<Table
|
||||
handleFormSection5Data={handleFormSection5Data}
|
||||
patientDataDiplay={patientDataDiplay}
|
||||
type={type}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12}
|
||||
className='collapsable-form-style-multiline'
|
||||
>
|
||||
<FormLabel>
|
||||
Please list current supplements or drugs you may be taking:
|
||||
</FormLabel>
|
||||
<TextField
|
||||
multiline
|
||||
variant='outlined'
|
||||
label=''
|
||||
name='treatmentGoal'
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay.supplementsOrDrugs
|
||||
: patient.supplementsOrDrugs
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
supplementsOrDrugs: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default function PastTreatment5({handleFormSection5Data,patientDataDiplay,type}:Props){
|
||||
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
generalHealth: '',
|
||||
presentProblemBefore: '',
|
||||
ifYespresentProblemBefore:'',
|
||||
ifYestreatmentProvided:'',
|
||||
ifYesOutcome:'',
|
||||
strokeBloodclotting: '',
|
||||
ifYesstrokeBloodclotting: '',
|
||||
dizzinessFetigue: '',
|
||||
ifyesdizzinessFetigue:'',
|
||||
antiColligent: '',
|
||||
injuriesHospitalization: '',
|
||||
supplementsOrDrugs:''
|
||||
});
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection5Data(
|
||||
patient.generalHealth,
|
||||
patient.presentProblemBefore,
|
||||
patient.ifYespresentProblemBefore,
|
||||
patient.ifYestreatmentProvided,
|
||||
patient.ifYesOutcome,
|
||||
patient.strokeBloodclotting,
|
||||
patient.ifYesstrokeBloodclotting,
|
||||
patient.dizzinessFetigue,
|
||||
patient.ifyesdizzinessFetigue,
|
||||
patient.antiColligent,
|
||||
patient.injuriesHospitalization,
|
||||
patient.supplementsOrDrugs,
|
||||
)
|
||||
},[patient])
|
||||
|
||||
return(
|
||||
<>
|
||||
<form>
|
||||
<Grid container direction="row">
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
||||
<FormControl>
|
||||
<FormLabel>Overall your General Healgth is:</FormLabel>
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
defaultValue={type=='display'?patientDataDiplay.generalHealth:patient.generalHealth}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
generalHealth: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel disabled={type=='display'} value="Excellent" control={<Radio />} label="Excellent" />
|
||||
<FormControlLabel disabled={type=='display'} value="Very Good" control={<Radio />} label="Very Good" />
|
||||
<FormControlLabel disabled={type=='display'} value="Good" control={<Radio />} label="Good" />
|
||||
<FormControlLabel disabled={type=='display'} value="Fair" control={<Radio />} label="Fair" />
|
||||
<FormControlLabel disabled={type=='display'} value="Poor" control={<Radio />} label="Poor" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
||||
<FormControl>
|
||||
<FormLabel>Have you experienced your present problem before?</FormLabel>
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
defaultValue={type=='display'?patientDataDiplay.presentProblemBefore:patient.presentProblemBefore}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
presentProblemBefore: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="If yes, when?"
|
||||
name='treatmentGoal'
|
||||
disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYespresentProblemBefore: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Was treatment provided?If yes, by whom?"
|
||||
name='treatmentGoal'
|
||||
disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
|
||||
value={type=='display'?patientDataDiplay.ifYestreatmentProvided:patient.ifYestreatmentProvided}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYestreatmentProvided: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item
|
||||
xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="Outcome?"
|
||||
name='treatmentGoal'
|
||||
disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
|
||||
value={type=='display'?patientDataDiplay.ifYesOutcome:patient.ifYesOutcome}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYesOutcome: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
||||
<FormControl>
|
||||
<FormLabel>Have you ever had a stroke or issues with blood clotting?</FormLabel>
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
defaultValue={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
|
||||
value={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
strokeBloodclotting: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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={4} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="If yes, when?"
|
||||
name='treatmentGoal'
|
||||
value={type=='display'?patientDataDiplay.ifYesstrokeBloodclotting:patient.ifYesstrokeBloodclotting}
|
||||
disabled={patient.strokeBloodclotting!=='Yes'||type=='display'}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYesstrokeBloodclotting: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
||||
<FormControl>
|
||||
<FormLabel>Have you recently experienced dizziness, unexplained fatigue, weight loss or blood loss?</FormLabel>
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.dizzinessFetigue:patient.dizzinessFetigue}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
dizzinessFetigue: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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={4} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="If yes, when?"
|
||||
name='treatmentGoal'
|
||||
disabled={patient.dizzinessFetigue!=='Yes'}
|
||||
value={type=='display'?patientDataDiplay.ifyesdizzinessFetigue:patient.ifyesdizzinessFetigue}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifyesdizzinessFetigue: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
|
||||
<FormControl>
|
||||
<FormLabel>Are you currently taking anti-coagulant or blood thinning medication?</FormLabel>
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.antiColligent:patient.antiColligent}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
antiColligent: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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-radioButtons-fullwidth'>
|
||||
<FormControl>
|
||||
<FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
defaultValue={type=='display'?patientDataDiplay.injuriesHospitalization:patient.injuriesHospitalization}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
injuriesHospitalization: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<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} sx={{marginLeft:2, marginBottom:3}} >
|
||||
<Table
|
||||
handleFormSection5Data={handleFormSection5Data}
|
||||
patientDataDiplay={patientDataDiplay}
|
||||
type={type}/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}
|
||||
xl={3}
|
||||
lg={4}
|
||||
md={6}
|
||||
sm={12} className='collapsable-form-style-multiline'>
|
||||
<FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
|
||||
<TextField
|
||||
multiline
|
||||
variant="outlined"
|
||||
label=""
|
||||
name='treatmentGoal'
|
||||
defaultValue={type=='display'?patientDataDiplay.supplementsOrDrugs:patient.supplementsOrDrugs}
|
||||
disabled={type=='display'}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
supplementsOrDrugs: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -147,49 +147,48 @@ export default function PersonalSection({
|
||||
className='collapsable-form-style'
|
||||
>
|
||||
<TextField
|
||||
required
|
||||
variant='outlined'
|
||||
label='Phone Number'
|
||||
name='cellPhone'
|
||||
type='number'
|
||||
placeholder='Please enter your cell Phone number'
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.cellPhone
|
||||
: patient.cellPhone
|
||||
required
|
||||
variant='outlined'
|
||||
label='Phone Number'
|
||||
name='cellPhone'
|
||||
type='number'
|
||||
placeholder='Please enter your cell Phone number'
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.cellPhone
|
||||
: patient.cellPhone
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
let value = e.target.value;
|
||||
if (value[0] === '0') {
|
||||
value = value.slice(1);
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
let value = e.target.value;
|
||||
if (value[0] === '0') {
|
||||
value = value.slice(1);
|
||||
}
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
cellPhone: value,
|
||||
}));
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (!/^\d{10}$/.test(e.target.value)) {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
cellPhone: value,
|
||||
cellPhoneError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
cellPhoneError: false,
|
||||
}));
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
if (!/^\d{10}$/.test(e.target.value)) {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
cellPhoneError: true,
|
||||
}));
|
||||
} else {
|
||||
setPatient((prevValues: any) => ({
|
||||
...prevValues,
|
||||
cellPhoneError: false,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
error={patient.cellPhoneError}
|
||||
helperText={
|
||||
patient.cellPhoneError
|
||||
? 'Please enter a valid 10-digit phone number'
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
|
||||
}}
|
||||
error={patient.cellPhoneError}
|
||||
helperText={
|
||||
patient.cellPhoneError
|
||||
? 'Please enter a valid 10-digit phone number'
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user