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

Created export payables screen + basic invoice exporting BOD-139

Browse Source
This commit is contained in:
Patrick Fic
2020-06-02 15:41:47 -07:00
parent a70933f03c
commit 73c457e972
17 changed files with 588 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
client/src/components/accounting-payables-table/accounting-payables-table.component.jsx Normal file
View File

@@ -0,0 +1,159 @@
import { Input, Table, Checkbox } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { alphaSort } from "../../utils/sorters";
import InvoiceExportButton from "../invoice-export-button/invoice-export-button.component";
import { DateFormatter } from "../../utils/DateFormatter";
import queryString from "query-string";
export default function AccountingPayablesTableComponent({
loading,
invoices,
}) {
const { t } = useTranslation();
const [state, setState] = useState({
sortedInfo: {},
search: "",
});
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
const columns = [
{
title: t("invoices.fields.vendorname"),
dataIndex: "vendorname",
key: "vendorname",
sorter: (a, b) => alphaSort(a.vendor.name, b.vendor.name),
sortOrder:
state.sortedInfo.columnKey === "vendorname" && state.sortedInfo.order,
render: (text, record) => (
<Link
to={{
pathname: `/manage/shop/vendors`,
search: queryString.stringify({ selectedvendor: record.vendor.id }),
}}
>
{record.vendor.name}
</Link>
),
},
{
title: t("invoices.fields.invoice_number"),
dataIndex: "invoice_number",
key: "invoice_number",
sorter: (a, b) => alphaSort(a.invoice_number, b.invoice_number),
sortOrder:
state.sortedInfo.columnKey === "invoice_number" &&
state.sortedInfo.order,
render: (text, record) => (
<Link
to={{
pathname: `/manage/invoices`,
search: queryString.stringify({
invoiceid: record.id,
vendorid: record.vendor.id,
}),
}}
>
{record.invoice_number}
</Link>
),
},
{
title: t("invoices.fields.date"),
dataIndex: "date",
key: "date",
sorter: (a, b) => a.date - b.date,
sortOrder:
state.sortedInfo.columnKey === "date" && state.sortedInfo.order,
render: (text, record) => <DateFormatter>{record.date}</DateFormatter>,
},
{
title: t("invoices.fields.total"),
dataIndex: "total",
key: "total",
sorter: (a, b) => a.total - b.total,
sortOrder:
state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
render: (text, record) => (
<CurrencyFormatter>{record.total}</CurrencyFormatter>
),
},
{
title: t("invoices.fields.is_credit_memo"),
dataIndex: "is_credit_memo",
key: "is_credit_memo",
sorter: (a, b) => a.is_credit_memo - b.is_credit_memo,
sortOrder:
state.sortedInfo.columnKey === "is_credit_memo" &&
state.sortedInfo.order,
render: (text, record) => (
<Checkbox disabled checked={record.is_credit_memo} />
),
},
{
title: t("general.labels.actions"),
dataIndex: "actions",
key: "actions",
sorter: (a, b) => a.clm_total - b.clm_total,
render: (text, record) => (
<div>
<InvoiceExportButton
invoiceId={record.id}
disabled={!!record.exported}
/>
</div>
),
},
];
const handleSearch = (e) => {
setState({ ...state, search: e.target.value });
};
const dataSource = state.search
? invoices.filter(
(v) =>
(v.vendor.name || "")
.toLowerCase()
.includes(state.search.toLowerCase()) ||
(v.invoice_number || "")
.toLowerCase()
.includes(state.search.toLowerCase())
)
: invoices;
return (
<div>
<Table
loading={loading}
title={() => {
return (
<div>
<Input
value={state.search}
onChange={handleSearch}
placeholder={t("general.labels.search")}
allowClear
/>
</div>
);
}}
dataSource={dataSource}
size="small"
pagination={{ position: "top" }}
columns={columns}
rowKey="id"
onChange={handleTableChange}
/>
</div>
);
}

98
client/src/components/invoice-export-button/invoice-export-button.component.jsx Normal file
View File

@@ -0,0 +1,98 @@
import { useMutation } from "@apollo/react-hooks";
import { Button, notification } from "antd";
import axios from "axios";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { auth } from "../../firebase/firebase.utils";
import { UPDATE_INVOICE } from "../../graphql/invoices.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
export function InvoiceExportButton({ bodyshop, invoiceId, disabled }) {
const { t } = useTranslation();
const [updateInvoice] = useMutation(UPDATE_INVOICE);
const [loading, setLoading] = useState(false);
const handleQbxml = async () => {
setLoading(true);
let QbXmlResponse;
try {
QbXmlResponse = await axios.post(
"/accounting/qbxml/payables",
{ invoices: [invoiceId] },
{
headers: {
Authorization: `Bearer ${await auth.currentUser.getIdToken(true)}`,
},
}
);
console.log("handle -> XML", QbXmlResponse);
} catch (error) {
console.log("Error getting QBXML from Server.", error);
notification["error"]({
message: t("invoices.errors.exporting", {
error: "Unable to retrieve QBXML. " + JSON.stringify(error.message),
}),
});
setLoading(false);
return;
}
let PartnerResponse;
try {
PartnerResponse = await axios.post(
"http://e9c5a8ed9079.ngrok.io/qb/receivables",
QbXmlResponse.data
);
} catch (error) {
console.log("Error connecting to quickbooks or partner.", error);
notification["error"]({
message: t("invoices.errors.exporting-partner"),
});
setLoading(false);
return;
}
console.log("PartnerResponse", PartnerResponse);
// const invoiceUpdateResponse = await updateInvoice({
// variables: {
// invoiceId: invoiceId,
// invoice: {
// exported: true,
// exported_at: new Date(),
// },
// },
// });
// if (!!!invoiceUpdateResponse.errors) {
// notification["success"]({
// message: t("jobs.successes.exported"),
// });
// } else {
// notification["error"]({
// message: t("jobs.errors.exporting", {
// error: JSON.stringify(invoiceUpdateResponse.error),
// }),
// });
// }
setLoading(false);
};
return (
<Button
onClick={handleQbxml}
loading={loading}
disabled={disabled}
type="dashed"
>
{t("jobs.actions.export")}
</Button>
);
}
export default connect(mapStateToProps, null)(InvoiceExportButton);

