Breaking Changes as a part of BOD-63 on invoice enter. WIP for all invoices screen editing + lookup.

2020-05-04 18:07:56 -07:00
parent b7d438a0f0
commit 9d694e6403
12 changed files with 542 additions and 289 deletions
--- a/client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx
+++ b/client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+import {
+  QUERY_INVOICES_BY_VENDOR,
+  QUERY_INVOICE_BY_PK,
+} from "../../graphql/invoices.queries";
+import { useQuery, useLazyQuery } from "@apollo/react-hooks";
+import queryString from "query-string";
+import { useHistory, useLocation } from "react-router-dom";
+import { Table, Input, Form } from "antd";
+import { useTranslation } from "react-i18next";
+import { alphaSort } from "../../utils/sorters";
+import AlertComponent from "../alert/alert.component";
+import { DateFormatter } from "../../utils/DateFormatter";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import InvoiceDetailEditComponent from "./invoice-detail-edit.component";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import moment from "moment";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { createStructuredSelector } from "reselect";
+import { connect } from "react-redux";
+import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
+import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+export function InvoiceDetailEditContainer({ bodyshop }) {
+  const search = queryString.parse(useLocation().search);
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  const { loading, error, data } = useQuery(QUERY_INVOICE_BY_PK, {
+    variables: { invoiceid: search.invoiceid },
+    skip: !!!search.invoiceid,
+  });
+
+  const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
+    fetchPolicy: "network-only",
+    variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
+  });
+
+  const {
+    loading: linesLoading,
+    data: lineData,
+    refetch: loadLines,
+  } = useQuery(GET_JOB_LINES_TO_ENTER_INVOICE, {
+    variables: { id: data && data.invoices_by_pk.jobid },
+    fetchPolicy: "network-only",
+    skip: !!!(data && data.invoices_by_pk.id),
+  });
+
+  const handleFinish = (values) => {
+    console.log("values", values);
+  };
+
+  useEffect(() => {
+    // if (data) {
+    //   loadLines();
+    //   if (lineData) //form.resetFields();
+    // }
+  }, [data, lineData]);
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <LoadingSkeleton loading={loading || linesLoading}>
+      <Form
+        form={form}
+        onFinish={handleFinish}
+        initialValues={
+          data
+            ? {
+                ...data.invoices_by_pk,
+               // invoicelines: [],
+                date: data.invoices_by_pk
+                  ? moment(data.invoices_by_pk.date)
+                  : null,
+              }
+            : { invoicelines: [] }
+        }
+      >
+        <InvoiceDetailEditComponent
+          form={form}
+          roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
+          loadLines={loadLines}
+          lineData={lineData ? lineData.joblines : null}
+          responsibilityCenters={bodyshop.md_responsibility_centers || null}
+        />
+      </Form>
+    </LoadingSkeleton>
+  );
+}
+export default connect(mapStateToProps, null)(InvoiceDetailEditContainer);