268 lines
11 KiB
TypeScript
268 lines
11 KiB
TypeScript
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';
|
|
|
|
interface Patient {
|
|
fullName: string;
|
|
homePhone: string;
|
|
cellPhone: string;
|
|
email: string;
|
|
age: number | string;
|
|
dateOfBirth: string;
|
|
socialSecurityNumber: string;
|
|
mailingAddress: string;
|
|
city: string;
|
|
state: string;
|
|
zipCode: string;
|
|
gender: string;
|
|
maritalStatus: 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")
|
|
});
|
|
|
|
export default function PersonalSection(){
|
|
|
|
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: "",
|
|
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,
|
|
}));
|
|
};
|
|
|
|
return(
|
|
<>
|
|
<Grid container direction="row" className='section1-test-class'>
|
|
<Grid item xs={4} className='collapsable-form-style '>
|
|
<TextField
|
|
variant="outlined"
|
|
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}
|
|
required
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
required
|
|
variant="outlined"
|
|
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}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
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}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="Email"
|
|
name="email"
|
|
placeholder='Please enter your email'
|
|
value={emailValue}
|
|
onChange={(e)=>{
|
|
setEmailValue(e.target.value)
|
|
}}
|
|
onBlur={formik.handleBlur}
|
|
// error={formik.touched.email && Boolean(formik.errors.email)}
|
|
// helperText={formik.touched.email && formik.errors.email}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
required
|
|
variant="outlined"
|
|
label="Age"
|
|
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}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<FormControl >
|
|
|
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
<DatePicker
|
|
label="Date of Birth"
|
|
value={startDateValue}
|
|
onChange={(newValue) => {
|
|
setStartDateValue(newValue);
|
|
}}
|
|
renderInput={(params) => <TextField required variant="outlined" {...params} />}
|
|
/>
|
|
</LocalizationProvider>
|
|
</FormControl>
|
|
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
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}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
required
|
|
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}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
variant="outlined"
|
|
label="State"
|
|
name="state"
|
|
value={formik.values.state}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur}
|
|
// error={formik.touched.state && Boolean(formik.errors.state)}
|
|
// helperText={formik.touched.state && formik.errors.state}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
required
|
|
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}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style'>
|
|
<TextField
|
|
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}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style-radioButtons'>
|
|
<FormControl >
|
|
<FormLabel>Gender</FormLabel>
|
|
<RadioGroup
|
|
aria-labelledby="demo-radio-buttons-group-label"
|
|
defaultValue="male"
|
|
name="radio-buttons-group"
|
|
onChange={handleChange}
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
>
|
|
<FormControlLabel value="male" control={<Radio />} label="Male" />
|
|
<FormControlLabel value="female" control={<Radio />} label="Female" />
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</Grid>
|
|
</Grid>
|
|
</>
|
|
)
|
|
} |