diff --git a/client/src/components/bill-form/bill-form.lines.component.jsx b/client/src/components/bill-form/bill-form.lines.component.jsx index 2c9870ea3..7edadec39 100644 --- a/client/src/components/bill-form/bill-form.lines.component.jsx +++ b/client/src/components/bill-form/bill-form.lines.component.jsx @@ -1,4 +1,4 @@ -import { WarningOutlined } from "@ant-design/icons"; +import { DeleteFilled, WarningOutlined } from "@ant-design/icons"; import { Button, Form, @@ -36,375 +36,392 @@ export function BillEnterModalLinesComponent({ const { t } = useTranslation(); const { setFieldsValue, getFieldsValue, getFieldValue } = form; - const columns = [ - { - title: t("billlines.fields.jobline"), - dataIndex: "joblineid", - editable: true, - width: "10%", - formItemProps: (field) => { - return { - key: `${field.index}joblinename`, - name: [field.name, "joblineid"], - rules: [ - { - required: true, - message: t("general.validation.required"), - }, - ], - }; - }, - formInput: (record, index) => ( - { - setFieldsValue({ - billlines: getFieldsValue(["billlines"]).billlines.map( - (item, idx) => { - if (idx === index) { - return { - ...item, - line_desc: opt.line_desc, - quantity: opt.part_qty || 1, - actual_price: opt.cost, - cost_center: opt.part_type - ? responsibilityCenters.defaults.costs[opt.part_type] || - null - : null, - }; + const columns = (remove) => { + return [ + { + title: t("billlines.fields.jobline"), + dataIndex: "joblineid", + editable: true, + width: "10%", + formItemProps: (field) => { + return { + key: `${field.index}joblinename`, + name: [field.name, "joblineid"], + rules: [ + { + required: true, + message: t("general.validation.required"), + }, + ], + }; + }, + formInput: (record, index) => ( + { + setFieldsValue({ + billlines: getFieldsValue(["billlines"]).billlines.map( + (item, idx) => { + if (idx === index) { + return { + ...item, + line_desc: opt.line_desc, + quantity: opt.part_qty || 1, + actual_price: opt.cost, + cost_center: opt.part_type + ? responsibilityCenters.defaults.costs[ + opt.part_type + ] || null + : null, + }; + } + return item; } - return item; - } - ), - }); - }} - /> - ), - }, - { - title: t("billlines.fields.line_desc"), - dataIndex: "line_desc", - editable: true, - formItemProps: (field) => { - return { - key: `${field.index}line_desc`, - name: [field.name, "line_desc"], - rules: [ - { - required: true, - message: t("general.validation.required"), - }, - ], - }; + ), + }); + }} + /> + ), }, - formInput: (record, index) => , - }, - { - title: t("billlines.fields.quantity"), - dataIndex: "quantity", - editable: true, - formItemProps: (field) => { - return { - key: `${field.index}quantity`, - name: [field.name, "quantity"], - rules: [ - { - required: true, - message: t("general.validation.required"), - }, - ], - }; + { + title: t("billlines.fields.line_desc"), + dataIndex: "line_desc", + editable: true, + formItemProps: (field) => { + return { + key: `${field.index}line_desc`, + name: [field.name, "line_desc"], + rules: [ + { + required: true, + message: t("general.validation.required"), + }, + ], + }; + }, + formInput: (record, index) => , }, - formInput: (record, index) => ( - - ), - }, - { - title: t("billlines.fields.actual_price"), - dataIndex: "actual_price", - editable: true, - formItemProps: (field) => { - return { - key: `${field.index}actual_price`, - name: [field.name, "actual_price"], - rules: [ - { - required: true, - message: t("general.validation.required"), - }, - ], - }; + { + title: t("billlines.fields.quantity"), + dataIndex: "quantity", + editable: true, + width: "5rem", + formItemProps: (field) => { + return { + key: `${field.index}quantity`, + name: [field.name, "quantity"], + rules: [ + { + required: true, + message: t("general.validation.required"), + }, + ], + }; + }, + formInput: (record, index) => ( + + ), }, - formInput: (record, index) => ( - { - setFieldsValue({ - billlines: getFieldsValue("billlines").billlines.map( - (item, idx) => { - console.log("Checking", index, idx); - if (idx === index) { - console.log( - "Found and setting.", - !!item.actual_cost - ? item.actual_cost - : Math.round( - (parseFloat(e.target.value) * (1 - discount) + - Number.EPSILON) * - 100 - ) / 100 - ); - return { - ...item, - actual_cost: !!item.actual_cost - ? item.actual_cost - : Math.round( - (parseFloat(e.target.value) * (1 - discount) + - Number.EPSILON) * - 100 - ) / 100, - }; + { + title: t("billlines.fields.actual_price"), + dataIndex: "actual_price", + width: "6rem", + editable: true, + formItemProps: (field) => { + return { + key: `${field.index}actual_price`, + name: [field.name, "actual_price"], + rules: [ + { + required: true, + message: t("general.validation.required"), + }, + ], + }; + }, + formInput: (record, index) => ( + { + setFieldsValue({ + billlines: getFieldsValue("billlines").billlines.map( + (item, idx) => { + console.log("Checking", index, idx); + if (idx === index) { + console.log( + "Found and setting.", + !!item.actual_cost + ? item.actual_cost + : Math.round( + (parseFloat(e.target.value) * (1 - discount) + + Number.EPSILON) * + 100 + ) / 100 + ); + return { + ...item, + actual_cost: !!item.actual_cost + ? item.actual_cost + : Math.round( + (parseFloat(e.target.value) * (1 - discount) + + Number.EPSILON) * + 100 + ) / 100, + }; + } + return item; } - return item; - } - ), - }); - }} - /> - ), - }, - { - title: t("billlines.fields.actual_cost"), - dataIndex: "actual_cost", - editable: true, - formItemProps: (field) => { - return { - key: `${field.index}actual_cost`, - name: [field.name, "actual_cost"], - rules: [ - { - required: true, - message: t("general.validation.required"), - }, - ], - }; + ), + }); + }} + /> + ), }, - formInput: (record, index) => ( - - ), - additional: (record, index) => ( - - {() => { - const line = getFieldsValue(["billlines"]).billlines[index]; - if (!!!line) return null; - const lineDiscount = ( - 1 - - Math.round((line.actual_cost / line.actual_price) * 100) / 100 - ).toPrecision(2); + { + title: t("billlines.fields.actual_cost"), + dataIndex: "actual_cost", + editable: true, + width: "7rem", + formItemProps: (field) => { + return { + key: `${field.index}actual_cost`, + name: [field.name, "actual_cost"], + rules: [ + { + required: true, + message: t("general.validation.required"), + }, + ], + }; + }, + formInput: (record, index) => ( + + ), + additional: (record, index) => ( + + {() => { + const line = getFieldsValue(["billlines"]).billlines[index]; + if (!!!line) return null; + const lineDiscount = ( + 1 - + Math.round((line.actual_cost / line.actual_price) * 100) / 100 + ).toPrecision(2); - if (lineDiscount - discount === 0) return
; - return ; - }} - - ), - }, - { - title: t("billlines.fields.cost_center"), - dataIndex: "cost_center", - editable: true, - formItemProps: (field) => { - return { - key: `${field.index}cost_center`, - name: [field.name, "cost_center"], - rules: [ - { - required: true, - message: t("general.validation.required"), - }, - ], - }; + if (lineDiscount - discount === 0) return
; + return ; + }} + + ), }, - formInput: (record, index) => ( - - ), - }, - { - title: t("billlines.fields.federal_tax_applicable"), - dataIndex: "applicable_taxes.federal", - editable: true, - formItemProps: (field) => { - return { - key: `${field.index}fedtax`, - valuePropName: "checked", - initialValue: true, - name: [field.name, "applicable_taxes", "federal"], - }; + { + title: t("billlines.fields.cost_center"), + dataIndex: "cost_center", + editable: true, + formItemProps: (field) => { + return { + key: `${field.index}cost_center`, + name: [field.name, "cost_center"], + rules: [ + { + required: true, + message: t("general.validation.required"), + }, + ], + }; + }, + formInput: (record, index) => ( + + ), }, - formInput: (record, index) => , - }, - { - title: t("billlines.fields.state_tax_applicable"), - dataIndex: "applicable_taxes.state", - editable: true, - formItemProps: (field) => { - return { - key: `${field.index}statetax`, - valuePropName: "checked", - name: [field.name, "applicable_taxes", "state"], - }; + { + title: t("billlines.fields.federal_tax_applicable"), + dataIndex: "applicable_taxes.federal", + editable: true, + formItemProps: (field) => { + return { + key: `${field.index}fedtax`, + valuePropName: "checked", + initialValue: true, + name: [field.name, "applicable_taxes", "federal"], + }; + }, + formInput: (record, index) => , }, - formInput: (record, index) => , - }, - { - title: t("billlines.fields.local_tax_applicable"), - dataIndex: "applicable_taxes.local", - editable: true, - formItemProps: (field) => { - return { - key: `${field.index}localtax`, - valuePropName: "checked", - name: [field.name, "applicable_taxes", "local"], - }; + { + title: t("billlines.fields.state_tax_applicable"), + dataIndex: "applicable_taxes.state", + editable: true, + formItemProps: (field) => { + return { + key: `${field.index}statetax`, + valuePropName: "checked", + name: [field.name, "applicable_taxes", "state"], + }; + }, + formInput: (record, index) => , + }, + { + title: t("billlines.fields.local_tax_applicable"), + dataIndex: "applicable_taxes.local", + editable: true, + formItemProps: (field) => { + return { + key: `${field.index}localtax`, + valuePropName: "checked", + name: [field.name, "applicable_taxes", "local"], + }; + }, + formInput: (record, index) => , }, - formInput: (record, index) => , - }, - { - title: t("billlines.fields.location"), - dataIndex: "location", - editable: true, - formItemProps: (field) => { - return { - key: `${field.index}location`, - name: [field.name, "location"], - }; + { + title: t("billlines.fields.location"), + dataIndex: "location", + editable: true, + formItemProps: (field) => { + return { + key: `${field.index}location`, + name: [field.name, "location"], + }; + }, + formInput: (record, index) => ( + + ), }, - formInput: (record, index) => ( - - ), - }, - { - title: t("billlines.labels.deductedfromlbr"), - dataIndex: "deductedfromlbr", - editable: true, - formItemProps: (field) => { - return { - valuePropName: "checked", - key: `${field.index}deductedfromlbr`, - name: [field.name, "deductedfromlbr"], - }; + { + title: t("billlines.labels.deductedfromlbr"), + dataIndex: "deductedfromlbr", + editable: true, + formItemProps: (field) => { + return { + valuePropName: "checked", + key: `${field.index}deductedfromlbr`, + name: [field.name, "deductedfromlbr"], + }; + }, + formInput: (record, index) => , + additional: (record, index) => ( + + {() => { + if (getFieldValue(["billlines", record.name, "deductedfromlbr"])) + return ( +
+ + + + + + +
+ ); + return ; + }} +
+ ), }, - formInput: (record, index) => , - additional: (record, index) => ( - - {() => { - if (getFieldValue(["billlines", record.name, "deductedfromlbr"])) - return ( -
- - - - - - -
- ); - return ; - }} -
- ), - }, - ]; + { + title: t("general.labels.actions"), - const mergedColumns = columns.map((col) => { - if (!col.editable) return col; - return { - ...col, - onCell: (record) => ({ - record, - formItemProps: col.formItemProps, - formInput: col.formInput, - additional: col.additional, - dataIndex: col.dataIndex, - title: col.title, - }), - }; - }); + dataIndex: "actions", + render: (text, record) => ( + + ), + }, + ]; + }; + + const mergedColumns = (remove) => + columns(remove).map((col) => { + if (!col.editable) return col; + return { + ...col, + onCell: (record) => ({ + record, + formItemProps: col.formItemProps, + formInput: col.formInput, + additional: col.additional, + dataIndex: col.dataIndex, + title: col.title, + }), + }; + }); return ( @@ -420,7 +437,7 @@ export function BillEnterModalLinesComponent({ size="small" bordered dataSource={fields} - columns={mergedColumns} + columns={mergedColumns(remove)} scroll={{ x: true }} rowClassName="editable-row" /> @@ -467,7 +484,7 @@ const EditableCell = ({ name={dataIndex} {...(formItemProps && formItemProps(record))} > - {formInput && formInput(record, record.key)} + {(formInput && formInput(record, record.key)) || children} {additional && additional(record, record.key)} @@ -477,7 +494,7 @@ const EditableCell = ({ return ( - {formInput && formInput(record, record.key)} + {(formInput && formInput(record, record.key)) || children} );