section 1 data to the main page
This commit is contained in:
sonika
parent
61466d694b
commit
ab27164ed8
@ -33,7 +33,6 @@ interface Patient {
|
||||
state: string;
|
||||
zipCode: string;
|
||||
gender: string;
|
||||
maritalStatus: string;
|
||||
}
|
||||
|
||||
const Accordion = styled((props: AccordionProps) => (
|
||||
@ -72,26 +71,48 @@ interface Patient {
|
||||
borderTop: '1px solid rgba(0, 0, 0, .125)',
|
||||
}));
|
||||
|
||||
|
||||
|
||||
export default function PatientForm(){
|
||||
const [expanded, setExpanded] = React.useState<string | false>('panel1');
|
||||
const [isChecked, setIsChecked] = React.useState(false);
|
||||
const [signature,setSignature]=React.useState('');
|
||||
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
fullName: "",
|
||||
homePhone: "",
|
||||
cellPhone: "",
|
||||
email: "",
|
||||
age: 0,
|
||||
dateOfBirth: "",
|
||||
socialSecurityNumber: "",
|
||||
mailingAddress: "",
|
||||
city: "",
|
||||
state: "",
|
||||
zipCode: "",
|
||||
gender: "",
|
||||
maritalStatus: "",
|
||||
});
|
||||
const [section1Data, setSection1Data] = React.useState<any>({});
|
||||
const [section2Data, setSection2Data] = React.useState<any>({});
|
||||
|
||||
const 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,
|
||||
) =>{
|
||||
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>) => {
|
||||
event.preventDefault();
|
||||
@ -105,6 +126,8 @@ export default function PatientForm(){
|
||||
const handleCheckboxChange = (event:any) => {
|
||||
setIsChecked(event.target.checked);
|
||||
};
|
||||
|
||||
console.log(section1Data,"wyeytweevfde")
|
||||
|
||||
|
||||
return(
|
||||
@ -128,7 +151,7 @@ export default function PatientForm(){
|
||||
</AccordionSummary>
|
||||
|
||||
<AccordionDetails>
|
||||
<PersonalSection/>
|
||||
<PersonalSection handleFormSection1Data={handleFormSection1Data}/>
|
||||
</AccordionDetails>
|
||||
|
||||
</Accordion>
|
||||
|
||||
@ -4,6 +4,7 @@ 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';
|
||||
|
||||
interface Patient {
|
||||
fullName: string;
|
||||
@ -18,7 +19,6 @@ interface Patient {
|
||||
state: string;
|
||||
zipCode: string;
|
||||
gender: string;
|
||||
maritalStatus: string;
|
||||
}
|
||||
|
||||
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")
|
||||
});
|
||||
|
||||
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 [emailValue, setEmailValue]= React.useState<string>('');
|
||||
const [patient, setPatient] = React.useState<Patient>({
|
||||
fullName: "",
|
||||
homePhone: "",
|
||||
cellPhone: "",
|
||||
email: "",
|
||||
age: 0,
|
||||
dateOfBirth: "",
|
||||
dateOfBirth: startDateValue,
|
||||
socialSecurityNumber: "",
|
||||
mailingAddress:"",
|
||||
city: "",
|
||||
state: "",
|
||||
zipCode: "",
|
||||
gender: "male",
|
||||
maritalStatus: "",
|
||||
});
|
||||
|
||||
const formik = useFormik<Patient>({
|
||||
initialValues: {
|
||||
fullName: "",
|
||||
homePhone: "",
|
||||
cellPhone: "",
|
||||
email: "",
|
||||
age: "",
|
||||
dateOfBirth: "",
|
||||
socialSecurityNumber: "",
|
||||
mailingAddress:"",
|
||||
city: "",
|
||||
state: "",
|
||||
zipCode: "",
|
||||
gender: "male",
|
||||
maritalStatus: "",
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit: (values) => {
|
||||
// Do something with the patient data
|
||||
console.log(values);
|
||||
},
|
||||
});
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
console.log("dsfsdfsdf",event.target.value)
|
||||
const { name, value } = event.target;
|
||||
setPatient((prevPatient) => ({
|
||||
...prevPatient,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
handleFormSection1Data(
|
||||
patient.fullName,
|
||||
patient.homePhone,
|
||||
patient.cellPhone,
|
||||
patient.email,
|
||||
patient.age,
|
||||
startDateValue,
|
||||
patient.socialSecurityNumber,
|
||||
patient.mailingAddress,
|
||||
patient.city,
|
||||
patient.state,
|
||||
patient.zipCode,
|
||||
patient.gender,
|
||||
)
|
||||
},[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("sdfdsfsd",patient)
|
||||
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
@ -96,11 +125,16 @@ export default function PersonalSection(){
|
||||
label="Patient's Full Name"
|
||||
name="fullName"
|
||||
placeholder='Please enter your name'
|
||||
value={formik.values.fullName}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.fullName && Boolean(formik.errors.fullName)}
|
||||
helperText={formik.touched.fullName && formik.errors.fullName}
|
||||
value={patient.fullName}
|
||||
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>
|
||||
@ -112,11 +146,16 @@ export default function PersonalSection(){
|
||||
label="Phone Number"
|
||||
name="cellPhone"
|
||||
placeholder='Please enter your cell Phone number'
|
||||
value={formik.values.cellPhone}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
|
||||
helperText={formik.touched.cellPhone && formik.errors.cellPhone}
|
||||
value={patient.cellPhone}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
cellPhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
|
||||
// helperText={formik.touched.cellPhone && formik.errors.cellPhone}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -126,11 +165,16 @@ export default function PersonalSection(){
|
||||
label="Home Phone Number"
|
||||
name="homePhone"
|
||||
placeholder='Please enter your home phone'
|
||||
value={formik.values.homePhone}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
|
||||
helperText={formik.touched.homePhone && formik.errors.homePhone}
|
||||
value={patient.homePhone}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
homePhone: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
|
||||
// helperText={formik.touched.homePhone && formik.errors.homePhone}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -140,11 +184,14 @@ export default function PersonalSection(){
|
||||
label="Email"
|
||||
name="email"
|
||||
placeholder='Please enter your email'
|
||||
value={emailValue}
|
||||
value={patient.email}
|
||||
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)}
|
||||
// helperText={formik.touched.email && formik.errors.email}
|
||||
/>
|
||||
@ -157,11 +204,16 @@ export default function PersonalSection(){
|
||||
name="age"
|
||||
type="number"
|
||||
placeholder='Please enter your age'
|
||||
value={formik.values.age}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.age && Boolean(formik.errors.age)}
|
||||
helperText={formik.touched.age && formik.errors.age}
|
||||
value={patient.age}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
age: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.age && Boolean(formik.errors.age)}
|
||||
// helperText={formik.touched.age && formik.errors.age}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style'>
|
||||
@ -185,11 +237,16 @@ export default function PersonalSection(){
|
||||
variant="outlined"
|
||||
label="Social Security Number"
|
||||
name="socialSecurityNumber"
|
||||
value={formik.values.socialSecurityNumber}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
|
||||
helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
|
||||
value={patient.socialSecurityNumber}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
socialSecurityNumber: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
|
||||
// helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -199,11 +256,16 @@ export default function PersonalSection(){
|
||||
variant="outlined"
|
||||
label="Mailing Address"
|
||||
name="mailingAddress"
|
||||
value={formik.values.mailingAddress}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
|
||||
helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
|
||||
value={patient.mailingAddress}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
mailingAddress: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
|
||||
// helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -212,9 +274,14 @@ export default function PersonalSection(){
|
||||
variant="outlined"
|
||||
label="State"
|
||||
name="state"
|
||||
value={formik.values.state}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
value={patient.state}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
state: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.state && Boolean(formik.errors.state)}
|
||||
// helperText={formik.touched.state && formik.errors.state}
|
||||
/>
|
||||
@ -226,11 +293,16 @@ export default function PersonalSection(){
|
||||
variant="outlined"
|
||||
label="City"
|
||||
name="city"
|
||||
value={formik.values.city}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.city && Boolean(formik.errors.city)}
|
||||
helperText={formik.touched.city && formik.errors.city}
|
||||
value={patient.city}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
city: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.city && Boolean(formik.errors.city)}
|
||||
// helperText={formik.touched.city && formik.errors.city}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -239,11 +311,16 @@ export default function PersonalSection(){
|
||||
variant="outlined"
|
||||
label="Zip Code"
|
||||
name="zipCode"
|
||||
value={formik.values.zipCode}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
|
||||
helperText={formik.touched.zipCode && formik.errors.zipCode}
|
||||
value={patient.zipCode}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
zipCode: e.target.value,
|
||||
}));
|
||||
}}
|
||||
// onBlur={formik.handleBlur}
|
||||
// error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
|
||||
// helperText={formik.touched.zipCode && formik.errors.zipCode}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@ -252,9 +329,14 @@ export default function PersonalSection(){
|
||||
<FormLabel>Gender</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="male"
|
||||
defaultValue={patient.gender}
|
||||
name="radio-buttons-group"
|
||||
onChange={handleChange}
|
||||
onChange={(e)=>{
|
||||
setPatient((prevValues) => ({
|
||||
...prevValues,
|
||||
gender: e.target.value,
|
||||
}));
|
||||
}}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="male" control={<Radio />} label="Male" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user