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/AppUpdates/AppUpdateProgress.jsx

@@ -5,8 +5,7 @@ import { Button, Flex, Modal, Typography, theme, Divider } from 'antd'
 import CloudIcon from '../../../Icons/CloudIcon'
 import HostIcon from '../../../Icons/HostIcon'
 import ReloadIcon from '../../../Icons/ReloadIcon'
-import HProgress from '../../common/HProgress'
+import ProgressDisplay from '../../common/ProgressDisplay'
-import ElipsisText from '../../common/ElipsisText'
 
 import CheckCircleIcon from '../../../Icons/CheckCircleIcon'
 import XMarkCircleIcon from '../../../Icons/XMarkCircleIcon'
@@ -136,19 +135,16 @@ const UpdateStage = ({ stage, status, percent, detail }) => {
       <Flex align='start' gap='24px' style={{ flex: 1, minWidth: 0 }}>
         <Text style={{ flexShrink: 0 }}>{config.labels[status]}</Text>
         {showProgress && (
-          <Flex vertical gap={2} style={{ flex: 1, minWidth: 0 }}>
+          <ProgressDisplay
-            <HProgress
+            labelPosition='bottom'
-              percent={resolvedPercent}
+            labelType='secondary'
-              status={getProgressStatus(status)}
+            percent={resolvedPercent}
-              showInfo={typeof resolvedPercent === 'number'}
+            status={getProgressStatus(status)}
-              style={{ flex: 1, margin: 0 }}
+            showInfo={typeof resolvedPercent === 'number'}
-            />
+            style={{ flex: 1 }}
-            {detail && (
+          >
-              <ElipsisText type='secondary' style={{ minWidth: 0 }}>
+            {detail}
-                {detail}
+          </ProgressDisplay>
-              </ElipsisText>
-            )}
-          </Flex>
         )}
       </Flex>
     </Flex>

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 } =
+  const {
-    useContext(ApiServerContext)
+    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,154 +78,175 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
   })
 
   return (
-    <NewObjectForm
+    <>
-      type={'documentJob'}
+      <NewObjectForm
-      defaultValues={defaultValuesRef.current}
+        type={'documentJob'}
-    >
+        defaultValues={defaultValuesRef.current}
-      {({ handleSubmit, submitLoading, objectData, formValid }) => {
+      >
-        const steps = [
+        {({ handleSubmit, submitLoading, objectData, formValid }) => {
-          {
+          const steps = [
-            title: 'Required',
+            {
-            key: 'required',
+              title: 'Required',
-            content: (
+              key: 'required',
-              <ObjectInfo
+              content: (
-                type='documentJob'
+                <ObjectInfo
-                column={1}
+                  type='documentJob'
-                visibleProperties={{ name: false }}
+                  column={1}
-                bordered={false}
+                  visibleProperties={{ name: false }}
-                labelWidth={115}
+                  bordered={false}
-                isEditing={true}
+                  labelWidth={115}
-                required={true}
+                  isEditing={true}
-                objectData={objectData}
+                  required={true}
-              />
+                  objectData={objectData}
-            )
-          }
-        ]
-        const fileName =
-          formatFileName(
-            objectData?.name + ' ' + dayjs().format('YYYY-MM-DD HH:mm:ss')
-          ) || 'document'
-        return (
-          <WizardView
-            steps={steps}
-            submitText='Print'
-            title={'Print Document'}
-            formValid={formValid}
-            loading={submitLoading}
-            disabled={downloading}
-            sideBarGrow={true}
-            sideBar={
-              <div
-                style={{
-                  height: 'calc(100vh - 240px)',
-                  flexGrow: 1,
-                  minWidth: 0
-                }}
-              >
-                <TemplatePreview
-                  objectData={objectData?.object}
-                  documentTemplate={objectData?.documentTemplate}
                 />
-              </div>
+              )
             }
-            onSubmit={async () => {
+          ]
-              const newDocumentJob = await handleSubmit()
+          const fileName =
-              if (newDocumentJob) {
+            formatFileName(
-                await sendObjectAction(
+              objectData?.name + ' ' + dayjs().format('YYYY-MM-DD HH:mm:ss')
-                  newDocumentJob.documentPrinter._id,
+            ) || 'document'
-                  'documentPrinter',
+          return (
-                  {
+            <WizardView
-                    type: 'deploy',
+              steps={steps}
-                    data: newDocumentJob
+              submitText='Print'
-                  }
+              title={'Print Document'}
-                )
+              formValid={formValid}
-                if (onOk) {
+              loading={submitLoading}
-                  onOk()
+              disabled={downloading}
+              sideBarGrow={true}
+              sideBar={
+                <div
+                  style={{
+                    height: 'calc(100vh - 240px)',
+                    flexGrow: 1,
+                    minWidth: 0
+                  }}
+                >
+                  <TemplatePreview
+                    objectData={objectData?.object}
+                    documentTemplate={objectData?.documentTemplate}
+                  />
+                </div>
+              }
+              onSubmit={async () => {
+                const newDocumentJob = await handleSubmit()
+                if (!newDocumentJob?._id) {
+                  return
                 }
-              }
+
-            }}
+                pendingJobRef.current = newDocumentJob
-            actions={[
+                deploySentRef.current = false
-              {
+                setDeployingJob({
-                label: 'Download',
+                  ...newDocumentJob,
-                steps: ['required'],
+                  state: { type: 'deploying', progress: 0 }
-                loading: downloading == true,
+                })
-                disabled: downloading == true || submitLoading == true,
+              }}
-                children: [
+              actions={[
-                  {
+                {
-                    label: 'PDF',
+                  label: 'Download',
-                    key: 'pdf',
+                  steps: ['required'],
-                    onClick: () => {
+                  loading: downloading == true,
-                      setDownloading(true)
+                  disabled: downloading == true || submitLoading == true,
-                      downloadTemplate(
+                  children: [
-                        objectData.documentTemplate._id,
+                    {
-                        objectData.documentTemplate.content,
+                      label: 'PDF',
-                        objectData.object,
+                      key: 'pdf',
-                        fileName,
+                      onClick: () => {
-                        'pdf',
+                        setDownloading(true)
-                        () => {
+                        downloadTemplate(
-                          setDownloading(false)
+                          objectData.documentTemplate._id,
-                        }
+                          objectData.documentTemplate.content,
-                      )
+                          objectData.object,
+                          fileName,
+                          'pdf',
+                          () => {
+                            setDownloading(false)
+                          }
+                        )
+                      }
+                    },
+                    {
+                      label: 'PNG',
+                      key: 'png',
+                      onClick: () => {
+                        setDownloading(true)
+                        downloadTemplate(
+                          objectData.documentTemplate._id,
+                          objectData.documentTemplate.content,
+                          objectData.object,
+                          fileName,
+                          'png',
+                          () => {
+                            setDownloading(false)
+                          }
+                        )
+                      }
+                    },
+                    {
+                      label: 'JPEG',
+                      key: 'jpeg',
+                      onClick: () => {
+                        setDownloading(true)
+                        downloadTemplate(
+                          objectData.documentTemplate._id,
+                          objectData.documentTemplate.content,
+                          objectData.object,
+                          fileName,
+                          'jpeg',
+                          () => {
+                            setDownloading(false)
+                          }
+                        )
+                      }
+                    },
+                    {
+                      label: 'SVG',
+                      key: 'svg',
+                      onClick: () => {
+                        setDownloading(true)
+                        downloadTemplate(
+                          objectData.documentTemplate._id,
+                          objectData.documentTemplate.content,
+                          objectData.object,
+                          fileName,
+                          'svg',
+                          () => {
+                            setDownloading(false)
+                          }
+                        )
+                      }
                     }
-                  },
+                  ]
-                  {
+                }
-                    label: 'PNG',
+              ]}
-                    key: 'png',
+            />
-                    onClick: () => {
+          )
-                      setDownloading(true)
+        }}
-                      downloadTemplate(
+      </NewObjectForm>
-                        objectData.documentTemplate._id,
+      <Modal
-                        objectData.documentTemplate.content,
+        open={Boolean(deployingJob)}
-                        objectData.object,
+        footer={null}
-                        fileName,
+        closable={false}
-                        'png',
+        maskClosable={false}
-                        () => {
+        centered
-                          setDownloading(false)
+        destroyOnHidden={true}
-                        }
+        zIndex={2000}
-                      )
+        width={320}
-                    }
+        getContainer={() => document.body}
-                  },
+      >
-                  {
+        <ProgressDisplay
-                    label: 'JPEG',
+          percent={Math.round(
-                    key: 'jpeg',
+            (Number(deployingJob?.state?.progress) || 0) * 100
-                    onClick: () => {
+          )}
-                      setDownloading(true)
+          status={
-                      downloadTemplate(
+            deployingJob?.state?.type === 'error' ? 'exception' : 'active'
-                        objectData.documentTemplate._id,
+          }
-                        objectData.documentTemplate.content,
+        >
-                        objectData.object,
+          Please wait...
-                        fileName,
+        </ProgressDisplay>
-                        'jpeg',
+      </Modal>
-                        () => {
+    </>
-                          setDownloading(false)
-                        }
-                      )
-                    }
-                  },
-                  {
-                    label: 'SVG',
-                    key: 'svg',
-                    onClick: () => {
-                      setDownloading(true)
-                      downloadTemplate(
-                        objectData.documentTemplate._id,
-                        objectData.documentTemplate.content,
-                        objectData.object,
-                        fileName,
-                        'svg',
-                        () => {
-                          setDownloading(false)
-                        }
-                      )
-                    }
-                  }
-                ]
-              }
-            ]}
-          />
-        )
-      }}
-    </NewObjectForm>
   )
 }
 

src/components/Dashboard/common/ProgressDisplay.jsx

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types'
+import { Flex } from 'antd'
+import HProgress from './HProgress'
+import ElipsisText from './ElipsisText'
+
+const ProgressDisplay = ({
+  children,
+  labelPosition = 'top',
+  labelType,
+  percent,
+  status,
+  showInfo,
+  style
+}) => {
+  const label = children ? (
+    <ElipsisText type={labelType} style={{ width: '100%', minWidth: 0 }}>
+      {children}
+    </ElipsisText>
+  ) : null
+
+  const progress = (
+    <HProgress
+      percent={percent}
+      status={status}
+      showInfo={showInfo}
+      style={{ flex: 1, margin: 0 }}
+    />
+  )
+
+  return (
+    <Flex
+      vertical
+      gap={labelPosition === 'bottom' ? 2 : 10}
+      style={{ width: '100%', minWidth: 0, ...style }}
+    >
+      {labelPosition === 'bottom' ? (
+        <>
+          {progress}
+          {label}
+        </>
+      ) : (
+        <>
+          {label}
+          {progress}
+        </>
+      )}
+    </Flex>
+  )
+}
+
+ProgressDisplay.propTypes = {
+  children: PropTypes.node,
+  labelPosition: PropTypes.oneOf(['top', 'bottom']),
+  labelType: PropTypes.oneOf(['secondary']),
+  percent: PropTypes.number,
+  status: PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
+  showInfo: PropTypes.bool,
+  style: PropTypes.object
+}
+
+export default ProgressDisplay

src/components/Dashboard/common/TemplatePreview.jsx

@@ -7,7 +7,7 @@ import {
   useCallback
 } from 'react'
 import PropTypes from 'prop-types'
-import { Flex, Button, Input, Select, Typography, Card } from 'antd'
+import { Flex, Button, Input, Select, Card } from 'antd'
 import PlusIcon from '../../Icons/PlusIcon.jsx'
 import MinusIcon from '../../Icons/MinusIcon.jsx'
 import InfoCircleIcon from '../../Icons/InfoCircleIcon.jsx'
@@ -17,9 +17,7 @@ import ObjectProperty from '../common/ObjectProperty.jsx'
 import PDFViewer from './PDFViewer.jsx'
 import ScrollBox from './ScrollBox.jsx'
 import { ApiServerContext } from '../context/ApiServerContext.jsx'
-import HProgress from './HProgress.jsx'
+import ProgressDisplay from './ProgressDisplay.jsx'
-
-const { Text } = Typography
 
 const noop = () => {}
 
@@ -224,7 +222,7 @@ const TemplatePreview = ({
       stopRenderProgressListener()
       setPDFBlob(null)
       setReloadLoading(true)
-      setDownloadProgress({ progress: 0, message: 'Starting render' })
+      setDownloadProgress({ progress: 0, message: 'Starting render...' })
 
       const startDownload = async () => {
         try {
@@ -590,17 +588,14 @@ const TemplatePreview = ({
                 }}
                 styles={{ body: { padding: 18 } }}
               >
-                <Flex vertical gap={10} style={{ width: '100%' }}>
+                <ProgressDisplay
-                  <Text ellipsis style={{ width: '100%', minWidth: 0 }}>
+                  percent={Math.round(
-                    {downloadProgress.message || 'Rendering...'}
+                    (Number(downloadProgress.progress) || 0) * 100
-                  </Text>
+                  )}
-                  <HProgress
+                  status='active'
-                    percent={Math.round(
+                >
-                      (Number(downloadProgress.progress) || 0) * 100
+                  {downloadProgress.message || 'Rendering...'}
-                    )}
+                </ProgressDisplay>
-                    status='active'
-                  />
-                </Flex>
               </Card>
             </Flex>
           ) : null}