feature/IO-3499-React-19: Production Note + Comment edit in job details header / card

client/src/components/production-list-columns/production-list-columns.comment.component.jsx

@@ -18,6 +18,7 @@ export default function ProductionListColumnComment({ record }) {
 
   const handleSaveNote = (e) => {
     e.stopPropagation();
+    e.preventDefault();
     setOpen(false);
     updateAlert({
       variables: {
@@ -33,7 +34,6 @@ export default function ProductionListColumnComment({ record }) {
   };
 
   const handleChange = (e) => {
-    e.stopPropagation();
     setNote(e.target.value);
   };
 
@@ -42,26 +42,38 @@ export default function ProductionListColumnComment({ record }) {
     if (flag) setNote(record.comment || "");
   };
 
+  const content = (
+    <div 
+      style={{ width: "30em" }} 
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <Input.TextArea
+        rows={5}
+        value={note}
+        onChange={handleChange}
+        autoFocus
+        allowClear
+        style={{ marginBottom: "1em" }}
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+      />
+      <div>
+        <Button onClick={handleSaveNote} type="primary">
+          {t("general.actions.save")}
+        </Button>
+      </div>
+    </div>
+  );
+
   return (
-    <Popover
+    <Popover 
-      onOpenChange={handleOpenChange}
+      onOpenChange={handleOpenChange} 
-      open={open}
+      open={open} 
-      content={
+      content={content} 
-        <div style={{ width: "30em" }}>
+      trigger="click" 
-          <Input.TextArea
+      fresh
-            rows={5}
+      getPopupContainer={(trigger) => trigger.parentElement}
-            value={note}
-            onChange={handleChange}
-            // onPressEnter={handleSaveNote}
-            autoFocus
-            allowClear
-          />
-          <div>
-            <Button onClick={handleSaveNote}>{t("general.actions.save")}</Button>
-          </div>
-        </div>
-      }
-      trigger={["click"]}
     >
       <div
         style={{
@@ -69,9 +81,9 @@ export default function ProductionListColumnComment({ record }) {
           height: "19px",
           cursor: "pointer",
           overflow: "hidden",
-          textOverflow: "ellipsis",
+          textOverflow: "ellipsis"
-          display: "inline-block"
         }}
+        onClick={(e) => e.stopPropagation()}
       >
         <Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
         <Tooltip title={record.comment}>{record.comment || " "}</Tooltip>

client/src/components/production-list-columns/production-list-columns.productionnote.component.jsx

@@ -1,7 +1,7 @@
 import Icon from "@ant-design/icons";
 import { useMutation } from "@apollo/client/react";
 import { Button, Input, Popover, Space } from "antd";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaRegStickyNote } from "react-icons/fa";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -27,6 +27,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
     (e) => {
       logImEXEvent("production_add_note");
       e.stopPropagation();
+      e.preventDefault();
       setOpen(false);
       updateAlert({
         variables: {
@@ -46,7 +47,6 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
   );
 
   const handleChange = useCallback((e) => {
-    e.stopPropagation();
     setNote(e.target.value);
   }, []);
 
@@ -58,42 +58,48 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
     [record]
   );
 
-  const popoverContent = useMemo(
+  const content = (
-    () => (
+    <div style={{ width: "30em" }} onMouseDown={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}>
-      <div style={{ width: "30em" }}>
+      <Input.TextArea
-        <Input.TextArea
+        rows={5}
-          rows={5}
+        value={note}
-          value={note}
+        onChange={handleChange}
-          onChange={handleChange}
+        autoFocus
-          autoFocus
+        allowClear
-          allowClear
+        style={{ marginBottom: "1em" }}
-          style={{ marginBottom: "1em" }}
+        onMouseDown={(e) => e.stopPropagation()}
-        />
+        onClick={(e) => e.stopPropagation()}
-        <Space>
+      />
-          <Button onClick={handleSaveNote} type="primary">
+      <Space>
-            {t("general.actions.save")}
+        <Button onClick={handleSaveNote} type="primary">
-          </Button>
+          {t("general.actions.save")}
-          <Button
+        </Button>
-            onClick={() => {
+        <Button
-              setOpen(false);
+          onClick={() => {
-              setNoteUpsertContext({
+            setOpen(false);
-                context: {
+            setNoteUpsertContext({
-                  jobId: record.id,
+              context: {
-                  text: note
+                jobId: record.id,
-                }
+                text: note
-              });
+              }
-            }}
+            });
-          >
+          }}
-            {t("notes.actions.savetojobnotes")}
+        >
-          </Button>
+          {t("notes.actions.savetojobnotes")}
-        </Space>
+        </Button>
-      </div>
+      </Space>
-    ),
+    </div>
-    [note, handleSaveNote, handleChange, record, setNoteUpsertContext, t]
   );
 
   return (
-    <Popover onOpenChange={handleOpenChange} open={open} content={popoverContent} trigger={["click"]}>
+    <Popover
+      onOpenChange={handleOpenChange}
+      open={open}
+      content={content}
+      trigger="click"
+      fresh
+      getPopupContainer={(trigger) => trigger.parentElement}
+    >
       <div
         style={{
           width: "100%",
@@ -102,6 +108,7 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext }) {
           overflow: "hidden",
           textOverflow: "ellipsis"
         }}
+        onClick={(e) => e.stopPropagation()}
       >
         <Icon component={FaRegStickyNote} style={{ marginRight: ".2rem" }} />
         {record.production_vars?.note || " "}