bodyshop/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx

import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
import { Button, Form, Modal, notification } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
import { GET_LINE_TICKET_BY_PK } from "../../graphql/jobs-lines.queries";
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import {
  INSERT_NEW_TIME_TICKET,
  UPDATE_TIME_TICKET,
} from "../../graphql/timetickets.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectTimeTicket } from "../../redux/modals/modals.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import TimeTicketModalComponent from "./time-ticket-modal.component";
import moment from "moment";

const mapStateToProps = createStructuredSelector({
  timeTicketModal: selectTimeTicket,
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  toggleModalVisible: () => dispatch(toggleModalVisible("timeTicket")),
});

export function TimeTicketModalContainer({
  timeTicketModal,
  toggleModalVisible,
  bodyshop,
}) {
  const [form] = Form.useForm();
  const { t } = useTranslation();
  const [enterAgain, setEnterAgain] = useState(false);
  const [insertTicket] = useMutation(INSERT_NEW_TIME_TICKET);
  const [updateTicket] = useMutation(UPDATE_TIME_TICKET);
  const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
    variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
    skip: !timeTicketModal.visible,
  });
  const { data: EmployeeAutoCompleteData } = useQuery(QUERY_EMPLOYEES, {
    skip: !timeTicketModal.visible,
  });
  const [loadLineTicketData, { data: lineTicketData }] = useLazyQuery(
    GET_LINE_TICKET_BY_PK
  );

  const handleFinish = (values) => {
    if (timeTicketModal.context.id) {
      updateTicket({
        variables: {
          timeticketId: timeTicketModal.context.id,
          timeticket: values,
        },
      })
        .then(handleMutationSuccess)
        .catch(handleMutationError);
    } else {
      insertTicket({
        variables: {
          timeTicketInput: [values],
        },
      })
        .then(handleMutationSuccess)
        .catch(handleMutationError);
    }
  };

  const handleMutationSuccess = (response) => {
    notification["success"]({
      message: t("timetickets.successes.created"),
    });
    if (timeTicketModal.actions.refetch) timeTicketModal.actions.refetch();
    if (enterAgain) {
      form.resetFields();
    } else {
      toggleModalVisible();
    }
    setEnterAgain(false);
  };

  const handleMutationError = (error) => {
    setEnterAgain(false);
    notification["error"]({
      message: t("timetickets.errors.creating", {
        message: JSON.stringify(error),
      }),
    });
  };

  const handleCancel = () => {
    toggleModalVisible();
  };

  useEffect(() => {
    if (enterAgain) form.submit();
  }, [enterAgain, form]);

  useEffect(() => {
    if (timeTicketModal.visible) form.resetFields();
  }, [timeTicketModal.visible, form]);

  const handleFieldsChange = (changedFields, allFields) => {
    if (!!changedFields.employeeid && !!EmployeeAutoCompleteData) {
      const emps = EmployeeAutoCompleteData.employees.filter(
        (e) => e.id === changedFields.employeeid
      );
      form.setFieldsValue({
        cost_center: emps.length > 0 ? emps[0].cost_center : "",
        ciecacode: Object.keys(
          bodyshop.md_responsibility_centers.defaults
        ).find(
          (key) =>
            bodyshop.md_responsibility_centers.defaults[key] ===
            emps[0].cost_center
        ),
      });
    }
    if (!!changedFields.cost_center && !!EmployeeAutoCompleteData) {
      form.setFieldsValue({
        ciecacode: Object.keys(
          bodyshop.md_responsibility_centers.defaults
        ).find(
          (key) =>
            bodyshop.md_responsibility_centers.defaults[key] ===
            changedFields.cost_center
        ),
      });
    }
  };

  return (
    <Modal
      title={
        timeTicketModal.context && timeTicketModal.context.id
          ? t("timetickets.labels.edit")
          : t("timetickets.labels.new")
      }
      width={"90%"}
      visible={timeTicketModal.visible}
      okText={t("general.actions.save")}
      onOk={() => form.submit()}
      onCancel={handleCancel}
      forceRender
      afterClose={() => form.resetFields()}
      footer={
        <span>
          <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
          <Button onClick={() => form.submit()}>
            {t("general.actions.save")}
          </Button>
          {timeTicketModal.context && timeTicketModal.context.id ? null : (
            <Button
              type="primary"
              onClick={() => {
                setEnterAgain(true);
              }}
            >
              {t("general.actions.saveandnew")}
            </Button>
          )}
        </span>
      }
      destroyOnClose
    >
      <Form
        onFinish={handleFinish}
        autoComplete={"off"}
        form={form}
        initialValues={
          timeTicketModal.context.timeticket
            ? {
                ...timeTicketModal.context.timeticket,
                date: timeTicketModal.context.timeticket.date
                  ? moment(timeTicketModal.context.date)
                  : null,
              }
            : { jobid: timeTicketModal.context.jobId || null }
        }
        onValuesChange={handleFieldsChange}
      >
        <TimeTicketModalComponent
          form={form}
          roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
          employeeAutoCompleteOptions={
            EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
          }
          responsibilityCenters={bodyshop.md_responsibility_centers || null}
          loadLineTicketData={loadLineTicketData}
          lineTicketData={
            lineTicketData ? lineTicketData : { joblines: [], timetickets: [] }
          }
        />
      </Form>
    </Modal>
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TimeTicketModalContainer);