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

2020-01-29 21:16:27 -08:00
parent 7eedd95403
commit 142c297032
4 changed files with 104 additions and 17 deletions
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/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}
+    />
+  );
+}