Added basic parts ordering window on job lines.

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

@@ -1,23 +1,24 @@
-import { Input, Table } from "antd";
+import { Input, Table, Button } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
 //import EditableCell from "./job-lines-cell.component";
 import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
+import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
 
 export default function JobLinesComponent({
   jobLines,
-  form,
-  handleSubmit,
-  setSearchText
+  setSearchText,
+  selectedLines,
+  setSelectedLines,
+  partsOrderModalVisible
 }) {
   const [state, setState] = useState({
     sortedInfo: {}
   });
-
   const { t } = useTranslation();
-
+  const [partsModalVisible, setPartsModalVisible] = partsOrderModalVisible;
   const columns = [
     {
       title: t("joblines.fields.unq_seq"),
@@ -130,6 +131,16 @@ export default function JobLinesComponent({
           />
         </span>
       )
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <span>
+          <Button>{t("general.actions.edit")}</Button>
+        </span>
+      )
     }
   ];
 
@@ -137,10 +148,6 @@ export default function JobLinesComponent({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  // const handleChange = event => {
-  //   const { value } = event.target;
-  //   setState({ ...state, filterinfo: { text: [value] } });
-  // };
   const formItemLayout = {
     labelCol: {
       xs: { span: 12 },
@@ -153,25 +160,45 @@ export default function JobLinesComponent({
   };
 
   return (
-    <Table
-      title={() => {
-        return (
-          <Input.Search
-            placeholder="Search..."
-            onChange={e => {
-              e.preventDefault();
-              setSearchText(e.target.value);
-            }}
-          />
-        );
-      }}
-      {...formItemLayout}
-      size="small"
-      pagination={{ position: "bottom", defaultPageSize: 50 }}
-      columns={columns.map(item => ({ ...item }))}
-      rowKey="id"
-      dataSource={jobLines}
-      onChange={handleTableChange}
-    />
+    <div>
+      <PartsOrderModalContainer
+        partsOrderModalVisible={partsOrderModalVisible}
+        linesToOrder={selectedLines}
+      />
+
+      <Table
+        title={() => {
+          return (
+            <div>
+              <Input.Search
+                placeholder={t("general.labels.search")}
+                onChange={e => {
+                  e.preventDefault();
+                  setSearchText(e.target.value);
+                }}
+              />
+              <Button
+                disabled={selectedLines.length > 0 ? false : true}
+                onClick={() => setPartsModalVisible(true)}
+              >
+                {t("parts.actions.order")}
+              </Button>
+            </div>
+          );
+        }}
+        {...formItemLayout}
+        size="small"
+        pagination={{ position: "bottom", defaultPageSize: 50 }}
+        rowSelection={{
+          // selectedRowKeys: selectedLines,
+          onSelect: (record, selected, selectedRows, nativeEvent) =>
+            setSelectedLines(selectedRows)
+        }}
+        columns={columns.map(item => ({ ...item }))}
+        rowKey="id"
+        dataSource={jobLines}
+        onChange={handleTableChange}
+      />
+    </div>
   );
 }