289 lines
11 KiB
Plaintext
289 lines
11 KiB
Plaintext
import Ohclogo from "./Ohclogo";
|
|
import { FormControl, Grid, TextField } from "@mui/material";
|
|
import PropTypes from "prop-types";
|
|
import Input from "../common/Input";
|
|
import SingleSelect from "../common/SingleSelect"
|
|
import MultipleSelect from "../common/MultipleSelect";
|
|
import { InputLabel, MenuItem, Select } from "@mui/material";
|
|
import Autocomplete from "@mui/material/Autocomplete";
|
|
import { useState } from "react";
|
|
import MultiCheckbox from "./MultiCheckbox";
|
|
|
|
const OhcForm = ({
|
|
values,
|
|
touched,
|
|
handleBlur,
|
|
errors,
|
|
handleChange,
|
|
setFieldValue,
|
|
handleSubmit,
|
|
}) => {
|
|
OhcForm.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 ohcselect = ["Student", "Employee"];
|
|
const Categoryselect = ["Ohc center", "Ambulance", "First Aid Box", "Other"];
|
|
|
|
return (
|
|
<div style={{ display: "flex", justifyContent: "center" }}>
|
|
<form onSubmit={handleSubmit}>
|
|
<Grid container spacing={2} justifyContent="center" alignItems="center">
|
|
<Grid item xs={12} sm={4} style={{ display: "flex", justifyContent: "center" }}>
|
|
<Ohclogo setFieldValue={setFieldValue} />
|
|
</Grid>
|
|
<Grid item xs={12} sm={8} 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="Ohc Name"
|
|
name="ohcName"
|
|
type="text"
|
|
size="large"
|
|
value={values.ohcName}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.ohcName && touched.ohcName ? (
|
|
<span style={{ color: "red" }}>{errors.ohcName}</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<Input
|
|
label="Description"
|
|
name="ohcDescription"
|
|
type="text"
|
|
size="large"
|
|
value={values.ohcDescription}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.ohcDescription && touched.ohcDescription ? (
|
|
<span style={{ color: "red" }}>
|
|
{errors.ohcDescription}
|
|
</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<Input
|
|
label="OHC Code"
|
|
name="ohcCode"
|
|
type="text"
|
|
size="large"
|
|
value={values.ohcCode}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.ohcCode && touched.ohcCode ? (
|
|
<span style={{ color: "red" }}>{errors.ohcCode}</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<Input
|
|
label="State Code"
|
|
name="state"
|
|
type="number"
|
|
size="large"
|
|
value={values.state}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.state && touched.state ? (
|
|
<span style={{ color: "red" }}>{errors.state}</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<Input
|
|
label="Pin Code"
|
|
name="pinCode"
|
|
type="number"
|
|
size="large"
|
|
value={values.pinCode}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.pinCode && touched.pinCode ? (
|
|
<span style={{ color: "red" }}>{errors.pinCode}</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<Input
|
|
label="Fax"
|
|
name="fax"
|
|
type="text"
|
|
size="large"
|
|
value={values.fax}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.fax && touched.fax ? (
|
|
<span style={{ color: "red" }}>{errors.fax}</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<Input
|
|
label="Primary Phone"
|
|
name="primaryPhone"
|
|
type="number"
|
|
size="large"
|
|
value={values.primaryPhone}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.primaryPhone && touched.primaryPhone ? (
|
|
<span style={{ color: "red" }}>
|
|
{errors.primaryPhone}
|
|
</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<Input
|
|
label="Email ID"
|
|
name="primaryEmail"
|
|
type="text"
|
|
size="large"
|
|
value={values.primaryEmail}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.primaryEmail && touched.primaryEmail ? (
|
|
<span style={{ color: "red" }}>
|
|
{errors.primaryEmail}
|
|
</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<Input
|
|
label="Icon Color"
|
|
name="iconColor"
|
|
type="text"
|
|
size="large"
|
|
value={values.iconColor}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.iconColor && touched.iconColor ? (
|
|
<span style={{ color: "red" }}>{errors.iconColor}</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<Input
|
|
label="Icon Text"
|
|
name="iconText"
|
|
type="text"
|
|
size="large"
|
|
value={values.iconText}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.iconText && touched.iconText ? (
|
|
<span style={{ color: "red" }}>{errors.iconText}</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<SingleSelect
|
|
arr={ohcselect}
|
|
label="Select OHC TYPE"
|
|
name="ohcType"
|
|
value={values.ohcType}
|
|
onChange={(event, newValue) => {
|
|
const syntheticEvent = {
|
|
target: {
|
|
name: "ohcType",
|
|
value: newValue,
|
|
},
|
|
};
|
|
handleChange(syntheticEvent);
|
|
}}
|
|
onBlur={handleBlur}
|
|
type="text"
|
|
helperText={
|
|
errors.ohcType && touched.ohcType ? (
|
|
<span style={{ color: "red" }}>{errors.ohcType}</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<Input
|
|
label="Address"
|
|
name="address"
|
|
type="text"
|
|
size="large"
|
|
value={values.address}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.address && touched.address ? (
|
|
<span style={{ color: "red" }}>{errors.address}</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6} container spacing={1} justifyContent="center" alignItems="center">
|
|
<SingleSelect
|
|
arr={Categoryselect}
|
|
label="OHC Category"
|
|
name="ohcCategory"
|
|
value={values.ohcCategory}
|
|
onChange={(event, newValue) => {
|
|
const syntheticEvent = {
|
|
target: {
|
|
name: "ohcCategory",
|
|
value: newValue,
|
|
},
|
|
};
|
|
handleChange(syntheticEvent);
|
|
}}
|
|
// onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
type="text"
|
|
helperText={
|
|
errors.ohcCategory && touched.ohcCategory ? (
|
|
<span style={{ color: "red" }}>
|
|
{errors.ohcCategory}
|
|
</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</FormControl>
|
|
</Grid>
|
|
</Grid>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OhcForm;
|
|
|