From a72be1748feaad27e26bd9caba2bb6569130c571 Mon Sep 17 00:00:00 2001 From: sonika <> Date: Tue, 5 Sep 2023 18:14:41 +0530 Subject: [PATCH] data display changes for section1 --- package-lock.json | 10 ++ src/App.tsx | 4 +- src/Components/PatientForm/PatientForm.tsx | 35 ++++--- .../PatientForm/PersonalSection1.tsx | 98 +++++++------------ 4 files changed, 70 insertions(+), 77 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3e3f5c8..7f1ffd9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/src/App.tsx b/src/App.tsx index 6bc59a8..8739db9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,8 +12,8 @@ function App() {
- } /> - }/> + } /> + }/>
diff --git a/src/Components/PatientForm/PatientForm.tsx b/src/Components/PatientForm/PatientForm.tsx index 90c6192..b090e45 100644 --- a/src/Components/PatientForm/PatientForm.tsx +++ b/src/Components/PatientForm/PatientForm.tsx @@ -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('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({}); const [section7Data, setSection7Data] = React.useState({}); const [section8Data, setSection8Data] = React.useState({}); - const [restructuredCurrentPatientData, setRestructuredCurrentPatientData] = React.useState({}); const [allPatientData, setAllPatientData] = React.useState([]); 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(){ - + diff --git a/src/Components/PatientForm/PersonalSection1.tsx b/src/Components/PatientForm/PersonalSection1.tsx index 6ba3eb9..abea995 100644 --- a/src/Components/PatientForm/PersonalSection1.tsx +++ b/src/Components/PatientForm/PersonalSection1.tsx @@ -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(); + const [birthDateValue, setBirthDateValue] = React.useState(); const [patient, setPatient] = React.useState({ 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, @@ -87,29 +73,9 @@ export default function PersonalSection({handleFormSection1Data}:Props){ patient.zipCode, patient.gender, ) - },[patient]) + },[patient]) - // const formik = useFormik({ - // 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 /> @@ -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){ { - setStartDateValue(newValue); + setBirthDateValue(newValue); }} renderInput={(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){ Gender { setPatient((prevValues) => ({ @@ -334,8 +308,12 @@ export default function PersonalSection({handleFormSection1Data}:Props){ }} sx={{display:'flex', flexDirection:'row'}} > - } label="Male" /> - } label="Female" /> + } label="Male" /> + } label="Female" />