admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correct diplay and posting of invoices on general + modal. Refactor requiured. BOD-63

Browse Source
This commit is contained in:
Patrick Fic
2020-05-05 10:10:19 -07:00
parent c2e6948d46
commit fbf49c70d8
11 changed files with 221 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx
View File

@@ -1,11 +1,12 @@
import { DatePicker, Form, Input, Switch } from "antd";
import { DatePicker, Form, Input, Switch, Tag } 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 DocumentsUploadContainer from "../documents-upload/documents-upload.container";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
export default function InvoiceEnterModalComponent({
form,
@@ -18,7 +19,20 @@ export default function InvoiceEnterModalComponent({
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);
};
@@ -111,14 +125,13 @@ export default function InvoiceEnterModalComponent({
discount={discount}
form={form}
responsibilityCenters={responsibilityCenters}
calculateTotals={calculateTotals}
/>
<Form.Item
name="upload"
label="Upload"
>
<Form.Item name="upload" label="Upload">
<DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
</Form.Item>
<button
onClick={() => {
console.log(form.getFieldsValue());
@@ -126,6 +139,20 @@ export default function InvoiceEnterModalComponent({
>
a
</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>
);
}

9
client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx
View File

@@ -61,7 +61,14 @@ function InvoiceEnterModalContainer({
variables: {
invoice: [
Object.assign({}, values, {
invoicelines: { data: values.invoicelines },
invoicelines: {
data: values.invoicelines.map((i) => {
return {
...i,
joblineid: i.joblineid === "noline" ? null : i.joblineid,
};
}),
},
}),
],
},

134
client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx
View File

@@ -1,34 +1,20 @@
import { DeleteFilled } from "@ant-design/icons";
import { Button, Col, Form, Input, Row, Select, Tag } from "antd";
import React, { useState } from "react";
import { Button, Form, Input, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
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;
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,
});
};
console.log("calculateTotals", calculateTotals);
return (
<div>
<Form.List name="invoicelines">
@@ -40,8 +26,9 @@ export default function InvoiceEnterModalLinesComponent({
<Form.Item required={false} key={field.key}>
<div style={{ display: "flex" }}>
<Form.Item
label={t("invoicelines.fields.line_desc")}
label={t("invoicelines.fields.jobline")}
key={`${index}joblinename`}
name={[field.name, "joblineid"]}
rules={[
{
required: true,
@@ -49,10 +36,9 @@ export default function InvoiceEnterModalLinesComponent({
},
]}
>
<Select
autoFocus
name={`le${index}`}
style={{ width: "450px" }}
<InvoiceLineSearchSelect
options={lineData}
onBlur={null}
onSelect={(value, opt) => {
setFieldsValue({
invoicelines: getFieldsValue([
@@ -61,13 +47,8 @@ export default function InvoiceEnterModalLinesComponent({
if (idx === index) {
return {
...item,
joblineid: opt.key.includes("noline")
? null
: opt.key,
line_desc: opt.key.includes("noline")
? ""
: opt.value,
actual_price: opt.cost ? opt.cost : 0,
line_desc: opt.line_desc,
actual_price: opt.cost,
cost_center: opt.part_type
? responsibilityCenters.defaults[
opt.part_type
@@ -79,59 +60,22 @@ export default function InvoiceEnterModalLinesComponent({
}),
});
}}
showSearch
>
<Select.Option
key={`${index}noline`}
value={t("invoicelines.labels.other")}
cost={0}
>
{t("invoicelines.labels.other")}
</Select.Option>
{lineData
? lineData.map((item) => (
<Select.Option
key={item.id}
value={item.line_desc}
cost={item.act_price ? item.act_price : 0}
part_type={item.part_type}
>
<Row justify="center" align="middle">
<Col span={12}> {item.line_desc}</Col>
<Col span={8}>
<Tag color="blue">{item.oem_partno}</Tag>
</Col>
<Col span={4}>
<Tag color="green">
<CurrencyFormatter>
{item.act_price || 0}
</CurrencyFormatter>
</Tag>
</Col>
</Row>
</Select.Option>
))
: null}
</Select>
/>
</Form.Item>
{!!getFieldsValue(["invoicelines"]).invoicelines[index] &&
!getFieldsValue(["invoicelines"]).invoicelines[index]
.joblineid ? (
<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>
) : null}
<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")}
@@ -176,7 +120,11 @@ export default function InvoiceEnterModalLinesComponent({
},
]}
>
<CurrencyInput onBlur={() => calculateTotals()} />
<CurrencyInput
onBlur={() => {
calculateTotals();
}}
/>
</Form.Item>
<Form.Item
label={t("invoicelines.fields.cost_center")}
@@ -195,7 +143,6 @@ export default function InvoiceEnterModalLinesComponent({
))}
</Select>
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
@@ -220,25 +167,6 @@ export default function InvoiceEnterModalLinesComponent({
);
}}
</Form.List>
<Row>
<Col span={4}>
{t("invoicelines.labels.entered")}
<CurrencyFormatter>{amounts.enteredTotal || 0}</CurrencyFormatter>
</Col>
<Col span={4}>
{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>
)}
</Col>
</Row>
</div>
);
}