387 lines
14 KiB
JavaScript
387 lines
14 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';
|
||
import moment from 'moment';
|
||
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 [workOrderTypes, setWorkOrderTypes] = useState([
|
||
{ text: "PM", value: "PM" },
|
||
{ text: "Reactive", value: "Reactive" },
|
||
{ text: "Project", value: "Project" },
|
||
]);
|
||
const workOrderTitles = [
|
||
"GENERIC PLUMBING SYSTEMS – ANNUAL",
|
||
"GENERIC TANK/TANKLESS WATER HEATER ANNUAL",
|
||
"BACKFLOW PREVENTER ANNUAL PM",
|
||
"GENERIC PUMPING SYSTEMS - ANNUAL",
|
||
"ANNUAL PRESSURE REDUCING VALVE INSPECTION",
|
||
"PLUMBING JANITORIAL SCRUBBER PIT CLEANOUT 13W",
|
||
];
|
||
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 });
|
||
};
|
||
|
||
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}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Select
|
||
labelId="work-order-title-select-label"
|
||
id="work-order-title-select"
|
||
fullWidth
|
||
value={values.workOrderTitle || ''}
|
||
onChange={(event) => {
|
||
const { value } = event.target;
|
||
handleChangeKV("workerOrderTitle", value);
|
||
}}
|
||
label="Work Order Title"
|
||
>
|
||
{workOrderTitles.map((title, index) => (
|
||
<MenuItem value={title} key={index}>
|
||
{title}
|
||
</MenuItem>
|
||
))}
|
||
</Select>
|
||
<InputLabel id="PO-label">Work Order Title:</InputLabel>
|
||
<TextField
|
||
id="WorkerOrderTitle"
|
||
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"
|
||
defaultValue={ moment(values.formattedDueDate).format("YYYY-MM-DD")}
|
||
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="work-order-type-select-label">Work Order Type:*</InputLabel>
|
||
<Select
|
||
labelId="work-order-type-select-label"
|
||
id="work-order-type-select"
|
||
value={values.workOrderType}
|
||
fullWidth
|
||
onChange={(event) => {
|
||
const { value } = event.target;
|
||
handleChangeKV("workOrderType", value);
|
||
}}
|
||
label="Work Order Type"
|
||
>
|
||
{workOrderTypes.map((type, index) => (
|
||
<MenuItem value={type.value} key={index}>
|
||
{type.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;
|