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

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