feature/IO-3571-Create-Job-Done-Loading - Fix set is submitting

Signed-off-by: Allan Carr <allan@imexsystems.ca>

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

@@ -1,7 +1,7 @@
 import Icon from "@ant-design/icons";
 import { useMutation } from "@apollo/client/react";
 import { Button, Input, Popover, Tooltip } from "antd";
-import { useState, useRef } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaRegStickyNote } from "react-icons/fa";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
@@ -9,10 +9,10 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 
 export default function ProductionListColumnComment({ record, usePortal = false }) {
   const { t } = useTranslation();
+
   const [note, setNote] = useState(record.comment || "");
+
   const [open, setOpen] = useState(false);
-  const textAreaRef = useRef(null);
-  const rafIdRef = useRef(null);
 
   const [updateAlert] = useMutation(UPDATE_JOB);
 
@@ -38,35 +38,23 @@ export default function ProductionListColumnComment({ record, usePortal = false
   };
 
   const handleOpenChange = (flag) => {
-    if (rafIdRef.current) {
-      cancelAnimationFrame(rafIdRef.current);
-      rafIdRef.current = null;
-    }
     setOpen(flag);
-    if (flag) {
-      setNote(record.comment || "");
-      rafIdRef.current = requestAnimationFrame(() => {
-        rafIdRef.current = null;
-        if (textAreaRef.current?.focus) {
-          try {
-            textAreaRef.current.focus({ preventScroll: true });
-          } catch {
-            textAreaRef.current.focus();
-          }
-        }
-      });
-    }
+    if (flag) setNote(record.comment || "");
   };
 
   const content = (
-    <div style={{ width: "30em" }} onClick={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
+    <div 
+      style={{ width: "30em" }} 
+      onClick={(e) => e.stopPropagation()}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
       <Input.TextArea
         id={`job-comment-${record.id}`}
         name="comment"
         rows={5}
         value={note}
         onChange={handleChange}
-        ref={textAreaRef}
+        autoFocus
         allowClear
         style={{ marginBottom: "1em" }}
       />
@@ -79,13 +67,13 @@ export default function ProductionListColumnComment({ record, usePortal = false
   );
 
   return (
-    <Popover
-      onOpenChange={handleOpenChange}
-      open={open}
-      content={content}
-      trigger="click"
+    <Popover 
+      onOpenChange={handleOpenChange} 
+      open={open} 
+      content={content} 
+      trigger="click" 
       destroyOnHidden
-      styles={{ body: { padding: "12px" } }}
+      styles={{ body: { padding: '12px' } }}
       {...(usePortal ? { getPopupContainer: (trigger) => trigger.parentElement || document.body } : {})}
     >
       <div

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, useRef, 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";
@@ -20,8 +20,6 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext, useP
   const { t } = useTranslation();
   const [note, setNote] = useState(record.production_vars?.note || "");
   const [open, setOpen] = useState(false);
-  const textAreaRef = useRef(null);
-  const rafIdRef = useRef(null);
 
   const [updateAlert] = useMutation(UPDATE_JOB);
 
@@ -54,37 +52,25 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext, useP
 
   const handleOpenChange = useCallback(
     (flag) => {
-      if (rafIdRef.current) {
-        cancelAnimationFrame(rafIdRef.current);
-        rafIdRef.current = null;
-      }
       setOpen(flag);
-      if (flag) {
-        setNote(record.production_vars?.note || "");
-        rafIdRef.current = requestAnimationFrame(() => {
-          rafIdRef.current = null;
-          if (textAreaRef.current?.focus) {
-            try {
-              textAreaRef.current.focus({ preventScroll: true });
-            } catch {
-              textAreaRef.current.focus();
-            }
-          }
-        });
-      }
+      if (flag) setNote(record.production_vars?.note || "");
     },
     [record]
   );
 
   const content = (
-    <div style={{ width: "30em" }} onClick={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()}>
+    <div 
+      style={{ width: "30em" }} 
+      onClick={(e) => e.stopPropagation()}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
       <Input.TextArea
         id={`job-production-note-${record.id}`}
         name="production_note"
         rows={5}
         value={note}
         onChange={handleChange}
-        ref={textAreaRef}
+        autoFocus
         allowClear
         style={{ marginBottom: "1em" }}
       />
@@ -110,13 +96,13 @@ function ProductionListColumnProductionNote({ record, setNoteUpsertContext, useP
   );
 
   return (
-    <Popover
-      onOpenChange={handleOpenChange}
-      open={open}
-      content={content}
-      trigger="click"
+    <Popover 
+      onOpenChange={handleOpenChange} 
+      open={open} 
+      content={content} 
+      trigger="click" 
       destroyOnHidden
-      styles={{ body: { padding: "12px" } }}
+      styles={{ body: { padding: '12px' } }}
       {...(usePortal ? { getPopupContainer: (trigger) => trigger.parentElement || document.body } : {})}
     >
       <div

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -10,14 +10,12 @@ import JobsCreateOwnerInfoContainer from "../../components/jobs-create-owner-inf
 import JobsCreateVehicleInfoContainer from "../../components/jobs-create-vehicle-info/jobs-create-vehicle-info.container";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 
-export default function JobsCreateComponent({ form }) {
+export default function JobsCreateComponent({ form, isSubmitting }) {
   const [pageIndex, setPageIndex] = useState(0);
-
   const [errorMessage, setErrorMessage] = useState(null);
-
   const [state] = useContext(JobCreateContext);
-
   const { t } = useTranslation();
+
   const steps = [
     {
       title: t("jobs.labels.create.vehicleinfo"),
@@ -42,11 +40,9 @@ export default function JobsCreateComponent({ form }) {
 
   const next = () => {
     setPageIndex(pageIndex + 1);
-    console.log("Next");
   };
   const prev = () => {
     setPageIndex(pageIndex - 1);
-    console.log("Previous");
   };
 
   const ProgressButtons = ({ top }) => {
@@ -79,17 +75,19 @@ export default function JobsCreateComponent({ form }) {
             {pageIndex === steps.length - 1 && (
               <Button
                 type="primary"
+                loading={isSubmitting}
                 onClick={() => {
                   form
                     .validateFields()
                     .then(() => {
-                      // NO OP
+                      form.submit();
                     })
-                    .catch((error) => console.log("error", error));
-                  form.submit();
+                    .catch((error) => {
+                      console.log("error", error);
+                    });
                 }}
               >
-                Done
+                {t("general.actions.done")}
               </Button>
             )}
           </Space>
@@ -146,13 +144,11 @@ export default function JobsCreateComponent({ form }) {
       ) : (
         <div>
           <ProgressButtons top />
-
           {errorMessage ? (
             <div>
               <AlertComponent title={errorMessage} type="error" />
             </div>
           ) : null}
-
           {steps.map((item, idx) => (
             <div
               key={idx}

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -46,6 +46,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, curr
   });
   const [form] = Form.useForm();
   const [state, setState] = contextState;
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [insertJob] = useMutation(INSERT_NEW_JOB);
   const [loadOwner, remoteOwnerData] = useLazyQuery(QUERY_OWNER_FOR_JOB_CREATION);
 
@@ -83,16 +84,19 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, curr
           newJobId: resp.data.insert_jobs.returning[0].id
         });
         logImEXEvent("manual_job_create_completed", {});
+        setIsSubmitting(false);
       })
       .catch((error) => {
         notification.error({
           title: t("jobs.errors.creating", { error: error })
         });
         setState({ ...state, error: error });
+        setIsSubmitting(false);
       });
   };
 
   const handleFinish = (values) => {
+    setIsSubmitting(true);
     let job = Object.assign(
       {},
       values,
@@ -297,7 +301,7 @@ function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, curr
             })
           }}
         >
-          <JobsCreateComponent form={form} />
+          <JobsCreateComponent form={form} isSubmitting={isSubmitting} />
         </Form>
       </RbacWrapper>
     </JobCreateContext.Provider>

client/src/translations/en_us/common.json

@@ -1295,6 +1295,7 @@
         "delete": "Delete",
         "deleteall": "Delete All",
         "deselectall": "Deselect All",
+        "done": "Done",
         "download": "Download",
         "edit": "Edit",
         "gotoadmin": "Go to Admin Panel",

client/src/translations/es/common.json

@@ -1295,6 +1295,7 @@
         "delete": "Borrar",
         "deleteall": "",
         "deselectall": "",
+        "done": "",
         "download": "",
         "edit": "Editar",
         "gotoadmin": "",

client/src/translations/fr/common.json

@@ -1295,6 +1295,7 @@
         "delete": "Effacer",
         "deleteall": "",
         "deselectall": "",
+        "done": "",
         "download": "",
         "edit": "modifier",
         "gotoadmin": "",