IO-853 Added delete bill line.

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,7 +36,8 @@ export function BillEnterModalLinesComponent({
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue, getFieldValue } = form;
 
-  const columns = [
+  const columns = (remove) => {
+    return [
       {
         title: t("billlines.fields.jobline"),
         dataIndex: "joblineid",
@@ -69,8 +70,9 @@ export function BillEnterModalLinesComponent({
                         quantity: opt.part_qty || 1,
                         actual_price: opt.cost,
                         cost_center: opt.part_type
-                        ? responsibilityCenters.defaults.costs[opt.part_type] ||
-                          null
+                          ? responsibilityCenters.defaults.costs[
+                              opt.part_type
+                            ] || null
                           : null,
                       };
                     }
@@ -104,6 +106,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.quantity"),
         dataIndex: "quantity",
         editable: true,
+        width: "5rem",
         formItemProps: (field) => {
           return {
             key: `${field.index}quantity`,
@@ -123,6 +126,7 @@ export function BillEnterModalLinesComponent({
       {
         title: t("billlines.fields.actual_price"),
         dataIndex: "actual_price",
+        width: "6rem",
         editable: true,
         formItemProps: (field) => {
           return {
@@ -179,6 +183,7 @@ export function BillEnterModalLinesComponent({
         title: t("billlines.fields.actual_cost"),
         dataIndex: "actual_cost",
         editable: true,
+        width: "7rem",
         formItemProps: (field) => {
           return {
             key: `${field.index}actual_cost`,
@@ -389,9 +394,21 @@ export function BillEnterModalLinesComponent({
           </Form.Item>
         ),
       },
-  ];
+      {
+        title: t("general.labels.actions"),
 
-  const mergedColumns = columns.map((col) => {
+        dataIndex: "actions",
+        render: (text, record) => (
+          <Button disabled={disabled} onClick={() => remove(record.name)}>
+            <DeleteFilled />
+          </Button>
+        ),
+      },
+    ];
+  };
+
+  const mergedColumns = (remove) =>
+    columns(remove).map((col) => {
       if (!col.editable) return col;
       return {
         ...col,
@@ -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}
           </Form.Item>
           {additional && additional(record, record.key)}
         </Space>
@@ -477,7 +494,7 @@ const EditableCell = ({
   return (
     <td {...restProps}>
       <Form.Item name={dataIndex} {...(formItemProps && formItemProps(record))}>
-        {formInput && formInput(record, record.key)}
+        {(formInput && formInput(record, record.key)) || children}
       </Form.Item>
     </td>
   );