BOD-23 Added schema changes for time tickets + redux config for time ticket modal + scaffolding for time ticket modal.

2020-04-14 17:38:05 -07:00
parent 91af10eef2
commit 325a82ac86
27 changed files with 829 additions and 9 deletions
--- a/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
@@ -0,0 +1,150 @@
+import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
+import { Form, Modal, notification, Button } from "antd";
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
+import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.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 { QUERY_EMPLOYEES } from "../../graphql/employees.queries";
+import { GET_JOB_LINES_BY_PK_MINIMAL } from "../../graphql/jobs-lines.queries";
+const mapStateToProps = createStructuredSelector({
+  timeTicketModal: selectTimeTicket,
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("timeTicket")),
+});
+
+function TimeTicketModalContainer({
+  timeTicketModal,
+  toggleModalVisible,
+  bodyshop,
+}) {
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+  const [enterAgain, setEnterAgain] = useState(false);
+  // const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
+
+  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 [loadJobLines, { data: jobLinesData }] = useLazyQuery(
+    GET_JOB_LINES_BY_PK_MINIMAL
+  );
+
+  const handleFinish = (values) => {
+    // insertInvoice({
+    //   variables: {
+    //     invoice: [
+    //       Object.assign({}, values, {
+    //         invoicelines: { data: values.invoicelines },
+    //       }),
+    //     ],
+    //   },
+    // })
+    //   .then((r) => {
+    //     notification["success"]({
+    //       message: t("invoices.successes.created"),
+    //     });
+    //     if (timeTicketModal.actions.refetch)
+    //       timeTicketModal.actions.refetch();
+    //     if (enterAgain) {
+    //       form.resetFields();
+    //     } else {
+    //       toggleModalVisible();
+    //     }
+    //     setEnterAgain(false);
+    //   })
+    //   .catch((error) => {
+    //     setEnterAgain(false);
+    //     notification["error"]({
+    //       message: t("invoices.errors.creating", {
+    //         message: JSON.stringify(error),
+    //       }),
+    //     });
+    //   });
+  };
+
+  const handleCancel = () => {
+    toggleModalVisible();
+  };
+
+  useEffect(() => {
+    if (enterAgain) form.submit();
+  }, [enterAgain, form]);
+
+  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}
+      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}
+        onFinishFailed={() => {
+          setEnterAgain(false);
+          console.log("Finish failed");
+        }}
+        initialValues={{
+          jobid: timeTicketModal.context.jobId || null,
+        }}
+      >
+        <TimeTicketModalComponent
+          form={form}
+          roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
+          employeeAutoCompleteOptions={
+            EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees
+          }
+          responsibilityCenters={bodyshop.md_responsibility_centers || null}
+          loadJobLines={loadJobLines}
+        />
+      </Form>
+      {JSON.stringify(jobLinesData)}
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicketModalContainer);