342 lines
12 KiB
JavaScript
342 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 { getContacts, getCategories, getLocations, getUsers } 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 [priorities, setPriorities] = useState([
|
||
|
|
{ text: "Sev 1", value: "Sev 1" },
|
||
|
|
{ text: "Sev 2", value: "Sev 2" },
|
||
|
|
{ text: "Sev 3", value: "Sev 3" },
|
||
|
|
{ text: "Sev 4", value: "Sev 4" },
|
||
|
|
{ text: "Sev 5", value: "Sev 5" }
|
||
|
|
]);
|
||
|
|
const [locations, setLocations] = useState([]);
|
||
|
|
const [users, setUsers] = useState([]);
|
||
|
|
const [categories, setCategories] = 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(() => {
|
||
|
|
getUsers().then((response) => { handleSuccess(response, setUsers) });
|
||
|
|
getContacts().then((response) => { handleSuccess(response, setContacts) });
|
||
|
|
getLocations().then((response) => { handleSuccess(response, setLocations) });
|
||
|
|
getCategories().then((response) => { handleSuccess(response, setCategories) });
|
||
|
|
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
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}>Work Order</Typography>
|
||
|
|
<IconButton onClick={handleClose} style={{ marginLeft: "auto" }}>
|
||
|
|
<CloseIcon />
|
||
|
|
</IconButton>
|
||
|
|
</DialogTitle>
|
||
|
|
<Box component="form" onSubmit={handleSubmit} noValidate>
|
||
|
|
<DialogContent>
|
||
|
|
<DialogContentText className={classes.title}>
|
||
|
|
{PRIMARY_TEXT}
|
||
|
|
</DialogContentText>
|
||
|
|
<div>
|
||
|
|
<InputLabel id="PO-label">WO ID:</InputLabel>
|
||
|
|
<TextField
|
||
|
|
id="WOID"
|
||
|
|
label="WO ID:"
|
||
|
|
variant="outlined"
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
margin="normal"
|
||
|
|
required
|
||
|
|
name="workerOrderNumber"
|
||
|
|
value={values.workerOrderNumber}
|
||
|
|
onChange={(event) => {
|
||
|
|
const { value } = event.target;
|
||
|
|
handleChangeKV("workerOrderNumber", value);
|
||
|
|
}}
|
||
|
|
error={!!errors.workerOrderNumber}
|
||
|
|
helperText={errors.workerOrderNumber}
|
||
|
|
/>
|
||
|
|
<InputLabel id="PO-label">Work Order Title:</InputLabel>
|
||
|
|
<TextField
|
||
|
|
id="WorkerOrderTitle"
|
||
|
|
label="Work Order Title:"
|
||
|
|
variant="outlined"
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
margin="normal"
|
||
|
|
required
|
||
|
|
name="workerOrderTitle"
|
||
|
|
value={values.workerOrderTitle}
|
||
|
|
onChange={(event) => {
|
||
|
|
const { value } = event.target;
|
||
|
|
handleChangeKV("workerOrderTitle", value);
|
||
|
|
}}
|
||
|
|
error={!!errors.workerOrderTitle}
|
||
|
|
helperText={errors.workerOrderTitle}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<InputLabel id="description-label">Description</InputLabel>
|
||
|
|
<TextField
|
||
|
|
id="Description"
|
||
|
|
label="Description"
|
||
|
|
variant="outlined"
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
margin="normal"
|
||
|
|
required
|
||
|
|
name="description"
|
||
|
|
value={values.description}
|
||
|
|
onChange={(event) => {
|
||
|
|
const { value } = event.target;
|
||
|
|
handleChangeKV("description", value);
|
||
|
|
}}
|
||
|
|
error={!!errors.description}
|
||
|
|
helperText={errors.description}
|
||
|
|
/>
|
||
|
|
</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="Wo-select-date-label">Due Date*</InputLabel>
|
||
|
|
<TextField
|
||
|
|
id="DueDate"
|
||
|
|
label=""
|
||
|
|
variant="outlined"
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
margin="normal"
|
||
|
|
required
|
||
|
|
name="dueDate"
|
||
|
|
type="date"
|
||
|
|
value={values.dueDate}
|
||
|
|
onChange={(event) => {
|
||
|
|
const { value } = event.target;
|
||
|
|
handleChangeKV("dueDate", value);
|
||
|
|
}}
|
||
|
|
error={!!errors.dueDate}
|
||
|
|
helperText={errors.dueDate}
|
||
|
|
/>
|
||
|
|
</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("workOrderContacts", value?.toString());
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{contacts.map((s, i) => (
|
||
|
|
<MenuItem value={s.id} key={i}>
|
||
|
|
{s.name}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<InputLabel id="Wo-select-label">Assigned To:*</InputLabel>
|
||
|
|
<Select
|
||
|
|
labelId="AssignTo-label"
|
||
|
|
id="AssignTo"
|
||
|
|
fullWidth
|
||
|
|
value={values.assignTo}
|
||
|
|
label=""
|
||
|
|
onChange={(event) => {
|
||
|
|
const { value } = event.target;
|
||
|
|
handleChangeKV("assignTo", value);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{users.map((s, i) => (
|
||
|
|
<MenuItem value={s.id} key={i}>
|
||
|
|
{s.firstName}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<InputLabel id="Wo-select-label">Priority:*</InputLabel>
|
||
|
|
<Select
|
||
|
|
labelId="Priority-label"
|
||
|
|
id="Priority"
|
||
|
|
fullWidth
|
||
|
|
value={values.priority}
|
||
|
|
label=""
|
||
|
|
onChange={(event) => {
|
||
|
|
const { value } = event.target;
|
||
|
|
handleChangeKV("priority", value);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{priorities.map((s, i) => (
|
||
|
|
<MenuItem value={s.value} key={i}>
|
||
|
|
{s.text}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<InputLabel id="Wo-select-label">Location:*</InputLabel>
|
||
|
|
<Select
|
||
|
|
id="Location"
|
||
|
|
fullWidth
|
||
|
|
value={values.locationId}
|
||
|
|
label=""
|
||
|
|
onChange={(event) => {
|
||
|
|
const { value } = event.target;
|
||
|
|
handleChangeKV("locationId", value);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{locations.map((s, i) => (
|
||
|
|
<MenuItem value={s.id} key={i}>
|
||
|
|
{s.name}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<InputLabel id="Wo-select-label">Categories:*</InputLabel>
|
||
|
|
<Select
|
||
|
|
labelId="categories-label"
|
||
|
|
id="categories"
|
||
|
|
fullWidth
|
||
|
|
value={values.categoryId}
|
||
|
|
label=""
|
||
|
|
onChange={(event) => {
|
||
|
|
const { value } = event.target;
|
||
|
|
handleChangeKV("workOrderCategories", value?.toString());
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{categories.map((s, i) => (
|
||
|
|
<MenuItem value={s.id} key={i}>
|
||
|
|
{s.name}
|
||
|
|
</MenuItem>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</DialogContent>
|
||
|
|
<DialogActions>
|
||
|
|
<Button onClick={handleClose}>Cancel</Button>
|
||
|
|
<SubmitButtonWithLoader
|
||
|
|
buttonText={BUTTON_TEXT}
|
||
|
|
loading={isFormLoading}
|
||
|
|
/>
|
||
|
|
</DialogActions>
|
||
|
|
</Box>
|
||
|
|
</Dialog>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ItemForm;
|