Compare commits
No commits in common. "7833b1dbcec83c4ffc0868f2f9459e69b776431c" and "f9ac30026762e96163bb04c6a933b19822bb9b66" have entirely different histories.
7833b1dbce
...
f9ac300267
@ -5,7 +5,8 @@ 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 ProgressDisplay from '../../common/ProgressDisplay'
|
||||
import HProgress from '../../common/HProgress'
|
||||
import ElipsisText from '../../common/ElipsisText'
|
||||
|
||||
import CheckCircleIcon from '../../../Icons/CheckCircleIcon'
|
||||
import XMarkCircleIcon from '../../../Icons/XMarkCircleIcon'
|
||||
@ -135,16 +136,19 @@ 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 && (
|
||||
<ProgressDisplay
|
||||
labelPosition='bottom'
|
||||
labelType='secondary'
|
||||
percent={resolvedPercent}
|
||||
status={getProgressStatus(status)}
|
||||
showInfo={typeof resolvedPercent === 'number'}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
{detail}
|
||||
</ProgressDisplay>
|
||||
<Flex vertical gap={2} style={{ flex: 1, minWidth: 0 }}>
|
||||
<HProgress
|
||||
percent={resolvedPercent}
|
||||
status={getProgressStatus(status)}
|
||||
showInfo={typeof resolvedPercent === 'number'}
|
||||
style={{ flex: 1, margin: 0 }}
|
||||
/>
|
||||
{detail && (
|
||||
<ElipsisText type='secondary' style={{ minWidth: 0 }}>
|
||||
{detail}
|
||||
</ElipsisText>
|
||||
)}
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
@ -3,72 +3,14 @@ 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 { useContext, useRef, useState } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
|
||||
const {
|
||||
sendObjectAction,
|
||||
downloadTemplate,
|
||||
formatFileName,
|
||||
subscribeToObjectUpdates,
|
||||
connected
|
||||
} = useContext(ApiServerContext)
|
||||
const { sendObjectAction, downloadTemplate, formatFileName } =
|
||||
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({
|
||||
@ -78,175 +20,154 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
|
||||
})
|
||||
|
||||
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'
|
||||
<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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
>
|
||||
Please wait...
|
||||
</ProgressDisplay>
|
||||
</Modal>
|
||||
</>
|
||||
]
|
||||
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) {
|
||||
await sendObjectAction(
|
||||
newDocumentJob.documentPrinter._id,
|
||||
'documentPrinter',
|
||||
{
|
||||
type: 'deploy',
|
||||
data: newDocumentJob
|
||||
}
|
||||
)
|
||||
if (onOk) {
|
||||
onOk()
|
||||
}
|
||||
}
|
||||
}}
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,61 +0,0 @@
|
||||
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
|
||||
@ -7,7 +7,7 @@ import {
|
||||
useCallback
|
||||
} from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Flex, Button, Input, Select, Card } from 'antd'
|
||||
import { Flex, Button, Input, Select, Typography, Card } from 'antd'
|
||||
import PlusIcon from '../../Icons/PlusIcon.jsx'
|
||||
import MinusIcon from '../../Icons/MinusIcon.jsx'
|
||||
import InfoCircleIcon from '../../Icons/InfoCircleIcon.jsx'
|
||||
@ -17,7 +17,9 @@ import ObjectProperty from '../common/ObjectProperty.jsx'
|
||||
import PDFViewer from './PDFViewer.jsx'
|
||||
import ScrollBox from './ScrollBox.jsx'
|
||||
import { ApiServerContext } from '../context/ApiServerContext.jsx'
|
||||
import ProgressDisplay from './ProgressDisplay.jsx'
|
||||
import HProgress from './HProgress.jsx'
|
||||
|
||||
const { Text } = Typography
|
||||
|
||||
const noop = () => {}
|
||||
|
||||
@ -222,7 +224,7 @@ const TemplatePreview = ({
|
||||
stopRenderProgressListener()
|
||||
setPDFBlob(null)
|
||||
setReloadLoading(true)
|
||||
setDownloadProgress({ progress: 0, message: 'Starting render...' })
|
||||
setDownloadProgress({ progress: 0, message: 'Starting render' })
|
||||
|
||||
const startDownload = async () => {
|
||||
try {
|
||||
@ -588,14 +590,17 @@ const TemplatePreview = ({
|
||||
}}
|
||||
styles={{ body: { padding: 18 } }}
|
||||
>
|
||||
<ProgressDisplay
|
||||
percent={Math.round(
|
||||
(Number(downloadProgress.progress) || 0) * 100
|
||||
)}
|
||||
status='active'
|
||||
>
|
||||
{downloadProgress.message || 'Rendering...'}
|
||||
</ProgressDisplay>
|
||||
<Flex vertical gap={10} style={{ width: '100%' }}>
|
||||
<Text ellipsis style={{ width: '100%', minWidth: 0 }}>
|
||||
{downloadProgress.message || 'Rendering...'}
|
||||
</Text>
|
||||
<HProgress
|
||||
percent={Math.round(
|
||||
(Number(downloadProgress.progress) || 0) * 100
|
||||
)}
|
||||
status='active'
|
||||
/>
|
||||
</Flex>
|
||||
</Card>
|
||||
</Flex>
|
||||
) : null}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user