Added jobline notes BOD-204

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

@@ -12,6 +12,7 @@ import { alphaSort } from "../../utils/sorters";
 // import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
 // import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
+import JobLineNotePopup from "../job-line-note-popup/job-line-note-popup.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setJobLineEditContext: (context) =>
@@ -161,6 +162,12 @@ export function JobLinesComponent({
       sortOrder:
         state.sortedInfo.columnKey === "mod_lb_hrs" && state.sortedInfo.order,
     },
+    {
+      title: t("joblines.fields.notes"),
+      dataIndex: "notes",
+      key: "notes",
+      render: (text, record) => <JobLineNotePopup jobline={record} />,
+    },
     {
       title: t("joblines.fields.status"),
       dataIndex: "status",
@@ -223,7 +230,8 @@ export function JobLinesComponent({
                 actions: { refetch: refetch },
                 context: record,
               });
-            }}>
+            }}
+          >
             {t("general.actions.edit")}
           </Button>
           {
@@ -249,9 +257,9 @@ export function JobLinesComponent({
 
   const markMenu = (
     <Menu onClick={handleMark}>
-      <Menu.Item key='PAA'>PAA</Menu.Item>
-      <Menu.Item key='PAN'>PAN</Menu.Item>
-      <Menu.Item key='PAL'>PAL</Menu.Item>
+      <Menu.Item key="PAA">PAA</Menu.Item>
+      <Menu.Item key="PAN">PAN</Menu.Item>
+      <Menu.Item key="PAL">PAL</Menu.Item>
     </Menu>
   );
 
@@ -260,16 +268,19 @@ export function JobLinesComponent({
       <PartsOrderModalContainer />
       <Table
         columns={columns}
-        rowKey='id'
+        rowKey="id"
         loading={loading}
-        size='small'
+        size="small"
         pagination={{ position: "top", defaultPageSize: 50 }}
         dataSource={jobLines}
         onChange={handleTableChange}
-        scroll={{ x: true, y: "40rem" }}
+        scroll={{
+          x: true,
+          //y: "40rem"
+        }}
         title={() => {
           return (
-            <div className='imex-table-header'>
+            <div className="imex-table-header">
               <Button onClick={() => refetch()}>
                 <SyncOutlined />
               </Button>
@@ -283,7 +294,8 @@ export function JobLinesComponent({
                       linesToOrder: selectedLines,
                     },
                   });
-                }}>
+                }}
+              >
                 {t("parts.actions.order")}
               </Button>
               <Dropdown overlay={markMenu} trigger={["click"]}>
@@ -301,10 +313,11 @@ export function JobLinesComponent({
                     actions: { refetch: refetch },
                     context: { jobid: jobId },
                   });
-                }}>
+                }}
+              >
                 {t("joblines.actions.new")}
               </Button>
-              <div className='imex-table-header__search'>
+              <div className="imex-table-header__search">
                 <Input.Search
                   placeholder={t("general.labels.search")}
                   onChange={(e) => {
@@ -322,7 +335,8 @@ export function JobLinesComponent({
             {record.parts_order_lines.map((item) => (
               <div key={item.id}>
                 <Link
-                  to={`/manage/jobs/${jobId}?tab=partssublet&partsorderid=${item.parts_order.id}`}>
+                  to={`/manage/jobs/${jobId}?tab=partssublet&partsorderid=${item.parts_order.id}`}
+                >
                   {item.parts_order.order_number || ""}
                 </Link>
                 -

client/src/components/job-line-note-popup/job-line-note-popup.component.jsx

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from "react";
+import { Input, notification } from "antd";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useMutation } from "react-apollo";
+import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
+import { useTranslation } from "react-i18next";
+
+export default function JobLineNotePopup({ jobline }) {
+  const [editing, setEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [note, setNote] = useState(jobline.note);
+  const [updateJob] = useMutation(UPDATE_JOB_LINE);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (editing) setNote(jobline.notes);
+  }, [editing, jobline.notes]);
+
+  const handleChange = (e) => {
+    e.stopPropagation();
+    setNote(e.currentTarget.value);
+  };
+
+  const handleSave = async (e) => {
+    e.stopPropagation();
+    setLoading(true);
+    const result = await updateJob({
+      variables: { lineId: jobline.id, line: { notes: note || "" } },
+    });
+
+    if (!!!result.errors) {
+      notification["success"]({ message: t("joblines.successes.saved") });
+    } else {
+      notification["error"]({
+        message: t("joblines.errors.saving", {
+          error: JSON.stringify(result.errors),
+        }),
+      });
+    }
+    setLoading(false);
+    setEditing(false);
+  };
+
+  if (editing)
+    return (
+      <div>
+        <Input
+          autoFocus
+          suffix={loading ? <LoadingSpinner /> : null}
+          value={note}
+          onChange={handleChange}
+          onPressEnter={handleSave}
+          onBlur={handleSave}
+        />
+      </div>
+    );
+  return (
+    <div
+      style={{ width: "100%", minHeight: "2rem", cursor: "pointer" }}
+      onClick={() => setEditing(true)}
+    >
+      {jobline.notes}
+    </div>
+  );
+}