shoc-frontend/src/pages/workorder/components/Form.js

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;