Enhance NewDocumentJob Component with Job Update Handling and Progress Display

- Integrated ProgressDisplay component to manage job deployment progress within the NewDocumentJob component.
- Added subscription to object updates for real-time job status tracking, improving user feedback during document processing.
- Refactored state management to handle job updates and deployment actions more effectively, enhancing overall functionality and user experience.

src/components/Dashboard/Management/DocumentJobs/NewDocumentJob.jsx

@@ -3,14 +3,72 @@ import ObjectInfo from '../../common/ObjectInfo'
 import NewObjectForm from '../../common/NewObjectForm'
 import WizardView from '../../common/WizardView'
 import TemplatePreview from '../../common/TemplatePreview'
+import ProgressDisplay from '../../common/ProgressDisplay'
 import { ApiServerContext } from '../../context/ApiServerContext'
-import { useContext, useRef, useState } from 'react'
+import { useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { Modal } from 'antd'
 import dayjs from 'dayjs'
 
 const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
-  const { sendObjectAction, downloadTemplate, formatFileName } =
-    useContext(ApiServerContext)
+  const {
+    sendObjectAction,
+    downloadTemplate,
+    formatFileName,
+    subscribeToObjectUpdates,
+    connected
+  } = useContext(ApiServerContext)
   const [downloading, setDownloading] = useState(false)
+  const [deployingJob, setDeployingJob] = useState(null)
+  const onOkRef = useRef(onOk)
+  const pendingJobRef = useRef(null)
+  const deploySentRef = useRef(false)
+  const sendObjectActionRef = useRef(sendObjectAction)
+
+  onOkRef.current = onOk
+  sendObjectActionRef.current = sendObjectAction
+
+  const deployingJobId = deployingJob?._id
+    ? String(deployingJob._id).toLowerCase()
+    : null
+
+  const handleJobUpdate = useCallback((updatedJob) => {
+    setDeployingJob((prev) => (prev ? { ...prev, ...updatedJob } : updatedJob))
+  }, [])
+
+  useEffect(() => {
+    if (!deployingJobId || connected != true) {
+      return
+    }
+
+    const unsubscribe = subscribeToObjectUpdates(
+      deployingJobId,
+      'documentJob',
+      handleJobUpdate
+    )
+
+    if (!deploySentRef.current && pendingJobRef.current) {
+      deploySentRef.current = true
+      sendObjectActionRef.current(
+        pendingJobRef.current.documentPrinter._id,
+        'documentPrinter',
+        {
+          type: 'deploy',
+          data: pendingJobRef.current
+        }
+      )
+    }
+
+    return () => {
+      if (unsubscribe) unsubscribe()
+    }
+  }, [deployingJobId, connected, subscribeToObjectUpdates, handleJobUpdate])
+
+  useEffect(() => {
+    const stateType = deployingJob?.state?.type
+    if (stateType === 'queued' || stateType === 'error') {
+      onOkRef.current?.()
+    }
+  }, [deployingJob?.state?.type])
 
   // Capture initial default values so later prop changes don't re-initialize the form
   const defaultValuesRef = useRef({
@@ -20,6 +78,7 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
   })
 
   return (
+    <>
       <NewObjectForm
         type={'documentJob'}
         defaultValues={defaultValuesRef.current}
@@ -72,19 +131,16 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
               }
               onSubmit={async () => {
                 const newDocumentJob = await handleSubmit()
-              if (newDocumentJob) {
-                await sendObjectAction(
-                  newDocumentJob.documentPrinter._id,
-                  'documentPrinter',
-                  {
-                    type: 'deploy',
-                    data: newDocumentJob
-                  }
-                )
-                if (onOk) {
-                  onOk()
-                }
+                if (!newDocumentJob?._id) {
+                  return
                 }
+
+                pendingJobRef.current = newDocumentJob
+                deploySentRef.current = false
+                setDeployingJob({
+                  ...newDocumentJob,
+                  state: { type: 'deploying', progress: 0 }
+                })
               }}
               actions={[
                 {
@@ -168,6 +224,29 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
           )
         }}
       </NewObjectForm>
+      <Modal
+        open={Boolean(deployingJob)}
+        footer={null}
+        closable={false}
+        maskClosable={false}
+        centered
+        destroyOnHidden={true}
+        zIndex={2000}
+        width={320}
+        getContainer={() => document.body}
+      >
+        <ProgressDisplay
+          percent={Math.round(
+            (Number(deployingJob?.state?.progress) || 0) * 100
+          )}
+          status={
+            deployingJob?.state?.type === 'error' ? 'exception' : 'active'
+          }
+        >
+          Please wait...
+        </ProgressDisplay>
+      </Modal>
+    </>
   )
 }