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 { useMutation, useQuery } from "@apollo/react-hooks";
-import { Form } from "antd";
+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) => {
+  const handleFinish = async (values) => {
-    console.log("values", 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>

client/src/components/invoice-form/invoice-form.component.jsx

@@ -1,4 +1,12 @@
-import { Button, DatePicker, Form, Input, Statistic, Switch, Upload } from "antd";
+import {
+  Button,
+  DatePicker,
+  Form,
+  Input,
+  Statistic,
+  Switch,
+  Upload,
+} from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
@@ -124,36 +132,18 @@ export default function InvoiceFormComponent({
         <Form.Item
           label={t("invoices.fields.federal_tax_rate")}
           name="federal_tax_rate"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required"),
-            },
-          ]}
         >
           <CurrencyInput />
         </Form.Item>
         <Form.Item
           label={t("invoices.fields.state_tax_rate")}
           name="state_tax_rate"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required"),
-            },
-          ]}
         >
           <CurrencyInput />
         </Form.Item>
         <Form.Item
           label={t("invoices.fields.local_tax_rate")}
           name="local_tax_rate"
-          rules={[
-            {
-              required: true,
-              message: t("general.validation.required"),
-            },
-          ]}
         >
           <CurrencyInput />
         </Form.Item>

client/src/graphql/invoice-lines.queries.js

@@ -0,0 +1,17 @@
+import gql from "graphql-tag";
+
+export const UPDATE_INVOICE_LINE = gql`
+  mutation UPDATE_INVOICE_LINE(
+    $invoicelineId: uuid!
+    $invoiceLine: invoicelines_set_input!
+  ) {
+    update_invoicelines(
+      where: { id: { _eq: $invoicelineId } }
+      _set: $invoiceLine
+    ) {
+      returning {
+        id
+      }
+    }
+  }
+`;

client/src/graphql/invoices.queries.js

@@ -110,3 +110,13 @@ export const QUERY_INVOICE_BY_PK = gql`
     }
   }
 `;
+
+export const UPDATE_INVOICE = gql`
+  mutation UPDATE_INVOICE($invoiceId: uuid!, $invoice: invoices_set_input!) {
+    update_invoices(where: { id: { _eq: $invoiceId } }, _set: $invoice) {
+      returning {
+        id
+      }
+    }
+  }
+`;