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

css changes

Browse Source
This commit is contained in:
sonika 2023-08-22 12:49:56 +05:30
parent 97aff21f90
commit d172573539
4 changed files with 68 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.css
View File

@ -11,4 +11,18 @@
.collapsable-form-style label { .collapsable-form-style label {
padding: 15px; padding: 15px;
}
.collapsable-form-style-radioButtons{
width: 300px !important;
margin: 5%;
padding-top: 12px;
padding-left: 16px;
}
.collapsable-form-style-radioButtons-fullwidth{
/* width: 300px !important; */
margin: 5%;
padding-top: 12px;
padding-left: 16px;
} }

35
src/Components/PatientForm/FamilyFormSection2.tsx
View File

@ -61,7 +61,7 @@ export default function FamilyFormSection(){
<> <>
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
<Grid container direction="row"> <Grid container direction="row">
<Grid item xs={8} className='collapsable-form-style ' sx={{paddingLeft:"14px"}}> <Grid item xs={8} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Marital Status</FormLabel> <FormLabel>Marital Status</FormLabel>
<RadioGroup <RadioGroup
@ -71,6 +71,8 @@ export default function FamilyFormSection(){
onChange={formik.handleChange} onChange={formik.handleChange}
value={formik.values.maritalStatus} value={formik.values.maritalStatus}
sx={{display:'flex', flexDirection:'row'}} sx={{display:'flex', flexDirection:'row'}}
// error={formik.touched.numberOfChildren && Boolean(formik.errors.maritalStatus)}
// helperText={formik.touched.numberOfChildren && formik.errors.maritalStatus}
> >
<FormControlLabel value="married" control={<Radio />} label="Married" /> <FormControlLabel value="married" control={<Radio />} label="Married" />
<FormControlLabel value="single" control={<Radio />} label="Single" /> <FormControlLabel value="single" control={<Radio />} label="Single" />
@ -78,16 +80,14 @@ export default function FamilyFormSection(){
<FormControlLabel value="seperated" control={<Radio />} label="Seperated" /> <FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
<FormControlLabel value="divorced" control={<Radio />} label="Divorced" /> <FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
</RadioGroup> </RadioGroup>
{formik.touched.maritalStatus && formik.errors.maritalStatus ? (
<div>{formik.errors.maritalStatus}</div>
) : null}
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '></Grid> <Grid item xs={4} className='collapsable-form-style '></Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
required
variant="outlined" variant="outlined"
label="Number of Children/Ages" label="Number of Children/Ages"
className='collapsable-form-style' className='collapsable-form-style'
@ -95,13 +95,13 @@ export default function FamilyFormSection(){
onChange={formik.handleChange} onChange={formik.handleChange}
value={formik.values.numberOfChildren} value={formik.values.numberOfChildren}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)} // error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren} // helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
required // required
variant="outlined" variant="outlined"
label="Occupation" label="Occupation"
className='collapsable-form-style' className='collapsable-form-style'
@ -109,8 +109,8 @@ export default function FamilyFormSection(){
onChange={formik.handleChange} onChange={formik.handleChange}
value={formik.values.occupation} value={formik.values.occupation}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={formik.touched.occupation && Boolean(formik.errors.occupation)} // error={formik.touched.occupation && Boolean(formik.errors.occupation)}
helperText={formik.touched.occupation && formik.errors.occupation} // helperText={formik.touched.occupation && formik.errors.occupation}
/> />
</Grid> </Grid>
@ -150,6 +150,13 @@ export default function FamilyFormSection(){
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={4} className='collapsable-form-style '></Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
</Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="outlined" variant="outlined"
@ -184,6 +191,12 @@ export default function FamilyFormSection(){
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
/> />
</Grid> </Grid>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel>
</Grid>
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="outlined" variant="outlined"
@ -209,7 +222,7 @@ export default function FamilyFormSection(){
<Grid item xs={4} className='collapsable-form-style '> <Grid item xs={4} className='collapsable-form-style '>
<TextField <TextField
variant="outlined" variant="outlined"
label="Spouse's Phone" type="tel" label="Phone" type="tel"
className='collapsable-form-style' className='collapsable-form-style'
name='phone' name='phone'
onChange={formik.handleChange} onChange={formik.handleChange}

48
src/Components/PatientForm/MedicalHistorySection3.tsx
View File

@ -53,6 +53,10 @@ export default function MedicalHistoryForm(){
return( return(
<> <>
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
<Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
</Grid>
<Grid container direction="row"> <Grid container direction="row">
<Grid item xs={4} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style'>
<TextField <TextField
@ -99,7 +103,11 @@ export default function MedicalHistoryForm(){
<Grid item xs={4} className='collapsable-form-style'></Grid> <Grid item xs={4} className='collapsable-form-style'></Grid>
<Grid item xs={4} className='collapsable-form-style'></Grid> <Grid item xs={4} className='collapsable-form-style'></Grid>
<Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'> <Grid item xs={12} className='collapsable-form-style '>
<FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
</Grid>
<Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
<FormControl> <FormControl>
<FormLabel>Previous Chiropractic Care:</FormLabel> <FormLabel>Previous Chiropractic Care:</FormLabel>
<RadioGroup <RadioGroup
@ -139,7 +147,24 @@ export default function MedicalHistoryForm(){
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'> <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
<RadioGroup
// value={patient.gender}
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="yes"
name="radio-buttons-group"
onChange={formik.handleChange}
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
<FormControlLabel value="no" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl> <FormControl>
<FormLabel>Who can we thank for referring you to our office:</FormLabel> <FormLabel>Who can we thank for referring you to our office:</FormLabel>
<RadioGroup <RadioGroup
@ -160,24 +185,7 @@ export default function MedicalHistoryForm(){
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'> <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
<FormControl>
<FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
<RadioGroup
// value={patient.gender}
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="yes"
name="radio-buttons-group"
onChange={formik.handleChange}
sx={{display:'flex', flexDirection:'row'}}
>
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
<FormControlLabel value="no" control={<Radio />} label="No" />
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style'>
<FormControl> <FormControl>
<FormLabel>How do you prefer to be reminded of your appointments?</FormLabel> <FormLabel>How do you prefer to be reminded of your appointments?</FormLabel>
<RadioGroup <RadioGroup

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

@ -24,7 +24,7 @@ interface Patient {
const validationSchema = yup.object({ const validationSchema = yup.object({
fullName: yup.string().required("Full name is required"), fullName: yup.string().required("Full name is required"),
homePhone: yup.string().matches(/^\d{10}$/, "Home phone must be 10 digits"), homePhone: yup.string().matches(/^\d{10}$/, "Home phone must be 10 digits"),
cellPhone: yup.string().matches(/^\d{10}$/, "Cell 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().email("Invalid email format").required("Email is required"), email: yup.string().email("Invalid email format").required("Email is required"),
age: yup.number().positive().integer("Age must be a positive integer").required("Age 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"), dateOfBirth: yup.date().required("Date of birth is required"),
@ -241,7 +241,7 @@ export default function PersonalSection(){
/> />
</Grid> </Grid>
<Grid item xs={4} sx={{paddingLeft:"14px"}} className='collapsable-form-style'> <Grid item xs={4} className='collapsable-form-style-radioButtons'>
<FormControl > <FormControl >
<FormLabel>Gender</FormLabel> <FormLabel>Gender</FormLabel>
<RadioGroup <RadioGroup