125 lines
4.1 KiB
JavaScript
125 lines
4.1 KiB
JavaScript
import { useMutation, useQuery } from "@apollo/react-hooks";
|
|
import { Form, Button } from "antd";
|
|
import moment from "moment";
|
|
import queryString from "query-string";
|
|
import React, { useEffect, useState } 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,
|
|
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 { UPDATE_INVOICE_LINE } from "../../graphql/invoice-lines.queries";
|
|
import JobDocumentsGallery from "../jobs-documents-gallery/jobs-documents-gallery.container";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
|
|
export function InvoiceDetailEditContainer({ bodyshop }) {
|
|
const search = queryString.parse(useLocation().search);
|
|
const { t } = useTranslation();
|
|
const [form] = Form.useForm();
|
|
const [updateLoading, setUpdateLoading] = useState(false);
|
|
const [updateInvoice] = useMutation(UPDATE_INVOICE);
|
|
const [updateInvoiceLine] = useMutation(UPDATE_INVOICE_LINE);
|
|
|
|
const { loading, error, data, refetch } = useQuery(QUERY_INVOICE_BY_PK, {
|
|
variables: { invoiceid: search.invoiceid },
|
|
skip: !!!search.invoiceid,
|
|
});
|
|
|
|
const handleFinish = async (values) => {
|
|
setUpdateLoading(true);
|
|
const { invoicelines, upload, ...invoice } = values;
|
|
const updates = [];
|
|
updates.push(
|
|
updateInvoice({
|
|
variables: { invoiceId: search.invoiceid, invoice: invoice },
|
|
})
|
|
);
|
|
|
|
invoicelines.forEach((il) => {
|
|
delete il.__typename;
|
|
updates.push(
|
|
updateInvoiceLine({
|
|
variables: {
|
|
invoicelineId: il.id,
|
|
invoiceLine: {
|
|
...il,
|
|
joblineid: il.joblineid === "noline" ? null : il.joblineid,
|
|
},
|
|
},
|
|
})
|
|
);
|
|
});
|
|
|
|
await Promise.all(updates);
|
|
setUpdateLoading(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (search.invoiceid) {
|
|
form.resetFields();
|
|
}
|
|
}, [form, search.invoiceid]);
|
|
|
|
if (error) return <AlertComponent message={error.message} type="error" />;
|
|
if (!!!search.invoiceid)
|
|
return <div>{t("invoices.labels.noneselected")}</div>;
|
|
return (
|
|
<LoadingSkeleton loading={loading}>
|
|
<Form
|
|
form={form}
|
|
onFinish={handleFinish}
|
|
initialValues={
|
|
data
|
|
? {
|
|
...data.invoices_by_pk,
|
|
|
|
invoicelines: data.invoices_by_pk.invoicelines.map((i) => {
|
|
return {
|
|
...i,
|
|
joblineid: !!i.joblineid ? i.joblineid : "noline",
|
|
applicable_taxes: {
|
|
federal:
|
|
(i.applicable_taxes && i.applicable_taxes.federal) ||
|
|
false,
|
|
state:
|
|
(i.applicable_taxes && i.applicable_taxes.state) ||
|
|
false,
|
|
local:
|
|
(i.applicable_taxes && i.applicable_taxes.local) ||
|
|
false,
|
|
},
|
|
};
|
|
}),
|
|
date: data.invoices_by_pk
|
|
? moment(data.invoices_by_pk.date)
|
|
: null,
|
|
}
|
|
: {}
|
|
}
|
|
>
|
|
<Button htmlType="submit" loading={updateLoading} type="primary">
|
|
{t("general.actions.save")}
|
|
</Button>
|
|
<InvoiceFormContainer form={form} invoiceEdit />
|
|
<JobDocumentsGallery
|
|
jobId={data ? data.invoices_by_pk.jobid : null}
|
|
invoiceId={search.invoiceid}
|
|
documentsList={data ? data.invoices_by_pk.documents : []}
|
|
invoicesCallback={refetch}
|
|
/>
|
|
</Form>
|
|
</LoadingSkeleton>
|
|
);
|
|
}
|
|
export default connect(mapStateToProps, null)(InvoiceDetailEditContainer);
|