WIP for editable cells. Changed the keys + added new cells for editing.

client/src/components/job-detail-lines/job-lines-cell.component.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Form, Input, InputNumber } from "antd";
+import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
+
+export default class EditableCell extends React.Component {
+  getInput = () => {
+    if (this.props.inputType === "number") {
+      return <InputNumber />;
+    }
+    return <Input />;
+  };
+
+  renderCell = ({ getFieldDecorator }) => {
+    const {
+      editing,
+      dataIndex,
+      title,
+      inputType,
+      record,
+      index,
+      children,
+      ...restProps
+    } = this.props;
+    return (
+      <td {...restProps}>
+        {editing ? (
+          <Form.Item style={{ margin: 0 }}>
+            {getFieldDecorator(dataIndex, {
+              rules: [
+                {
+                  required: true,
+                  message: `Please Input ${title}!`
+                }
+              ],
+              initialValue: record[dataIndex]
+            })(this.getInput())}
+          </Form.Item>
+        ) : (
+          children
+        )}
+      </td>
+    );
+  };
+
+  render() {
+    return (
+      <JobDetailFormContext.Consumer>
+        {this.renderCell}
+      </JobDetailFormContext.Consumer>
+    );
+  }
+}

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -1,50 +1,58 @@
-import React, { useState } from "react";
-import { Table } from "antd";
-import { alphaSort } from "../../utils/sorters";
+import { Table, Button } from "antd";
+import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
+import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { alphaSort } from "../../utils/sorters";
+import EditableCell from "./job-lines-cell.component";
 
 export default function JobLinesComponent({ job }) {
+  //const form = useContext(JobDetailFormContext);
+  //const { getFieldDecorator } = form;
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" }
   });
+  const [editingKey, setEditingKey] = useState("");
   const { t } = useTranslation();
 
   const columns = [
     {
       title: t("joblines.fields.unq_seq"),
-      dataIndex: "unq_seq",
-      key: "unq_seq",
+      dataIndex: "joblines.unq_seq",
+      key: "joblines.unq_seq",
       // onFilter: (value, record) => record.ro_number.includes(value),
       // filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => alphaSort(a, b),
       sortOrder:
-        state.sortedInfo.columnKey === "unq_seq" && state.sortedInfo.order
-      //ellipsis: true
+        state.sortedInfo.columnKey === "unq_seq" && state.sortedInfo.order,
+      //ellipsis: true,
+      editable: true
     },
     {
       title: t("joblines.fields.line_desc"),
       dataIndex: "line_desc",
-      key: "line_desc",
+      key: "joblines.line_desc",
       sorter: (a, b) => alphaSort(a.line_desc, b.line_desc),
       sortOrder:
         state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
-      ellipsis: true
+      ellipsis: true,
+      editable: true
     },
     {
       title: t("joblines.fields.part_type"),
       dataIndex: "part_type",
-      key: "part_type",
+      key: "joblines.part_type",
       sorter: (a, b) => alphaSort(a.part_type, b.part_type),
       sortOrder:
         state.sortedInfo.columnKey === "part_type" && state.sortedInfo.order,
-      ellipsis: true
+      ellipsis: true,
+      editable: true
     },
     {
       title: t("joblines.fields.db_price"),
       dataIndex: "db_price",
-      key: "db_price",
+      key: "joblines.db_price",
       sorter: (a, b) => a.db_price - b.db_price,
       sortOrder:
         state.sortedInfo.columnKey === "db_price" && state.sortedInfo.order,
@@ -56,13 +64,22 @@ export default function JobLinesComponent({ job }) {
     {
       title: t("joblines.fields.act_price"),
       dataIndex: "act_price",
-      key: "act_price",
+      key: "joblines.act_price",
       sorter: (a, b) => a.act_price - b.act_price,
       sortOrder:
         state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
       ellipsis: true,
       render: (text, record) => (
-        <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
+        <div>
+          {" "}
+          <CurrencyFormatter>{record.act_price}</CurrencyFormatter>{" "}
+          <Button
+            onClick={() => {
+              setEditingKey(record.id);
+            }}>
+            EDIT
+          </Button>
+        </div>
       )
     }
   ];
@@ -79,7 +96,26 @@ export default function JobLinesComponent({ job }) {
     <Table
       size='small'
       pagination={{ position: "bottom" }}
-      columns={columns.map(item => ({ ...item }))}
+      columns={columns.map(col => {
+        if (!col.editable) {
+          return col;
+        }
+        return {
+          ...col,
+          onCell: record => ({
+            record,
+            inputType: col.dataIndex === "age" ? "number" : "text",
+            dataIndex: col.dataIndex,
+            title: col.title,
+            editing: editingKey === record.id
+          })
+        };
+      })}
+      components={{
+        body: {
+          cell: EditableCell
+        }
+      }}
       rowKey='id'
       dataSource={job.joblines}
       onChange={handleTableChange}

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -7,8 +7,7 @@ import {
   FaRegStickyNote,
   FaShieldAlt
 } from "react-icons/fa";
-//import JobLinesContainer from "../../components/job-lines/job-lines.container";
-import JobsLines from '../../components/job-lines/job-lines.component'
+import JobsLines from '../../components/job-detail-lines/job-lines.component'
 import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
 import JobsDetailFinancials from "../../components/jobs-detail-financial/jobs-detail-financial.component";
 import JobsDetailHeader from "../../components/jobs-detail-header/jobs-detail-header.component";