From 6785ff8aad351c3c96d67b0e46ddb518da41fd5a Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Wed, 26 Feb 2020 18:58:36 -0800 Subject: [PATCH] Additional WIP on enter invoice modal --- bodyshop_translations.babel | 52 +++++++++++++++++++ .../invoice-add-line-button.component.jsx | 49 +++++++++++++++++ .../invoice-enter-modal.component.jsx | 10 ++-- .../invoice-enter-modal.container.jsx | 46 +++++++++++----- .../invoice-enter-modal.table.component.jsx | 19 ++++--- client/src/translations/en_us/common.json | 6 +++ client/src/translations/es/common.json | 6 +++ client/src/translations/fr/common.json | 6 +++ 8 files changed, 171 insertions(+), 23 deletions(-) create mode 100644 client/src/components/invoice-add-line-button/invoice-add-line-button.component.jsx diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index e73a047bc..dff302c4d 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -1747,6 +1747,58 @@ + + invoicelines + + + fields + + + actual + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + retail + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + + + invoices diff --git a/client/src/components/invoice-add-line-button/invoice-add-line-button.component.jsx b/client/src/components/invoice-add-line-button/invoice-add-line-button.component.jsx new file mode 100644 index 000000000..40fab33da --- /dev/null +++ b/client/src/components/invoice-add-line-button/invoice-add-line-button.component.jsx @@ -0,0 +1,49 @@ +import React, { useState } from "react"; +import { Button, Popover, Icon, Input, InputNumber, Form } from "antd"; +import { useTranslation } from "react-i18next"; + +export default function InvoiceAddLineButton({ + jobLine, + invoiceLineState, + form, + discount +}) { + const [visibility, setVisibility] = useState(false); + const { t } = useTranslation(); + const { getFieldDecorator } = form; + + const popContent = ( +
+ + {getFieldDecorator("line_desc", { + initialValue: jobLine.line_desc + })()} + + + {getFieldDecorator("oem_partno", { + initialValue: jobLine.oem_partno + })()} + + + {getFieldDecorator("retail", { initialValue: jobLine.act_price })( + + )} + + + {getFieldDecorator("actual", { + initialValue: jobLine.act_price * (discount ? 1 - discount : 1) + })()} + + DISSC: {discount} + +
+ ); + + return ( + + + + ); +} diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx index 16d425581..ef194319a 100644 --- a/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx +++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx @@ -24,14 +24,15 @@ export default function InvoiceEnterModalComponent({ handleRoSelect, roAutoCompleteOptions, handleVendorAutoComplete, + handleVendorSelect, vendorAutoCompleteOptions, lineData, - linesState + linesState, + vendor }) { const { t } = useTranslation(); const { getFieldDecorator, resetFields } = form; - - console.log("invoice", invoice); + return ( Table of added items. diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx index c790514ea..e43da0f00 100644 --- a/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx +++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx @@ -27,7 +27,7 @@ function InvoiceEnterModalContainer({ bodyshop }) { const { t } = useTranslation(); - const linesState = useState([]); + const linesState = useState([]); const roSearchState = useState({ text: "", selectedId: null }); const [roSearch, setRoSearch] = roSearchState; const handleRoAutoComplete = e => { @@ -39,36 +39,42 @@ function InvoiceEnterModalContainer({ skip: !roSearch.text || roSearch.text.length < 3 }); - const vendorSearchState = useState(""); + const vendorSearchState = useState({ + text: "", + selectedId: null + }); const [vendorSearch, setVendorSearch] = vendorSearchState; const handleVendorAutoComplete = e => { - setVendorSearch(e); + setVendorSearch({ ...vendorSearch, text: e }); }; const { data: VendorAutoCompleteData } = useQuery( SEARCH_VENDOR_AUTOCOMPLETE, { fetchPolicy: "network-only", - variables: { search: `%${vendorSearch}%` }, - skip: !vendorSearch || vendorSearch.length < 3 + variables: { search: `%${vendorSearch.text}%` }, + skip: !vendorSearch.text || vendorSearch.text.length < 3 } ); - const [ - loadLines, - { called, loading: lineLoading, data: lineData } - ] = useLazyQuery(GET_JOB_LINES_TO_ENTER_INVOICE, { - fetchPolicy: "network-only", - variables: { id: roSearch.selectedId } - }); + const [loadLines, { called, data: lineData }] = useLazyQuery( + GET_JOB_LINES_TO_ENTER_INVOICE, + { + fetchPolicy: "network-only", + variables: { id: roSearch.selectedId } + } + ); if (roSearch.selectedId) { if (!called) loadLines(); - console.log("lineData", lineData); } const handleRoSelect = v => { setRoSearch({ ...roSearch, selectedId: v }); }; + const handleVendorSelect = v => { + setVendorSearch({ ...vendorSearch, selectedId: v }); + }; + const handleSubmit = e => { e.preventDefault(); form.validateFieldsAndScroll((err, values) => { @@ -134,6 +140,12 @@ function InvoiceEnterModalContainer({ toggleModalVisible(); }; + console.log( + "c", + VendorAutoCompleteData?.vendors.filter( + v => v.id === vendorSearch.selectedId + ) + ); return ( { @@ -171,6 +184,13 @@ function InvoiceEnterModalContainer({ } linesState={linesState} lineData={lineData ? lineData.joblines : null} + vendor={ + vendorSearch.selectedId + ? VendorAutoCompleteData.vendors.filter( + v => v.id === vendorSearch.selectedId + )[0] + : null + } /> ); } diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.table.component.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.table.component.jsx index 156a0680f..e3e2e0465 100644 --- a/client/src/components/invoice-enter-modal/invoice-enter-modal.table.component.jsx +++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.table.component.jsx @@ -1,14 +1,17 @@ +import { Table } from "antd"; import React, { useState } from "react"; -import { Table, Button, Icon } from "antd"; import { useTranslation } from "react-i18next"; -import { alphaSort } from "../../utils/sorters"; import CurrencyFormatter from "../../utils/CurrencyFormatter"; +import { alphaSort } from "../../utils/sorters"; +import InvoiceAddLineButton from "../invoice-add-line-button/invoice-add-line-button.component"; export default function InvoiceEnterModalTableComponent({ lineData, - linesState + linesState, + form, + vendor }) { - const [selectedLines, setSelectedLines] = linesState; + //const [selectedLines, setSelectedLines] = linesState; const [state, setState] = useState({ sortedInfo: {} }); @@ -94,9 +97,11 @@ export default function InvoiceEnterModalTableComponent({ key: "actions", render: (text, record) => (
- +
) } diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index a9ba6c91d..21a64b4b8 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -144,6 +144,12 @@ "required": "This field is required. " } }, + "invoicelines": { + "fields": { + "actual": "Actual", + "retail": "Retail" + } + }, "invoices": { "actions": { "receive": "Receive Part" diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index ded57f8a9..7e1b025b4 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -144,6 +144,12 @@ "required": "Este campo es requerido." } }, + "invoicelines": { + "fields": { + "actual": "", + "retail": "" + } + }, "invoices": { "actions": { "receive": "" diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index 1e1ca27c2..01060529e 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -144,6 +144,12 @@ "required": "Ce champ est requis." } }, + "invoicelines": { + "fields": { + "actual": "", + "retail": "" + } + }, "invoices": { "actions": { "receive": ""