BOD-63 Added saving of edited invoices.

client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx

@@ -1,18 +1,21 @@
-import { useQuery } from "@apollo/react-hooks";
-import { Form } from "antd";
+import { useMutation, useQuery } from "@apollo/react-hooks";
+import { Form, Button } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { QUERY_INVOICE_BY_PK } from "../../graphql/invoices.queries";
+import {
+  QUERY_INVOICE_BY_PK,
+  UPDATE_INVOICE,
+} from "../../graphql/invoices.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import InvoiceFormContainer from "../invoice-form/invoice-form.container";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
-import { useTranslation } from "react-i18next";
-
+import { UPDATE_INVOICE_LINE } from "../../graphql/invoice-lines.queries";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -21,14 +24,34 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
   const search = queryString.parse(useLocation().search);
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const [updateInvoice] = useMutation(UPDATE_INVOICE);
+  const [updateInvoiceLine] = useMutation(UPDATE_INVOICE_LINE);
 
   const { loading, error, data } = useQuery(QUERY_INVOICE_BY_PK, {
     variables: { invoiceid: search.invoiceid },
     skip: !!!search.invoiceid,
   });
 
-  const handleFinish = (values) => {
-    console.log("values", values);
+  const handleFinish = async (values) => {
+    const { invoicelines, upload, ...invoice } = values;
+    const updates = [];
+    console.log("Start");
+    updates.push(
+      updateInvoice({
+        variables: { invoiceId: search.invoiceid, invoice: invoice },
+      })
+    );
+
+    invoicelines.forEach((il) => {
+      delete il.__typename;
+      updates.push(
+        updateInvoiceLine({
+          variables: { invoicelineId: il.id, invoiceLine: il },
+        })
+      );
+    });
+
+    await Promise.all(updates);
   };
 
   useEffect(() => {
@@ -38,7 +61,8 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
   }, [form, search.invoiceid]);
 
   if (error) return <AlertComponent message={error.message} type="error" />;
-  if (!!!search.invoiceid) return <div>{t("invoices.labels.noneselected")}</div>;
+  if (!!!search.invoiceid)
+    return <div>{t("invoices.labels.noneselected")}</div>;
   return (
     <LoadingSkeleton loading={loading}>
       <Form
@@ -73,6 +97,9 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
             : {}
         }
       >
+        <Button htmlType="submit" type="primary">
+          {t("general.actions.save")}
+        </Button>
         <InvoiceFormContainer form={form} hideVendor />
       </Form>
     </LoadingSkeleton>