diff --git a/src/components/Dashboard/Management/DocumentJobs/NewDocumentJob.jsx b/src/components/Dashboard/Management/DocumentJobs/NewDocumentJob.jsx index 9325a99e..01ed1410 100644 --- a/src/components/Dashboard/Management/DocumentJobs/NewDocumentJob.jsx +++ b/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,154 +78,175 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => { }) return ( - - {({ handleSubmit, submitLoading, objectData, formValid }) => { - const steps = [ - { - title: 'Required', - key: 'required', - content: ( - - ) - } - ] - const fileName = - formatFileName( - objectData?.name + ' ' + dayjs().format('YYYY-MM-DD HH:mm:ss') - ) || 'document' - return ( - - + + {({ handleSubmit, submitLoading, objectData, formValid }) => { + const steps = [ + { + title: 'Required', + key: 'required', + content: ( + - + ) } - onSubmit={async () => { - const newDocumentJob = await handleSubmit() - if (newDocumentJob) { - await sendObjectAction( - newDocumentJob.documentPrinter._id, - 'documentPrinter', - { - type: 'deploy', - data: newDocumentJob - } - ) - if (onOk) { - onOk() + ] + const fileName = + formatFileName( + objectData?.name + ' ' + dayjs().format('YYYY-MM-DD HH:mm:ss') + ) || 'document' + return ( + + + + } + onSubmit={async () => { + const newDocumentJob = await handleSubmit() + if (!newDocumentJob?._id) { + return } - } - }} - actions={[ - { - label: 'Download', - steps: ['required'], - loading: downloading == true, - disabled: downloading == true || submitLoading == true, - children: [ - { - label: 'PDF', - key: 'pdf', - onClick: () => { - setDownloading(true) - downloadTemplate( - objectData.documentTemplate._id, - objectData.documentTemplate.content, - objectData.object, - fileName, - 'pdf', - () => { - setDownloading(false) - } - ) + + pendingJobRef.current = newDocumentJob + deploySentRef.current = false + setDeployingJob({ + ...newDocumentJob, + state: { type: 'deploying', progress: 0 } + }) + }} + actions={[ + { + label: 'Download', + steps: ['required'], + loading: downloading == true, + disabled: downloading == true || submitLoading == true, + children: [ + { + label: 'PDF', + key: 'pdf', + onClick: () => { + setDownloading(true) + downloadTemplate( + 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( - 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) - } - ) - } - } - ] - } - ]} - /> - ) - }} - + ] + } + ]} + /> + ) + }} + + document.body} + > + + Please wait... + + + ) }