166 lines
5.1 KiB
Plaintext
166 lines
5.1 KiB
Plaintext
import { FormControl, Grid } from "@mui/material";
|
|
import PropTypes from "prop-types";
|
|
import Input from "../common/Input";
|
|
import SingleSelect from "../common/SingleSelect";
|
|
import InputAdornment from '@mui/material/InputAdornment';
|
|
|
|
// const FoodNutrients = [
|
|
// {
|
|
// name: "carbohydrate",
|
|
// // value: "Carbohydrate",
|
|
// label: "Enter the name of nutrient",
|
|
// },
|
|
// {
|
|
// name: "protein",
|
|
// // value: "Protein",
|
|
// label: "Enter the name of nutrient",
|
|
// },
|
|
// {
|
|
// name: "protein",
|
|
// // value: "Protein",
|
|
// label: "Enter the name of nutrient",
|
|
// },
|
|
// {
|
|
// name: "protein",
|
|
// // value: "Protein",
|
|
// label: "Enter the name of nutrient",
|
|
// },
|
|
// {
|
|
// name: "protein",
|
|
// // value: "Protein",
|
|
// label: "Enter the name of nutrient",
|
|
// },
|
|
// {
|
|
// name: "protein",
|
|
// // value: "Protein",
|
|
// label: "Enter the name of nutrient",
|
|
// },
|
|
// {
|
|
// name: "protein",
|
|
// // value: "Protein",
|
|
// label: "Enter the name of nutrient",
|
|
// },
|
|
// {
|
|
// name: "protein",
|
|
// // value: "Protein",
|
|
// label: "Enter the name of nutrient",
|
|
// },
|
|
// ];
|
|
|
|
const FoodNutritionMappingForm = ({
|
|
// FoodNutrients,
|
|
nutrient,
|
|
foodname,
|
|
values,
|
|
unitpair,
|
|
touched,
|
|
handleBlur,
|
|
errors,
|
|
handleChange,
|
|
handleSubmit,
|
|
setFieldValue,
|
|
}) => {
|
|
FoodNutritionMappingForm.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,
|
|
};
|
|
|
|
|
|
console.log("nnnnnnnnnnnnnnn",unitpair)
|
|
|
|
return (
|
|
<div style={{ display: "flex", justifyContent: "center" }} >
|
|
<form onSubmit={handleSubmit}>
|
|
{/* <Grid container spacing={1} justifyContent="center" alignItems="center" sx={{ width: 600 }}>
|
|
<Grid item xs={12} justifyContent="center" alignItems="center"> */}
|
|
<FormControl fullWidth>
|
|
<Grid container spacing={1} justifyContent="center" alignItems="center" sx={{ width: 600 }}>
|
|
|
|
<Grid item xs={12} sm={6} container justifyContent="center" alignItems="center">
|
|
{/*<Input
|
|
label="Food Name"
|
|
name="foodId"
|
|
type="text"
|
|
size="large"
|
|
sx={{ width: "300px" }}
|
|
value={values.foodId}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors.foodId && touched.foodId ? (
|
|
<span style={{ color: "red" }}>
|
|
{errors.foodId}
|
|
</span>
|
|
) : null
|
|
}
|
|
/>*/}
|
|
<SingleSelect
|
|
arr={foodname}
|
|
label="Food Name"
|
|
name="foodMaster"
|
|
value={values.foodMaster}
|
|
sx={{ width: '250px' }}
|
|
// onChange={(event, newValue) => {
|
|
// const syntheticEvent = {
|
|
// target: {
|
|
// name: "foodMaster",
|
|
// value: newValue,
|
|
// },
|
|
// };
|
|
// handleChange(syntheticEvent);
|
|
// }}
|
|
// handleChange ={handleChange}
|
|
|
|
onChange={(event, newValue) => {
|
|
setFieldValue('foodMaster', newValue ? newValue.label : '');
|
|
}}
|
|
|
|
onBlur={handleBlur}
|
|
type="text"
|
|
helperText={
|
|
errors.foodMaster && touched.foodMaster ? (
|
|
<span style={{ color: "red" }}>{errors.foodMaster}</span>
|
|
) : null
|
|
}
|
|
/>
|
|
</Grid>
|
|
|
|
{nutrient.map((item, index) => (
|
|
<Grid item xs={12} md={6} container justifyContent="center" alignItems="center" key={index}>
|
|
<Input
|
|
label={item.label}
|
|
name={item.label}
|
|
type="text"
|
|
size="large"
|
|
value={values[item.label]}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
helperText={
|
|
errors[item.label] && touched[item.label] ? (
|
|
<span style={{ color: "red" }}>{errors[item.label]}</span>
|
|
) : null
|
|
}
|
|
InputProps={{
|
|
endAdornment: <InputAdornment position="end">{unitpair[item.value]}</InputAdornment>,
|
|
}}
|
|
/>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</FormControl>
|
|
{/* </Grid>
|
|
</Grid> */}
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
|
|
export default FoodNutritionMappingForm;
|