data display changes for section1
This commit is contained in:
sonika
parent
2fd461222a
commit
a72be1748f
10
package-lock.json
generated
10
package-lock.json
generated
@ -37,6 +37,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-gauge-chart": "^0.4.1",
|
||||
"react-icons": "^4.9.0",
|
||||
"react-image-marker": "^1.2.0",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-router-dom": "^6.14.2",
|
||||
"react-scripts": "5.0.1",
|
||||
@ -15795,6 +15796,15 @@
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-image-marker": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-image-marker/-/react-image-marker-1.2.0.tgz",
|
||||
"integrity": "sha512-HFrzKVnX/hgZqHlxwV7XQNiyMRowD1IAnbsf4dZCEuSzGlGHxAv+sCv/AU1VHHVxFxoHubNL/xYNpGQfgtX67A==",
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8.0",
|
||||
"react-dom": ">= 16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
|
||||
@ -12,8 +12,8 @@ function App() {
|
||||
<div className='flex'>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path='/' element={<PatientForm />} />
|
||||
<Route path='/view-details' element={<PatientDetails />}/>
|
||||
<Route path='/' element={<PatientForm type={"fill"}/>} />
|
||||
<Route path='/view-details' element={<PatientForm type={"display"}/>}/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</div>
|
||||
|
||||
@ -57,9 +57,11 @@ import PatientImageMarker from '../ImageMarker/PatientImageMarker';
|
||||
borderTop: '1px solid rgba(0, 0, 0, .125)',
|
||||
}));
|
||||
|
||||
type Props={
|
||||
type:any;
|
||||
}
|
||||
|
||||
|
||||
export default function PatientForm(){
|
||||
export default function PatientForm({type}:Props){
|
||||
const [expanded, setExpanded] = React.useState<string | false>('panel1');
|
||||
const [isChecked, setIsChecked] = React.useState(false);
|
||||
const [signature,setSignature]=React.useState('');
|
||||
@ -71,7 +73,6 @@ export default function PatientForm(){
|
||||
const [section6Data, setSection6Data] = React.useState<any>({});
|
||||
const [section7Data, setSection7Data] = React.useState<any>({});
|
||||
const [section8Data, setSection8Data] = React.useState<any>({});
|
||||
const [restructuredCurrentPatientData, setRestructuredCurrentPatientData] = React.useState<any>({});
|
||||
const [allPatientData, setAllPatientData] = React.useState<any>([]);
|
||||
|
||||
const handleFormSection1Data = (
|
||||
@ -323,14 +324,14 @@ export default function PatientForm(){
|
||||
|
||||
const handleSubmit = () => {
|
||||
const newPatientData = {
|
||||
section1: section1Data,
|
||||
section2: section2Data,
|
||||
section3: section3Data,
|
||||
section4: section4Data,
|
||||
section5: section5Data,
|
||||
section6: section6Data,
|
||||
section7: section7Data,
|
||||
section8: section8Data,
|
||||
personalInformation: section1Data,
|
||||
familyInformation: section2Data,
|
||||
medicalHistory: section3Data,
|
||||
injuryDetails: section4Data,
|
||||
pastTreatment: section5Data,
|
||||
systemReviewQuestions: section6Data,
|
||||
recreationalActivities: section7Data,
|
||||
otherDetails: section8Data,
|
||||
};
|
||||
|
||||
// Create a copy of the existing data array and push the new patient data
|
||||
@ -340,8 +341,6 @@ export default function PatientForm(){
|
||||
setAllPatientData(updatedAllPatientData);
|
||||
|
||||
localStorage.setItem('patientData', JSON.stringify(newPatientData));
|
||||
|
||||
console.log("UpdatedallPatientData:", updatedAllPatientData);
|
||||
TextFile();
|
||||
};
|
||||
|
||||
@ -365,7 +364,8 @@ export default function PatientForm(){
|
||||
setIsChecked(event.target.checked);
|
||||
};
|
||||
|
||||
|
||||
//@ts-ignore
|
||||
const patientData = localStorage.getItem('patientData') ? JSON.parse(localStorage.getItem('patientData')) : [];
|
||||
|
||||
return(
|
||||
<>
|
||||
@ -388,7 +388,12 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<PersonalSection handleFormSection1Data={handleFormSection1Data}/>
|
||||
<PersonalSection
|
||||
handleFormSection1Data={handleFormSection1Data}
|
||||
patientDataDiplay={patientData.personalInformation}
|
||||
type={type}
|
||||
|
||||
/>
|
||||
</AccordionDetails>
|
||||
|
||||
</Accordion>
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import { Button, FormControl, FormControlLabel, 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 { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||
import { useEffect } from 'react';
|
||||
@ -21,20 +19,6 @@ interface Patient {
|
||||
gender: string;
|
||||
}
|
||||
|
||||
const validationSchema = yup.object({
|
||||
fullName: yup.string().required("Full name is required"),
|
||||
homePhone: yup.string().matches(/^\d{10}$/, "Home phone must be 10 digits"),
|
||||
cellPhone: yup.string().required("Phone number is required").matches(/^\d{10}$/, "Cell phone must be 10 digits"),
|
||||
email: yup.string().required("Email is required"),
|
||||
age: yup.number().positive().integer("Age must be a positive integer").required("Age is required"),
|
||||
dateOfBirth: yup.date().required("Date of birth is required"),
|
||||
socialSecurityNumber: yup.string(),
|
||||
mailingAddress: yup.string().required("Mailing address is required"),
|
||||
city: yup.string().required("City is required"),
|
||||
state: yup.string().required("State is required"),
|
||||
zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required")
|
||||
});
|
||||
|
||||
type Props = {
|
||||
handleFormSection1Data:(
|
||||
fullName?: string|undefined,
|
||||
@ -50,19 +34,21 @@ interface Patient {
|
||||
zipCode?: string|undefined,
|
||||
gender?: string|undefined,
|
||||
)=> void
|
||||
patientDataDiplay:any;
|
||||
type:string;
|
||||
}
|
||||
|
||||
|
||||
export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
export default function PersonalSection({handleFormSection1Data,patientDataDiplay,type}:Props){
|
||||
|
||||
const [startDateValue, setStartDateValue] = React.useState<any>();
|
||||
const [birthDateValue, setBirthDateValue] = React.useState<any>();
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
fullName: "",
|
||||
homePhone: "",
|
||||
cellPhone: "",
|
||||
email: "",
|
||||
age: 0,
|
||||
dateOfBirth: startDateValue,
|
||||
dateOfBirth: birthDateValue,
|
||||
socialSecurityNumber: "",
|
||||
mailingAddress:"",
|
||||
city: "",
|
||||
@ -79,7 +65,7 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
patient.cellPhone,
|
||||
patient.email,
|
||||
patient.age,
|
||||
startDateValue,
|
||||
birthDateValue,
|
||||
patient.socialSecurityNumber,
|
||||
patient.mailingAddress,
|
||||
patient.city,
|
||||
@ -89,27 +75,7 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
)
|
||||
},[patient])
|
||||
|
||||
// const formik = useFormik<Patient>({
|
||||
// initialValues: {
|
||||
// fullName: "",
|
||||
// homePhone: "",
|
||||
// cellPhone: "",
|
||||
// email: "",
|
||||
// age: "",
|
||||
// dateOfBirth: "",
|
||||
// socialSecurityNumber: "",
|
||||
// mailingAddress: "",
|
||||
// city: "",
|
||||
// state: "",
|
||||
// zipCode: "",
|
||||
// gender: "male",
|
||||
// },
|
||||
// validationSchema,
|
||||
// onSubmit: (values) => {
|
||||
// // Do something with the patient data
|
||||
// console.log(values,"sdfdsfsd34");
|
||||
// },
|
||||
// });
|
||||
console.log(type,"sfsdfsdfsd")
|
||||
|
||||
return(
|
||||
<>
|
||||
@ -120,16 +86,14 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
label="Patient's Full Name"
|
||||
name="fullName"
|
||||
placeholder='Please enter your name'
|
||||
value={patient.fullName}
|
||||
value={type=='display'?patientDataDiplay.fullName:patient.fullName}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
fullName: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.fullName && Boolean(formik.errors.fullName)}
|
||||
// helperText={formik.touched.fullName && formik.errors.fullName}
|
||||
required
|
||||
/>
|
||||
</Grid>
|
||||
@ -141,7 +105,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
label="Phone Number"
|
||||
name="cellPhone"
|
||||
placeholder='Please enter your cell Phone number'
|
||||
value={patient.cellPhone}
|
||||
value={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -160,7 +125,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
label="Home Phone Number"
|
||||
name="homePhone"
|
||||
placeholder='Please enter your home phone'
|
||||
value={patient.homePhone}
|
||||
value={type=='display'?patientDataDiplay.homePhone:patient.homePhone}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -179,7 +145,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
label="Email"
|
||||
name="email"
|
||||
placeholder='Please enter your email'
|
||||
value={patient.email}
|
||||
value={type=='display'?patientDataDiplay.email:patient.email}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -199,7 +166,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
name="age"
|
||||
type="number"
|
||||
placeholder='Please enter your age'
|
||||
value={patient.age}
|
||||
value={type=='display'?patientDataDiplay.age:patient.age}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -217,9 +185,10 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<DatePicker
|
||||
label="Date of Birth"
|
||||
value={startDateValue}
|
||||
value={type=='display'?patientDataDiplay.dateOfBirth:birthDateValue}
|
||||
disabled={type=='display'}
|
||||
onChange={(newValue) => {
|
||||
setStartDateValue(newValue);
|
||||
setBirthDateValue(newValue);
|
||||
}}
|
||||
renderInput={(params) => <TextField required variant="outlined" {...params} />}
|
||||
/>
|
||||
@ -232,7 +201,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
variant="outlined"
|
||||
label="Social Security Number"
|
||||
name="socialSecurityNumber"
|
||||
value={patient.socialSecurityNumber}
|
||||
value={type=='display'?patientDataDiplay.socialSecurityNumber:patient.socialSecurityNumber}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -251,7 +221,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
variant="outlined"
|
||||
label="Mailing Address"
|
||||
name="mailingAddress"
|
||||
value={patient.mailingAddress}
|
||||
value={type=='display'?patientDataDiplay.mailingAddress:patient.mailingAddress}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -269,7 +240,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
variant="outlined"
|
||||
label="State"
|
||||
name="state"
|
||||
value={patient.state}
|
||||
value={type=='display'?patientDataDiplay.state:patient.state}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -288,7 +260,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
variant="outlined"
|
||||
label="City"
|
||||
name="city"
|
||||
value={patient.city}
|
||||
value={type=='display'?patientDataDiplay.city:patient.city}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -306,7 +279,8 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
variant="outlined"
|
||||
label="Zip Code"
|
||||
name="zipCode"
|
||||
value={patient.zipCode}
|
||||
value={type=='display'?patientDataDiplay.zipCode:patient.zipCode}
|
||||
disabled={type=='display'}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
@ -324,7 +298,7 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
<FormLabel>Gender</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue={patient.gender}
|
||||
defaultValue={type=='display'?patientDataDiplay.gender:patient.gender}
|
||||
name="radio-buttons-group"
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
@ -334,8 +308,12 @@ export default function PersonalSection({handleFormSection1Data}:Props){
|
||||
}}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="male" control={<Radio />} label="Male" />
|
||||
<FormControlLabel value="female" control={<Radio />} label="Female" />
|
||||
<FormControlLabel
|
||||
disabled={type=='display'}
|
||||
value="male" control={<Radio />} label="Male" />
|
||||
<FormControlLabel
|
||||
disabled={type=='display'}
|
||||
value="female" control={<Radio />} label="Female" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user