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

Refactored to use invoice form for modal + detail edit page. BOD-634

Browse Source
This commit is contained in:
Patrick Fic
2020-05-05 11:03:31 -07:00
parent fbf49c70d8
commit 9238018022
9 changed files with 260 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
client/src/components/invoice-form/invoice-form.lines.component.jsx Normal file
View File

@@ -0,0 +1,162 @@
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";
import InvoiceLineSearchSelect from "../invoice-line-search-select/invoice-line-search-select.component";
export default function InvoiceEnterModalLinesComponent({
lineData,
discount,
form,
responsibilityCenters,
}) {
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.jobline")}
key={`${index}joblinename`}
name={[field.name, "joblineid"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<InvoiceLineSearchSelect
options={lineData}
onBlur={null}
onSelect={(value, opt) => {
setFieldsValue({
invoicelines: getFieldsValue([
"invoicelines",
]).invoicelines.map((item, idx) => {
if (idx === index) {
return {
...item,
line_desc: opt.line_desc,
actual_price: opt.cost,
cost_center: opt.part_type
? responsibilityCenters.defaults[
opt.part_type
] || null
: null,
};
}
return item;
}),
});
}}
/>
</Form.Item>
<Form.Item
label={t("invoicelines.fields.line_desc")}
key={`${index}line_desc`}
name={[field.name, "line_desc"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<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: !!item.actual_cost
? 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 />
</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"),
},
]}
>
<Select style={{ width: "150px" }}>
{responsibilityCenters.costs.map((item) => (
<Select.Option key={item}>{item}</Select.Option>
))}
</Select>
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "50%" }}
>
{t("invoicelines.actions.newline")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
);
}