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

Compare commits

base: sonika:b3b18437116cc1e0fbc71375f37512101ddacd11
Branches Tags
sonika:master
sonika:feature/code-refactor
sonika:develop
sonika:feature/view-patient-data
sonika:feature/patientSubmitData
sonika:feature/image-marker-functionality
...
compare: sonika:463fc03153e4141e3912d5b0eb777dc861bb2424
Branches Tags
sonika:feature/code-refactor
sonika:develop
sonika:feature/view-patient-data
sonika:feature/patientSubmitData
sonika:feature/image-marker-functionality
sonika:master

2 Commits
b3b1843711 ... 463fc03153

Author SHA1 Message Date
vipeesh.p
463fc03153 Merge pull request 'Added image marker values to json data' (#5) from feature/view-patient-data into develop 
Reviewed-on: #5
 2023-09-07 08:45:44 +00:00
vipeeshpavithran
303225458d Added image marker values to json data 2023-09-07 14:15:12 +05:30
2 changed files with 646 additions and 550 deletions
Show Stats Expand all files Collapse all files

17
src/Components/ImageMarker/ViewPatientImageMarker.tsx
View File

@ -1,11 +1,11 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react';
import ImageMarker, { Marker } from 'react-image-marker'; import ImageMarker, { Marker } from 'react-image-marker';
import humanImage from '../../Assets/human_body_3d.jpg'; import humanImage from '../../Assets/human_body_3d.jpg';
import './PatientImageMarker.css' import './PatientImageMarker.css';
import Rating from './Rating'; import Rating from './Rating';
type Props = {} type Props = {};
const ViewPatientImageMarker = (props: Props) => { const ViewPatientImageMarker = (props: Props) => {
const saved = JSON.parse(localStorage.getItem('entry') || '{}'); const saved = JSON.parse(localStorage.getItem('entry') || '{}');
@ -16,7 +16,12 @@ const ViewPatientImageMarker = (props: Props) => {
{saved.entries?.map((entry: any, index: number) => ( {saved.entries?.map((entry: any, index: number) => (
<div className='ratingResult' key={index}> <div className='ratingResult' key={index}>
<span className='image-marker__marker--default'>{entry.index}</span> <span className='image-marker__marker--default'>{entry.index}</span>
<Rating index={entry.index} defaultValue={entry.severity} onUpdate={() => {}} disabled/> <Rating
index={entry.index}
defaultValue={entry.severity}
onUpdate={() => {}}
disabled
/>
</div> </div>
))} ))}
</div> </div>
@ -24,7 +29,7 @@ const ViewPatientImageMarker = (props: Props) => {
<ImageMarker src={humanImage} markers={saved.markers ?? []} /> <ImageMarker src={humanImage} markers={saved.markers ?? []} />
</div> </div>
</div> </div>
) );
} };
export default ViewPatientImageMarker; export default ViewPatientImageMarker;

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

@ -1,9 +1,20 @@
import * as React from 'react'; import * as React from 'react';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Footer from "../Footer"; import Footer from '../Footer';
import Header from "../Header"; import Header from '../Header';
import {Button, Checkbox, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material'; import {
Button,
Checkbox,
FormControlLabel,
FormGroup,
FormLabel,
Grid,
Paper,
Radio,
RadioGroup,
TextField,
} from '@mui/material';
import PersonalSection from './PersonalSection1'; import PersonalSection from './PersonalSection1';
import { styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp'; import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
@ -23,9 +34,9 @@ import PatientImageMarker from '../ImageMarker/PatientImageMarker';
import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker'; import ViewPatientImageMarker from '../ImageMarker/ViewPatientImageMarker';
import AlertDialog from '../Helper/AlertDialogBox'; import AlertDialog from '../Helper/AlertDialogBox';
const Accordion = styled((props: AccordionProps) => ( const Accordion = styled((props: AccordionProps) => (
<MuiAccordion disableGutters elevation={0} square {...props} /> <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({ ))(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`, border: `1px solid ${theme.palette.divider}`,
'&:not(:last-child)': { '&:not(:last-child)': {
borderBottom: 0, borderBottom: 0,
@ -33,14 +44,14 @@ import AlertDialog from '../Helper/AlertDialogBox';
'&:before': { '&:before': {
display: 'none', display: 'none',
}, },
})); }));
const AccordionSummary = styled((props: AccordionSummaryProps) => ( const AccordionSummary = styled((props: AccordionSummaryProps) => (
<MuiAccordionSummary <MuiAccordionSummary
expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />} expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
{...props} {...props}
/> />
))(({ theme }) => ({ ))(({ theme }) => ({
backgroundColor: backgroundColor:
theme.palette.mode === 'dark' theme.palette.mode === 'dark'
? 'rgba(255, 255, 255, .05)' ? 'rgba(255, 255, 255, .05)'
@ -52,22 +63,22 @@ import AlertDialog from '../Helper/AlertDialogBox';
'& .MuiAccordionSummary-content': { '& .MuiAccordionSummary-content': {
marginLeft: theme.spacing(1), marginLeft: theme.spacing(1),
}, },
})); }));
const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
padding: theme.spacing(2), padding: theme.spacing(2),
borderTop: '1px solid rgba(0, 0, 0, .125)', borderTop: '1px solid rgba(0, 0, 0, .125)',
})); }));
type Props={ type Props = {
type:any; type: any;
} };
export default function PatientForm({type}:Props){ export default function PatientForm({ type }: Props) {
const [alertProps, setAlertProps] = React.useState<any>({}); const [alertProps, setAlertProps] = React.useState<any>({});
const [expanded, setExpanded] = React.useState<string | false>('panel1'); const [expanded, setExpanded] = React.useState<string | false>('panel1');
const [isChecked, setIsChecked] = React.useState(false); const [isChecked, setIsChecked] = React.useState(false);
const [signature,setSignature]=React.useState(''); const [signature, setSignature] = React.useState('');
const [section1Data, setSection1Data] = React.useState<any>({}); const [section1Data, setSection1Data] = React.useState<any>({});
const [section2Data, setSection2Data] = React.useState<any>({}); const [section2Data, setSection2Data] = React.useState<any>({});
const [section3Data, setSection3Data] = React.useState<any>({}); const [section3Data, setSection3Data] = React.useState<any>({});
@ -79,19 +90,19 @@ export default function PatientForm({type}:Props){
const [allPatientData, setAllPatientData] = React.useState<any>([]); const [allPatientData, setAllPatientData] = React.useState<any>([]);
const handleFormSection1Data = ( const handleFormSection1Data = (
fullName?: string|undefined, fullName?: string | undefined,
homePhone?: string|undefined, homePhone?: string | undefined,
cellPhone?: string|undefined, cellPhone?: string | undefined,
email?: string|undefined, email?: string | undefined,
age?: number|undefined|string, age?: number | undefined | string,
dateOfBirth?: string|undefined, dateOfBirth?: string | undefined,
socialSecurityNumber?: string|undefined, socialSecurityNumber?: string | undefined,
mailingAddress?: string|undefined, mailingAddress?: string | undefined,
city?: string|undefined, city?: string | undefined,
state?: string|undefined, state?: string | undefined,
zipCode?: string|undefined, zipCode?: string | undefined,
gender?: string|undefined, gender?: string | undefined
) =>{ ) => {
setSection1Data({ setSection1Data({
fullName, fullName,
homePhone, homePhone,
@ -105,8 +116,8 @@ export default function PatientForm({type}:Props){
state, state,
zipCode, zipCode,
gender, gender,
}) });
} };
const handleFormSection2Data = ( const handleFormSection2Data = (
maritalStatus: string | undefined, maritalStatus: string | undefined,
@ -120,8 +131,8 @@ export default function PatientForm({type}:Props){
spouseBusinessPhone: string | undefined, spouseBusinessPhone: string | undefined,
emergencyContact: string | undefined, emergencyContact: string | undefined,
relationship: string | undefined, relationship: string | undefined,
spousePhone: string | undefined, spousePhone: string | undefined
) =>{ ) => {
setSection2Data({ setSection2Data({
maritalStatus, maritalStatus,
numberOfChildren, numberOfChildren,
@ -135,22 +146,22 @@ export default function PatientForm({type}:Props){
emergencyContact, emergencyContact,
relationship, relationship,
spousePhone, spousePhone,
}) });
} };
const handleFormSection3Data = ( const handleFormSection3Data = (
physicianname: string |undefined, physicianname: string | undefined,
physiciancity: string |undefined, physiciancity: string | undefined,
physicianstate: string |undefined, physicianstate: string | undefined,
physicianphone: string |undefined, physicianphone: string | undefined,
chiropractorName: string |undefined, chiropractorName: string | undefined,
chiropractorState: string |undefined, chiropractorState: string | undefined,
xray: string|undefined, xray: string | undefined,
haveChiropractor: string|undefined, haveChiropractor: string | undefined,
reference: string|undefined, reference: string | undefined,
visitDetails: string |undefined, visitDetails: string | undefined,
cellPhoneProvider: string |undefined, cellPhoneProvider: string | undefined
) =>{ ) => {
setSection3Data({ setSection3Data({
physicianname, physicianname,
physiciancity, physiciancity,
@ -163,21 +174,21 @@ export default function PatientForm({type}:Props){
reference, reference,
visitDetails, visitDetails,
cellPhoneProvider, cellPhoneProvider,
}) });
} };
const handleFormSection4Data = ( const handleFormSection4Data = (
chiefComplaint:string|undefined, chiefComplaint: string | undefined,
painWorse: any, painWorse: any,
painBetter: any, painBetter: any,
painQuality: any, painQuality: any,
painWorstTime: any, painWorstTime: any,
currentComplaintIssues: any, currentComplaintIssues: any,
painDuration: string|undefined, painDuration: string | undefined,
currentTreatment: string|undefined, currentTreatment: string | undefined,
treatmentGoal: string|undefined, treatmentGoal: string | undefined,
selfTreatment:string|undefined, selfTreatment: string | undefined
) =>{ ) => {
setSection4Data({ setSection4Data({
chiefComplaint, chiefComplaint,
painWorse, painWorse,
@ -189,23 +200,23 @@ export default function PatientForm({type}:Props){
currentTreatment, currentTreatment,
treatmentGoal, treatmentGoal,
selfTreatment, selfTreatment,
}) });
} };
const handleFormSection5Data = ( const handleFormSection5Data = (
generalHealth: string|undefined, generalHealth: string | undefined,
presentProblemBefore: string|undefined, presentProblemBefore: string | undefined,
ifYespresentProblemBefore:string|undefined, ifYespresentProblemBefore: string | undefined,
ifYestreatmentProvided: string|undefined, ifYestreatmentProvided: string | undefined,
ifYesOutcome: string|undefined, ifYesOutcome: string | undefined,
strokeBloodclotting: string|undefined, strokeBloodclotting: string | undefined,
ifYesstrokeBloodclotting: string|undefined, ifYesstrokeBloodclotting: string | undefined,
dizzinessFetigue: string|undefined, dizzinessFetigue: string | undefined,
ifyesdizzinessFetigue: string|undefined, ifyesdizzinessFetigue: string | undefined,
antiColligent: string|undefined, antiColligent: string | undefined,
injuriesHospitalization: string|undefined, injuriesHospitalization: string | undefined,
supplementsOrDrugs: string|undefined, supplementsOrDrugs: string | undefined
) =>{ ) => {
setSection5Data({ setSection5Data({
generalHealth, generalHealth,
presentProblemBefore, presentProblemBefore,
@ -219,28 +230,28 @@ export default function PatientForm({type}:Props){
antiColligent, antiColligent,
injuriesHospitalization, injuriesHospitalization,
supplementsOrDrugs, supplementsOrDrugs,
}) });
} };
const handleFormSection6Data = ( const handleFormSection6Data = (
eyes: string|undefined, eyes: string | undefined,
IntestinesBowls: string|undefined, IntestinesBowls: string | undefined,
jointsBones:string|undefined, jointsBones: string | undefined,
allergies: string|undefined, allergies: string | undefined,
earsNoseMouth: string|undefined, earsNoseMouth: string | undefined,
urinary: string|undefined, urinary: string | undefined,
skin: string|undefined, skin: string | undefined,
psychological: string|undefined, psychological: string | undefined,
heart: string|undefined, heart: string | undefined,
muscles: string|undefined, muscles: string | undefined,
internalOrgans: string|undefined, internalOrgans: string | undefined,
gynecological: string|undefined, gynecological: string | undefined,
lungsBreathing: string|undefined, lungsBreathing: string | undefined,
nerves: string|undefined, nerves: string | undefined,
blood: string|undefined, blood: string | undefined,
prostate: string|undefined, prostate: string | undefined,
explanation:string|undefined, explanation: string | undefined
) =>{ ) => {
setSection6Data({ setSection6Data({
eyes, eyes,
IntestinesBowls, IntestinesBowls,
@ -259,30 +270,29 @@ export default function PatientForm({type}:Props){
blood, blood,
prostate, prostate,
explanation, explanation,
}) });
} };
const handleFormSection7Data = ( const handleFormSection7Data = (
hobbies: string|undefined, hobbies: string | undefined,
educationLevel: string|undefined, educationLevel: string | undefined,
excercise: string|undefined, excercise: string | undefined,
excerciseExplanation: string|undefined, excerciseExplanation: string | undefined,
tobacco: string|undefined, tobacco: string | undefined,
tobaccoExplanation: string|undefined, tobaccoExplanation: string | undefined,
alcohol: string|undefined, alcohol: string | undefined,
alcoholExplanation: string|undefined, alcoholExplanation: string | undefined,
healthyDiet: string|undefined, healthyDiet: string | undefined,
healthyDietExplanation: string|undefined, healthyDietExplanation: string | undefined,
sleep: string|undefined, sleep: string | undefined,
sleepExplanation: string|undefined, sleepExplanation: string | undefined,
workSchool: string|undefined, workSchool: string | undefined,
workSchoolExplanation: string|undefined, workSchoolExplanation: string | undefined,
familyLife: string|undefined, familyLife: string | undefined,
familyLifeExplanation: string|undefined, familyLifeExplanation: string | undefined,
drugs: string|undefined, drugs: string | undefined,
drugsExplanation:string|undefined, drugsExplanation: string | undefined
) =>{ ) => {
setSection7Data({ setSection7Data({
hobbies, hobbies,
educationLevel, educationLevel,
@ -302,18 +312,18 @@ export default function PatientForm({type}:Props){
familyLifeExplanation, familyLifeExplanation,
drugs, drugs,
drugsExplanation, drugsExplanation,
}) });
} };
const handleFormSection8Data = ( const handleFormSection8Data = (
familyHistory: string|undefined, familyHistory: string | undefined,
sleep: string|undefined, sleep: string | undefined,
pillow: string|undefined, pillow: string | undefined,
orthotics: string|undefined, orthotics: string | undefined,
brestExam: any, brestExam: any,
pregnancy: string|undefined, pregnancy: string | undefined,
menstralCycle: any, menstralCycle: any
) =>{ ) => {
setSection8Data({ setSection8Data({
familyHistory, familyHistory,
sleep, sleep,
@ -322,10 +332,11 @@ export default function PatientForm({type}:Props){
brestExam, brestExam,
pregnancy, pregnancy,
menstralCycle, menstralCycle,
}) });
} };
const handleSubmit = () => { const handleSubmit = () => {
const saved = JSON.parse(localStorage.getItem('entry') || '{}');
const newPatientData = { const newPatientData = {
personalInformation: section1Data, personalInformation: section1Data,
familyInformation: section2Data, familyInformation: section2Data,
@ -335,6 +346,7 @@ export default function PatientForm({type}:Props){
systemReviewQuestions: section6Data, systemReviewQuestions: section6Data,
recreationalActivities: section7Data, recreationalActivities: section7Data,
otherDetails: section8Data, otherDetails: section8Data,
injuryPainDetails: saved.entries,
}; };
// Create a copy of the existing data array and push the new patient data // Create a copy of the existing data array and push the new patient data
@ -346,13 +358,19 @@ export default function PatientForm({type}:Props){
localStorage.setItem('patientData', JSON.stringify(newPatientData)); localStorage.setItem('patientData', JSON.stringify(newPatientData));
if ( if (
section1Data.fullName !== "" && section1Data.cellPhone && section1Data.fullName !== '' &&
/^\d{10}$/.test(section1Data.cellPhone) && section1Data.email && section1Data.cellPhone &&
/^\S+@\S+\.\S+$/.test(section1Data.email) && section1Data.age && /^\d{10}$/.test(section1Data.cellPhone) &&
section1Data.age !== "" && Number(section1Data.age) >= 0 && section1Data.mailingAddress && section1Data.email &&
section1Data.mailingAddress !== "" ){ /^\S+@\S+\.\S+$/.test(section1Data.email) &&
section1Data.age &&
section1Data.age !== '' &&
Number(section1Data.age) >= 0 &&
section1Data.mailingAddress &&
section1Data.mailingAddress !== ''
) {
TextFile(); TextFile();
}else{ } else {
setAlertProps({ setAlertProps({
open: true, open: true,
severity: 'error', severity: 'error',
@ -363,22 +381,23 @@ export default function PatientForm({type}:Props){
}; };
const TextFile = () => { const TextFile = () => {
const element = document.createElement("a"); const element = document.createElement('a');
//@ts-ignore //@ts-ignore
const textFile = new Blob([localStorage.getItem('patientData')], {type: 'text/json'}); const textFile = new Blob([localStorage.getItem('patientData')], {
type: 'text/json',
});
element.href = URL.createObjectURL(textFile); element.href = URL.createObjectURL(textFile);
element.download = "patientData.json"; element.download = 'patientData.json';
document.body.appendChild(element); document.body.appendChild(element);
element.click(); element.click();
} };
const handleExpandChange = const handleExpandChange =
(panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => { (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
setExpanded(newExpanded ? panel : false); setExpanded(newExpanded ? panel : false);
}; };
const handleCheckboxChange = (event:any) => { const handleCheckboxChange = (event: any) => {
setIsChecked(event.target.checked); setIsChecked(event.target.checked);
}; };
@ -386,12 +405,14 @@ export default function PatientForm({type}:Props){
setAlertProps({}); setAlertProps({});
}; };
//@ts-ignore const patientData = localStorage.getItem('patientData')
const patientData = localStorage.getItem('patientData') ? JSON.parse(localStorage.getItem('patientData')) : []; ? //@ts-ignore
JSON.parse(localStorage.getItem('patientData'))
: [];
console.log("dfsdfdsf",patientData) console.log('dfsdfdsf', patientData);
return( return (
<> <>
{alertProps && alertProps.open && ( {alertProps && alertProps.open && (
<AlertDialog <AlertDialog
@ -403,21 +424,25 @@ export default function PatientForm({type}:Props){
/> />
)} )}
<Paper elevation={0} className='app-screen-constants'> <Paper elevation={0} className='app-screen-constants'>
<Header/> <Header />
<Paper elevation={0} sx={{margin:4, minHeight:550}} > <Paper elevation={0} sx={{ margin: 4, minHeight: 550 }}>
{/* <form onSubmit={handleSubmit}> */} {/* <form onSubmit={handleSubmit}> */}
<Typography sx={{fontSize:20}} gutterBottom> <Typography sx={{ fontSize: 20 }} gutterBottom>
Confidential Patient Information Confidential Patient Information
</Typography> </Typography>
<Grid> <Grid>
<Accordion expanded={expanded === 'panel1'} onChange={handleExpandChange('panel1')}> <Accordion
expanded={expanded === 'panel1'}
onChange={handleExpandChange('panel1')}
>
<AccordionSummary <AccordionSummary
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content" aria-controls='panel1a-content'
id="panel1a-header" id='panel1a-header'
> >
<Typography sx={{fontSize:18}}>Patient's Personal Information</Typography> <Typography sx={{ fontSize: 18 }}>
Patient's Personal Information
</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
@ -425,15 +450,21 @@ export default function PatientForm({type}:Props){
handleFormSection1Data={handleFormSection1Data} handleFormSection1Data={handleFormSection1Data}
patientDataDiplay={patientData.personalInformation} patientDataDiplay={patientData.personalInformation}
type={type} type={type}
/> />
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}> <Accordion
<AccordionSummary aria-controls="panel2d-content" id="panel2d-header"> expanded={expanded === 'panel2'}
<Typography sx={{fontSize:18}}>Patient's Family Information</Typography> onChange={handleExpandChange('panel2')}
>
<AccordionSummary
aria-controls='panel2d-content'
id='panel2d-header'
>
<Typography sx={{ fontSize: 18 }}>
Patient's Family Information
</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
@ -445,9 +476,17 @@ export default function PatientForm({type}:Props){
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}> <Accordion
<AccordionSummary aria-controls="panel3d-content" id="panel3d-header"> expanded={expanded === 'panel3'}
<Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography> onChange={handleExpandChange('panel3')}
>
<AccordionSummary
aria-controls='panel3d-content'
id='panel3d-header'
>
<Typography sx={{ fontSize: 18 }}>
Patient's Medical History Information
</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
@ -459,26 +498,39 @@ export default function PatientForm({type}:Props){
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Accordion expanded={expanded === 'panel9'} onChange={handleExpandChange('panel9')}> <Accordion
<AccordionSummary aria-controls="panel9d-content" id="panel9d-header"> expanded={expanded === 'panel9'}
<Typography sx={{fontSize:18}}>Patient's Injury Image</Typography> onChange={handleExpandChange('panel9')}
>
<AccordionSummary
aria-controls='panel9d-content'
id='panel9d-header'
>
<Typography sx={{ fontSize: 18 }}>
Patient's Injury Image
</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
{ {type === 'fill' ? (
type === 'fill' ?
<PatientImageMarker /> <PatientImageMarker />
: ) : (
<ViewPatientImageMarker /> <ViewPatientImageMarker />
} )}
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Accordion
<Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}> expanded={expanded === 'panel4'}
<AccordionSummary aria-controls="panel4d-content" id="panel4d-header"> onChange={handleExpandChange('panel4')}
<Typography sx={{fontSize:18}}>Patient's Injury Details</Typography> >
<AccordionSummary
aria-controls='panel4d-content'
id='panel4d-header'
>
<Typography sx={{ fontSize: 18 }}>
Patient's Injury Details
</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
@ -490,22 +542,39 @@ export default function PatientForm({type}:Props){
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Accordion expanded={expanded === 'panel5'} onChange={handleExpandChange('panel5')}> <Accordion
<AccordionSummary aria-controls="panel5d-content" id="panel5d-header"> expanded={expanded === 'panel5'}
<Typography sx={{fontSize:18}}>Patient's Past Treatment Details</Typography> onChange={handleExpandChange('panel5')}
>
<AccordionSummary
aria-controls='panel5d-content'
id='panel5d-header'
>
<Typography sx={{ fontSize: 18 }}>
Patient's Past Treatment Details
</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<PastTreatment5 <PastTreatment5
handleFormSection5Data={handleFormSection5Data} handleFormSection5Data={handleFormSection5Data}
patientDataDiplay={patientData.pastTreatment} patientDataDiplay={patientData.pastTreatment}
type={type}/> type={type}
/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Accordion expanded={expanded === 'panel6'} onChange={handleExpandChange('panel6')}> <Accordion
<AccordionSummary aria-controls="panel6d-content" id="panel6d-header"> expanded={expanded === 'panel6'}
<Typography sx={{fontSize:18}}>System Review Questions</Typography> onChange={handleExpandChange('panel6')}
>
<AccordionSummary
aria-controls='panel6d-content'
id='panel6d-header'
>
<Typography sx={{ fontSize: 18 }}>
System Review Questions
</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
@ -517,29 +586,45 @@ export default function PatientForm({type}:Props){
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Accordion expanded={expanded === 'panel7'} onChange={handleExpandChange('panel7')}> <Accordion
<AccordionSummary aria-controls="panel7d-content" id="panel7d-header"> expanded={expanded === 'panel7'}
<Typography sx={{fontSize:18}}>Recreational Activities/Hobbies Details</Typography> onChange={handleExpandChange('panel7')}
>
<AccordionSummary
aria-controls='panel7d-content'
id='panel7d-header'
>
<Typography sx={{ fontSize: 18 }}>
Recreational Activities/Hobbies Details
</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<RecreationalHobbiesSection7 <RecreationalHobbiesSection7
handleFormSection7Data={handleFormSection7Data} handleFormSection7Data={handleFormSection7Data}
patientDataDiplay={patientData.recreationalActivities} patientDataDiplay={patientData.recreationalActivities}
type={type}/> type={type}
/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
<Accordion expanded={expanded === 'panel8'} onChange={handleExpandChange('panel8')}> <Accordion
<AccordionSummary aria-controls="panel8d-content" id="panel8d-header"> expanded={expanded === 'panel8'}
<Typography sx={{fontSize:18}}>Other Details</Typography> onChange={handleExpandChange('panel8')}
>
<AccordionSummary
aria-controls='panel8d-content'
id='panel8d-header'
>
<Typography sx={{ fontSize: 18 }}>Other Details</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<OtherDetails8 <OtherDetails8
handleFormSection8Data={handleFormSection8Data} handleFormSection8Data={handleFormSection8Data}
patientDataDiplay={patientData.otherDetails} patientDataDiplay={patientData.otherDetails}
type={type}/> type={type}
/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
@ -548,21 +633,26 @@ export default function PatientForm({type}:Props){
<FormGroup sx={{ marginTop: 3 }}> <FormGroup sx={{ marginTop: 3 }}>
<FormControlLabel <FormControlLabel
required required
control={<Checkbox checked={isChecked} onChange={handleCheckboxChange} />} control={
label="I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history." <Checkbox
checked={type === 'display' ? true : isChecked}
onChange={handleCheckboxChange}
/>
}
label='I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history.'
/> />
</FormGroup> </FormGroup>
</Grid> </Grid>
<Grid item xs={6} className='collapsable-form-style'> <Grid item xs={6} className='collapsable-form-style'>
<TextField <TextField
disabled={type=='display'} disabled={type == 'display'}
variant="outlined" variant='outlined'
label="SIGNATURE" label='SIGNATURE'
name='treatmentGoal' name='treatmentGoal'
placeholder='Please type your name' placeholder='Please type your name'
onChange={(event) => { onChange={(event) => {
setSignature(event.target.value) setSignature(event.target.value);
}} }}
/> />
</Grid> </Grid>
@ -570,10 +660,12 @@ export default function PatientForm({type}:Props){
<Grid> <Grid>
<Button <Button
// type="submit" // type="submit"
variant="contained" variant='contained'
color="primary" color='primary'
sx={{ margin: 5, left: '40%', width: '200px' }} sx={{ margin: 5, left: '40%', width: '200px' }}
disabled={isChecked==false || signature=='' || type=='display'} disabled={
isChecked == false || signature == '' || type == 'display'
}
onClick={handleSubmit} onClick={handleSubmit}
> >
Submit Submit
@ -581,10 +673,9 @@ export default function PatientForm({type}:Props){
</Grid> </Grid>
</Grid> </Grid>
{/* </form> */} {/* </form> */}
</Paper> </Paper>
<Footer/> <Footer />
</Paper> </Paper>
</> </>
) );
} }