4
client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx
View File

@@ -44,7 +44,7 @@ export function JobsCloseExportButton({ bodyshop, jobId, disabled }) {
let PartnerResponse;
try {
PartnerResponse = await axios.post(
"http://e9c5a8ed9079.ngrok.io/qb/receivables",
"http://localhost:1337/qb/receivables",
QbXmlResponse.data,
{
headers: {
@@ -60,7 +60,7 @@ export function JobsCloseExportButton({ bodyshop, jobId, disabled }) {
setLoading(false);
return;
}
console.log("PartnerResponse", PartnerResponse);
const jobUpdateResponse = await updateJob({
variables: {

16
client/src/graphql/accounting.queries.js
View File

@@ -27,3 +27,19 @@ export const QUERY_JOBS_FOR_EXPORT = gql`
}
}
`;
export const QUERY_INVOICES_FOR_EXPORT = gql`
query QUERY_INVOICES_FOR_EXPORT {
invoices(where: { exported: { _eq: false } }) {
id
exported
date
invoice_number
total
vendor {
name
id
}
}
}
`;

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

@@ -129,6 +129,8 @@ export const UPDATE_INVOICE = gql`
update_invoices(where: { id: { _eq: $invoiceId } }, _set: $invoice) {
returning {
id
exported
exported_at
}
}
}

48
client/src/pages/accounting-payables/accounting-payables.container.jsx Normal file
View File

@@ -0,0 +1,48 @@
import { useQuery } from "@apollo/react-hooks";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import AccountingPayablesTable from "../../components/accounting-payables-table/accounting-payables-table.component";
import AlertComponent from "../../components/alert/alert.component";
import { QUERY_INVOICES_FOR_EXPORT } from "../../graphql/accounting.queries";
import { setBreadcrumbs } from "../../redux/application/application.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
});
export function AccountingPayablesContainer({ bodyshop, setBreadcrumbs }) {
const { t } = useTranslation();
useEffect(() => {
document.title = t("titles.accounting-payables");
setBreadcrumbs([
{
link: "/manage/accounting/payables",
label: t("titles.bc.accounting-payables"),
},
]);
}, [t, setBreadcrumbs]);
const { loading, error, data } = useQuery(QUERY_INVOICES_FOR_EXPORT);
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div>
<AccountingPayablesTable
loadaing={loading}
invoices={data ? data.invoices : []}
/>
</div>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(AccountingPayablesContainer);

8
client/src/pages/manage/manage.page.component.jsx
View File

@@ -94,6 +94,9 @@ const JobIntake = lazy(() =>
const AccountingReceivables = lazy(() =>
import("../accounting-receivables/accounting-receivables.container")
);
const AccountingPayables = lazy(() =>
import("../accounting-payables/accounting-payables.container")
);
const AllJobs = lazy(() => import("../jobs-all/jobs-all.container"));
const JobsClose = lazy(() => import("../jobs-close/jobs-close.container"));
@@ -277,6 +280,11 @@ export function Manage({ match, conflict }) {
path={`${match.path}/accounting/receivables`}
component={AccountingReceivables}
/>
<Route
exact
path={`${match.path}/accounting/payables`}
component={AccountingPayables}
/>
</Suspense>
)}
</ErrorBoundary>

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

@@ -425,6 +425,8 @@
},
"errors": {
"creating": "Error adding invoice.",
"exporting": "Error exporting invoice {{error}}",
"exporting-partner": "Unable to connect to ImEX Partner. Please ensure it is running and logged in.",
"invalidro": "Not a valid RO.",
"invalidvendor": "Not a valid vendor.",
"validation": "Please ensure all fields are entered correctly. "
@@ -950,9 +952,11 @@
}
},
"titles": {
"accounting-payables": "Payables | $t(titles.app)",
"accounting-receivables": "Receivables | $t(titles.app)",
"app": "ImEX Online",
"bc": {
"accounting-payables": "Payables",
"accounting-receivables": "Receivables",
"availablejobs": "Available Jobs",
"contracts": "Contracts",

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

@@ -425,6 +425,8 @@
},
"errors": {
"creating": "",
"exporting": "",
"exporting-partner": "",
"invalidro": "",
"invalidvendor": "",
"validation": ""
@@ -950,9 +952,11 @@
}
},
"titles": {
"accounting-payables": "",
"accounting-receivables": "",
"app": "ImEX Online",
"bc": {
"accounting-payables": "",
"accounting-receivables": "",
"availablejobs": "",
"contracts": "",

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

@@ -425,6 +425,8 @@
},
"errors": {
"creating": "",
"exporting": "",
"exporting-partner": "",
"invalidro": "",
"invalidvendor": "",
"validation": ""
@@ -950,9 +952,11 @@
}
},
"titles": {
"accounting-payables": "",
"accounting-receivables": "",
"app": "ImEX Online",
"bc": {
"accounting-payables": "",
"accounting-receivables": "",
"availablejobs": "",
"contracts": "",