WIP Invoice Enter
This commit is contained in:
Patrick Fic
@@ -1,7 +1,8 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Button, Form, Input, Select } from "antd";
|
||||
import React from "react";
|
||||
import { Button, Col, Form, Input, Row, Select, Tag } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CurrencyFormatter from "../../utils/CurrencyFormatter";
|
||||
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
|
||||
|
||||
export default function InvoiceEnterModalLinesComponent({
|
||||
@@ -11,128 +12,211 @@ export default function InvoiceEnterModalLinesComponent({
|
||||
}) {
|
||||
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;
|
||||
const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
|
||||
|
||||
return (
|
||||
<div>
|
||||
<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}joblinename`}
|
||||
name={[field.name, "joblinename"]}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("general.validation.required")
|
||||
}
|
||||
]}
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "60%" }}
|
||||
>
|
||||
{t("invoicelines.actions.newline")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "60%" }}
|
||||
>
|
||||
New liNe
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
<Row>
|
||||
<Col span={4}>
|
||||
{t("invoicelines.labels.entered")}
|
||||
<CurrencyFormatter>{amounts.enteredTotal}</CurrencyFormatter>
|
||||
</Col>
|
||||
|
||||
<Col span={4}>
|
||||
<Tag
|
||||
color={
|
||||
amounts.invoiceTotal - amounts.enteredTotal === 0
|
||||
? "green"
|
||||
: "red"
|
||||
}
|
||||
>
|
||||
{t("invoicelines.labels.unreconciled")}:
|
||||
<CurrencyFormatter>
|
||||
{amounts.invoiceTotal - amounts.enteredTotal}
|
||||
</CurrencyFormatter>
|
||||
</Tag>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user