128 lines
4.2 KiB
JavaScript
128 lines
4.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import Button from "@mui/material/Button";
|
|
import TextField from "@mui/material/TextField";
|
|
import Dialog from "@mui/material/Dialog";
|
|
import DialogActions from "@mui/material/DialogActions";
|
|
import DialogContent from "@mui/material/DialogContent";
|
|
import DialogContentText from "@mui/material/DialogContentText";
|
|
import DialogTitle from "@mui/material/DialogTitle";
|
|
import Box from "@mui/material/Box";
|
|
import InputLabel from "@mui/material/InputLabel";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import Select from "@mui/material/Select";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import FormStyles from "./Form.Styles";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import Typography from "@mui/material/Typography";
|
|
import useForm from "../../../hooks/useForm";
|
|
import { formValidation } from "../_utility";
|
|
import SubmitButtonWithLoader from "../../../components/SubmitButtonWithLoader";
|
|
import { form_text_builder, API_SUCCESS_MESSAGE } from "../../../constants";
|
|
|
|
const ItemForm = ({
|
|
userItem,
|
|
mode,
|
|
open,
|
|
setOpen,
|
|
apiCall,
|
|
setApiStatus,
|
|
}) => {
|
|
const [isFormLoading, setIsFormLoading] = useState(false);
|
|
const [isFormSubmit, setIsFormSubmit] = useState(false);
|
|
const classes = FormStyles();
|
|
const { PRIMARY_TEXT, SECONDARY_TEXT, BUTTON_TEXT } = form_text_builder(mode);
|
|
const { values, errors, handleChangeKV, handleSubmit } = useForm({
|
|
initialValues: userItem,
|
|
onSubmit(values) {
|
|
setIsFormLoading(true);
|
|
apiCall(values)
|
|
.then((response) => {
|
|
setApiStatus({
|
|
status: 'success',
|
|
message: API_SUCCESS_MESSAGE,
|
|
show: true,
|
|
});
|
|
handleClose();
|
|
})
|
|
.catch((e) => {
|
|
setApiStatus({
|
|
status: "failed",
|
|
message: e.message,
|
|
show: true,
|
|
});
|
|
handleClose();
|
|
});
|
|
},
|
|
validate: (formValues) => {
|
|
if (isFormSubmit) setIsFormSubmit(false);
|
|
|
|
return formValidation(formValues);
|
|
},
|
|
});
|
|
const handleClose = () => {
|
|
setOpen({ open: false });
|
|
};
|
|
|
|
return (
|
|
<div style={{ display: "flex", justifyContent: "center" }}>
|
|
{values && (
|
|
<Dialog fullWidth maxWidth={"sm"} open={open} onClose={handleClose}>
|
|
<DialogTitle className={classes.header}>
|
|
<Typography className={classes.title}>Address</Typography>
|
|
<IconButton onClick={handleClose} style={{ marginLeft: "auto" }}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</DialogTitle>
|
|
<Box component="form" onSubmit={handleSubmit} noValidate>
|
|
<DialogContent>
|
|
<DialogContentText className={classes.title}>
|
|
{PRIMARY_TEXT.replace("Item", "Address")}
|
|
</DialogContentText>
|
|
<TextField
|
|
id="Title"
|
|
label="Name"
|
|
variant="outlined"
|
|
style={{ width: '100%' }}
|
|
margin="normal"
|
|
required
|
|
name="Title"
|
|
value={values.title}
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
handleChangeKV("title", value);
|
|
}}
|
|
error={!!errors.LastName}
|
|
helperText={errors.LastName}
|
|
/>
|
|
<TextField
|
|
id="Name"
|
|
label="Address"
|
|
variant="outlined"
|
|
style={{ width: '100%' }}
|
|
margin="normal"
|
|
required
|
|
name="Name"
|
|
value={values.name}
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
handleChangeKV("name", value);
|
|
}}
|
|
error={!!errors.FirstName}
|
|
helperText={errors.FirstName}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleClose}>Cancel</Button>
|
|
<SubmitButtonWithLoader
|
|
buttonText={BUTTON_TEXT}
|
|
loading={isFormLoading}
|
|
/>
|
|
</DialogActions>
|
|
</Box>
|
|
</Dialog>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ItemForm;
|