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

WIP Invoice Enter

Browse Source
This commit is contained in:
Patrick Fic
2020-03-02 16:18:14 -08:00
parent ea000df34a
commit 181c5cbd2a
9 changed files with 346 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
bodyshop_translations.babel
View File

@@ -1750,6 +1750,32 @@
<folder_node> <folder_node>
<name>invoicelines</name> <name>invoicelines</name>
<children> <children>
<folder_node>
<name>actions</name>
<children>
<concept_node>
<name>newline</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> <folder_node>
<name>fields</name> <name>fields</name>
<children> <children>
@@ -1863,6 +1889,27 @@
<folder_node> <folder_node>
<name>labels</name> <name>labels</name>
<children> <children>
<concept_node>
<name>entered</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> <concept_node>
<name>other</name> <name>other</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -1884,6 +1931,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>unreconciled</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> </children>
</folder_node> </folder_node>
</children> </children>

5
client/src/components/form-items-formatted/currency-form-item.component.jsx
View File

@@ -4,10 +4,9 @@ function FormItemCurrency(props, ref) {
return ( return (
<InputNumber <InputNumber
{...props} {...props}
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")} //formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
parser={value => value.replace(/\$\s?|(,*)/g, "")} // parser={value => value.replace(/\$\s?|(,*)/g, "")}
precision={2} precision={2}
/> />
); );
} }

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

