diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx index 5359c0c85..9382a39ac 100644 --- a/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx +++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx @@ -1,176 +1,116 @@ -import { - Button, - DatePicker, - Form, - Input, - Modal, - Select, - Switch, - Tag -} from "antd"; -import React from "react"; +import { DatePicker, Form, Input, Switch } from "antd"; +import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import CurrencyInput from "../form-items-formatted/currency-form-item.component"; +import JobSearchSelect from "../job-search-select/job-search-select.component"; +import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component"; import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component"; export default function InvoiceEnterModalComponent({ - visible, - invoice, - handleCancel, - handleFinish, - handleRoSelect, + form, roAutoCompleteOptions, - handleVendorSelect, vendorAutoCompleteOptions, lineData, - vendor, - job, - responsibilityCenters + responsibilityCenters, + loadLines }) { const { t } = useTranslation(); - const [form] = Form.useForm(); - const { resetFields } = form; + + const [discount, setDiscount] = useState(0); + + const handleVendorSelect = (props, opt) => { + setDiscount(opt.discount); + }; return ( -
- form.submit()} - okButtonProps={{ htmlType: "submit" }} - onCancel={handleCancel} - > -
- +
+ + { + if (form.getFieldValue("jobid") !== null) { + loadLines({ variables: { id: form.getFieldValue("jobid") } }); } - ]} - > - - - - - - - -
-
- - - - - - - - - - - - -
- - - - - + }} + /> + + + + +
+
+ + + + + + + + + + + + +
+ + ); } diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx index 4c8b72049..227d7d953 100644 --- a/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx +++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx @@ -1,8 +1,10 @@ +import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks"; +import { Form, Modal, notification } from "antd"; import React, { useState } from "react"; -import { notification } from "antd"; -import { useLazyQuery, useQuery, useMutation } from "@apollo/react-hooks"; +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"; @@ -10,8 +12,6 @@ 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"; -import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries"; -import { useTranslation } from "react-i18next"; const mapStateToProps = createStructuredSelector({ invoiceEnterModal: selectInvoiceEnterModal, @@ -26,10 +26,9 @@ function InvoiceEnterModalContainer({ toggleModalVisible, bodyshop }) { + const [form] = Form.useForm(); const { t } = useTranslation(); const linesState = useState([]); - const roSearchState = useState({ text: "", selectedId: null }); - const [roSearch, setRoSearch] = roSearchState; const [insertInvoice] = useMutation(INSERT_NEW_INVOICE); @@ -39,11 +38,6 @@ function InvoiceEnterModalContainer({ skip: !invoiceEnterModal.visible }); - const vendorSearchState = useState({ - text: "", - selectedId: null - }); - const [vendorSearch, setVendorSearch] = vendorSearchState; const { data: VendorAutoCompleteData } = useQuery( SEARCH_VENDOR_AUTOCOMPLETE, { @@ -52,53 +46,33 @@ function InvoiceEnterModalContainer({ } ); - const [loadLines, { called, data: lineData }] = useLazyQuery( + const [loadLines, { data: lineData }] = useLazyQuery( GET_JOB_LINES_TO_ENTER_INVOICE, { - fetchPolicy: "network-only", - variables: { id: roSearch.selectedId } + fetchPolicy: "network-only" } ); - if (roSearch.selectedId) { - if (!called) loadLines(); - } - const handleRoSelect = (value, obj) => { - setRoSearch({ ...roSearch, selectedId: obj.key }); - }; - - const handleVendorSelect = (value, obj) => { - setVendorSearch({ ...vendorSearch, selectedId: obj.key }); - }; - const handleFinish = values => { insertInvoice({ variables: { invoice: [ - Object.assign( - {}, - values, - { jobid: roSearch.selectedId }, - { vendorid: vendorSearch.selectedId }, - { invoicelines: { data: values.invoicelines } } - ) + Object.assign({}, values, { + invoicelines: { data: values.invoicelines } + }) ] } }) .then(r => { - // if (jobLineEditModal.actions.refetch) - // jobLineEditModal.actions.refetch(); - // toggleModalVisible(); notification["success"]({ message: t("invoices.successes.created") }); + toggleModalVisible(); }) .catch(error => { - console.log("error", error); - notification["error"]({ message: t("invoices.errors.creating", { - message: error.message + message: JSON.stringify(error) }) }); }); @@ -109,30 +83,33 @@ function InvoiceEnterModalContainer({ }; return ( - v.id === vendorSearch.selectedId - )[0] - : null - } - job={invoiceEnterModal.context.job || null} - responsibilityCenters={bodyshop.md_responsibility_centers || null} - /> + okText={t("general.actions.save")} + onOk={() => form.submit()} + onCancel={handleCancel} + destroyOnClose + > +
+ + +
); } diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx index 79def467f..31f8a8425 100644 --- a/client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx +++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx @@ -16,6 +16,19 @@ export default function InvoiceEnterModalLinesComponent({ const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 }); + const calculateTotals = () => { + setAmounts({ + invoiceTotal: getFieldsValue().total, + enteredTotal: getFieldsValue("invoicelines").invoicelines + ? getFieldsValue("invoicelines").invoicelines.reduce( + (acc, value) => + acc + (value && value.actual_cost ? value.actual_cost : 0), + 0 + ) + : 0 + }); + }; + return (
@@ -28,7 +41,6 @@ export default function InvoiceEnterModalLinesComponent({ @@ -135,8 +154,10 @@ export default function InvoiceEnterModalLinesComponent({ if (idx === index) { return { ...item, - actual_cost: - parseFloat(e.target.value) * (1 - discount) + actual_cost: !!item.actual_cost + ? item.actual_cost + : parseFloat(e.target.value) * + (1 - discount) }; } return item; @@ -156,26 +177,7 @@ export default function InvoiceEnterModalLinesComponent({ } ]} > - - setAmounts({ - invoiceTotal: getFieldsValue().total, - enteredTotal: getFieldsValue("invoicelines") - .invoicelines - ? getFieldsValue( - "invoicelines" - ).invoicelines.reduce( - (acc, value) => - acc + - (value && value.actual_cost - ? value.actual_cost - : 0), - 0 - ) - : 0 - }) - } - /> + calculateTotals()} /> { remove(field.name); + calculateTotals(); }} />
diff --git a/client/src/components/job-search-select/job-search-select.component.jsx b/client/src/components/job-search-select/job-search-select.component.jsx new file mode 100644 index 000000000..a3801f15e --- /dev/null +++ b/client/src/components/job-search-select/job-search-select.component.jsx @@ -0,0 +1,40 @@ +import { Select } from "antd"; +import React, { useEffect, useState } from "react"; +const { Option } = Select; + +//To be used as a form element only. + +const JobSearchSelect = ({ value, onChange, options, onBlur }) => { + const [option, setOption] = useState(value); + + useEffect(() => { + if (onChange) { + onChange(option); + } + }, [option, onChange]); + + return ( + + ); +}; +export default JobSearchSelect; diff --git a/client/src/components/vendor-search-select/vendor-search-select.component.jsx b/client/src/components/vendor-search-select/vendor-search-select.component.jsx new file mode 100644 index 000000000..ce2bda4ef --- /dev/null +++ b/client/src/components/vendor-search-select/vendor-search-select.component.jsx @@ -0,0 +1,40 @@ +import { Select, Tag } from "antd"; +import React, { useEffect, useState } from "react"; +const { Option } = Select; + +//To be used as a form element only. + +const VendorSearchSelect = ({ value, onChange, options, onSelect }) => { + const [option, setOption] = useState(value); + + useEffect(() => { + if (onChange) { + onChange(option); + } + }, [option, onChange]); + + return ( + + ); +}; +export default VendorSearchSelect; diff --git a/client/src/pages/contract-detail/contract-detail.page.component.jsx b/client/src/pages/contract-detail/contract-detail.page.component.jsx index 83b803681..6e9280a38 100644 --- a/client/src/pages/contract-detail/contract-detail.page.component.jsx +++ b/client/src/pages/contract-detail/contract-detail.page.component.jsx @@ -1,4 +1,4 @@ -import { Button, Typography } from "antd"; +import { Button, Typography, Row, Col } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -22,28 +22,38 @@ export function ContractDetailPage({ const { t } = useTranslation(); return (
- {`Agreement ${(contract && contract.agreementnumber) || - ""}`} - - - - - + + {`Agreement ${(contract && + contract.agreementnumber) || + ""} - ${t((contract && contract.status) || "")}`} + + + + + + + + + + + + +
); }