farmcontrol-ui/src/components/Dashboard/Management/DocumentJobs/NewDocumentJob.jsx

import PropTypes from 'prop-types'
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 { useCallback, useContext, useEffect, useRef, useState } from 'react'
import { Modal } from 'antd'
import dayjs from 'dayjs'

const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
  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({
    objectType: 'documentJob',
    ...defaultValues,
    saveToFile: false
  })

  return (
    <>
      <NewObjectForm
        type={'documentJob'}
        defaultValues={defaultValuesRef.current}
      >
        {({ handleSubmit, submitLoading, objectData, formValid }) => {
          const steps = [
            {
              title: 'Required',
              key: 'required',
              content: (
                <ObjectInfo
                  type='documentJob'
                  column={1}
                  visibleProperties={{ name: false }}
                  bordered={false}
                  labelWidth={115}
                  isEditing={true}
                  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()
                if (!newDocumentJob?._id) {
                  return
                }

                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)
                          }
                        )
                      }
                    }
                  ]
                }
              ]}
            />
          )
        }}
      </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>
    </>
  )
}

NewDocumentJob.propTypes = {
  onOk: PropTypes.func.isRequired,
  reset: PropTypes.bool,
  defaultValues: PropTypes.object
}

export default NewDocumentJob