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>
</translations>
</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>
<name>line_desc</name>
<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 { 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/invoice-enter-modal.lines.component";
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,
@@ -15,6 +15,22 @@ export default function InvoiceDetailEditComponent({
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" }}>
@@ -85,18 +101,32 @@ export default function InvoiceDetailEditComponent({
</div>
<InvoiceEnterModalLinesComponent
lineData={lineData}
discount={0.1}
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());
//console.log(form.getFieldsValue());
form.resetFields();
}}
>
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 {
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 { useQuery } from "@apollo/react-hooks";
import { Form } from "antd";
import moment from "moment";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { createStructuredSelector } from "reselect";
import queryString from "query-string";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
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 LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import InvoiceDetailEditComponent from "./invoice-detail-edit.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -71,11 +65,17 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
data
? {
...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
? moment(data.invoices_by_pk.date)
: null,
}
: { invoicelines: [] }
: {}
}
>
<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 { 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>
);
}

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_cost
cost_center
joblineid
}
}
}

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

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

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

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

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

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