120 lines
3.6 KiB
JavaScript
120 lines
3.6 KiB
JavaScript
import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
|
|
import { Form, Modal, notification } from "antd";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
|
|
import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
|
|
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
|
|
import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
|
|
import { toggleModalVisible } from "../../redux/modals/modals.actions";
|
|
import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
invoiceEnterModal: selectInvoiceEnterModal,
|
|
bodyshop: selectBodyshop
|
|
});
|
|
const mapDispatchToProps = dispatch => ({
|
|
toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter"))
|
|
});
|
|
|
|
function InvoiceEnterModalContainer({
|
|
invoiceEnterModal,
|
|
toggleModalVisible,
|
|
bodyshop
|
|
}) {
|
|
const [form] = Form.useForm();
|
|
const { t } = useTranslation();
|
|
const linesState = useState([]);
|
|
|
|
const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
|
|
|
|
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
|
|
fetchPolicy: "network-only",
|
|
variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
|
|
skip: !invoiceEnterModal.visible
|
|
});
|
|
|
|
const { data: VendorAutoCompleteData } = useQuery(
|
|
SEARCH_VENDOR_AUTOCOMPLETE,
|
|
{
|
|
fetchPolicy: "network-only",
|
|
skip: !invoiceEnterModal.visible
|
|
}
|
|
);
|
|
|
|
const [loadLines, { data: lineData }] = useLazyQuery(
|
|
GET_JOB_LINES_TO_ENTER_INVOICE,
|
|
{
|
|
fetchPolicy: "network-only"
|
|
}
|
|
);
|
|
|
|
const handleFinish = values => {
|
|
insertInvoice({
|
|
variables: {
|
|
invoice: [
|
|
Object.assign({}, values, {
|
|
invoicelines: { data: values.invoicelines }
|
|
})
|
|
]
|
|
}
|
|
})
|
|
.then(r => {
|
|
notification["success"]({
|
|
message: t("invoices.successes.created")
|
|
});
|
|
toggleModalVisible();
|
|
})
|
|
.catch(error => {
|
|
notification["error"]({
|
|
message: t("invoices.errors.creating", {
|
|
message: JSON.stringify(error)
|
|
})
|
|
});
|
|
});
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
toggleModalVisible();
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title={
|
|
invoiceEnterModal.context && invoiceEnterModal.context.id
|
|
? t("invoices.labels.edit")
|
|
: t("invoices.labels.new")
|
|
}
|
|
width={"90%"}
|
|
visible={invoiceEnterModal.visible}
|
|
okText={t("general.actions.save")}
|
|
onOk={() => form.submit()}
|
|
onCancel={handleCancel}
|
|
destroyOnClose
|
|
>
|
|
<Form onFinish={handleFinish} autoComplete={"off"} form={form}>
|
|
<InvoiceEnterModalComponent
|
|
form={form}
|
|
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
|
|
vendorAutoCompleteOptions={
|
|
VendorAutoCompleteData && VendorAutoCompleteData.vendors
|
|
}
|
|
loadLines={loadLines}
|
|
linesState={linesState}
|
|
lineData={lineData ? lineData.joblines : null}
|
|
responsibilityCenters={bodyshop.md_responsibility_centers || null}
|
|
/>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(InvoiceEnterModalContainer);
|