@@ -1,8 +1,18 @@
import { Button, DatePicker, Form, Input, Modal, Select, Switch } from "antd"; import {
Button,
DatePicker,
Form,
Input,
Modal,
Select,
Switch,
Tag
} from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component"; import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component"; import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component";
export default function InvoiceEnterModalComponent({ export default function InvoiceEnterModalComponent({
visible, visible,
invoice, invoice,
@@ -15,15 +25,12 @@ export default function InvoiceEnterModalComponent({
handleVendorSelect, handleVendorSelect,
vendorAutoCompleteOptions, vendorAutoCompleteOptions,
lineData, lineData,
linesState, vendor,
vendor job
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [form] = Form.useForm(); const [form] = Form.useForm();
const { resetFields } = form; const { resetFields } = form;
//Default Values to be set in form.
// {getFieldDecorator("retail", { initialValue: jobLine.act_price })(
// initialValue: jobLine.act_price * (discount ? 1 - discount : 1)
return ( return (
<Form onFinish={handleFinish} autoComplete={"off"} form={form}> <Form onFinish={handleFinish} autoComplete={"off"} form={form}>
@@ -53,7 +60,11 @@ export default function InvoiceEnterModalComponent({
> >
<Select <Select
showSearch showSearch
defaultValue={
job ? (job.ro_number ? job.ro_number : job.est_number) : null
}
autoFocus autoFocus
defaultOpen
style={{ width: "300px" }} style={{ width: "300px" }}
onSelect={handleRoSelect} onSelect={handleRoSelect}
> >
@@ -91,12 +102,16 @@ export default function InvoiceEnterModalComponent({
{vendorAutoCompleteOptions {vendorAutoCompleteOptions
? vendorAutoCompleteOptions.map(o => ( ? vendorAutoCompleteOptions.map(o => (
<Select.Option key={o.id} value={o.name}> <Select.Option key={o.id} value={o.name}>
{o.name} <div style={{ display: "flex" }}>
{o.name}
<Tag color="green">{`${o.discount * 100}%`}</Tag>
</div>
</Select.Option> </Select.Option>
)) ))
: null} : null}
</Select> </Select>
</Form.Item> </Form.Item>
<Button onClick={() => resetFields()}> <Button onClick={() => resetFields()}>
{t("general.actions.reset")} {t("general.actions.reset")}
</Button> </Button>
@@ -105,8 +120,11 @@ export default function InvoiceEnterModalComponent({
<Form.Item <Form.Item
label={t("invoices.fields.invoice_number")} label={t("invoices.fields.invoice_number")}
name="invoice_number" name="invoice_number"
rule={[ rules={[
{ required: true, message: t("general.validation.required") } {
required: true,
message: t("general.validation.required")
}
]} ]}
> >
<Input /> <Input />
@@ -114,8 +132,11 @@ export default function InvoiceEnterModalComponent({
<Form.Item <Form.Item
label={t("invoices.fields.date")} label={t("invoices.fields.date")}
name="date" name="date"
rule={[ rules={[
{ required: true, message: t("general.validation.required") } {
required: true,
message: t("general.validation.required")
}
]} ]}
> >
<DatePicker /> <DatePicker />
@@ -130,8 +151,11 @@ export default function InvoiceEnterModalComponent({
<Form.Item <Form.Item
label={t("invoices.fields.total")} label={t("invoices.fields.total")}
name="total" name="total"
rule={[ rules={[
{ required: true, message: t("general.validation.required") } {
required: true,
message: t("general.validation.required")
}
]} ]}
> >
<CurrencyInput /> <CurrencyInput />
@@ -142,6 +166,7 @@ export default function InvoiceEnterModalComponent({
discount={vendor && vendor.discount} discount={vendor && vendor.discount}
form={form} form={form}
/> />
<Button onClick={() => console.log(form.getFieldsValue())}> <Button onClick={() => console.log(form.getFieldsValue())}>
Field Values Field Values
</Button> </Button>

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

@@ -69,7 +69,7 @@ function InvoiceEnterModalContainer({
const handleFinish = values => { const handleFinish = values => {
console.log("values", values); console.log("values", values);
alert("Closing this modal."); alert("Closing this modal.");
// toggleModalVisible(); // toggleModalVisible();
// if (!jobLineEditModal.context.id) { // if (!jobLineEditModal.context.id) {
// insertJobLine({ // insertJobLine({
// variables: { // variables: {
@@ -141,6 +141,7 @@ function InvoiceEnterModalContainer({
)[0] )[0]
: null : null
} }
job={invoiceEnterModal.context.job || null}
/> />
); );
} }

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

@@ -1,7 +1,8 @@
import { DeleteFilled } from "@ant-design/icons"; import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, Select } from "antd"; import { Button, Col, Form, Input, Row, Select, Tag } from "antd";
import React from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import CurrencyInput from "../form-items-formatted/currency-form-item.component"; import CurrencyInput from "../form-items-formatted/currency-form-item.component";
export default function InvoiceEnterModalLinesComponent({ export default function InvoiceEnterModalLinesComponent({
@@ -11,128 +12,211 @@ export default function InvoiceEnterModalLinesComponent({
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { setFieldsValue, getFieldsValue } = form; const { setFieldsValue, getFieldsValue } = form;
return (
<Form.List name="invoicelines">
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item required={false} key={field.key}>
<div style={{ display: "flex" }}>
<Form.Item
label={t("invoicelines.fields.line_desc")}
key={`${index}line_desc`}
name={[field.name, "line_desc"]}
>
<Select
style={{ width: "300px" }}
onSelect={(value, opt) => {
setFieldsValue({
invoicelines: getFieldsValue([
"invoicelines"
]).invoicelines.map((item, idx) => {
if (idx === index) {
return {
...item,
joblineid: opt.key.includes("noline")
? null
: opt.key
};
}
return item;
})
});
}}
showSearch
>
<Select.Option
key={`${index}noline`}
value={t("invoicelines.labels.other")}
>
{t("invoicelines.labels.other")}
</Select.Option>
{lineData
? lineData.map(item => (
<Select.Option key={item.id} value={item.line_desc}>
{item.line_desc}
</Select.Option>
))
: null}
</Select>
</Form.Item>
{console.log(
'getFieldsValue("invoicelines").invoicelines[index]',
getFieldsValue("invoicelines").invoicelines[index]
)}
{getFieldsValue("invoicelines").invoicelines[index] &&
getFieldsValue("invoicelines").invoicelines[index]
.line_desc &&
!getFieldsValue("invoicelines").invoicelines[index].joblineid
? "Other"
: null}
<Form.Item const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
label={t("invoicelines.fields.actual")}
key={`${index}actual_price`} return (
name={[field.name, "actual_price"]} <div>
> <Form.List name="invoicelines">
<CurrencyInput {(fields, { add, remove }) => {
onBlur={e => { return (
setFieldsValue({ <div>
invoicelines: getFieldsValue( {fields.map((field, index) => (
"invoicelines" <Form.Item required={false} key={field.key}>
).invoicelines.map((item, idx) => { <div style={{ display: "flex" }}>
if (idx === index) { <Form.Item
return { label={t("invoicelines.fields.line_desc")}
...item, key={`${index}joblinename`}
actual_cost: name={[field.name, "joblinename"]}
parseFloat(e.target.value.substring(1)) * 1 - rules={[
discount {
}; required: true,
} message: t("general.validation.required")
return item; }
]}
>
<Select
autoFocus
name={`le${index}`}
style={{ width: "300px" }}
onSelect={(value, opt) => {
setFieldsValue({
invoicelines: getFieldsValue([
"invoicelines"
]).invoicelines.map((item, idx) => {
if (idx === index) {
console.log("opt", opt);
return {
...item,
joblineid: opt.key.includes("noline")
? null
: opt.key,
line_desc: opt.key.includes("noline")
? ""
: opt.value,
actual_price: opt.cost ? opt.cost : 0
};
}
return item;
})
});
}}
showSearch
>
<Select.Option
key={`${index}noline`}
value={t("invoicelines.labels.other")}
cost={0}
>
{t("invoicelines.labels.other")}
</Select.Option>
{lineData
? lineData.map(item => (
<Select.Option
key={item.id}
value={item.line_desc}
cost={item.act_price ? item.act_price : 0}
>
{item.line_desc}
</Select.Option>
))
: null}
</Select>
</Form.Item>
{getFieldsValue("invoicelines").invoicelines[index] &&
getFieldsValue("invoicelines").invoicelines[index]
.joblinename &&
!getFieldsValue("invoicelines").invoicelines[index]
.joblineid ? (
<Form.Item
label={t("invoicelines.fields.line_desc")}
key={`${index}line_desc`}
name={[field.name, "line_desc"]}
>
<Input />
</Form.Item>
) : null}
<Form.Item
label={t("invoicelines.fields.actual")}
key={`${index}actual_price`}
name={[field.name, "actual_price"]}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<CurrencyInput
onBlur={e => {
setFieldsValue({
invoicelines: getFieldsValue(
"invoicelines"
).invoicelines.map((item, idx) => {
if (idx === index) {
return {
...item,
actual_cost:
parseFloat(e.target.value) * (1 - discount)
};
}
return item;
})
});
}}
/>
</Form.Item>
<Form.Item
label={t("invoicelines.fields.actual_cost")}
key={`${index}actual_cost`}
name={[field.name, "actual_cost"]}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<CurrencyInput
onBlur={() =>
setAmounts({
invoiceTotal: getFieldsValue().total,
enteredTotal: getFieldsValue("invoicelines")
.invoicelines
? getFieldsValue(
"invoicelines"
).invoicelines.reduce(
(acc, value) =>
acc +
(value && value.actual_cost
? value.actual_cost
: 0),
0
)
: 0
}) })
}); }
/>
</Form.Item>
<Form.Item
label={t("invoicelines.fields.cost_center")}
key={`${index}cost_center`}
name={[field.name, "cost_center"]}
rules={[
{
required: true,
message: t("general.validation.required")
}
]}
>
<Input />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}} }}
/> />
</Form.Item> </div>
<Form.Item </Form.Item>
label={t("invoicelines.fields.actual_cost")} ))}
key={`${index}actual_cost`} <Form.Item>
name={[field.name, "actual_cost"]} <Button
> type="dashed"
<CurrencyInput /> onClick={() => {
</Form.Item> add();
<Form.Item }}
label={t("invoicelines.fields.cost_center")} style={{ width: "60%" }}
key={`${index}cost_center`} >
name={[field.name, "cost_center"]} {t("invoicelines.actions.newline")}
> </Button>
<Input />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item> </Form.Item>
))} </div>
<Form.Item> );
<Button }}
type="dashed" </Form.List>
onClick={() => { <Row>
add(); <Col span={4}>
}} {t("invoicelines.labels.entered")}
style={{ width: "60%" }} <CurrencyFormatter>{amounts.enteredTotal}</CurrencyFormatter>
> </Col>
New liNe
</Button> <Col span={4}>
</Form.Item> <Tag
</div> color={
); amounts.invoiceTotal - amounts.enteredTotal === 0
}} ? "green"
</Form.List> : "red"
}
>
{t("invoicelines.labels.unreconciled")}:
<CurrencyFormatter>
{amounts.invoiceTotal - amounts.enteredTotal}
</CurrencyFormatter>
</Tag>
</Col>
</Row>
</div>
); );
} }

16
client/src/redux/store.js
View File

@@ -1,4 +1,4 @@
import { createStore, applyMiddleware } from "redux"; import { createStore, applyMiddleware, compose } from "redux";
import { persistStore } from "redux-persist"; import { persistStore } from "redux-persist";
import { createLogger } from "redux-logger"; import { createLogger } from "redux-logger";
import createSagaMiddleware from "redux-saga"; import createSagaMiddleware from "redux-saga";
@@ -11,7 +11,19 @@ if (process.env.NODE_ENV === "development") {
middlewares.push(createLogger({ collapsed: true, diff: true })); middlewares.push(createLogger({ collapsed: true, diff: true }));
} }
export const store = createStore(rootReducer, applyMiddleware(...middlewares)); const composeEnhancers =
typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
})
: compose;
const enhancer = composeEnhancers(
applyMiddleware(...middlewares)
// other store enhancers if any
);
export const store = createStore(rootReducer, enhancer);
sagaMiddleWare.run(rootSaga); sagaMiddleWare.run(rootSaga);
export const persistor = persistStore(store); export const persistor = persistStore(store);

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

@@ -145,6 +145,9 @@
} }
}, },
"invoicelines": { "invoicelines": {
"actions": {
"newline": "New Line"
},
"fields": { "fields": {
"actual": "Actual", "actual": "Actual",
"actual_cost": "Actual Cost", "actual_cost": "Actual Cost",
@@ -153,7 +156,9 @@
"retail": "Retail" "retail": "Retail"
}, },
"labels": { "labels": {
"other": "Other Item" "entered": "Entered",
"other": "--Not On Estimate--",
"unreconciled": "Unreconciled"
} }
}, },
"invoices": { "invoices": {

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

@@ -145,6 +145,9 @@
} }
}, },
"invoicelines": { "invoicelines": {
"actions": {
"newline": ""
},
"fields": { "fields": {
"actual": "", "actual": "",
"actual_cost": "", "actual_cost": "",
@@ -153,7 +156,9 @@
"retail": "" "retail": ""
}, },
"labels": { "labels": {
"other": "" "entered": "",
"other": "",
"unreconciled": ""
} }
}, },
"invoices": { "invoices": {

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

@@ -145,6 +145,9 @@
} }
}, },
"invoicelines": { "invoicelines": {
"actions": {
"newline": ""
},
"fields": { "fields": {
"actual": "", "actual": "",
"actual_cost": "", "actual_cost": "",
@@ -153,7 +156,9 @@
"retail": "" "retail": ""
}, },
"labels": { "labels": {
"other": "" "entered": "",
"other": "",
"unreconciled": ""
} }
}, },
"invoices": { "invoices": {