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

section 1 data to the main page

Browse Source
This commit is contained in:
sonika 2023-09-04 20:35:18 +05:30
parent 61466d694b
commit ab27164ed8
2 changed files with 207 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,6 @@ interface Patient {
state: string; state: string;
zipCode: string; zipCode: string;
gender: string; gender: string;
maritalStatus: string;
} }
const Accordion = styled((props: AccordionProps) => ( const Accordion = styled((props: AccordionProps) => (
@ -72,26 +71,48 @@ interface Patient {
borderTop: '1px solid rgba(0, 0, 0, .125)', borderTop: '1px solid rgba(0, 0, 0, .125)',
})); }));
export default function PatientForm(){ export default function PatientForm(){
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 [patient, setPatient] = React.useState<Patient>({ const [section2Data, setSection2Data] = React.useState<any>({});
fullName: "",
homePhone: "", const handleFormSection1Data = (
cellPhone: "", fullName?: string|undefined,
email: "", homePhone?: string|undefined,
age: 0, cellPhone?: string|undefined,
dateOfBirth: "", email?: string|undefined,
socialSecurityNumber: "", age?: number|undefined|string,
mailingAddress: "", dateOfBirth?: string|undefined,
city: "", socialSecurityNumber?: string|undefined,
state: "", mailingAddress?: string|undefined,
zipCode: "", city?: string|undefined,
gender: "", state?: string|undefined,
maritalStatus: "", zipCode?: string|undefined,
}); gender?: string|undefined,
) =>{
setSection1Data({fullName,homePhone,cellPhone,email,age,dateOfBirth,socialSecurityNumber,mailingAddress,city,state,zipCode,gender,})
}
// const handleFormSection2Data = (
// fullName?: string|undefined,
// homePhone?: string|undefined,
// cellPhone?: string|undefined,
// email?: string|undefined,
// age?: number|undefined|string,
// dateOfBirth?: string|undefined,
// socialSecurityNumber?: string|undefined,
// mailingAddress?: string|undefined,
// city?: string|undefined,
// state?: string|undefined,
// zipCode?: string|undefined,
// gender?: string|undefined,
// ) =>{
// setSection2Data({fullName,homePhone,cellPhone,email,age,dateOfBirth,socialSecurityNumber,mailingAddress,city,state,zipCode,gender,})
// }
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
@ -105,6 +126,8 @@ export default function PatientForm(){
const handleCheckboxChange = (event:any) => { const handleCheckboxChange = (event:any) => {
setIsChecked(event.target.checked); setIsChecked(event.target.checked);
}; };
console.log(section1Data,"wyeytweevfde")
return( return(
@ -128,7 +151,7 @@ export default function PatientForm(){
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<PersonalSection/> <PersonalSection handleFormSection1Data={handleFormSection1Data}/>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>

250
src/Components/PatientForm/PersonalSection1.tsx
View File

@ -4,6 +4,7 @@ import { useFormik } from "formik";
import * as yup from "yup"; import * as yup from "yup";
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers'; import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { useEffect } from 'react';
interface Patient { interface Patient {
fullName: string; fullName: string;
@ -18,7 +19,6 @@ interface Patient {
state: string; state: string;
zipCode: string; zipCode: string;
gender: string; gender: string;
maritalStatus: string;
} }
const validationSchema = yup.object({ const validationSchema = yup.object({
@ -35,57 +35,86 @@ interface Patient {
zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required") zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required")
}); });
export default function PersonalSection(){ type Props = {
handleFormSection1Data:(
fullName?: string|undefined,
homePhone?: string|undefined,
cellPhone?: string|undefined,
email?: string|undefined,
age?: number|undefined|string,
dateOfBirth?: string|undefined,
socialSecurityNumber?: string|undefined,
mailingAddress?: string|undefined,
city?: string|undefined,
state?: string|undefined,
zipCode?: string|undefined,
gender?: string|undefined,
)=> void
}
export default function PersonalSection({handleFormSection1Data}:Props){
const [startDateValue, setStartDateValue] = React.useState<any>(); const [startDateValue, setStartDateValue] = React.useState<any>();
const [emailValue, setEmailValue]= React.useState<string>('');
const [patient, setPatient] = React.useState<Patient>({ const [patient, setPatient] = React.useState<Patient>({
fullName: "", fullName: "",
homePhone: "", homePhone: "",
cellPhone: "", cellPhone: "",
email: "", email: "",
age: 0, age: 0,
dateOfBirth: "", dateOfBirth: startDateValue,
socialSecurityNumber: "", socialSecurityNumber: "",
mailingAddress:"", mailingAddress:"",
city: "", city: "",
state: "", state: "",
zipCode: "", zipCode: "",
gender: "male", gender: "male",
maritalStatus: "",
}); });
const formik = useFormik<Patient>({
initialValues: { useEffect(()=>{
fullName: "", handleFormSection1Data(
homePhone: "", patient.fullName,
cellPhone: "", patient.homePhone,
email: "", patient.cellPhone,
age: "", patient.email,
dateOfBirth: "", patient.age,
socialSecurityNumber: "", startDateValue,
mailingAddress:"", patient.socialSecurityNumber,
city: "", patient.mailingAddress,
state: "", patient.city,
zipCode: "", patient.state,
gender: "male", patient.zipCode,
maritalStatus: "", patient.gender,
}, )
validationSchema, },[patient])
onSubmit: (values) => {
// Do something with the patient data // const formik = useFormik<Patient>({
console.log(values); // initialValues: {
}, // fullName: "",
}); // homePhone: "",
// cellPhone: "",
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { // email: "",
console.log("dsfsdfsdf",event.target.value) // age: "",
const { name, value } = event.target; // dateOfBirth: "",
setPatient((prevPatient) => ({ // socialSecurityNumber: "",
...prevPatient, // mailingAddress: "",
[name]: value, // city: "",
})); // state: "",
}; // zipCode: "",
// gender: "male",
// },
// validationSchema,
// onSubmit: (values) => {
// // Do something with the patient data
// console.log(values,"sdfdsfsd34");
// },
// });
console.log("sdfdsfsd",patient)
return( return(
<> <>
@ -96,11 +125,16 @@ export default function PersonalSection(){
label="Patient's Full Name" label="Patient's Full Name"
name="fullName" name="fullName"
placeholder='Please enter your name' placeholder='Please enter your name'
value={formik.values.fullName} value={patient.fullName}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.fullName && Boolean(formik.errors.fullName)} ...prevValues,
helperText={formik.touched.fullName && formik.errors.fullName} fullName: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.fullName && Boolean(formik.errors.fullName)}
// helperText={formik.touched.fullName && formik.errors.fullName}
required required
/> />
</Grid> </Grid>
@ -112,11 +146,16 @@ export default function PersonalSection(){
label="Phone Number" label="Phone Number"
name="cellPhone" name="cellPhone"
placeholder='Please enter your cell Phone number' placeholder='Please enter your cell Phone number'
value={formik.values.cellPhone} value={patient.cellPhone}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)} ...prevValues,
helperText={formik.touched.cellPhone && formik.errors.cellPhone} cellPhone: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
// helperText={formik.touched.cellPhone && formik.errors.cellPhone}
/> />
</Grid> </Grid>
@ -126,11 +165,16 @@ export default function PersonalSection(){
label="Home Phone Number" label="Home Phone Number"
name="homePhone" name="homePhone"
placeholder='Please enter your home phone' placeholder='Please enter your home phone'
value={formik.values.homePhone} value={patient.homePhone}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.homePhone && Boolean(formik.errors.homePhone)} ...prevValues,
helperText={formik.touched.homePhone && formik.errors.homePhone} homePhone: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
// helperText={formik.touched.homePhone && formik.errors.homePhone}
/> />
</Grid> </Grid>
@ -140,11 +184,14 @@ export default function PersonalSection(){
label="Email" label="Email"
name="email" name="email"
placeholder='Please enter your email' placeholder='Please enter your email'
value={emailValue} value={patient.email}
onChange={(e)=>{ onChange={(e)=>{
setEmailValue(e.target.value) setPatient((prevValues) => ({
...prevValues,
email: e.target.value,
}));
}} }}
onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
// error={formik.touched.email && Boolean(formik.errors.email)} // error={formik.touched.email && Boolean(formik.errors.email)}
// helperText={formik.touched.email && formik.errors.email} // helperText={formik.touched.email && formik.errors.email}
/> />
@ -157,11 +204,16 @@ export default function PersonalSection(){
name="age" name="age"
type="number" type="number"
placeholder='Please enter your age' placeholder='Please enter your age'
value={formik.values.age} value={patient.age}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.age && Boolean(formik.errors.age)} ...prevValues,
helperText={formik.touched.age && formik.errors.age} age: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.age && Boolean(formik.errors.age)}
// helperText={formik.touched.age && formik.errors.age}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
@ -185,11 +237,16 @@ export default function PersonalSection(){
variant="outlined" variant="outlined"
label="Social Security Number" label="Social Security Number"
name="socialSecurityNumber" name="socialSecurityNumber"
value={formik.values.socialSecurityNumber} value={patient.socialSecurityNumber}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)} ...prevValues,
helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber} socialSecurityNumber: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
// helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
/> />
</Grid> </Grid>
@ -199,11 +256,16 @@ export default function PersonalSection(){
variant="outlined" variant="outlined"
label="Mailing Address" label="Mailing Address"
name="mailingAddress" name="mailingAddress"
value={formik.values.mailingAddress} value={patient.mailingAddress}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)} ...prevValues,
helperText={formik.touched.mailingAddress && formik.errors.mailingAddress} mailingAddress: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
// helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
/> />
</Grid> </Grid>
@ -212,9 +274,14 @@ export default function PersonalSection(){
variant="outlined" variant="outlined"
label="State" label="State"
name="state" name="state"
value={formik.values.state} value={patient.state}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
...prevValues,
state: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.state && Boolean(formik.errors.state)} // error={formik.touched.state && Boolean(formik.errors.state)}
// helperText={formik.touched.state && formik.errors.state} // helperText={formik.touched.state && formik.errors.state}
/> />
@ -226,11 +293,16 @@ export default function PersonalSection(){
variant="outlined" variant="outlined"
label="City" label="City"
name="city" name="city"
value={formik.values.city} value={patient.city}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.city && Boolean(formik.errors.city)} ...prevValues,
helperText={formik.touched.city && formik.errors.city} city: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.city && Boolean(formik.errors.city)}
// helperText={formik.touched.city && formik.errors.city}
/> />
</Grid> </Grid>
@ -239,11 +311,16 @@ export default function PersonalSection(){
variant="outlined" variant="outlined"
label="Zip Code" label="Zip Code"
name="zipCode" name="zipCode"
value={formik.values.zipCode} value={patient.zipCode}
onChange={formik.handleChange} onChange={(e)=>{
onBlur={formik.handleBlur} setPatient((prevValues) => ({
error={formik.touched.zipCode && Boolean(formik.errors.zipCode)} ...prevValues,
helperText={formik.touched.zipCode && formik.errors.zipCode} zipCode: e.target.value,
}));
}}
// onBlur={formik.handleBlur}
// error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
// helperText={formik.touched.zipCode && formik.errors.zipCode}
/> />
</Grid> </Grid>
@ -252,9 +329,14 @@ export default function PersonalSection(){
<FormLabel>Gender</FormLabel> <FormLabel>Gender</FormLabel>
<RadioGroup <RadioGroup
aria-labelledby="demo-radio-buttons-group-label" aria-labelledby="demo-radio-buttons-group-label"
defaultValue="male" defaultValue={patient.gender}
name="radio-buttons-group" name="radio-buttons-group"
onChange={handleChange} onChange={(e)=>{
setPatient((prevValues) => ({
...prevValues,
gender: e.target.value,
}));
}}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
> >
<FormControlLabel value="male" control={<Radio />} label="Male" /> <FormControlLabel value="male" control={<Radio />} label="Male" />