Migrations for invoices and invoice lines. Added invoice enter modal.

client/src/components/allocations-employee-label/allocations-employee-label.container.jsx

@@ -4,6 +4,7 @@ import { DELETE_ALLOCATION } from "../../graphql/allocations.queries";
 import AllocationsLabelComponent from "./allocations-employee-label.component";
 import { notification } from "antd";
 import { useTranslation } from "react-i18next";
+
 export default function AllocationsLabelContainer({ allocation, refetch }) {
   const [deleteAllocation] = useMutation(DELETE_ALLOCATION);
   const { t } = useTranslation();

client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx

@@ -0,0 +1,71 @@
+import { Modal, Form, Input, InputNumber } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import ResetForm from "../form-items-formatted/reset-form-item.component";
+
+export default function InvoiceEnterModalComponent({
+  visible,
+  invoice,
+  handleCancel,
+  handleSubmit,
+  form
+}) {
+  const { t } = useTranslation();
+  const { getFieldDecorator, isFieldsTouched, resetFields } = form;
+
+  return (
+    <Modal
+      title={
+        invoice && invoice.id
+          ? t("invoice.labels.edit")
+          : t("invoice.labels.new")
+      }
+      visible={visible}
+      okText={t("general.labels.save")}
+      onOk={handleSubmit}
+      onCancel={handleCancel}
+    >
+      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
+      <Form onSubmit={handleSubmit} autoComplete={"off"}>
+        {JSON.stringify(invoice)}
+        {
+          //     <Form.Item label={t("joblines.fields.line_desc")}>
+          //     {getFieldDecorator("line_desc", {
+          //       initialValue: jobLine.line_desc
+          //     })(<Input name="line_desc" />)}
+          //   </Form.Item>
+          //   <Form.Item label={t("joblines.fields.oem_partno")}>
+          //     {getFieldDecorator("oem_partno", {
+          //       initialValue: jobLine.oem_partno
+          //     })(<Input name="oem_partno" />)}
+          //   </Form.Item>
+          //   <Form.Item label={t("joblines.fields.part_type")}>
+          //     {getFieldDecorator("part_type", {
+          //       initialValue: jobLine.part_type
+          //     })(<Input name="part_type" />)}
+          //   </Form.Item>
+          //   <Form.Item label={t("joblines.fields.mod_lbr_ty")}>
+          //     {getFieldDecorator("mod_lbr_ty", {
+          //       initialValue: jobLine.mod_lbr_ty
+          //     })(<Input name="mod_lbr_ty" />)}
+          //   </Form.Item>
+          //   <Form.Item label={t("joblines.fields.op_code_desc")}>
+          //     {getFieldDecorator("op_code_desc", {
+          //       initialValue: jobLine.op_code_desc
+          //     })(<Input name="op_code_desc" />)}
+          //   </Form.Item>
+          //   <Form.Item label={t("joblines.fields.mod_lb_hrs")}>
+          //     {getFieldDecorator("mod_lb_hrs", {
+          //       initialValue: jobLine.mod_lb_hrs
+          //     })(<InputNumber name="mod_lb_hrs" />)}
+          //   </Form.Item>
+          //   <Form.Item label={t("joblines.fields.act_price")}>
+          //     {getFieldDecorator("act_price", {
+          //       initialValue: jobLine.act_price
+          //     })(<InputNumber name="act_price" />)}
+          //   </Form.Item>
+        }
+      </Form>
+    </Modal>
+  );
+}

client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx

@@ -0,0 +1,114 @@
+import { Form, notification } from "antd";
+import React from "react";
+import { useMutation } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  INSERT_NEW_JOB_LINE,
+  UPDATE_JOB_LINE
+} from "../../graphql/jobs-lines.queries";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
+import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
+
+const mapStateToProps = createStructuredSelector({
+  invoiceEnterModal: selectInvoiceEnterModal
+});
+const mapDispatchToProps = dispatch => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter"))
+});
+
+function InvoiceEnterModalContainer({
+  invoiceEnterModal,
+  toggleModalVisible,
+  form
+}) {
+  const { t } = useTranslation();
+  //   const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
+  //   const [updateJobLine] = useMutation(UPDATE_JOB_LINE);
+
+  const handleSubmit = e => {
+    e.preventDefault();
+
+    form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        notification["error"]({
+          message: t("invoices.errors.validation"),
+          description: err.message
+        });
+      }
+      if (!err) {
+        alert("Closing this modal.");
+        toggleModalVisible();
+        // if (!jobLineEditModal.context.id) {
+        //   insertJobLine({
+        //     variables: {
+        //       lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
+        //     }
+        //   })
+        //     .then(r => {
+        //       if (jobLineEditModal.actions.refetch)
+        //         jobLineEditModal.actions.refetch();
+        //       toggleModalVisible();
+        //       notification["success"]({
+        //         message: t("joblines.successes.created")
+        //       });
+        //     })
+        //     .catch(error => {
+        //       notification["error"]({
+        //         message: t("joblines.errors.creating", {
+        //           message: error.message
+        //         })
+        //       });
+        //     });
+        // } else {
+        //   updateJobLine({
+        //     variables: {
+        //       lineId: jobLineEditModal.context.id,
+        //       line: values
+        //     }
+        //   })
+        //     .then(r => {
+        //       notification["success"]({
+        //         message: t("joblines.successes.updated")
+        //       });
+        //     })
+        //     .catch(error => {
+        //       notification["success"]({
+        //         message: t("joblines.errors.updating", {
+        //           message: error.message
+        //         })
+        //       });
+        //     });
+        //   if (jobLineEditModal.actions.refetch)
+        //     jobLineEditModal.actions.refetch();
+        //   toggleModalVisible();
+        // }
+      }
+    });
+  };
+
+  const handleCancel = () => {
+    toggleModalVisible();
+  };
+
+  return (
+    <InvoiceEnterModalComponent
+      visible={invoiceEnterModal.visible}
+      invoice={invoiceEnterModal.context}
+      handleSubmit={handleSubmit}
+      handleCancel={handleCancel}
+      form={form}
+    />
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(
+  Form.create({ name: "InvoiceEnterModalContainer" })(
+    InvoiceEnterModalContainer
+  )
+);

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -34,8 +34,8 @@ function JobLinesUpsertModalContainer({
     form.validateFieldsAndScroll((err, values) => {
       if (err) {
         notification["error"]({
-          message: t("jobs.errors.validationtitle"),
-          description: t("jobs.errors.validation")
+          message: t("joblines.errors.validation"),
+          description: err.message
         });
       }
       if (!err) {

client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  toggleModalVisible,
+  setModalContext
+} from "../../redux/modals/modals.actions";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = dispatch => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")),
+  setInvoiceEnterContext: context =>
+    dispatch(setModalContext({ context: context, modal: "invoiceEnter" }))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(function JobsDetailPliComponent({
+  toggleModalVisible,
+  setInvoiceEnterContext,
+  job
+}) {
+  return (
+    <div>
+      <div
+        onClick={() => {
+          setInvoiceEnterContext({
+            actions: { refetch: null },
+            context: {
+              job
+            }
+          });
+        }}
+      >
+        Enter Invoice
+      </div>
+    </div>
+  );
+});

client/src/components/jobs-detail-pli/jobs-detail-pli.container.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+import JobsDetailPliComponent from "./jobs-detail-pli.component";
+
+export default function JobsDetailPliContainer({ job }) {
+  console.log("job", job);
+  return <JobsDetailPliComponent job={job} />;
+}