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

WIP for invoice list items on inovice enter

Browse Source
This commit is contained in:
Patrick Fic
2020-03-02 12:50:23 -08:00
parent 8c54de9a9f
commit ea000df34a
17 changed files with 573 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,19 +1,8 @@
import {
Select,
Button,
DatePicker,
Form,
Input,
InputNumber,
Modal,
Switch,
Row,
Col
} from "antd";
import { Button, DatePicker, Form, Input, Modal, Select, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import InvoiceEnterModalTableComponent from "./invoice-enter-modal.table.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component";
export default function InvoiceEnterModalComponent({
visible,
invoice,
@@ -145,22 +134,18 @@ export default function InvoiceEnterModalComponent({
{ required: true, message: t("general.validation.required") }
]}
>
<InputNumber precision={2} min={0} />
<CurrencyInput />
</Form.Item>
</div>
<Row>
<Col span={12}>
<InvoiceEnterModalTableComponent
lineData={lineData}
linesState={linesState}
form={form}
vendor={vendor}
/>
</Col>
<Col span={12}>Table of added items.</Col>
</Row>
);
</Modal>{" "}
<InvoiceEnterModalLinesComponent
lineData={lineData}
discount={vendor && vendor.discount}
form={form}
/>
<Button onClick={() => console.log(form.getFieldsValue())}>
Field Values
</Button>
</Modal>
</Form>
);
}

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

@@ -69,7 +69,7 @@ function InvoiceEnterModalContainer({
const handleFinish = values => {
console.log("values", values);
alert("Closing this modal.");
toggleModalVisible();
// toggleModalVisible();
// if (!jobLineEditModal.context.id) {
// insertJobLine({
// variables: {

138
client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx Normal file
View File

@@ -0,0 +1,138 @@
import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, Select } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
export default function InvoiceEnterModalLinesComponent({
lineData,
discount,
form
}) {
const { t } = useTranslation();
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
label={t("invoicelines.fields.actual")}
key={`${index}actual_price`}
name={[field.name, "actual_price"]}
>
<CurrencyInput
onBlur={e => {
setFieldsValue({
invoicelines: getFieldsValue(
"invoicelines"
).invoicelines.map((item, idx) => {
if (idx === index) {
return {
...item,
actual_cost:
parseFloat(e.target.value.substring(1)) * 1 -
discount
};
}
return item;
})
});
}}
/>
</Form.Item>
<Form.Item
label={t("invoicelines.fields.actual_cost")}
key={`${index}actual_cost`}
name={[field.name, "actual_cost"]}
>
<CurrencyInput />
</Form.Item>
<Form.Item
label={t("invoicelines.fields.cost_center")}
key={`${index}cost_center`}
name={[field.name, "cost_center"]}
>
<Input />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "60%" }}
>
New liNe
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
);
}

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

@@ -7,11 +7,9 @@ import InvoiceAddLineButton from "../invoice-add-line-button/invoice-add-line-bu
export default function InvoiceEnterModalTableComponent({
lineData,
linesState,
form,
vendor
}) {
//const [selectedLines, setSelectedLines] = linesState;
const [state, setState] = useState({
sortedInfo: {}
});