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

@@ -0,0 +1,124 @@
+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: "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,
+      editable: true
+    },
+    {
+      title: t("joblines.fields.line_desc"),
+      dataIndex: "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,
+      editable: true
+    },
+    {
+      title: t("joblines.fields.part_type"),
+      dataIndex: "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,
+      editable: true
+    },
+    {
+      title: t("joblines.fields.db_price"),
+      dataIndex: "db_price",
+      key: "joblines.db_price",
+      sorter: (a, b) => a.db_price - b.db_price,
+      sortOrder:
+        state.sortedInfo.columnKey === "db_price" && state.sortedInfo.order,
+      ellipsis: true,
+      render: (text, record) => (
+        <CurrencyFormatter>{record.db_price}</CurrencyFormatter>
+      )
+    },
+    {
+      title: t("joblines.fields.act_price"),
+      dataIndex: "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) => (
+        <div>
+          {" "}
+          <CurrencyFormatter>{record.act_price}</CurrencyFormatter>{" "}
+          <Button
+            onClick={() => {
+              setEditingKey(record.id);
+            }}>
+            EDIT
+          </Button>
+        </div>
+      )
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  // const handleChange = event => {
+  //   const { value } = event.target;
+  //   setState({ ...state, filterinfo: { text: [value] } });
+  // };
+  return (
+    <Table
+      size='small'
+      pagination={{ position: "bottom" }}
+      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/components/job-detail-lines/job-lines.container.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import JobLinesComponent from "./job-lines.component";
+import { useQuery } from "@apollo/react-hooks";
+import AlertComponent from "../alert/alert.component";
+
+import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
+
+export default function JobLinesContainer({ jobId }) {
+
+  const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
+    variables: { id: jobId },
+    fetchPolicy: "network-only"
+  });
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <JobLinesComponent loading={loading} joblines={data ? data.joblines : null} />
+  );
+}
+