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

Breaking Changes as a part of BOD-63 on invoice enter. WIP for all invoices screen editing + lookup.

Browse Source
This commit is contained in:
Patrick Fic
2020-05-04 18:07:56 -07:00
parent b7d438a0f0
commit 9d694e6403
12 changed files with 542 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
client/src/components/invoice-detail-edit/invoice-detail-edit.component.jsx Normal file
View File

@@ -0,0 +1,106 @@
import { DatePicker, Form, Input, Switch } 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 DocumentsUploadContainer from "../documents-upload/documents-upload.container";
export default function InvoiceDetailEditComponent({
form,
roAutoCompleteOptions,
loadLines,
lineData,
responsibilityCenters,
}) {
const { t } = useTranslation();
return (
<div>
<div style={{ display: "flex" }}>
<Form.Item
name="jobid"
label={t("invoices.fields.ro_number")}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<JobSearchSelect
options={roAutoCompleteOptions}
onBlur={() => {
if (form.getFieldValue("jobid") !== null) {
//loadLines({ variables: { id: form.getFieldValue("jobid") } });
}
}}
/>
</Form.Item>
</div>
<div style={{ display: "flex" }}>
<Form.Item
label={t("invoices.fields.invoice_number")}
name="invoice_number"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("invoices.fields.date")}
name="date"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<DatePicker />
</Form.Item>
<Form.Item
label={t("invoices.fields.is_credit_memo")}
name="is_credit_memo"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("invoices.fields.total")}
name="total"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<CurrencyInput />
</Form.Item>
</div>
<InvoiceEnterModalLinesComponent
lineData={lineData}
discount={0.1}
form={form}
responsibilityCenters={responsibilityCenters}
/>
<Form.Item name="upload" label="Upload">
<DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
</Form.Item>
<button
onClick={() => {
console.log(form.getFieldsValue());
}}
>
a
</button>
</div>
);
}

93
client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx Normal file
View File

@@ -0,0 +1,93 @@
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 moment from "moment";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { createStructuredSelector } from "reselect";
import { connect } from "react-redux";
import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
export function InvoiceDetailEditContainer({ bodyshop }) {
const search = queryString.parse(useLocation().search);
const { t } = useTranslation();
const [form] = Form.useForm();
const { loading, error, data } = useQuery(QUERY_INVOICE_BY_PK, {
variables: { invoiceid: search.invoiceid },
skip: !!!search.invoiceid,
});
const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
fetchPolicy: "network-only",
variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
});
const {
loading: linesLoading,
data: lineData,
refetch: loadLines,
} = useQuery(GET_JOB_LINES_TO_ENTER_INVOICE, {
variables: { id: data && data.invoices_by_pk.jobid },
fetchPolicy: "network-only",
skip: !!!(data && data.invoices_by_pk.id),
});
const handleFinish = (values) => {
console.log("values", values);
};
useEffect(() => {
// if (data) {
// loadLines();
// if (lineData) //form.resetFields();
// }
}, [data, lineData]);
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<LoadingSkeleton loading={loading || linesLoading}>
<Form
form={form}
onFinish={handleFinish}
initialValues={
data
? {
...data.invoices_by_pk,
// invoicelines: [],
date: data.invoices_by_pk
? moment(data.invoices_by_pk.date)
: null,
}
: { invoicelines: [] }
}
>
<InvoiceDetailEditComponent
form={form}
roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
loadLines={loadLines}
lineData={lineData ? lineData.joblines : null}
responsibilityCenters={bodyshop.md_responsibility_centers || null}
/>
</Form>
</LoadingSkeleton>
);
}
export default connect(mapStateToProps, null)(InvoiceDetailEditContainer);