Added base jobline edit modal. To be confirmed if required.

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

@@ -8,6 +8,7 @@ import { Link } from "react-router-dom";
 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";
 export default function JobLinesComponent({
   loading,
   refetch,
@@ -16,7 +17,9 @@ export default function JobLinesComponent({
   selectedLines,
   setSelectedLines,
   partsOrderModalVisible,
-  jobId
+  jobId,
+  editLineModalVisible,
+  lineToEdit
 }) {
   const [state, setState] = useState({
     sortedInfo: {}
@@ -45,7 +48,8 @@ export default function JobLinesComponent({
       sortOrder:
         state.sortedInfo.columnKey === "line_desc" && state.sortedInfo.order,
       ellipsis: true,
-      editable: true
+      editable: true,
+      width: "20%"
     },
     {
       title: t("joblines.fields.oem_partno"),
@@ -60,7 +64,7 @@ export default function JobLinesComponent({
         state.sortedInfo.columnKey === "oem_partno" && state.sortedInfo.order,
       ellipsis: true,
       editable: true,
-      width: "20%",
+      width: "10%",
       render: (text, record) => (
         <span>
           {record.oem_partno ? record.oem_partno : record.op_code_desc}
@@ -76,7 +80,15 @@ export default function JobLinesComponent({
         state.sortedInfo.columnKey === "part_type" && state.sortedInfo.order,
       ellipsis: true,
       editable: true,
-      width: "10%"
+      width: "7%"
+    },
+    {
+      title: t("joblines.fields.line_ind"),
+      dataIndex: "line_ind",
+      key: "line_ind",
+      sorter: (a, b) => alphaSort(a.line_ind, b.line_ind),
+      sortOrder:
+        state.sortedInfo.columnKey === "line_ind" && state.sortedInfo.order
     },
     {
       title: t("joblines.fields.db_price"),
@@ -86,7 +98,7 @@ export default function JobLinesComponent({
       sortOrder:
         state.sortedInfo.columnKey === "db_price" && state.sortedInfo.order,
       ellipsis: true,
-      width: "10%",
+      width: "8%",
       render: (text, record) => (
         <CurrencyFormatter>{record.db_price}</CurrencyFormatter>
       )
@@ -99,7 +111,7 @@ export default function JobLinesComponent({
       sortOrder:
         state.sortedInfo.columnKey === "act_price" && state.sortedInfo.order,
       ellipsis: true,
-      width: "10%",
+      width: "8%",
       render: (text, record) => (
         <CurrencyFormatter>{record.act_price}</CurrencyFormatter>
       )
@@ -124,6 +136,7 @@ export default function JobLinesComponent({
       title: t("allocations.fields.employee"),
       dataIndex: "employee",
       key: "employee",
+      width: "10%",
       sorter: (a, b) => a.act_price - b.act_price, //TODO Fix employee sorting.
       sortOrder:
         state.sortedInfo.columnKey === "employee" && state.sortedInfo.order,
@@ -152,7 +165,13 @@ export default function JobLinesComponent({
       key: "actions",
       render: (text, record) => (
         <span>
-          <Button>{t("general.actions.edit")}</Button>
+          <Button
+            onClick={() => {
+              lineToEdit[1](record);
+              editLineModalVisible[1](true);
+            }}>
+            {t("general.actions.edit")}
+          </Button>
         </span>
       )
     }
@@ -175,14 +194,20 @@ export default function JobLinesComponent({
 
   return (
     <div>
-      {partsOrderModalVisible[0] ? (
-        <PartsOrderModalContainer
-          partsOrderModalVisible={partsOrderModalVisible}
-          linesToOrder={selectedLines}
-          refetch={refetch}
-          jobId={jobId}
-        />
-      ) : null}
+      <PartsOrderModalContainer
+        partsOrderModalVisible={partsOrderModalVisible}
+        linesToOrder={selectedLines}
+        refetch={refetch}
+        jobId={jobId}
+      />
+
+      <JobLineUpsertModalContainer
+        jobId={jobId}
+        visible={editLineModalVisible[0]}
+        changeVisibility={editLineModalVisible[1]}
+        refetch={refetch}
+        existingLine={lineToEdit[0]}
+      />
 
       <Table
         title={() => {

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

@@ -16,6 +16,9 @@ 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' />;
 
   return (
@@ -58,6 +61,8 @@ export default function JobLinesContainer({ jobId }) {
       setSelectedLines={setSelectedLines}
       partsOrderModalVisible={partsOrderModalVisible}
       jobId={jobId}
+      editLineModalVisible={editLineModalVisible}
+      lineToEdit={lineToEdit}
     />
   );
 }