133 lines
4.4 KiB
Plaintext
133 lines
4.4 KiB
Plaintext
import { FormControl, Grid, Button, Typography } from "@mui/material";
|
|
import PropTypes from "prop-types";
|
|
import Input from "../common/Input";
|
|
import SingleSelectNew from "../common/SingleSelectNew";
|
|
|
|
const DepartmentForm = ({
|
|
values,
|
|
touched,
|
|
handleBlur,
|
|
errors,
|
|
handleChange,
|
|
setFieldValue,
|
|
handleSubmit,
|
|
business,
|
|
}) => {
|
|
DepartmentForm.propTypes = {
|
|
values: PropTypes.object.isRequired,
|
|
touched: PropTypes.object.isRequired,
|
|
errors: PropTypes.object.isRequired,
|
|
handleBlur: PropTypes.func.isRequired,
|
|
handleChange: PropTypes.func.isRequired,
|
|
setFieldValue: PropTypes.func.isRequired,
|
|
handleSubmit: PropTypes.func.isRequired,
|
|
business: PropTypes.array.isRequired,
|
|
};
|
|
|
|
return (
|
|
<div style={{ display: "flex", justifyContent: "center", margin: "20px 0" }}>
|
|
<form onSubmit={handleSubmit}>
|
|
<Grid container spacing={3} justifyContent="center" alignItems="center">
|
|
<Typography variant="h5" gutterBottom>
|
|
Department Details
|
|
</Typography>
|
|
|
|
<Grid item xs={12}>
|
|
<FormControl fullWidth>
|
|
<SingleSelectNew
|
|
label="Business Name"
|
|
name="buId"
|
|
size="medium"
|
|
options={business}
|
|
value={business.find((option) => option.id === values.buId) || null}
|
|
getOptionLabel={(option) => option.label}
|
|
onChange={(event, newValue) => {
|
|
setFieldValue("buId", newValue ? newValue.id : "");
|
|
}}
|
|
onBlur={handleBlur}
|
|
error={Boolean(errors.buId && touched.buId)}
|
|
helperText={errors.buId && touched.buId && (
|
|
<span style={{ color: "red" }}>{errors.buId}</span>
|
|
)}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12}>
|
|
<FormControl fullWidth>
|
|
<Input
|
|
label="Department Name"
|
|
name="departmentName"
|
|
size="medium"
|
|
value={values.departmentName}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
error={Boolean(errors.departmentName && touched.departmentName)}
|
|
helperText={errors.departmentName && touched.departmentName && (
|
|
<span style={{ color: "red" }}>{errors.departmentName}</span>
|
|
)}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12}>
|
|
<FormControl fullWidth>
|
|
<Input
|
|
label="Department Head Name"
|
|
name="departmentHeadName"
|
|
size="medium"
|
|
value={values.departmentHeadName}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
error={Boolean(errors.departmentHeadName && touched.departmentHeadName)}
|
|
helperText={errors.departmentHeadName && touched.departmentHeadName && (
|
|
<span style={{ color: "red" }}>{errors.departmentHeadName}</span>
|
|
)}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12}>
|
|
<FormControl fullWidth>
|
|
<Input
|
|
label="Department Head Email"
|
|
name="departmentEmail"
|
|
size="medium"
|
|
value={values.departmentEmail}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
error={Boolean(errors.departmentEmail && touched.departmentEmail)}
|
|
helperText={errors.departmentEmail && touched.departmentEmail && (
|
|
<span style={{ color: "red" }}>{errors.departmentEmail}</span>
|
|
)}
|
|
/>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} container justifyContent="center">
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
size="large"
|
|
type="submit"
|
|
style={{ marginRight: "10px" }}
|
|
>
|
|
Submit
|
|
</Button>
|
|
<Button
|
|
variant="outlined"
|
|
color="secondary"
|
|
size="large"
|
|
onClick={() => setFieldValue('departmentEmail', '')}
|
|
>
|
|
Reset
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DepartmentForm;
|