From 142c297032cd1f775d92adac63df7d4c98d0f9b6 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Wed, 29 Jan 2020 21:16:27 -0800 Subject: [PATCH] WIP for editable cells. Changed the keys + added new cells for editing. --- .../job-lines-cell.component.jsx | 52 +++++++++++++++ .../job-lines.component.jsx | 66 ++++++++++++++----- .../job-lines.container.jsx | 0 .../jobs-detail.page.component.jsx | 3 +- 4 files changed, 104 insertions(+), 17 deletions(-) create mode 100644 client/src/components/job-detail-lines/job-lines-cell.component.jsx rename client/src/components/{job-lines => job-detail-lines}/job-lines.component.jsx (61%) rename client/src/components/{job-lines => job-detail-lines}/job-lines.container.jsx (100%) diff --git a/client/src/components/job-detail-lines/job-lines-cell.component.jsx b/client/src/components/job-detail-lines/job-lines-cell.component.jsx new file mode 100644 index 000000000..1ea38f1b2 --- /dev/null +++ b/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 ; + } + return ; + }; + + renderCell = ({ getFieldDecorator }) => { + const { + editing, + dataIndex, + title, + inputType, + record, + index, + children, + ...restProps + } = this.props; + return ( + + {editing ? ( + + {getFieldDecorator(dataIndex, { + rules: [ + { + required: true, + message: `Please Input ${title}!` + } + ], + initialValue: record[dataIndex] + })(this.getInput())} + + ) : ( + children + )} + + ); + }; + + render() { + return ( + + {this.renderCell} + + ); + } +} diff --git a/client/src/components/job-lines/job-lines.component.jsx b/client/src/components/job-detail-lines/job-lines.component.jsx similarity index 61% rename from client/src/components/job-lines/job-lines.component.jsx rename to client/src/components/job-detail-lines/job-lines.component.jsx index fedc980ed..135dc6dea 100644 --- a/client/src/components/job-lines/job-lines.component.jsx +++ b/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) => ( - {record.act_price} +
+ {" "} + {record.act_price}{" "} + +
) } ]; @@ -79,7 +96,26 @@ export default function JobLinesComponent({ job }) { ({ ...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} diff --git a/client/src/components/job-lines/job-lines.container.jsx b/client/src/components/job-detail-lines/job-lines.container.jsx similarity index 100% rename from client/src/components/job-lines/job-lines.container.jsx rename to client/src/components/job-detail-lines/job-lines.container.jsx diff --git a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx index d2a44a7ce..beb249db2 100644 --- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx +++ b/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";