237 lines
7.3 KiB
Plaintext
237 lines
7.3 KiB
Plaintext
|
import { FormControl, Grid } from "@mui/material";
|
||
|
import PropTypes from "prop-types";
|
||
|
import Input from "../common/Input";
|
||
|
import SingleSelect from "../common/SingleSelect";
|
||
|
|
||
|
|
||
|
//import TextArea from "../TextArea";
|
||
|
|
||
|
const TrainingDetailForm = ({
|
||
|
values,
|
||
|
touched,
|
||
|
handleBlur,
|
||
|
errors,
|
||
|
handleChange,
|
||
|
setFieldValue,
|
||
|
handleSubmit,
|
||
|
modeOptions,
|
||
|
|
||
|
}) => {
|
||
|
TrainingDetailForm.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,
|
||
|
};
|
||
|
|
||
|
|
||
|
const Type = ["online","offline"];
|
||
|
|
||
|
return (
|
||
|
<div style={{ display: "flex", justifyContent: "center" }}>
|
||
|
<form onSubmit={handleSubmit}>
|
||
|
<Grid
|
||
|
container
|
||
|
spacing={2}
|
||
|
justifyContent="center"
|
||
|
alignItems="center"
|
||
|
sx={{ width: 570 }}
|
||
|
>
|
||
|
<Grid item xs={12} justifyContent="center" alignItems="center">
|
||
|
<FormControl fullWidth>
|
||
|
<Grid
|
||
|
container
|
||
|
spacing={2}
|
||
|
justifyContent="center"
|
||
|
alignItems="center"
|
||
|
>
|
||
|
<Grid
|
||
|
item
|
||
|
xs={12}
|
||
|
sm={6}
|
||
|
container
|
||
|
spacing={1}
|
||
|
justifyContent="center"
|
||
|
alignItems="center"
|
||
|
>
|
||
|
<Input
|
||
|
label="Program Name "
|
||
|
name="trainingName"
|
||
|
type="text"
|
||
|
size="large"
|
||
|
value={values.trainingName}
|
||
|
onChange={handleChange}
|
||
|
onBlur={handleBlur}
|
||
|
helperText={
|
||
|
errors.trainingName && touched.trainingName ? (
|
||
|
<span style={{ color: "red" }}>
|
||
|
{errors.trainingName}
|
||
|
</span>
|
||
|
) : null
|
||
|
}
|
||
|
/>
|
||
|
</Grid>
|
||
|
|
||
|
<Grid
|
||
|
item
|
||
|
xs={12}
|
||
|
sm={6}
|
||
|
container
|
||
|
spacing={1}
|
||
|
justifyContent="center"
|
||
|
alignItems="center"
|
||
|
>
|
||
|
<Input
|
||
|
label="Programe Description "
|
||
|
name="description"
|
||
|
type="text"
|
||
|
size="large"
|
||
|
value={values.description}
|
||
|
onChange={handleChange}
|
||
|
onBlur={handleBlur}
|
||
|
helperText={
|
||
|
errors.description && touched.description ? (
|
||
|
<span style={{ color: "red" }}>
|
||
|
{errors.description}
|
||
|
</span>
|
||
|
) : null
|
||
|
}
|
||
|
/>
|
||
|
</Grid>
|
||
|
|
||
|
<Grid
|
||
|
item
|
||
|
xs={12}
|
||
|
sm={6}
|
||
|
container
|
||
|
spacing={1}
|
||
|
justifyContent="center"
|
||
|
alignItems="center"
|
||
|
>
|
||
|
<Input
|
||
|
label="Programe Duration(in Days)"
|
||
|
name="duration"
|
||
|
type="text"
|
||
|
size="large"
|
||
|
value={values.duration}
|
||
|
onChange={handleChange}
|
||
|
onBlur={handleBlur}
|
||
|
helperText={
|
||
|
errors.duration && touched.duration ? (
|
||
|
<span style={{ color: "red" }}>{errors.duration}</span>
|
||
|
) : null
|
||
|
}
|
||
|
/>
|
||
|
</Grid>
|
||
|
|
||
|
<Grid
|
||
|
item
|
||
|
xs={12}
|
||
|
sm={6}
|
||
|
container
|
||
|
spacing={1}
|
||
|
justifyContent="center"
|
||
|
alignItems="center"
|
||
|
>
|
||
|
<SingleSelect
|
||
|
arr={modeOptions}
|
||
|
label="Select Program Mode"
|
||
|
name="modeId"
|
||
|
value={values.modeId}
|
||
|
onChange={(event, newValue) => {
|
||
|
const syntheticEvent = {
|
||
|
target: {
|
||
|
name: "modeId",
|
||
|
value: newValue,
|
||
|
},
|
||
|
};
|
||
|
handleChange(syntheticEvent);
|
||
|
}}
|
||
|
// onChange={handleChange}
|
||
|
onBlur={handleBlur}
|
||
|
type="text"
|
||
|
helperText={
|
||
|
errors.modeId && touched.modeId ? (
|
||
|
<span style={{ color: "red" }}>{errors.modeId}</span>
|
||
|
) : null
|
||
|
}
|
||
|
/>
|
||
|
</Grid>
|
||
|
|
||
|
<Grid
|
||
|
item
|
||
|
xs={12}
|
||
|
sm={6}
|
||
|
container
|
||
|
spacing={1}
|
||
|
justifyContent="center"
|
||
|
alignItems="center"
|
||
|
>
|
||
|
<SingleSelect
|
||
|
arr={Type}
|
||
|
label="Program Type"
|
||
|
name="typeOfTraining"
|
||
|
value={values.typeOfTraining}
|
||
|
onChange={(event, newValue) => {
|
||
|
const syntheticEvent = {
|
||
|
target: {
|
||
|
name: "typeOfTraining",
|
||
|
value: newValue,
|
||
|
},
|
||
|
};
|
||
|
handleChange(syntheticEvent);
|
||
|
}}
|
||
|
onBlur={handleBlur}
|
||
|
type="text"
|
||
|
helperText={
|
||
|
errors.typeOfTraining && touched.typeOfTraining ? (
|
||
|
<span style={{ color: "red" }}>
|
||
|
{errors.typeOfTraining}
|
||
|
</span>
|
||
|
) : null
|
||
|
}
|
||
|
/>
|
||
|
</Grid>
|
||
|
|
||
|
<Grid
|
||
|
item
|
||
|
xs={12}
|
||
|
sm={6}
|
||
|
container
|
||
|
spacing={1}
|
||
|
justifyContent="center"
|
||
|
alignItems="center"
|
||
|
>
|
||
|
<Input
|
||
|
label="Program Key Health Parameters"
|
||
|
name="keyHealthParameterId"
|
||
|
type="text"
|
||
|
size="large"
|
||
|
value={values.keyHealthParameterId}
|
||
|
onChange={handleChange}
|
||
|
onBlur={handleBlur}
|
||
|
helperText={
|
||
|
errors.keyHealthParameterId &&
|
||
|
touched.keyHealthParameterId ? (
|
||
|
<span style={{ color: "red" }}>
|
||
|
{errors.keyHealthParameterId}
|
||
|
</span>
|
||
|
) : null
|
||
|
}
|
||
|
/>
|
||
|
</Grid>
|
||
|
</Grid>
|
||
|
</FormControl>
|
||
|
</Grid>
|
||
|
</Grid>
|
||
|
</form>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default TrainingDetailForm;
|
||
|
|
||
|
|