Refactored to use invoice form for modal + detail edit page. BOD-634
This commit is contained in:
@@ -1,136 +0,0 @@
|
||||
import { DatePicker, Form, Input, Switch, Tag } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
|
||||
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
||||
import InvoiceEnterModalLinesComponent from "../invoice-enter-modal/invoice-enter-modal.lines.component";
|
||||
import JobSearchSelect from "../job-search-select/job-search-select.component";
|
||||
|
||||
export default function InvoiceDetailEditComponent({
|
||||
form,
|
||||
roAutoCompleteOptions,
|
||||
loadLines,
|
||||
lineData,
|
||||
responsibilityCenters,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
|
||||
const { getFieldsValue } = form;
|
||||
|
||||
const calculateTotals = () => {
|
||||
setAmounts({
|
||||
invoiceTotal: getFieldsValue().total || 0,
|
||||
enteredTotal: getFieldsValue("invoicelines").invoicelines
|
||||
? getFieldsValue("invoicelines").invoicelines.reduce(
|
||||
(acc, value) =>
|
||||
acc + (value && value.actual_cost ? value.actual_cost : 0),
|
||||
0
|
||||
)
|
||||
: 0,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Form.Item
|
||||
name="jobid"
|
||||
label={t("invoices.fields.ro_number")}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<JobSearchSelect
|
||||
options={roAutoCompleteOptions}
|
||||
onBlur={() => {
|
||||
if (form.getFieldValue("jobid") !== null) {
|
||||
//loadLines({ variables: { id: form.getFieldValue("jobid") } });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Form.Item
|
||||
label={t("invoices.fields.invoice_number")}
|
||||
name="invoice_number"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("invoices.fields.date")}
|
||||
name="date"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("invoices.fields.is_credit_memo")}
|
||||
name="is_credit_memo"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("invoices.fields.total")}
|
||||
name="total"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<InvoiceEnterModalLinesComponent
|
||||
lineData={lineData}
|
||||
discount={0.1} //TODO Derive the actual discount from the vendor.
|
||||
form={form}
|
||||
responsibilityCenters={responsibilityCenters}
|
||||
calculateTotals={calculateTotals}
|
||||
/>
|
||||
|
||||
<Form.Item name="upload" label="Upload">
|
||||
<DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
|
||||
</Form.Item>
|
||||
{t("invoicelines.labels.entered")}
|
||||
<CurrencyFormatter>{amounts.enteredTotal || 0}</CurrencyFormatter>
|
||||
|
||||
{amounts.invoiceTotal - amounts.enteredTotal === 0 ? (
|
||||
<Tag color="green">{t("invoicelines.labels.reconciled")}</Tag>
|
||||
) : (
|
||||
<Tag color="red">
|
||||
{t("invoicelines.labels.unreconciled")}:
|
||||
<CurrencyFormatter>
|
||||
{amounts.invoiceTotal - amounts.enteredTotal}
|
||||
</CurrencyFormatter>
|
||||
</Tag>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
//console.log(form.getFieldsValue());
|
||||
form.resetFields();
|
||||
}}
|
||||
>
|
||||
a
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -8,12 +8,10 @@ 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 { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
|
||||
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.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 InvoiceDetailEditComponent from "./invoice-detail-edit.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
@@ -29,35 +27,19 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
|
||||
skip: !!!search.invoiceid,
|
||||
});
|
||||
|
||||
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
|
||||
fetchPolicy: "network-only",
|
||||
variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
|
||||
});
|
||||
|
||||
const {
|
||||
loading: linesLoading,
|
||||
data: lineData,
|
||||
refetch: loadLines,
|
||||
} = useQuery(GET_JOB_LINES_TO_ENTER_INVOICE, {
|
||||
variables: { id: data && data.invoices_by_pk.jobid },
|
||||
fetchPolicy: "network-only",
|
||||
skip: !!!(data && data.invoices_by_pk.id),
|
||||
});
|
||||
|
||||
const handleFinish = (values) => {
|
||||
console.log("values", values);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// if (data) {
|
||||
// loadLines();
|
||||
// if (lineData) //form.resetFields();
|
||||
// }
|
||||
}, [data, lineData]);
|
||||
if (search.invoiceid) {
|
||||
form.resetFields();
|
||||
}
|
||||
}, [form, search.invoiceid]);
|
||||
|
||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||
return (
|
||||
<LoadingSkeleton loading={loading || linesLoading}>
|
||||
<LoadingSkeleton loading={loading}>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={handleFinish}
|
||||
@@ -78,13 +60,7 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<InvoiceDetailEditComponent
|
||||
form={form}
|
||||
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
|
||||
loadLines={loadLines}
|
||||
lineData={lineData ? lineData.joblines : null}
|
||||
responsibilityCenters={bodyshop.md_responsibility_centers || null}
|
||||
/>
|
||||
<InvoiceFormContainer form={form} hideVendor />
|
||||
</Form>
|
||||
</LoadingSkeleton>
|
||||
);
|
||||
|
||||
@@ -1,61 +1,27 @@
|
||||
import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
|
||||
import { Form, Modal, notification, Button } from "antd";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useMutation } from "@apollo/react-hooks";
|
||||
import { Button, Form, Modal, notification } from "antd";
|
||||
import React, { useEffect, 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";
|
||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||
import InvoiceFormContainer from "../invoice-form/invoice-form.container";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
invoiceEnterModal: selectInvoiceEnterModal,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")),
|
||||
setInvoiceEnterContext: (context) =>
|
||||
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
|
||||
});
|
||||
|
||||
function InvoiceEnterModalContainer({
|
||||
invoiceEnterModal,
|
||||
toggleModalVisible,
|
||||
bodyshop,
|
||||
setInvoiceEnterContext,
|
||||
}) {
|
||||
function InvoiceEnterModalContainer({ invoiceEnterModal, toggleModalVisible }) {
|
||||
const [form] = Form.useForm();
|
||||
const { t } = useTranslation();
|
||||
const [enterAgain, setEnterAgain] = useState(false);
|
||||
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: {
|
||||
@@ -107,11 +73,7 @@ function InvoiceEnterModalContainer({
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
invoiceEnterModal.context && invoiceEnterModal.context.id
|
||||
? t("invoices.labels.edit")
|
||||
: t("invoices.labels.new")
|
||||
}
|
||||
title={t("invoices.labels.new")}
|
||||
width={"90%"}
|
||||
visible={invoiceEnterModal.visible}
|
||||
okText={t("general.actions.save")}
|
||||
@@ -153,16 +115,7 @@ function InvoiceEnterModalContainer({
|
||||
null,
|
||||
}}
|
||||
>
|
||||
<InvoiceEnterModalComponent
|
||||
form={form}
|
||||
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
|
||||
vendorAutoCompleteOptions={
|
||||
VendorAutoCompleteData && VendorAutoCompleteData.vendors
|
||||
}
|
||||
loadLines={loadLines}
|
||||
lineData={lineData ? lineData.joblines : null}
|
||||
responsibilityCenters={bodyshop.md_responsibility_centers || null}
|
||||
/>
|
||||
<InvoiceFormContainer form={form} />
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
@@ -1,172 +0,0 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Button, Form, Input, Select } from "antd";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
||||
import InvoiceLineSearchSelect from "../invoice-line-search-select/invoice-line-search-select.component";
|
||||
|
||||
export default function InvoiceEnterModalLinesComponent({
|
||||
lineData,
|
||||
discount,
|
||||
form,
|
||||
responsibilityCenters,
|
||||
calculateTotals,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { setFieldsValue, getFieldsValue } = form;
|
||||
console.log("calculateTotals", calculateTotals);
|
||||
return (
|
||||
<div>
|
||||
<Form.List name="invoicelines">
|
||||
{(fields, { add, remove }) => {
|
||||
console.log("fields", fields);
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item required={false} key={field.key}>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Form.Item
|
||||
label={t("invoicelines.fields.jobline")}
|
||||
key={`${index}joblinename`}
|
||||
name={[field.name, "joblineid"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InvoiceLineSearchSelect
|
||||
options={lineData}
|
||||
onBlur={null}
|
||||
onSelect={(value, opt) => {
|
||||
setFieldsValue({
|
||||
invoicelines: getFieldsValue([
|
||||
"invoicelines",
|
||||
]).invoicelines.map((item, idx) => {
|
||||
if (idx === index) {
|
||||
return {
|
||||
...item,
|
||||
line_desc: opt.line_desc,
|
||||
actual_price: opt.cost,
|
||||
cost_center: opt.part_type
|
||||
? responsibilityCenters.defaults[
|
||||
opt.part_type
|
||||
] || null
|
||||
: null,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
}),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("invoicelines.fields.line_desc")}
|
||||
key={`${index}line_desc`}
|
||||
name={[field.name, "line_desc"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("invoicelines.fields.actual")}
|
||||
key={`${index}actual_price`}
|
||||
name={[field.name, "actual_price"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput
|
||||
onBlur={(e) => {
|
||||
setFieldsValue({
|
||||
invoicelines: getFieldsValue(
|
||||
"invoicelines"
|
||||
).invoicelines.map((item, idx) => {
|
||||
if (idx === index) {
|
||||
return {
|
||||
...item,
|
||||
actual_cost: !!item.actual_cost
|
||||
? item.actual_cost
|
||||
: parseFloat(e.target.value) *
|
||||
(1 - discount),
|
||||
};
|
||||
}
|
||||
return item;
|
||||
}),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("invoicelines.fields.actual_cost")}
|
||||
key={`${index}actual_cost`}
|
||||
name={[field.name, "actual_cost"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput
|
||||
onBlur={() => {
|
||||
calculateTotals();
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("invoicelines.fields.cost_center")}
|
||||
key={`${index}cost_center`}
|
||||
name={[field.name, "cost_center"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select style={{ width: "150px" }}>
|
||||
{responsibilityCenters.costs.map((item) => (
|
||||
<Select.Option key={item}>{item}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
calculateTotals();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("invoicelines.actions.newline")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,38 +1,25 @@
|
||||
import { DatePicker, Form, Input, Switch, Tag } from "antd";
|
||||
import { DatePicker, Form, Input, Switch } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
|
||||
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";
|
||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
import InvoiceFormLines from "./invoice-form.lines.component";
|
||||
|
||||
export default function InvoiceEnterModalComponent({
|
||||
export default function InvoiceFormComponent({
|
||||
form,
|
||||
roAutoCompleteOptions,
|
||||
vendorAutoCompleteOptions,
|
||||
lineData,
|
||||
responsibilityCenters,
|
||||
loadLines,
|
||||
hideVendor,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [discount, setDiscount] = useState(0);
|
||||
const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
|
||||
const { getFieldsValue } = form;
|
||||
const calculateTotals = () => {
|
||||
setAmounts({
|
||||
invoiceTotal: getFieldsValue().total || 0,
|
||||
enteredTotal: getFieldsValue("invoicelines").invoicelines
|
||||
? getFieldsValue("invoicelines").invoicelines.reduce(
|
||||
(acc, value) =>
|
||||
acc + (value && value.actual_cost ? value.actual_cost : 0),
|
||||
0
|
||||
)
|
||||
: 0,
|
||||
});
|
||||
};
|
||||
|
||||
const handleVendorSelect = (props, opt) => {
|
||||
setDiscount(opt.discount);
|
||||
};
|
||||
@@ -62,6 +49,7 @@ export default function InvoiceEnterModalComponent({
|
||||
<Form.Item
|
||||
label={t("invoices.fields.vendor")}
|
||||
name="vendorid"
|
||||
style={{ display: hideVendor ? "none" : null }}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
@@ -120,12 +108,11 @@ export default function InvoiceEnterModalComponent({
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<InvoiceEnterModalLinesComponent
|
||||
<InvoiceFormLines
|
||||
lineData={lineData}
|
||||
discount={discount}
|
||||
form={form}
|
||||
responsibilityCenters={responsibilityCenters}
|
||||
calculateTotals={calculateTotals}
|
||||
/>
|
||||
|
||||
<Form.Item name="upload" label="Upload">
|
||||
@@ -137,22 +124,8 @@ export default function InvoiceEnterModalComponent({
|
||||
console.log(form.getFieldsValue());
|
||||
}}
|
||||
>
|
||||
a
|
||||
Get Field Values
|
||||
</button>
|
||||
|
||||
{t("invoicelines.labels.entered")}
|
||||
<CurrencyFormatter>{amounts.enteredTotal || 0}</CurrencyFormatter>
|
||||
|
||||
{amounts.invoiceTotal - amounts.enteredTotal === 0 ? (
|
||||
<Tag color="green">{t("invoicelines.labels.reconciled")}</Tag>
|
||||
) : (
|
||||
<Tag color="red">
|
||||
{t("invoicelines.labels.unreconciled")}:
|
||||
<CurrencyFormatter>
|
||||
{amounts.invoiceTotal - amounts.enteredTotal}
|
||||
</CurrencyFormatter>
|
||||
</Tag>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useLazyQuery, useQuery } from "@apollo/react-hooks";
|
||||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
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 { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import InvoiceFormComponent from "./invoice-form.component";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
|
||||
export function InvoiceFormContainer({ bodyshop, form, hideVendor }) {
|
||||
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
|
||||
variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
|
||||
});
|
||||
|
||||
const { data: VendorAutoCompleteData } = useQuery(SEARCH_VENDOR_AUTOCOMPLETE);
|
||||
|
||||
const [loadLines, { data: lineData }] = useLazyQuery(
|
||||
GET_JOB_LINES_TO_ENTER_INVOICE
|
||||
);
|
||||
|
||||
return (
|
||||
<InvoiceFormComponent
|
||||
form={form}
|
||||
hideVendor={hideVendor}
|
||||
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
|
||||
vendorAutoCompleteOptions={
|
||||
VendorAutoCompleteData && VendorAutoCompleteData.vendors
|
||||
}
|
||||
loadLines={loadLines}
|
||||
lineData={lineData ? lineData.joblines : null}
|
||||
responsibilityCenters={bodyshop.md_responsibility_centers || null}
|
||||
/>
|
||||
);
|
||||
}
|
||||
export default connect(mapStateToProps, null)(InvoiceFormContainer);
|
||||
@@ -0,0 +1,162 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Button, Form, Input, Select } from "antd";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
||||
import InvoiceLineSearchSelect from "../invoice-line-search-select/invoice-line-search-select.component";
|
||||
|
||||
export default function InvoiceEnterModalLinesComponent({
|
||||
lineData,
|
||||
discount,
|
||||
form,
|
||||
responsibilityCenters,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { setFieldsValue, getFieldsValue } = form;
|
||||
|
||||
return (
|
||||
<Form.List name="invoicelines">
|
||||
{(fields, { add, remove }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item required={false} key={field.key}>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Form.Item
|
||||
label={t("invoicelines.fields.jobline")}
|
||||
key={`${index}joblinename`}
|
||||
name={[field.name, "joblineid"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InvoiceLineSearchSelect
|
||||
options={lineData}
|
||||
onBlur={null}
|
||||
onSelect={(value, opt) => {
|
||||
setFieldsValue({
|
||||
invoicelines: getFieldsValue([
|
||||
"invoicelines",
|
||||
]).invoicelines.map((item, idx) => {
|
||||
if (idx === index) {
|
||||
return {
|
||||
...item,
|
||||
line_desc: opt.line_desc,
|
||||
actual_price: opt.cost,
|
||||
cost_center: opt.part_type
|
||||
? responsibilityCenters.defaults[
|
||||
opt.part_type
|
||||
] || null
|
||||
: null,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
}),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("invoicelines.fields.line_desc")}
|
||||
key={`${index}line_desc`}
|
||||
name={[field.name, "line_desc"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("invoicelines.fields.actual")}
|
||||
key={`${index}actual_price`}
|
||||
name={[field.name, "actual_price"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput
|
||||
onBlur={(e) => {
|
||||
setFieldsValue({
|
||||
invoicelines: getFieldsValue(
|
||||
"invoicelines"
|
||||
).invoicelines.map((item, idx) => {
|
||||
if (idx === index) {
|
||||
return {
|
||||
...item,
|
||||
actual_cost: !!item.actual_cost
|
||||
? item.actual_cost
|
||||
: parseFloat(e.target.value) * (1 - discount),
|
||||
};
|
||||
}
|
||||
return item;
|
||||
}),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("invoicelines.fields.actual_cost")}
|
||||
key={`${index}actual_cost`}
|
||||
name={[field.name, "actual_cost"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<CurrencyInput />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("invoicelines.fields.cost_center")}
|
||||
key={`${index}cost_center`}
|
||||
name={[field.name, "cost_center"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select style={{ width: "150px" }}>
|
||||
{responsibilityCenters.costs.map((item) => (
|
||||
<Select.Option key={item}>{item}</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "50%" }}
|
||||
>
|
||||
{t("invoicelines.actions.newline")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
);
|
||||
}
|
||||
@@ -9,41 +9,49 @@ import { createStructuredSelector } from "reselect";
|
||||
import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
|
||||
import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
|
||||
|
||||
import { setModalContext } from "../../redux/modals/modals.actions";
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
//currentUser: selectCurrentUser
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
setInvoiceEnterContext: (context) =>
|
||||
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
|
||||
});
|
||||
|
||||
export function JobsDetailHeaderActions({ job, bodyshop, refetch }) {
|
||||
export function JobsDetailHeaderActions({
|
||||
job,
|
||||
bodyshop,
|
||||
refetch,
|
||||
setInvoiceEnterContext,
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const client = useApolloClient();
|
||||
const history = useHistory();
|
||||
const statusmenu = (
|
||||
<Menu key='popovermenu'>
|
||||
<Menu.Item key='cccontract'>
|
||||
<Menu key="popovermenu">
|
||||
<Menu.Item key="cccontract">
|
||||
<Link
|
||||
to={{
|
||||
pathname: "/manage/courtesycars/contracts/new",
|
||||
state: { jobId: job.id },
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
{t("menus.jobsactions.newcccontract")}
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key='addtoproduction'
|
||||
key="addtoproduction"
|
||||
disabled={!!!job.converted || !!job.inproduction}
|
||||
onClick={() => AddToProduction(client, job.id, refetch)}>
|
||||
onClick={() => AddToProduction(client, job.id, refetch)}
|
||||
>
|
||||
{t("jobs.actions.addtoproduction")}
|
||||
</Menu.Item>
|
||||
<Menu.Item key='duplicatejob'>
|
||||
<Menu.Item key="duplicatejob">
|
||||
<Popconfirm
|
||||
title={t("jobs.labels.duplicateconfirm")}
|
||||
okText='Yes'
|
||||
cancelText='No'
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onConfirm={() =>
|
||||
DuplicateJob(
|
||||
@@ -55,14 +63,28 @@ export function JobsDetailHeaderActions({ job, bodyshop, refetch }) {
|
||||
}
|
||||
)
|
||||
}
|
||||
getPopupContainer={(trigger) => trigger.parentNode}>
|
||||
getPopupContainer={(trigger) => trigger.parentNode}
|
||||
>
|
||||
{t("menus.jobsactions.duplicate")}
|
||||
</Popconfirm>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="postinvoices"
|
||||
onClick={() => {
|
||||
setInvoiceEnterContext({
|
||||
actions: { refetch: refetch },
|
||||
context: {
|
||||
job: job,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("jobs.actions.postInvoices")}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
return (
|
||||
<Dropdown overlay={statusmenu} key='changestatus'>
|
||||
<Dropdown overlay={statusmenu} key="changestatus">
|
||||
<Button>
|
||||
{t("general.labels.actions")} <DownCircleFilled />
|
||||
</Button>
|
||||
|
||||
@@ -89,6 +89,7 @@ export const QUERY_INVOICE_BY_PK = gql`
|
||||
jobid
|
||||
total
|
||||
updated_at
|
||||
vendorid
|
||||
vendor {
|
||||
id
|
||||
name
|
||||
|
||||
Reference in New Issue
Block a user