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

21
bodyshop_translations.babel
View File

@@ -4755,6 +4755,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>jobline</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node> <concept_node>
<name>line_desc</name> <name>line_desc</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>

44
client/src/components/invoice-detail-edit/invoice-detail-edit.component.jsx
View File

@@ -1,11 +1,11 @@
import { DatePicker, Form, Input, Switch } from "antd"; import { DatePicker, Form, Input, Switch, Tag } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component"; import CurrencyFormatter from "../../utils/CurrencyFormatter";
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/invoice-enter-modal.lines.component";
import DocumentsUploadContainer from "../documents-upload/documents-upload.container"; 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({ export default function InvoiceDetailEditComponent({
form, form,
@@ -15,6 +15,22 @@ export default function InvoiceDetailEditComponent({
responsibilityCenters, responsibilityCenters,
}) { }) {
const { t } = useTranslation(); 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 ( return (
<div> <div>
<div style={{ display: "flex" }}> <div style={{ display: "flex" }}>
@@ -85,18 +101,32 @@ export default function InvoiceDetailEditComponent({
</div> </div>
<InvoiceEnterModalLinesComponent <InvoiceEnterModalLinesComponent
lineData={lineData} lineData={lineData}
discount={0.1} discount={0.1} //TODO Derive the actual discount from the vendor.
form={form} form={form}
responsibilityCenters={responsibilityCenters} responsibilityCenters={responsibilityCenters}
calculateTotals={calculateTotals}
/> />
<Form.Item name="upload" label="Upload"> <Form.Item name="upload" label="Upload">
<DocumentsUploadContainer jobId={form.getFieldValue("jobid")} /> <DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
</Form.Item> </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 <button
onClick={() => { onClick={() => {
console.log(form.getFieldsValue()); //console.log(form.getFieldsValue());
form.resetFields();
}} }}
> >
a a

38
client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx
View File

@@ -1,25 +1,19 @@
import React, { useState, useEffect } from "react"; import { useQuery } from "@apollo/react-hooks";
import { import { Form } from "antd";
QUERY_INVOICES_BY_VENDOR,
QUERY_INVOICE_BY_PK,
} from "../../graphql/invoices.queries";
import { useQuery, useLazyQuery } from "@apollo/react-hooks";
import queryString from "query-string";
import { useHistory, useLocation } from "react-router-dom";
import { Table, Input, Form } from "antd";
import { useTranslation } from "react-i18next";
import { alphaSort } from "../../utils/sorters";
import AlertComponent from "../alert/alert.component";
import { DateFormatter } from "../../utils/DateFormatter";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import InvoiceDetailEditComponent from "./invoice-detail-edit.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import moment from "moment"; import moment from "moment";
import { selectBodyshop } from "../../redux/user/user.selectors"; import queryString from "query-string";
import { createStructuredSelector } from "reselect"; import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; 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 { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries"; import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import InvoiceDetailEditComponent from "./invoice-detail-edit.component";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
@@ -71,11 +65,17 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
data data
? { ? {
...data.invoices_by_pk, ...data.invoices_by_pk,
invoicelines: data.invoices_by_pk.invoicelines.map((i) => {
return {
...i,
joblineid: !!i.joblineid ? i.joblineid : "noline",
};
}),
date: data.invoices_by_pk date: data.invoices_by_pk
? moment(data.invoices_by_pk.date) ? moment(data.invoices_by_pk.date)
: null, : null,
} }
: { invoicelines: [] } : {}
} }
> >
<InvoiceDetailEditComponent <InvoiceDetailEditComponent

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 React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
import CurrencyInput from "../form-items-formatted/currency-form-item.component"; import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import JobSearchSelect from "../job-search-select/job-search-select.component"; import JobSearchSelect from "../job-search-select/job-search-select.component";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component"; import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.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({ export default function InvoiceEnterModalComponent({
form, form,
@@ -18,7 +19,20 @@ export default function InvoiceEnterModalComponent({
const { t } = useTranslation(); const { t } = useTranslation();
const [discount, setDiscount] = useState(0); 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) => { const handleVendorSelect = (props, opt) => {
setDiscount(opt.discount); setDiscount(opt.discount);
}; };
@@ -111,14 +125,13 @@ export default function InvoiceEnterModalComponent({
discount={discount} discount={discount}
form={form} form={form}
responsibilityCenters={responsibilityCenters} responsibilityCenters={responsibilityCenters}
calculateTotals={calculateTotals}
/> />
<Form.Item <Form.Item name="upload" label="Upload">
name="upload"
label="Upload"
>
<DocumentsUploadContainer jobId={form.getFieldValue("jobid")} /> <DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
</Form.Item> </Form.Item>
<button <button
onClick={() => { onClick={() => {
console.log(form.getFieldsValue()); console.log(form.getFieldsValue());
@@ -126,6 +139,20 @@ export default function InvoiceEnterModalComponent({
> >
a a
</button> </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> </div>
); );
} }

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

@@ -61,7 +61,14 @@ function InvoiceEnterModalContainer({
variables: { variables: {
invoice: [ invoice: [
Object.assign({}, values, { 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 { DeleteFilled } from "@ant-design/icons";
import { Button, Col, Form, Input, Row, Select, Tag } from "antd"; import { Button, Form, Input, Select } from "antd";
import React, { useState } from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import CurrencyInput from "../form-items-formatted/currency-form-item.component"; 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({ export default function InvoiceEnterModalLinesComponent({
lineData, lineData,
discount, discount,
form, form,
responsibilityCenters, responsibilityCenters,
calculateTotals,
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { setFieldsValue, getFieldsValue } = form; const { setFieldsValue, getFieldsValue } = form;
console.log("calculateTotals", calculateTotals);
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 ( return (
<div> <div>
<Form.List name="invoicelines"> <Form.List name="invoicelines">
@@ -40,8 +26,9 @@ export default function InvoiceEnterModalLinesComponent({
<Form.Item required={false} key={field.key}> <Form.Item required={false} key={field.key}>
<div style={{ display: "flex" }}> <div style={{ display: "flex" }}>
<Form.Item <Form.Item
label={t("invoicelines.fields.line_desc")} label={t("invoicelines.fields.jobline")}
key={`${index}joblinename`} key={`${index}joblinename`}
name={[field.name, "joblineid"]}
rules={[ rules={[
{ {
required: true, required: true,
@@ -49,10 +36,9 @@ export default function InvoiceEnterModalLinesComponent({
}, },
]} ]}
> >
<Select <InvoiceLineSearchSelect
autoFocus options={lineData}
name={`le${index}`} onBlur={null}
style={{ width: "450px" }}
onSelect={(value, opt) => { onSelect={(value, opt) => {
setFieldsValue({ setFieldsValue({
invoicelines: getFieldsValue([ invoicelines: getFieldsValue([
@@ -61,13 +47,8 @@ export default function InvoiceEnterModalLinesComponent({
if (idx === index) { if (idx === index) {
return { return {
...item, ...item,
joblineid: opt.key.includes("noline") line_desc: opt.line_desc,
? null actual_price: opt.cost,
: opt.key,
line_desc: opt.key.includes("noline")
? ""
: opt.value,
actual_price: opt.cost ? opt.cost : 0,
cost_center: opt.part_type cost_center: opt.part_type
? responsibilityCenters.defaults[ ? responsibilityCenters.defaults[
opt.part_type 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> </Form.Item>
{!!getFieldsValue(["invoicelines"]).invoicelines[index] && <Form.Item
!getFieldsValue(["invoicelines"]).invoicelines[index] label={t("invoicelines.fields.line_desc")}
.joblineid ? ( key={`${index}line_desc`}
<Form.Item name={[field.name, "line_desc"]}
label={t("invoicelines.fields.line_desc")} rules={[
key={`${index}line_desc`} {
name={[field.name, "line_desc"]} required: true,
rules={[ message: t("general.validation.required"),
{ },
required: true, ]}
message: t("general.validation.required"), >
}, <Input />
]} </Form.Item>
>
<Input />
</Form.Item>
) : null}
<Form.Item <Form.Item
label={t("invoicelines.fields.actual")} label={t("invoicelines.fields.actual")}
@@ -176,7 +120,11 @@ export default function InvoiceEnterModalLinesComponent({
}, },
]} ]}
> >
<CurrencyInput onBlur={() => calculateTotals()} /> <CurrencyInput
onBlur={() => {
calculateTotals();
}}
/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("invoicelines.fields.cost_center")} label={t("invoicelines.fields.cost_center")}
@@ -195,7 +143,6 @@ export default function InvoiceEnterModalLinesComponent({
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
<DeleteFilled <DeleteFilled
onClick={() => { onClick={() => {
remove(field.name); remove(field.name);
@@ -220,25 +167,6 @@ export default function InvoiceEnterModalLinesComponent({
); );
}} }}
</Form.List> </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> </div>
); );
} }

66
client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx Normal file
View File

@@ -0,0 +1,66 @@
import { Select, Row, Col, Tag } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
//To be used as a form element only.
const { Option } = Select;
const InvoiceLineSearchSelect = ({
value,
onChange,
options,
onBlur,
onSelect,
}) => {
const [option, setOption] = useState(value);
const { t } = useTranslation();
useEffect(() => {
if (onChange) {
onChange(option);
}
}, [option, onChange]);
return (
<Select
showSearch
autoFocus
value={option}
style={{
width: 450,
}}
onChange={setOption}
optionFilterProp="children"
onBlur={onBlur}
onSelect={onSelect}
>
<Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
{t("invoicelines.labels.other")}
</Select.Option>
{options
? options.map((item) => (
<Option
key={item.id}
value={item.id}
cost={item.act_price ? item.act_price : 0}
part_type={item.part_type}
line_desc={item.line_desc}
>
<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>
</Option>
))
: null}
</Select>
);
};
export default InvoiceLineSearchSelect;

1
client/src/graphql/invoices.queries.js
View File

@@ -100,6 +100,7 @@ export const QUERY_INVOICE_BY_PK = gql`
actual_price actual_price
actual_cost actual_cost
cost_center cost_center
joblineid
} }
} }
} }

3
client/src/translations/en_us/common.json
View File

@@ -333,7 +333,8 @@
"actual": "Actual", "actual": "Actual",
"actual_cost": "Actual Cost", "actual_cost": "Actual Cost",
"cost_center": "Cost Center", "cost_center": "Cost Center",
"line_desc": "Line Description", "jobline": "Job Line",
"line_desc": "Invoice Line Description",
"retail": "Retail" "retail": "Retail"
}, },
"labels": { "labels": {

1
client/src/translations/es/common.json
View File

@@ -333,6 +333,7 @@
"actual": "", "actual": "",
"actual_cost": "", "actual_cost": "",
"cost_center": "", "cost_center": "",
"jobline": "",
"line_desc": "", "line_desc": "",
"retail": "" "retail": ""
}, },

1
client/src/translations/fr/common.json
View File

@@ -333,6 +333,7 @@
"actual": "", "actual": "",
"actual_cost": "", "actual_cost": "",
"cost_center": "", "cost_center": "",
"jobline": "",
"line_desc": "", "line_desc": "",
"retail": "" "retail": ""
}, },