336 lines
12 KiB
JavaScript
336 lines
12 KiB
JavaScript
import React, { useEffect, 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 AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
|
|
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";
|
|
import { getItems } from '../../workorder/list/api';
|
|
import { getContacts } from '../../contacts/list/api';
|
|
const ItemForm = ({
|
|
item,
|
|
mode,
|
|
open,
|
|
setOpen,
|
|
apiCall,
|
|
setApiStatus,
|
|
}) => {
|
|
const [isFormLoading, setIsFormLoading] = useState(false);
|
|
const [workOrders, setWorkOrders] = useState([]);
|
|
const [contacts, setContacts] = useState([]);
|
|
const [isFormSubmit, setIsFormSubmit] = useState(false);
|
|
const classes = FormStyles();
|
|
const { PRIMARY_TEXT, SECONDARY_TEXT, BUTTON_TEXT } = form_text_builder(mode);
|
|
const { values, errors, handleChangeKV, handleSubmit, setValues } = useForm({
|
|
initialValues: item,
|
|
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 });
|
|
};
|
|
const handlelineItemIncrements = () => {
|
|
|
|
setValues((values) => ({
|
|
...values,
|
|
...{lineitems:[...values.lineitems||[], {descriptions:'', lineitem:0}]},
|
|
}));
|
|
};
|
|
useEffect(() => {
|
|
getItems().then((response) => { handleSuccess(response, setWorkOrders) });
|
|
getContacts().then((response) => { handleSuccess(response, setContacts) });
|
|
}, []);
|
|
|
|
function handleSuccess(response, cb) {
|
|
cb(response || []);
|
|
}
|
|
|
|
return (
|
|
<div style={{ display: "flex", justifyContent: "center" }}>
|
|
{values && (
|
|
<Dialog fullWidth maxWidth={"lg"} open={open} onClose={handleClose}>
|
|
<DialogTitle className={classes.header}>
|
|
<Typography className={classes.title}>Quote</Typography>
|
|
<IconButton onClick={handleClose} style={{ marginLeft: "auto" }}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</DialogTitle>
|
|
<Box component="form" onSubmit={handleSubmit} noValidate>
|
|
<DialogContent>
|
|
<DialogContentText className={classes.title}>
|
|
{PRIMARY_TEXT}
|
|
</DialogContentText>
|
|
|
|
<TextField
|
|
id="projectName"
|
|
label="Project Name"
|
|
variant="outlined"
|
|
style={{ width: '100%' }}
|
|
margin="normal"
|
|
required
|
|
name="projectName"
|
|
value={values.projectName}
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
handleChangeKV("projectName", value);
|
|
}}
|
|
error={!!errors.projectName}
|
|
helperText={errors.projectName}
|
|
/>
|
|
<div>
|
|
<InputLabel id="Wo-select-date-label">Date*</InputLabel>
|
|
<TextField
|
|
id="date"
|
|
label=""
|
|
variant="outlined"
|
|
style={{ width: '100%' }}
|
|
margin="normal"
|
|
required
|
|
name="date"
|
|
type="date"
|
|
value={values.date}
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
handleChangeKV("date", value);
|
|
}}
|
|
error={!!errors.LastName}
|
|
helperText={errors.LastName}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<InputLabel id="Wo-select-contact-label">POC*</InputLabel>
|
|
<Select
|
|
labelId="Wo-select-contact-label"
|
|
id="wo"
|
|
fullWidth
|
|
value={values.contactId}
|
|
label=""
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
handleChangeKV("contactId", value);
|
|
}}
|
|
>
|
|
{contacts.map((s, i) => (
|
|
<MenuItem value={s.id} key={i}>
|
|
{s.name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<InputLabel id="Wo-select-label">Personal For*</InputLabel>
|
|
<Select
|
|
labelId="Wo-select-label"
|
|
id="wo"
|
|
fullWidth
|
|
value={values.workorderId}
|
|
label="Personal For*"
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
const wo = workOrders.find(x => x.id = value)
|
|
setValues((old) => ({
|
|
...old,
|
|
po:wo.po,
|
|
tt:wo.tt,
|
|
siteId:wo?.locationId?.toString(),
|
|
siteName: wo.locationName,
|
|
workorderId:value
|
|
}));
|
|
}}
|
|
>
|
|
{workOrders.map((s, i) => (
|
|
<MenuItem value={s.id} key={i}>
|
|
{s.workerOrderTitle}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</div>
|
|
<div>
|
|
<InputLabel id="PO-label">PO # :</InputLabel>
|
|
<TextField
|
|
id="po"
|
|
label=""
|
|
variant="outlined"
|
|
style={{ width: '100%' }}
|
|
margin="normal"
|
|
required
|
|
name="po"
|
|
value={values?.po}
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
handleChangeKV("po", value);
|
|
}}
|
|
error={!!errors.po}
|
|
helperText={errors.po}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<InputLabel id="TT-label">TT #</InputLabel>
|
|
<TextField
|
|
id="tt"
|
|
label=""
|
|
variant="outlined"
|
|
style={{ width: '100%' }}
|
|
margin="normal"
|
|
required
|
|
name="tt"
|
|
value={values?.tt}
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
handleChangeKV("tt", value);
|
|
}}
|
|
error={!!errors.tt}
|
|
helperText={errors.tt}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<InputLabel id="siteName-label">Site Name</InputLabel>
|
|
<TextField
|
|
id="siteName"
|
|
label=""
|
|
variant="outlined"
|
|
style={{ width: '100%' }}
|
|
margin="normal"
|
|
required
|
|
name="siteName"
|
|
value={values?.siteName}
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
handleChangeKV("siteName", value);
|
|
}}
|
|
error={!!errors.siteName}
|
|
helperText={errors.siteName}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<InputLabel id="siteId-label">Site Id</InputLabel>
|
|
<TextField
|
|
id="siteId"
|
|
label=""
|
|
variant="outlined"
|
|
style={{ width: '100%' }}
|
|
margin="normal"
|
|
required
|
|
name="siteId"
|
|
value={values?.siteId}
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
handleChangeKV("siteId", value);
|
|
}}
|
|
error={!!errors.siteId}
|
|
helperText={errors.siteId}
|
|
/>
|
|
</div>
|
|
<div style={{marginTop:'10px'}}>
|
|
<Typography className={classes.title}>List Items</Typography>
|
|
<IconButton onClick={handlelineItemIncrements} style={{ marginLeft: "auto" }}>
|
|
<AddCircleOutlineIcon />
|
|
</IconButton>
|
|
{values?.lineitems?.map((li,i) => {
|
|
return (
|
|
<div className="listItem" key={'listItem'+i} style={{display:'flex'}}>
|
|
<div className="description" key={'descriptionWrapper'+i} style={{width:"60%", paddingRight:'2px'}}>
|
|
<InputLabel id="description-label">Description</InputLabel>
|
|
<TextField
|
|
id={'description'+i}
|
|
key={'description'+i}
|
|
label=""
|
|
variant="outlined"
|
|
style={{ width: '100%' }}
|
|
margin="normal"
|
|
required
|
|
name="description"
|
|
value={li?.descriptions}
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
li.descriptions = value;
|
|
setValues((oldValues) => ({
|
|
...oldValues,
|
|
...values,
|
|
}));
|
|
}}
|
|
error={!!errors.descriptions}
|
|
helperText={errors.descriptions}
|
|
/>
|
|
</div>
|
|
<div className="lineitem" key={'lineitemWrapper'+i} style={{width:"40%"}}>
|
|
<InputLabel id="lineitem-label">Amount</InputLabel>
|
|
<TextField
|
|
id={'lineitem'+i}
|
|
key={'lineitem'+i}
|
|
label=""
|
|
variant="outlined"
|
|
style={{ width: '100%' }}
|
|
margin="normal"
|
|
required
|
|
name="lineitem"
|
|
value={li?.lineitem}
|
|
onChange={(event) => {
|
|
const { value } = event.target;
|
|
li.lineitem = value;
|
|
setValues((oldValues) => ({
|
|
...oldValues,
|
|
...values,
|
|
}));
|
|
}}
|
|
error={!!errors.lineitem}
|
|
helperText={errors.lineitem}
|
|
/>
|
|
</div>
|
|
</div>)
|
|
})}
|
|
|
|
</div>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleClose}>Cancel</Button>
|
|
<SubmitButtonWithLoader
|
|
buttonText={BUTTON_TEXT}
|
|
loading={isFormLoading}
|
|
/>
|
|
</DialogActions>
|
|
</Box>
|
|
</Dialog>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ItemForm;
|