Refactor NewDocumentJob and NewDocumentTemplate components to utilize WizardView for improved user experience, implement file download functionality with dynamic filename generation, and enhance form handling with context integration.

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

@@ -3,12 +3,26 @@ import ObjectInfo from '../../common/ObjectInfo'
 import NewObjectForm from '../../common/NewObjectForm'
 import WizardView from '../../common/WizardView'
 import TemplatePreview from '../../common/TemplatePreview'
+import { ApiServerContext } from '../../context/ApiServerContext'
+import { useContext, useRef, useState } from 'react'
+import dayjs from 'dayjs'
 
 const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
+  const { sendObjectAction, downloadTemplatePDF, formatFileName } =
+    useContext(ApiServerContext)
+  const [downloading, setDownloading] = useState(false)
+
+  // 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={{ objectType: 'documentJob', ...defaultValues }}
+      defaultValues={defaultValuesRef.current}
     >
       {({ handleSubmit, submitLoading, objectData, formValid }) => {
         const steps = [
@@ -28,6 +42,10 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
             )
           }
         ]
+        const fileName =
+          formatFileName(
+            objectData?.name + ' ' + dayjs().format('YYYY-MM-DD HH:mm:ss')
+          ) || 'document'
         return (
           <WizardView
             steps={steps}
@@ -35,8 +53,10 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
             title={'Print Document'}
             formValid={formValid}
             loading={submitLoading}
+            disabled={downloading}
+            sideBarGrow={true}
             sideBar={
-              <div style={{ minWidth: '400px', minHeight: '500px' }}>
+              <div style={{ minHeight: '500px', flexGrow: 1 }}>
                 <TemplatePreview
                   objectData={objectData?.object}
                   documentTemplate={objectData?.documentTemplate}
@@ -46,10 +66,52 @@ const NewDocumentJob = ({ onOk, defaultValues = {} }) => {
                 />
               </div>
             }
-            onSubmit={() => {
+            onSubmit={async () => {
-              handleSubmit()
+              const newDocumentJob = await handleSubmit()
-              onOk()
+              if (newDocumentJob.sendToFile == true) {
+                sendObjectAction(newDocumentJob._id, 'documentJob', {
+                  type: 'print',
+                  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)
+                      downloadTemplatePDF(
+                        objectData.documentTemplate._id,
+                        objectData.documentTemplate.content,
+                        objectData.object,
+                        fileName,
+                        () => {
+                          setDownloading(false)
+                        }
+                      )
+                    }
+                  },
+                  {
+                    label: 'PNG',
+                    key: 'png'
+                  },
+                  {
+                    label: 'JPEG',
+                    key: 'jpeg'
+                  }
+                ]
+              }
+            ]}
           />
         )
       }}

src/components/Dashboard/Management/DocumentTemplates/NewDocumentTemplate.jsx

@@ -1,19 +1,9 @@
 import PropTypes from 'prop-types'
-import { useState } from 'react'
-import { useMediaQuery } from 'react-responsive'
-import { Typography, Flex, Steps, Divider } from 'antd'
-
 import ObjectInfo from '../../common/ObjectInfo'
 import NewObjectForm from '../../common/NewObjectForm'
-import NewObjectButtons from '../../common/NewObjectButtons'
+import WizardView from '../../common/WizardView'
-
-const { Title } = Typography
 
 const NewDocumentTemplate = ({ onOk }) => {
-  const [currentStep, setCurrentStep] = useState(0)
-
-  const isMobile = useMediaQuery({ maxWidth: 768 })
-
   return (
     <NewObjectForm
       type={'documentTemplate'}
@@ -69,44 +59,18 @@ const NewDocumentTemplate = ({ onOk }) => {
             )
           }
         ]
+
         return (
-          <Flex gap='middle'>
+          <WizardView
-            {!isMobile && (
+            steps={steps}
-              <div style={{ minWidth: '160px' }}>
+            loading={submitLoading}
-                <Steps
+            formValid={formValid}
-                  current={currentStep}
+            title='New Document Template'
-                  items={steps}
+            onSubmit={() => {
-                  direction='vertical'
+              handleSubmit()
-                  style={{ width: 'fit-content' }}
+              onOk()
-                />
+            }}
-              </div>
+          />
-            )}
-
-            {!isMobile && (
-              <Divider type='vertical' style={{ height: 'unset' }} />
-            )}
-
-            <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
-              <Title level={2} style={{ margin: 0 }}>
-                New Document Template
-              </Title>
-              <div style={{ minHeight: '260px', marginBottom: 8 }}>
-                {steps[currentStep].content}
-              </div>
-              <NewObjectButtons
-                currentStep={currentStep}
-                totalSteps={steps.length}
-                onPrevious={() => setCurrentStep((prev) => prev - 1)}
-                onNext={() => setCurrentStep((prev) => prev + 1)}
-                onSubmit={() => {
-                  handleSubmit()
-                  onOk()
-                }}
-                formValid={formValid}
-                submitLoading={submitLoading}
-              />
-            </Flex>
-          </Flex>
         )
       }}
     </NewObjectForm>