Merge pull request 'feature/view-patient-data' (#7) from feature/view-patient-data into develop
Reviewed-on: #7
This commit is contained in:
commit
0d4b0c7576
42
package-lock.json
generated
42
package-lock.json
generated
@ -41,6 +41,7 @@
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-router-dom": "^6.14.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-signature-canvas": "^1.0.6",
|
||||
"react-table": "^7.8.0",
|
||||
"recharts": "^2.7.2",
|
||||
"typescript": "^4.9.5",
|
||||
@ -53,6 +54,7 @@
|
||||
"@types/leaflet": "^1.9.3",
|
||||
"@types/react-date-range": "^1.4.4",
|
||||
"@types/react-gauge-chart": "^0.4.0",
|
||||
"@types/react-signature-canvas": "^1.0.2",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"postcss": "^8.4.24",
|
||||
"tailwindcss": "^3.3.2"
|
||||
@ -4972,6 +4974,16 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-signature-canvas": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-signature-canvas/-/react-signature-canvas-1.0.2.tgz",
|
||||
"integrity": "sha512-uDHDoo2JM/9qYS+U7PRKDLBgOnQOOUEkDdXjCxBvI19fWtOLqXisrjiquPu+enu5iu2oWIfU7cVhn1QJZPkLTg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/signature_pad": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-transition-group": {
|
||||
"version": "4.4.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
|
||||
@ -5029,6 +5041,12 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/signature_pad": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/signature_pad/-/signature_pad-2.3.2.tgz",
|
||||
"integrity": "sha512-dDfWIgRcdzAaeVOpLRmLHIumGwc5inSD4Dj2Duis3yUEoSADZECLJHKkUQphbaANQ7kSC2bkf1JzyBPSmTlrPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/sockjs": {
|
||||
"version": "0.3.33",
|
||||
"resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
|
||||
@ -15961,6 +15979,20 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-signature-canvas": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/react-signature-canvas/-/react-signature-canvas-1.0.6.tgz",
|
||||
"integrity": "sha512-NoMHomYu9HxFeLjUGbIeV9abPdWSROfFxFNDekGdwmmaIx+w5ziOEiU2C34X0Ao4GxFnwqyUy/BpYlA4lCD1CA==",
|
||||
"dependencies": {
|
||||
"signature_pad": "^2.3.2",
|
||||
"trim-canvas": "^0.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.5.8",
|
||||
"react": "0.14 - 18",
|
||||
"react-dom": "0.14 - 18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-smooth": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.3.tgz",
|
||||
@ -16844,6 +16876,11 @@
|
||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
|
||||
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
|
||||
},
|
||||
"node_modules/signature_pad": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-2.3.2.tgz",
|
||||
"integrity": "sha512-peYXLxOsIY6MES2TrRLDiNg2T++8gGbpP2yaC+6Ohtxr+a2dzoaqWosWDY9sWqTAAk6E/TyQO+LJw9zQwyu5kA=="
|
||||
},
|
||||
"node_modules/sisteransi": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
|
||||
@ -17691,6 +17728,11 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/trim-canvas": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/trim-canvas/-/trim-canvas-0.1.2.tgz",
|
||||
"integrity": "sha512-nd4Ga3iLFV94mdhW9JFMLpQbHUyCQuhFOD71PEAt1NjtMD5wbZctzhX8c3agHNybMR5zXD1XTGoIEWk995E6pQ=="
|
||||
},
|
||||
"node_modules/tryer": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-router-dom": "^6.14.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-signature-canvas": "^1.0.6",
|
||||
"react-table": "^7.8.0",
|
||||
"recharts": "^2.7.2",
|
||||
"typescript": "^4.9.5",
|
||||
@ -73,6 +74,7 @@
|
||||
"@types/leaflet": "^1.9.3",
|
||||
"@types/react-date-range": "^1.4.4",
|
||||
"@types/react-gauge-chart": "^0.4.0",
|
||||
"@types/react-signature-canvas": "^1.0.2",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"postcss": "^8.4.24",
|
||||
"tailwindcss": "^3.3.2"
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
content="In Motion Spine & Joint Center"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
@ -24,7 +24,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>In Motion Spine & Joint Center</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
55
src/App.css
55
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;
|
||||
@ -58,3 +54,32 @@
|
||||
.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>
|
||||
<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>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
|
||||
</Grid>
|
||||
</FormControl>
|
||||
:""}
|
||||
|
||||
|
||||
<TableContainer sx={{width:800}} className='illness-table-style'>
|
||||
<Table aria-label="simple table">
|
||||
<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;
|
||||
|
||||
50
src/Components/Helper/SignatureComponent.tsx
Normal file
50
src/Components/Helper/SignatureComponent.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import SignatureCanvas from 'react-signature-canvas';
|
||||
import Button from '@mui/material/Button';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { FormLabel, Grid } from '@mui/material';
|
||||
|
||||
|
||||
type Props={
|
||||
signature:any;
|
||||
setSignature: (value: any) => void;
|
||||
}
|
||||
const SignatureComponent = ({signature,setSignature}:Props) => {
|
||||
const sigCanvas = useRef<any>();
|
||||
|
||||
const clear = () => sigCanvas.current.clear();
|
||||
// setSignature(sigCanvas.current.toDataURL());
|
||||
|
||||
const save = () => {
|
||||
setSignature(sigCanvas.current.toDataURL());
|
||||
};
|
||||
|
||||
const StyledCanvas = styled(SignatureCanvas)({
|
||||
border: '5px solid #888888'
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid item sx={{border:'1px solid #888888',borderRadius:2, width:'250px', height:'110px',marginLeft:'10px'}}>
|
||||
<StyledCanvas
|
||||
ref={sigCanvas}
|
||||
canvasProps={{
|
||||
className: 'signatureCanvas',
|
||||
height:'110px',
|
||||
width:'250px'
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid container flexDirection={'row'} sx={{ marginTop:'10px'}}>
|
||||
<Grid item sx={{marginLeft:'10px'}}>
|
||||
<Button variant="contained" onClick={clear}>Clear</Button>
|
||||
</Grid>
|
||||
<Grid item sx={{marginLeft:'20px'}}>
|
||||
<Button variant="contained" onClick={save}>Save</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignatureComponent;
|
||||
@ -11,10 +11,12 @@ type Props = {
|
||||
const EntryForm = ({ entries, onUpdate, onDelete, onSave }: Props) => {
|
||||
return (
|
||||
<div className='entryForm'>
|
||||
<span className='header'>*** Mark Your Areas of Pain on the Picture ***</span>
|
||||
{entries && entries.length > 0 &&
|
||||
<span className='header'>
|
||||
*** Mark Your Areas of Pain on the Picture ***
|
||||
</span>
|
||||
{entries && entries.length > 0 && (
|
||||
<span className='sub-header'>How much pain are you in right now?</span>
|
||||
}
|
||||
)}
|
||||
{entries?.map((entry: any, index: number) => (
|
||||
<Entry
|
||||
entry={entry}
|
||||
@ -24,14 +26,14 @@ const EntryForm = ({ entries, onUpdate, onDelete, onSave }: Props) => {
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
))}
|
||||
{
|
||||
{/* {
|
||||
entries && entries.length > 0 &&
|
||||
<div className='buttonDiv'>
|
||||
<Button variant='contained' onClick={() => onSave({})}>
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
} */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.image-marker-div .entry-div {
|
||||
width: 50%;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.image-marker-div .entry-div .entryForm {
|
||||
@ -51,6 +51,9 @@
|
||||
margin-top: 2%;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
.image-marker-div .marker-div {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.image-marker-div {
|
||||
@ -69,6 +72,11 @@
|
||||
gap: 0;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.image-marker-div .marker-div {
|
||||
/* margin-right: 5%; */
|
||||
margin-top: 3%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import ImageMarker, { Marker } from 'react-image-marker';
|
||||
|
||||
import humanImage from '../../Assets/human_body_3d.jpg';
|
||||
import EntryForm from './EntryForm';
|
||||
|
||||
import './PatientImageMarker.css'
|
||||
import './PatientImageMarker.css';
|
||||
|
||||
type Props = {}
|
||||
type Props = {};
|
||||
|
||||
const PatientImageMarker = (props: Props) => {
|
||||
const [markers, setMarkers] = useState<Array<Marker>>([]);
|
||||
@ -38,36 +38,42 @@ const PatientImageMarker = (props: Props) => {
|
||||
'entry',
|
||||
JSON.stringify({ markers: markers, entries: entries })
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (action.type === 'add')
|
||||
setEntries([...entries, { index: entries.length + 1, severity: 5 }]);
|
||||
else
|
||||
if (action.type === 'add') {
|
||||
const ind =
|
||||
entries.length != 0 ? entries[entries.length - 1].index + 1 : 1;
|
||||
setEntries([...entries, { index: ind, severity: 5 }]);
|
||||
} else
|
||||
setEntries(
|
||||
entries.filter((entry: any, ind: number) => ind != action.index)
|
||||
);
|
||||
}, [action]);
|
||||
|
||||
useEffect(() => {
|
||||
onSave();
|
||||
}, [entries]);
|
||||
|
||||
return (
|
||||
<div className='image-marker-div'>
|
||||
<div className='entry-div'>
|
||||
<EntryForm
|
||||
entries={entries}
|
||||
onSave={onSave}
|
||||
onDelete={deleteEntry}
|
||||
onUpdate={updateEntry}
|
||||
/>
|
||||
</div>
|
||||
<div className='marker-div'>
|
||||
<ImageMarker
|
||||
src={humanImage}
|
||||
markers={markers}
|
||||
onAddMarker={(marker: Marker) => addEntries(marker)}
|
||||
/>
|
||||
</div>
|
||||
<div className='image-marker-div'>
|
||||
<div className='entry-div'>
|
||||
<EntryForm
|
||||
entries={entries}
|
||||
onSave={onSave}
|
||||
onDelete={deleteEntry}
|
||||
onUpdate={updateEntry}
|
||||
/>
|
||||
</div>
|
||||
<div className='marker-div'>
|
||||
<ImageMarker
|
||||
src={humanImage}
|
||||
markers={markers}
|
||||
onAddMarker={(marker: Marker) => addEntries(marker)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default PatientImageMarker;
|
||||
@ -15,7 +15,7 @@ const ViewPatientImageMarker = (props: Props) => {
|
||||
<span className='sub-header'>How much pain?</span>
|
||||
{saved.entries?.map((entry: any, index: number) => (
|
||||
<div className='ratingResult' key={index}>
|
||||
<span className='image-marker__marker--default'>{entry.index}</span>
|
||||
<span className='image-marker__marker--default'>{index + 1}</span>
|
||||
<Rating
|
||||
index={entry.index}
|
||||
defaultValue={entry.severity}
|
||||
|
||||
@ -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 && 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 && 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 && 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 && 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 && 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 && 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 && 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 && 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 && 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 && 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 && 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 && patientDataDiplay.spousePhone
|
||||
: patient.spousePhone
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -68,7 +68,6 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
)
|
||||
},[patient])
|
||||
|
||||
console.log("patientDataDiplay",patientDataDiplay)
|
||||
return(
|
||||
<>
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
@ -93,7 +92,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
physicianname: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.physicianname:patient.physicianname}
|
||||
value={type=='display'? patientDataDiplay && patientDataDiplay.physicianname:patient.physicianname}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
@ -114,7 +113,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
physiciancity: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.physiciancity:patient.physiciancity}
|
||||
value={type=='display'? patientDataDiplay && patientDataDiplay.physiciancity:patient.physiciancity}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
@ -135,7 +134,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
physicianstate: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.physicianstate:patient.physicianstate}
|
||||
value={type=='display'? patientDataDiplay && patientDataDiplay.physicianstate:patient.physicianstate}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
@ -157,7 +156,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
physicianphone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.physicianphone:patient.physicianphone}
|
||||
value={type=='display'? patientDataDiplay && patientDataDiplay.physicianphone:patient.physicianphone}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
@ -190,7 +189,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
<FormLabel>Previous Chiropractic Care:</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue={type=='display'?patientDataDiplay.haveChiropractor:patient.haveChiropractor}
|
||||
defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.haveChiropractor:patient.haveChiropractor}
|
||||
name="radio-buttons-group"
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
@ -223,7 +222,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
chiropractorName: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.chiropractorName:patient.chiropractorName}
|
||||
value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorName:patient.chiropractorName}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
@ -245,7 +244,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
chiropractorState: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={type=='display'?patientDataDiplay.chiropractorState:patient.chiropractorState}
|
||||
value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorState:patient.chiropractorState}
|
||||
disabled={type=='display'}
|
||||
/>
|
||||
</Grid>
|
||||
@ -257,7 +256,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
<RadioGroup
|
||||
// value={patient.gender}
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue={type=='display'?patientDataDiplay.xray:patient.xray}
|
||||
defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.xray:patient.xray}
|
||||
name="radio-buttons-group"
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
@ -279,7 +278,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
<RadioGroup
|
||||
// value={patient.gender}
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue={type=='display'?patientDataDiplay.reference:patient.reference}
|
||||
defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.reference:patient.reference}
|
||||
name="radio-buttons-group"
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
@ -305,7 +304,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
|
||||
<RadioGroup
|
||||
// value={patient.gender}
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue={type=='display'?patientDataDiplay.cellPhoneProvider:patient.cellPhoneProvider}
|
||||
defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.cellPhoneProvider:patient.cellPhoneProvider}
|
||||
name="radio-buttons-group"
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
|
||||
@ -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){
|
||||
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'),
|
||||
});
|
||||
|
||||
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');
|
||||
|
||||
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 `${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 && 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 && 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 && 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 && 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 && 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 && 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 && 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,587 @@
|
||||
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]);
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection4Data(
|
||||
patient.chiefComplaint,
|
||||
patient.painWorse,
|
||||
patient.painBetter,
|
||||
patient.painQuality,
|
||||
patient.painWorstTime,
|
||||
patient.currentComplaintIssues,
|
||||
patient.painDuration,
|
||||
patient.currentTreatment,
|
||||
patient.treatmentGoal,
|
||||
patient.selfTreatment,
|
||||
)
|
||||
},[patient])
|
||||
const handlePainWorseChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painWorse: checked
|
||||
? [...prevValues.painWorse, name]
|
||||
: prevValues.painWorse.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePainWorseChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painWorse: checked
|
||||
? [...prevValues.painWorse, name]
|
||||
: prevValues.painWorse.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
const handlePainBetterChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painBetter: checked
|
||||
? [...prevValues.painBetter, name]
|
||||
: prevValues.painBetter.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePainBetterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painBetter: checked
|
||||
? [...prevValues.painBetter, name]
|
||||
: prevValues.painBetter.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
const handlePainQualityChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painQuality: checked
|
||||
? [...prevValues.painQuality, name]
|
||||
: prevValues.painQuality.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePainQualityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painQuality: checked
|
||||
? [...prevValues.painQuality, name]
|
||||
: prevValues.painQuality.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
const handlePainWorstTimeChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painWorstTime: checked
|
||||
? [...prevValues.painWorstTime, name]
|
||||
: prevValues.painWorstTime.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePainWorstTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painWorstTime: checked
|
||||
? [...prevValues.painWorstTime, name]
|
||||
: prevValues.painWorstTime.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleCurrentComplaintIssuesTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
currentComplaintIssues: checked
|
||||
? [...prevValues.currentComplaintIssues, name]
|
||||
: prevValues.currentComplaintIssues.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
return(
|
||||
<>
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{fontWeight:600}}>Issue Details:</FormLabel>
|
||||
</Grid>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={4} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label="How did your Chief complaint start?(ex-fell on ice)"
|
||||
name='chiefComplaint'
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
chiefComplaint: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={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={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>
|
||||
const handleCurrentComplaintIssuesTimeChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
const { name, checked } = event.target;
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
currentComplaintIssues: checked
|
||||
? [...prevValues.currentComplaintIssues, name]
|
||||
: prevValues.currentComplaintIssues.filter((item) => item !== name),
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid item xs={12} className='collapsable-form-style '>
|
||||
<FormLabel sx={{ fontWeight: 600 }}>Issue Details:</FormLabel>
|
||||
</Grid>
|
||||
<Grid container direction='row'>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={10}
|
||||
lg={10}
|
||||
md={10}
|
||||
sm={12}
|
||||
className='collapsable-form-style-form7'
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='How did your Chief complaint start?(ex-fell on ice)'
|
||||
name='chiefComplaint'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
chiefComplaint: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.chiefComplaint
|
||||
: patient.chiefComplaint
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
</>
|
||||
)}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>What makes your pain worse?</FormLabel>
|
||||
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainWorseChange} name='Bending' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Bending')}/>
|
||||
}
|
||||
label='Bending'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainWorseChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Standing')}/>
|
||||
}
|
||||
label='Standing'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainWorseChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Sitting')}/>
|
||||
}
|
||||
label='Sitting'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainWorseChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Walking')}/>
|
||||
}
|
||||
label='Walking'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainWorseChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Others')}/>
|
||||
}
|
||||
label='Others'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</FormGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>What makes your pain better?</FormLabel>
|
||||
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainBetterChange}
|
||||
name='laying down'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('laying down')}
|
||||
/>
|
||||
}
|
||||
label='laying down'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainBetterChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Standing')}/>
|
||||
}
|
||||
label='Standing'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainBetterChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Sitting')}/>
|
||||
}
|
||||
label='Sitting'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainBetterChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Walking')}/>
|
||||
}
|
||||
label='Walking'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainBetterChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Others')}/>
|
||||
}
|
||||
label='Others'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</FormGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>What is the quality of your pain?</FormLabel>
|
||||
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainQualityChange} name='sharp' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Sharp')}/>
|
||||
}
|
||||
label='Sharp'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainQualityChange} name='Dull/Ache' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Dull/Ache')}/>
|
||||
}
|
||||
label='Dull/Ache'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainQualityChange}
|
||||
name='Throbbing'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Throbbing')}
|
||||
/>
|
||||
}
|
||||
label='Throbbing'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainQualityChange}
|
||||
name='Tingling/Numbness/Burning'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Tingling/Numbness/Burning')}
|
||||
/>
|
||||
}
|
||||
label='Tingling/Numbness/Burning'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox onChange={handlePainQualityChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Others')}/>
|
||||
}
|
||||
label='Others'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</FormGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>What is the worst time for your pain?</FormLabel>
|
||||
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainWorstTimeChange}
|
||||
name='Morning'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Morning')}
|
||||
/>
|
||||
}
|
||||
label='Morning'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainWorstTimeChange}
|
||||
name='During day'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('During day')}
|
||||
/>
|
||||
}
|
||||
label='During day'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainWorstTimeChange}
|
||||
name='Evening'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Evening')}
|
||||
/>
|
||||
}
|
||||
label='Evening'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainWorstTimeChange}
|
||||
name='Lying in bed'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Lying in bed')}
|
||||
/>
|
||||
}
|
||||
label='Lying in bed'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handlePainWorstTimeChange}
|
||||
name='Others'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Others')}
|
||||
/>
|
||||
}
|
||||
label='Others'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</FormGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
How much of the day do you experience your chief complaint?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
name='painDuration'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
painDuration: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.painDuration
|
||||
: patient.painDuration
|
||||
}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='0-25%'
|
||||
control={<Radio />}
|
||||
label='0-25%'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='25-50%'
|
||||
control={<Radio />}
|
||||
label='25-50%'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='50-75%'
|
||||
control={<Radio />}
|
||||
label='50-75%'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='75-100%'
|
||||
control={<Radio />}
|
||||
label='75-100%'
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
Has your current complaint caused any of the following?
|
||||
</FormLabel>
|
||||
<FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handleCurrentComplaintIssuesTimeChange}
|
||||
name='Muscle weakness'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Muscle weakness')}
|
||||
/>
|
||||
}
|
||||
label='Muscle weakness'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handleCurrentComplaintIssuesTimeChange}
|
||||
name='Bowel/Bladder problem'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Bowel/Bladder problem')}
|
||||
/>
|
||||
}
|
||||
label='Bowel/Bladder problem'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handleCurrentComplaintIssuesTimeChange}
|
||||
name='Digestion'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Digestion')}
|
||||
/>
|
||||
}
|
||||
label='Digestion'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={handleCurrentComplaintIssuesTimeChange}
|
||||
name='Cardiac/Respiratory'
|
||||
defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Cardiac/Respiratory')}
|
||||
/>
|
||||
}
|
||||
label='Cardiac/Respiratory'
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</FormGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
Have you tried any self treatment (ex-ice, heat, excercise) or
|
||||
taken any medication(over the counter or prescription)?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
name='painDuration'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
selfTreatment: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.selfTreatment
|
||||
: patient.selfTreatment
|
||||
}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='yes'
|
||||
control={<Radio />}
|
||||
label='Yes'
|
||||
/>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='no'
|
||||
control={<Radio />}
|
||||
label='No'
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
className='collapsable-form-style'
|
||||
sx={{ marginTop: 3 }}
|
||||
>
|
||||
<FormLabel sx={{ fontWeight: 600 }}>
|
||||
Expected Treatment Result:
|
||||
</FormLabel>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
xl={10}
|
||||
lg={10}
|
||||
md={10}
|
||||
sm={12}
|
||||
className='collapsable-form-style-form7'
|
||||
>
|
||||
<TextField
|
||||
variant='outlined'
|
||||
label='What is your goal from treatment?(ex-play golf without pain)'
|
||||
name='treatmentGoal'
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
treatmentGoal: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.treatmentGoal
|
||||
: patient.treatmentGoal
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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: '',
|
||||
});
|
||||
|
||||
export default function PastTreatment5({handleFormSection5Data,patientDataDiplay,type}:Props){
|
||||
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]);
|
||||
|
||||
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
|
||||
return (
|
||||
<>
|
||||
<form>
|
||||
<Grid container direction='row'>
|
||||
<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}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>Overall your General Health is:</FormLabel>
|
||||
<RadioGroup
|
||||
name='painDuration'
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.generalHealth
|
||||
: patient.generalHealth
|
||||
}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYestreatmentProvided: event.target.value,
|
||||
generalHealth: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Excellent'
|
||||
control={<Radio />}
|
||||
label='Excellent'
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item
|
||||
<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}
|
||||
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}
|
||||
className='collapsable-form-style-radioButtons-fullwidth'
|
||||
>
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
Have you experienced your present problem before?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
name='painDuration'
|
||||
defaultValue={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.presentProblemBefore
|
||||
: patient.presentProblemBefore
|
||||
}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYesOutcome: event.target.value,
|
||||
presentProblemBefore: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Yes'
|
||||
control={<Radio />}
|
||||
label='Yes'
|
||||
/>
|
||||
</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>
|
||||
<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'}
|
||||
<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 && 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 && 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 && patientDataDiplay.strokeBloodclotting
|
||||
: patient.strokeBloodclotting
|
||||
}
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay && patientDataDiplay.strokeBloodclotting
|
||||
: patient.strokeBloodclotting
|
||||
}
|
||||
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifYesstrokeBloodclotting: event.target.value,
|
||||
strokeBloodclotting: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Yes'
|
||||
control={<Radio />}
|
||||
label='Yes'
|
||||
/>
|
||||
</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>
|
||||
<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}
|
||||
<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 && 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 && patientDataDiplay.dizzinessFetigue
|
||||
: patient.dizzinessFetigue
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifyesdizzinessFetigue: event.target.value,
|
||||
dizzinessFetigue: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Yes'
|
||||
control={<Radio />}
|
||||
label='Yes'
|
||||
/>
|
||||
</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>
|
||||
<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
|
||||
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 && patientDataDiplay.ifyesdizzinessFetigue
|
||||
: patient.ifyesdizzinessFetigue
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
ifyesdizzinessFetigue: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</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'}
|
||||
<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 && patientDataDiplay.antiColligent
|
||||
: patient.antiColligent
|
||||
}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
supplementsOrDrugs: event.target.value,
|
||||
antiColligent: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='Yes'
|
||||
control={<Radio />}
|
||||
label='Yes'
|
||||
/>
|
||||
</Grid>
|
||||
<FormControlLabel
|
||||
disabled={type == 'display'}
|
||||
value='No'
|
||||
control={<Radio />}
|
||||
label='No'
|
||||
/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
<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 && 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 && patientDataDiplay.supplementsOrDrugs
|
||||
: patient.supplementsOrDrugs
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
supplementsOrDrugs: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -4,6 +4,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import Footer from '../Footer';
|
||||
import Header from '../Header';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
@ -33,6 +34,8 @@ import OtherDetails8 from './OtherDetails8';
|
||||
import PatientImageMarker from '../ImageMarker/PatientImageMarker';
|
||||
import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker';
|
||||
import AlertDialog from '../Helper/AlertDialogBox';
|
||||
import SignatureComponent from '../Helper/SignatureComponent';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
|
||||
const Accordion = styled((props: AccordionProps) => (
|
||||
<MuiAccordion disableGutters elevation={0} square {...props} />
|
||||
@ -78,7 +81,7 @@ export default function PatientForm({ type }: Props) {
|
||||
const [alertProps, setAlertProps] = React.useState<any>({});
|
||||
const [expanded, setExpanded] = React.useState<string | false>('panel1');
|
||||
const [isChecked, setIsChecked] = React.useState(false);
|
||||
const [signature, setSignature] = React.useState('');
|
||||
const [signature, setSignature] = React.useState<any>();
|
||||
const [section1Data, setSection1Data] = React.useState<any>({});
|
||||
const [section2Data, setSection2Data] = React.useState<any>({});
|
||||
const [section3Data, setSection3Data] = React.useState<any>({});
|
||||
@ -88,6 +91,7 @@ export default function PatientForm({ type }: Props) {
|
||||
const [section7Data, setSection7Data] = React.useState<any>({});
|
||||
const [section8Data, setSection8Data] = React.useState<any>({});
|
||||
const [allPatientData, setAllPatientData] = React.useState<any>([]);
|
||||
const [patientDetailsButtonFlag, setPatientDetailsButtonFlag ] = React.useState<boolean>(false)
|
||||
|
||||
const handleFormSection1Data = (
|
||||
fullName?: string | undefined,
|
||||
@ -347,6 +351,7 @@ export default function PatientForm({ type }: Props) {
|
||||
recreationalActivities: section7Data,
|
||||
otherDetails: section8Data,
|
||||
injuryPainDetails: saved.entries,
|
||||
signature: signature,
|
||||
};
|
||||
|
||||
// Create a copy of the existing data array and push the new patient data
|
||||
@ -370,6 +375,13 @@ export default function PatientForm({ type }: Props) {
|
||||
section1Data.mailingAddress !== ''
|
||||
) {
|
||||
TextFile();
|
||||
setPatientDetailsButtonFlag(true)
|
||||
setAlertProps({
|
||||
open: true,
|
||||
severity: 'success',
|
||||
message: 'The patient details have been submitted!',
|
||||
duration: 5000,
|
||||
});
|
||||
} else {
|
||||
setAlertProps({
|
||||
open: true,
|
||||
@ -410,8 +422,6 @@ export default function PatientForm({ type }: Props) {
|
||||
JSON.parse(localStorage.getItem('patientData'))
|
||||
: [];
|
||||
|
||||
console.log('dfsdfdsf', patientData);
|
||||
|
||||
return (
|
||||
<>
|
||||
{alertProps && alertProps.open && (
|
||||
@ -425,7 +435,7 @@ export default function PatientForm({ type }: Props) {
|
||||
)}
|
||||
<Paper elevation={0} className='app-screen-constants'>
|
||||
<Header />
|
||||
<Paper elevation={0} sx={{ margin: 4, minHeight: 550 }}>
|
||||
<Paper elevation={0} sx={{ margin: '2%', minHeight: 550 }}>
|
||||
{/* <form onSubmit={handleSubmit}> */}
|
||||
<Typography sx={{ fontSize: 20 }} gutterBottom>
|
||||
Confidential Patient Information
|
||||
@ -436,7 +446,7 @@ export default function PatientForm({ type }: Props) {
|
||||
onChange={handleExpandChange('panel1')}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
// expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls='panel1a-content'
|
||||
id='panel1a-header'
|
||||
>
|
||||
@ -633,6 +643,7 @@ export default function PatientForm({ type }: Props) {
|
||||
<FormGroup sx={{ marginTop: 3 }}>
|
||||
<FormControlLabel
|
||||
required
|
||||
disabled={type == 'display'}
|
||||
control={
|
||||
<Checkbox
|
||||
checked={type === 'display' ? true : isChecked}
|
||||
@ -644,32 +655,106 @@ export default function PatientForm({ type }: Props) {
|
||||
</FormGroup>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6} className='collapsable-form-style'>
|
||||
<TextField
|
||||
disabled={type == 'display'}
|
||||
variant='outlined'
|
||||
label='SIGNATURE'
|
||||
name='treatmentGoal'
|
||||
placeholder='Please type your name'
|
||||
onChange={(event) => {
|
||||
setSignature(event.target.value);
|
||||
}}
|
||||
/>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2} flexDirection={'row'}>
|
||||
{type !== 'display' ? (
|
||||
<>
|
||||
|
||||
<Grid item className='collapsable-form-style'>
|
||||
<FormLabel sx={{marginLeft:'10px'}}> Signature:</FormLabel>
|
||||
<SignatureComponent signature={signature} setSignature={setSignature} />
|
||||
</Grid>
|
||||
|
||||
<Grid item>
|
||||
<FormLabel sx={{ margin: 0, padding: 0 }}>
|
||||
Please verify your signature here:
|
||||
</FormLabel>
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px solid black',
|
||||
borderRadius: 2,
|
||||
height: '110px',
|
||||
width: '250px',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={signature}
|
||||
style={{ height: '110px', width: '250px' }}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
</>
|
||||
) : (
|
||||
<Grid item>
|
||||
<FormLabel sx={{ margin: 0, padding: 0 }}>
|
||||
Your signature:
|
||||
</FormLabel>
|
||||
<Box
|
||||
sx={{
|
||||
border: '1px solid black',
|
||||
borderRadius: 2,
|
||||
height: '110px',
|
||||
width: '250px',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={patientData.signature}
|
||||
style={{ height: '110px', width: '250px' }}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Button
|
||||
// type="submit"
|
||||
variant='contained'
|
||||
color='primary'
|
||||
sx={{ margin: 5, left: '40%', width: '200px' }}
|
||||
disabled={
|
||||
isChecked == false || signature == '' || type == 'display'
|
||||
}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
<Grid container flexDirection={'row-reverse'}>
|
||||
{patientDetailsButtonFlag && type!=='display'?
|
||||
<Grid item>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='primary'
|
||||
sx={{ margin: 5, width: '200px' }}
|
||||
onClick={(e)=>{
|
||||
|
||||
}}
|
||||
component={Link}
|
||||
to='/view-details'
|
||||
>
|
||||
View Patient Details
|
||||
</Button>
|
||||
</Grid>:null}
|
||||
|
||||
{type=='display'?
|
||||
<Grid item>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='primary'
|
||||
sx={{ margin: 5, width: '200px' }}
|
||||
onClick={(e)=>{
|
||||
|
||||
}}
|
||||
component={Link}
|
||||
to='/'
|
||||
>
|
||||
New Patient Form
|
||||
</Button>
|
||||
</Grid>:null}
|
||||
|
||||
<Grid item>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='primary'
|
||||
sx={{ margin: 5, width: '200px' }}
|
||||
disabled={
|
||||
isChecked == false ||
|
||||
signature == undefined ||
|
||||
type == 'display'
|
||||
}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* </form> */}
|
||||
|
||||
@ -109,7 +109,7 @@ export default function PersonalSection({
|
||||
name='fullName'
|
||||
placeholder='Please enter your name'
|
||||
value={
|
||||
type == 'display' ? patientDataDiplay.fullName : patient.fullName
|
||||
type == 'display' ? patientDataDiplay && patientDataDiplay.fullName : patient.fullName
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
@ -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 && 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
|
||||
@ -209,7 +208,7 @@ export default function PersonalSection({
|
||||
placeholder='Please enter your home phone'
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.homePhone
|
||||
? patientDataDiplay && patientDataDiplay.homePhone
|
||||
: patient.homePhone
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
@ -239,7 +238,7 @@ export default function PersonalSection({
|
||||
label='Email'
|
||||
name='email'
|
||||
placeholder='Please enter your email'
|
||||
value={type == 'display' ? patientDataDiplay.email : patient.email}
|
||||
value={type == 'display' ? patientDataDiplay && patientDataDiplay.email : patient.email}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
@ -282,7 +281,7 @@ export default function PersonalSection({
|
||||
name='age'
|
||||
type='number'
|
||||
placeholder='Please enter your age'
|
||||
value={type == 'display' ? patientDataDiplay.age : patient.age}
|
||||
value={type == 'display' ? patientDataDiplay && patientDataDiplay.age : patient.age}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
@ -323,7 +322,7 @@ export default function PersonalSection({
|
||||
label='Date of Birth'
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.dateOfBirth
|
||||
? patientDataDiplay && patientDataDiplay.dateOfBirth
|
||||
: birthDateValue
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
@ -353,7 +352,7 @@ export default function PersonalSection({
|
||||
name='socialSecurityNumber'
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.socialSecurityNumber
|
||||
? patientDataDiplay && patientDataDiplay.socialSecurityNumber
|
||||
: patient.socialSecurityNumber
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
@ -385,7 +384,7 @@ export default function PersonalSection({
|
||||
name='mailingAddress'
|
||||
value={
|
||||
type == 'display'
|
||||
? patientDataDiplay.mailingAddress
|
||||
? patientDataDiplay && patientDataDiplay.mailingAddress
|
||||
: patient.mailingAddress
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
@ -430,7 +429,7 @@ export default function PersonalSection({
|
||||
variant='outlined'
|
||||
label='State'
|
||||
name='state'
|
||||
value={type == 'display' ? patientDataDiplay.state : patient.state}
|
||||
value={type == 'display' ? patientDataDiplay && patientDataDiplay.state : patient.state}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
@ -454,7 +453,7 @@ export default function PersonalSection({
|
||||
variant='outlined'
|
||||
label='City'
|
||||
name='city'
|
||||
value={type == 'display' ? patientDataDiplay.city : patient.city}
|
||||
value={type == 'display' ? patientDataDiplay && patientDataDiplay.city : patient.city}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
setPatient((prevValues: any) => ({
|
||||
@ -479,7 +478,7 @@ export default function PersonalSection({
|
||||
label='Zip Code'
|
||||
name='zipCode'
|
||||
value={
|
||||
type == 'display' ? patientDataDiplay.zipCode : patient.zipCode
|
||||
type == 'display' ? patientDataDiplay && patientDataDiplay.zipCode : patient.zipCode
|
||||
}
|
||||
disabled={type == 'display'}
|
||||
onChange={(e) => {
|
||||
@ -508,7 +507,7 @@ export default function PersonalSection({
|
||||
<RadioGroup
|
||||
aria-labelledby='demo-radio-buttons-group-label'
|
||||
defaultValue={
|
||||
type == 'display' ? patientDataDiplay.gender : patient.gender
|
||||
type == 'display' ? patientDataDiplay && patientDataDiplay.gender : patient.gender
|
||||
}
|
||||
name='radio-buttons-group'
|
||||
onChange={(e) => {
|
||||
|
||||
@ -103,7 +103,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
multiline
|
||||
variant="outlined"
|
||||
label=""
|
||||
value={type=='display'?patientDataDiplay.hobbies:patient.hobbies}
|
||||
value={type=='display'?patientDataDiplay && patientDataDiplay.hobbies:patient.hobbies}
|
||||
disabled={type=='display'}
|
||||
onChange={(event:any) => {
|
||||
setPatient((prevValues) => ({
|
||||
@ -119,7 +119,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
<FormLabel>Your education level:</FormLabel>
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.educationLevel:patient.educationLevel}
|
||||
defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.educationLevel:patient.educationLevel}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -146,7 +146,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.excercise:patient.excercise}
|
||||
defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.excercise:patient.excercise}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -170,7 +170,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
variant="outlined"
|
||||
label="Times per week?"
|
||||
name='treatmentGoal'
|
||||
value={type=='display'?patientDataDiplay.excerciseExplanation:patient.excerciseExplanation}
|
||||
value={type=='display'?patientDataDiplay && patientDataDiplay.excerciseExplanation:patient.excerciseExplanation}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -190,7 +190,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.tobacco:patient.tobacco}
|
||||
defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.tobacco:patient.tobacco}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -211,7 +211,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
sm={12} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={patient.tobacco!=='Yes'||type=='display'}
|
||||
value={type=='display'?patientDataDiplay.tobaccoExplanation:patient.tobaccoExplanation}
|
||||
value={type=='display'?patientDataDiplay && patientDataDiplay.tobaccoExplanation:patient.tobaccoExplanation}
|
||||
variant="outlined"
|
||||
label="Packs/Cans per day(If you have quit, when did you quit?)"
|
||||
name='treatmentGoal'
|
||||
@ -234,7 +234,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.alcohol:patient.alcohol}
|
||||
defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.alcohol:patient.alcohol}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -255,7 +255,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
sm={12} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={patient.alcohol!=='Yes'||type=='display'}
|
||||
value={type=='display'?patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
|
||||
value={type=='display'?patientDataDiplay && patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
|
||||
variant="outlined"
|
||||
label="How many drinks per week?"
|
||||
name='treatmentGoal'
|
||||
@ -278,7 +278,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.healthyDiet:patient.healthyDiet}
|
||||
defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.healthyDiet:patient.healthyDiet}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -299,7 +299,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
sm={12} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={patient.healthyDiet!=='No'||type=='display'}
|
||||
value={type=='display'?patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
|
||||
value={type=='display'?patientDataDiplay && patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
|
||||
variant="outlined"
|
||||
label="If no, explain"
|
||||
name='treatmentGoal'
|
||||
@ -322,7 +322,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.sleep:patient.sleep}
|
||||
defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.sleep:patient.sleep}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -343,7 +343,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
sm={12} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={patient.sleep!=='No'||type=='display'}
|
||||
value={type=='display'?patientDataDiplay.sleepExplanation:patient.sleepExplanation}
|
||||
value={type=='display'?patientDataDiplay && patientDataDiplay.sleepExplanation:patient.sleepExplanation}
|
||||
variant="outlined"
|
||||
label="If no, explain"
|
||||
name='treatmentGoal'
|
||||
@ -366,7 +366,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
|
||||
defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.workSchool:patient.workSchool}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -387,7 +387,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
sm={12} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={patient.workSchool!=='Yes'||type=='display'}
|
||||
value={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
|
||||
value={type=='display'?patientDataDiplay && patientDataDiplay.workSchool:patient.workSchool}
|
||||
variant="outlined"
|
||||
label="If yes, explain"
|
||||
name='treatmentGoal'
|
||||
@ -410,7 +410,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.familyLife:patient.familyLife}
|
||||
defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.familyLife:patient.familyLife}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -431,7 +431,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
sm={12} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={patient.familyLife!=='Yes'||type=='display'}
|
||||
value={type=='display'?patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
|
||||
value={type=='display'?patientDataDiplay && patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
|
||||
variant="outlined"
|
||||
label="If yes, explain"
|
||||
name='treatmentGoal'
|
||||
@ -454,7 +454,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
<RadioGroup
|
||||
name="painDuration"
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
defaultValue={type=='display'?patientDataDiplay.drugs:patient.drugs}
|
||||
defaultValue={type=='display'?patientDataDiplay && patientDataDiplay.drugs:patient.drugs}
|
||||
onChange={(event) => {
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -475,7 +475,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
|
||||
sm={12} className='collapsable-form-style-form7'>
|
||||
<TextField
|
||||
disabled={patient.drugs!=='Yes'||type=='display'}
|
||||
value={type=='display'?patientDataDiplay.drugsExplanation:patient.drugsExplanation}
|
||||
value={type=='display'?patientDataDiplay && patientDataDiplay.drugsExplanation:patient.drugsExplanation}
|
||||
variant="outlined"
|
||||
label="If yes, explain"
|
||||
name='treatmentGoal'
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user