Refactored job line edit modal to use redux so that it can be an independent form. Created general modals reducer to manage all modals.

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

@@ -1,14 +1,13 @@
 import { Button, Input, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
-import { Link } from "react-router-dom";
-//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";
 import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
-import JobLineUpsertModalContainer from "../job-lines-upsert-modal/job-lines-upsert-modal.container";
+import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
+
 export default function JobLinesComponent({
   loading,
   refetch,
@@ -18,8 +17,7 @@ export default function JobLinesComponent({
   setSelectedLines,
   partsOrderModalVisible,
   jobId,
-  editLineModalVisible,
-  lineToEdit
+  setJobLineEditContext
 }) {
   const [state, setState] = useState({
     sortedInfo: {}
@@ -145,9 +143,8 @@ export default function JobLinesComponent({
           {record.allocations && record.allocations.length > 0
             ? record.allocations.map(item => (
                 <div
-                  key={
-                    item.id
-                  }>{`${item.employee.first_name} ${item.employee.last_name} (${item.hours})`}</div>
+                  key={item.id}
+                >{`${item.employee.first_name} ${item.employee.last_name} (${item.hours})`}</div>
               ))
             : null}
           <AllocationsAssignmentContainer
@@ -167,9 +164,14 @@ export default function JobLinesComponent({
         <span>
           <Button
             onClick={() => {
-              lineToEdit[1](record);
-              editLineModalVisible[1](true);
-            }}>
+              setJobLineEditContext({
+                actions: { refetch: refetch },
+                context: record
+              });
+              //lineToEdit[1](record);
+              //editLineModalVisible[1](true);
+            }}
+          >
             {t("general.actions.edit")}
           </Button>
         </span>
@@ -201,14 +203,6 @@ export default function JobLinesComponent({
         jobId={jobId}
       />
 
-      <JobLineUpsertModalContainer
-        jobId={jobId}
-        visible={editLineModalVisible[0]}
-        changeVisibility={editLineModalVisible[1]}
-        refetch={refetch}
-        existingLine={lineToEdit[0]}
-      />
-
       <Table
         title={() => {
           return (
@@ -222,7 +216,8 @@ export default function JobLinesComponent({
               />
               <Button
                 disabled={selectedLines.length > 0 ? false : true}
-                onClick={() => setPartsModalVisible(true)}>
+                onClick={() => setPartsModalVisible(true)}
+              >
                 {t("parts.actions.order")}
               </Button>
               <AllocationsBulkAssignmentContainer
@@ -234,7 +229,7 @@ export default function JobLinesComponent({
         }}
         {...formItemLayout}
         loading={loading}
-        size='small'
+        size="small"
         expandedRowRender={record => (
           <div style={{ margin: 0 }}>
             <strong>{t("parts_orders.labels.orderhistory")}</strong>
@@ -252,11 +247,14 @@ export default function JobLinesComponent({
         pagination={{ position: "top", defaultPageSize: 25 }}
         rowSelection={{
           // selectedRowKeys: selectedLines,
+          onSelectAll: (selected, selectedRows, changeRows) => {
+            setSelectedLines(selectedRows);
+          },
           onSelect: (record, selected, selectedRows, nativeEvent) =>
             setSelectedLines(selectedRows)
         }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey='id'
+        rowKey="id"
         dataSource={jobLines}
         onChange={handleTableChange}
       />

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

@@ -5,9 +5,16 @@ import { GET_JOB_LINES_BY_PK } from "../../graphql/jobs-lines.queries";
 import AlertComponent from "../alert/alert.component";
 import JobLinesComponent from "./job-lines.component";
 
-//export default Form.create({ name: "JobsDetailJobLines" })(
-
-export default function JobLinesContainer({ jobId }) {
+import { connect } from "react-redux";
+import { setModalContext } from "../../redux/modals/modals.actions";
+const mapDispatchToProps = dispatch => ({
+  setJobLineEditContext: context =>
+    dispatch(setModalContext({ context: context, modal: "jobLineEdit" }))
+});
+export default connect(
+  null,
+  mapDispatchToProps
+)(function JobLinesContainer({ jobId, setJobLineEditContext }) {
   const { loading, error, data, refetch } = useQuery(GET_JOB_LINES_BY_PK, {
     variables: { id: jobId },
     fetchPolicy: "network-only"
@@ -16,10 +23,8 @@ export default function JobLinesContainer({ jobId }) {
   const [searchText, setSearchText] = useState("");
   const [selectedLines, setSelectedLines] = useState([]);
   const partsOrderModalVisible = useState(false);
-  const editLineModalVisible = useState(false);
-  const lineToEdit = useState({});
 
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
     <JobLinesComponent
@@ -61,9 +66,7 @@ export default function JobLinesContainer({ jobId }) {
       setSelectedLines={setSelectedLines}
       partsOrderModalVisible={partsOrderModalVisible}
       jobId={jobId}
-      editLineModalVisible={editLineModalVisible}
-      lineToEdit={lineToEdit}
+      setJobLineEditContext={setJobLineEditContext}
     />
   );
-}
-//);
+});