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

Added vendor and RO search to enter invoice modal.

Browse Source
This commit is contained in:
Patrick Fic
2020-02-26 10:22:56 -08:00
parent 7335a555c2
commit 7d79bb2689
9 changed files with 398 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
bodyshop_translations.babel
View File

@@ -1747,6 +1747,194 @@
</folder_node> </folder_node>
</children> </children>
</folder_node> </folder_node>
<folder_node>
<name>invoices</name>
<children>
<folder_node>
<name>errors</name>
<children>
<concept_node>
<name>invalidro</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>invalidvendor</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>
</children>
</folder_node>
<folder_node>
<name>fields</name>
<children>
<concept_node>
<name>date</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>invoice_number</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>is_credit_memo</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>ro_number</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>vendor</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>
</children>
</folder_node>
<folder_node>
<name>labels</name>
<children>
<concept_node>
<name>new</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>
</children>
</folder_node>
</children>
</folder_node>
<folder_node> <folder_node>
<name>joblines</name> <name>joblines</name>
<children> <children>

79
client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx
View File

@@ -1,4 +1,4 @@
import { Modal, Form, Input, InputNumber } from "antd"; import { Modal, Form, Input, Switch, DatePicker, AutoComplete } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import ResetForm from "../form-items-formatted/reset-form-item.component"; import ResetForm from "../form-items-formatted/reset-form-item.component";
@@ -8,26 +8,95 @@ export default function InvoiceEnterModalComponent({
invoice, invoice,
handleCancel, handleCancel,
handleSubmit, handleSubmit,
form form,
handleRoAutoComplete,
roAutoCompleteOptions,
handleVendorAutoComplete,
vendorAutoCompleteOptions
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { getFieldDecorator, isFieldsTouched, resetFields } = form; const { getFieldDecorator, isFieldsTouched, resetFields } = form;
console.log("invoice", invoice);
return ( return (
<Modal <Modal
title={ title={
invoice && invoice.id invoice && invoice.id
? t("invoice.labels.edit") ? t("invoices.labels.edit")
: t("invoice.labels.new") : t("invoices.labels.new")
} }
width={"90%"}
visible={visible} visible={visible}
okText={t("general.labels.save")} okText={t("general.labels.save")}
onOk={handleSubmit} onOk={handleSubmit}
okButtonProps={{ htmlType: "submit" }}
onCancel={handleCancel} onCancel={handleCancel}
destroyOnClose
> >
{isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null} {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
<Form onSubmit={handleSubmit} autoComplete={"off"}> <Form onSubmit={handleSubmit} autoComplete={"off"}>
{JSON.stringify(invoice)} <Form.Item label={t("invoices.fields.ro_number")}>
{getFieldDecorator("jobid", {
rules: [
{
required: true,
pattern: new RegExp(
"[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
),
message: t("invoices.errors.invalidro")
}
]
})(
<AutoComplete
name="ro_number"
dataSource={roAutoCompleteOptions}
onSearch={handleRoAutoComplete}
autoFocus
backfill={true}
onBlur={props => {
console.log("props", props);
}}
/>
)}
</Form.Item>
<Form.Item label={t("invoices.fields.vendor")}>
{getFieldDecorator("vendorid", {
rules: [
{
required: true,
pattern: new RegExp(
"[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
),
message: t("invoices.errors.invalidvendor")
}
]
})(
<AutoComplete
name="vendor_id"
dataSource={vendorAutoCompleteOptions}
onSearch={handleVendorAutoComplete}
backfill
/>
)}
</Form.Item>
<div style={{ display: "flex" }}>
<Form.Item label={t("invoices.fields.invoice_number")}>
{getFieldDecorator(
"invoice_number",
{}
)(<Input name="invoice_number" />)}
</Form.Item>
<Form.Item label={t("invoices.fields.date")}>
{getFieldDecorator("date", {})(<DatePicker name="date" />)}
</Form.Item>
<Form.Item label={t("invoices.fields.is_credit_memo")}>
{getFieldDecorator("is_credit_memo", {
initialValue: false,
valuePropName: "checked"
})(<Switch name="is_credit_memo" />)}
</Form.Item>
</div>
{ {
// <Form.Item label={t("joblines.fields.line_desc")}> // <Form.Item label={t("joblines.fields.line_desc")}>
// {getFieldDecorator("line_desc", { // {getFieldDecorator("line_desc", {

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

@@ -1,6 +1,6 @@
import { Form, notification } from "antd"; import { Form, notification } from "antd";
import React from "react"; import React, { useState } from "react";
import { useMutation } from "react-apollo"; import { useQuery } from "react-apollo";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
@@ -11,6 +11,8 @@ import {
import { toggleModalVisible } from "../../redux/modals/modals.actions"; import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors"; import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
import InvoiceEnterModalComponent from "./invoice-enter-modal.component"; import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
import { SEARCH_RO_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
invoiceEnterModal: selectInvoiceEnterModal invoiceEnterModal: selectInvoiceEnterModal
@@ -25,12 +27,34 @@ function InvoiceEnterModalContainer({
form form
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
// const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
// const [updateJobLine] = useMutation(UPDATE_JOB_LINE); const roSearchState = useState("");
const [roSearch, setRoSearch] = roSearchState;
const handleRoAutoComplete = e => {
setRoSearch(e);
};
const { data: RoAutoCompleteData } = useQuery(SEARCH_RO_AUTOCOMPLETE, {
fetchPolicy: "network-only",
variables: { search: `%${roSearch}%` },
skip: !roSearch
});
const vendorSearchState = useState("");
const [vendorSearch, setVendorSearch] = vendorSearchState;
const handleVendorAutoComplete = e => {
setVendorSearch(e);
};
const { data: VendorAutoCompleteData } = useQuery(
SEARCH_VENDOR_AUTOCOMPLETE,
{
fetchPolicy: "network-only",
variables: { search: `%${vendorSearch}%` },
skip: !vendorSearch
}
);
const handleSubmit = e => { const handleSubmit = e => {
e.preventDefault(); e.preventDefault();
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (err) { if (err) {
notification["error"]({ notification["error"]({
@@ -39,6 +63,7 @@ function InvoiceEnterModalContainer({
}); });
} }
if (!err) { if (!err) {
console.log("values", values);
alert("Closing this modal."); alert("Closing this modal.");
toggleModalVisible(); toggleModalVisible();
// if (!jobLineEditModal.context.id) { // if (!jobLineEditModal.context.id) {
@@ -100,6 +125,33 @@ function InvoiceEnterModalContainer({
handleSubmit={handleSubmit} handleSubmit={handleSubmit}
handleCancel={handleCancel} handleCancel={handleCancel}
form={form} form={form}
handleRoAutoComplete={handleRoAutoComplete}
roAutoCompleteOptions={
RoAutoCompleteData
? RoAutoCompleteData.jobs.reduce((acc, value) => {
acc.push({
value: value.id,
text: `${value.ro_number || ""} | ${value.ownr_ln ||
""} ${value.ownr_fn || ""} | ${value.vehicle.v_model_yr ||
""} ${value.vehicle.v_make_desc || ""} ${value.vehicle
.v_model_desc || ""}`
});
return acc;
}, [])
: null
}
handleVendorAutoComplete={handleVendorAutoComplete}
vendorAutoCompleteOptions={
VendorAutoCompleteData
? VendorAutoCompleteData.vendors.reduce((acc, value) => {
acc.push({
value: value.id,
text: `${value.name || ""}`
});
return acc;
}, [])
: null
}
/> />
); );
} }

5
client/src/components/jobs-detail-pli/jobs-detail-pli.component.jsx
View File

@@ -5,6 +5,7 @@ import {
toggleModalVisible, toggleModalVisible,
setModalContext setModalContext
} from "../../redux/modals/modals.actions"; } from "../../redux/modals/modals.actions";
import { Button } from "antd";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser //currentUser: selectCurrentUser
@@ -24,7 +25,7 @@ export default connect(
}) { }) {
return ( return (
<div> <div>
<div <Button
onClick={() => { onClick={() => {
setInvoiceEnterContext({ setInvoiceEnterContext({
actions: { refetch: null }, actions: { refetch: null },
@@ -35,7 +36,7 @@ export default connect(
}} }}
> >
Enter Invoice Enter Invoice
</div> </Button>
</div> </div>
); );
}); });

17
client/src/graphql/jobs.queries.js
View File

@@ -333,3 +333,20 @@ export const UPDATE_JOB_STATUS = gql`
} }
} }
`; `;
export const SEARCH_RO_AUTOCOMPLETE = gql`
query SEARCH_RO_AUTOCOMPLETE($search: String!) {
jobs(where: { ro_number: { _ilike: $search } }) {
id
ownr_fn
ownr_ln
ro_number
vehicle {
id
v_make_desc
v_model_desc
v_model_yr
}
}
}
`;

11
client/src/graphql/vendors.queries.js
View File

@@ -76,3 +76,14 @@ export const QUERY_ALL_VENDORS_FOR_ORDER = gql`
} }
} }
`; `;
export const SEARCH_VENDOR_AUTOCOMPLETE = gql`
query SEARCH_VENDOR_AUTOCOMPLETE($search: String!) {
vendors(where: { name: { _ilike: $search } }) {
name
discount
id
cost_center
}
}
`;

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

@@ -144,6 +144,22 @@
"required": "This field is required. " "required": "This field is required. "
} }
}, },
"invoices": {
"errors": {
"invalidro": "Not a valid RO.",
"invalidvendor": "Not a valid vendor."
},
"fields": {
"date": "Invoice Date",
"invoice_number": "Invoice Number",
"is_credit_memo": "Credit Memo?",
"ro_number": "RO Number",
"vendor": "Vendor"
},
"labels": {
"new": "New Invoice"
}
},
"joblines": { "joblines": {
"actions": { "actions": {
"new": "New Line" "new": "New Line"

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

@@ -144,6 +144,22 @@
"required": "Este campo es requerido." "required": "Este campo es requerido."
} }
}, },
"invoices": {
"errors": {
"invalidro": "",
"invalidvendor": ""
},
"fields": {
"date": "",
"invoice_number": "",
"is_credit_memo": "",
"ro_number": "",
"vendor": ""
},
"labels": {
"new": ""
}
},
"joblines": { "joblines": {
"actions": { "actions": {
"new": "" "new": ""

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

@@ -144,6 +144,22 @@
"required": "Ce champ est requis." "required": "Ce champ est requis."
} }
}, },
"invoices": {
"errors": {
"invalidro": "",
"invalidvendor": ""
},
"fields": {
"date": "",
"invoice_number": "",
"is_credit_memo": "",
"ro_number": "",
"vendor": ""
},
"labels": {
"new": ""
}
},
"joblines": { "joblines": {
"actions": { "actions": {
"new": "" "new": ""