form-craft-package 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/common/custom-hooks/use-find-dynamic-form.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
-import { LOCAL_STORAGE_KEYS_ENUM } from '../../../constants'
 import { IDynamicForm } from '../../../types'
+import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 
 export const useFindDynamiForm = () => {
   const { formName } = useParams<{ formName: string }>()

package/src/components/form/2-details/index.tsx

@@ -9,6 +9,7 @@ import { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer
 import FormDataListSkeleton_Details from '../../common/loading-skeletons/details'
 import { useLocation } from 'react-router-dom'
 import { queryParamsToObject } from '../../../functions'
+import { FormPreservedItemKeys } from '../../../enums'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -28,7 +29,7 @@ export default function FormDataDetailsComponent({
     // this is for converting the screen to PDF
     if (isPublic && location.search) {
       const formValues = queryParamsToObject(location.search)
-      formDataRef.setFieldsValue(formValues)
+      formDataRef.setFieldsValue({ ...formValues, [FormPreservedItemKeys.IsGeneratingPDF]: true })
     }
   }, [isPublic, location, formDataRef])
 
@@ -66,10 +67,11 @@ export default function FormDataDetailsComponent({
           if (res.status === 200) {
             const parsedData: IFormSchema | null = parseJSON(res.data.data)
             if (parsedData) {
+              console.log({parsedData})
               const { layout, migrationRules, convertScreenToPdf = false } = parsedData.detailsConfig
 
               if (isPublic) {
-                formDataRef.setFieldValue('convertScreenToPdf', convertScreenToPdf)
+                formDataRef.setFieldValue(FormPreservedItemKeys.ConvertScreenToPDF, convertScreenToPdf)
                 setLoadings((c) => ({ ...c, data: false }))
               } else fetchFormData(formId, migrationRules)
               setLayout(layout)

package/src/components/form/layout-renderer/3-element/1-dynamic-button.tsx

@@ -3,15 +3,16 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { Form, FormInstance } from 'antd'
 import { getButtonRenderProps } from '../../../../functions/get-element-props'
 import { stringifyJSON } from '../../../../functions/json-handlers'
-import { ButtonActionCategoryEnum, FormLoadingModalTypeEnum } from '../../../../enums'
+import { ButtonActionCategoryEnum, FormLoadingModalTypeEnum, FormPreservedItemKeys } from '../../../../enums'
 import { IDataRender_ButtonProps, IFormLayoutElementConditions } from '../../../../types'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../../constants'
 import { Button_FillerPortal } from '../../../common/button'
-import { extractDynamicFormHref, objectToQueryParams } from '../../../../functions'
+import { base64ToBlob, extractDynamicFormHref, objectToQueryParams } from '../../../../functions'
 import { useNotification } from '../../../common/custom-hooks/use-notification.hook'
 import client from '../../../../functions/axios-handler'
 import { useLazyModalOpener } from '../../../common/custom-hooks/use-lazy-modal-opener.hook'
 import WarningIcon from '../../../common/warning-icon'
+import { saveFile } from '../../../../functions/form'
 
 const FormDataLoadingIndicatorModal = lazy(() => import('../../../modals/form-data-loading.modal'))
 
@@ -34,9 +35,12 @@ export const DynamicFormButtonRender = memo(
     const [dataLoadingType, setDataLoadingType] = useState<FormLoadingModalTypeEnum | undefined>()
 
     const formValues = Form.useWatch([], { form: formRef, preserve: true })
-    const formId = Form.useWatch('formId', { form: formRef, preserve: true }) // for public use
-    const formKey = Form.useWatch('formKey', { form: formRef, preserve: true }) // for public use
-    const convertScreenToPdf = Form.useWatch('convertScreenToPdf', { form: formRef, preserve: true }) // for public use
+    const formId = Form.useWatch(FormPreservedItemKeys.FormId, { form: formRef, preserve: true }) // for public use
+    const formKey = Form.useWatch(FormPreservedItemKeys.FormKey, { form: formRef, preserve: true }) // for public use
+    const convertScreenToPdf = Form.useWatch(FormPreservedItemKeys.ConvertScreenToPDF, {
+      form: formRef,
+      preserve: true,
+    }) // for public use
 
     const baseDynamicUrl = useMemo(() => extractDynamicFormHref(location.pathname), [location.pathname])
 
@@ -133,7 +137,7 @@ export const DynamicFormButtonRender = memo(
           if (isPublic) reqData.private = true // TODO: figure out what this is
           else reqData.version = 1
 
-          const endpoint = isPublic ? `/api/formdata/${formId}` : `/api/site/${formKey}`
+          const endpoint = isPublic ? `/api/site/${formKey}` : `/api/formdata/${formId}`
 
           client
             .post(endpoint, reqData)
@@ -156,13 +160,21 @@ export const DynamicFormButtonRender = memo(
     const generatePdfProof = useCallback(() => {
       formRef?.validateFields().then((values) => {
         const queryParams = objectToQueryParams(values)
+        console.log(queryParams)
         const fullUrl = `${location.pathname}?${queryParams}`
         console.log(fullUrl)
-        // TODO: call api
-        const generatedPdfBlobName = ''
-        onCreateNewData(generatedPdfBlobName)
+        const blobName = 'abc'
+        client
+          .post(`/api/attachment/pdf/${formKey}/${fullUrl}/${blobName}`)
+          .then((res) => {
+            if (res.status < 300) {
+              console.log(res.data)
+              onCreateNewData(res.data)
+            }
+          })
+          .catch(() => error({ message: 'Error occured while generating PDF!' }))
       })
-    }, [formRef, location.pathname])
+    }, [formRef, location.pathname, formKey])
 
     const onSaveExistingData = useCallback(() => {
       formRef!.validateFields().then((values) => {
@@ -191,7 +203,7 @@ export const DynamicFormButtonRender = memo(
       })
     }, [formRef, formId, formDataId])
 
-    const onButtonClick = useCallback(() => {
+    const onButtonClick = useCallback(async () => {
       switch (btnProps.category) {
         case ButtonActionCategoryEnum.CreateNewData:
           navigate(`${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`)
@@ -214,6 +226,16 @@ export const DynamicFormButtonRender = memo(
           break
         case ButtonActionCategoryEnum.SaveDataChanges:
           if (formRef) {
+            const signatureField = formRef.getFieldValue(FormPreservedItemKeys.HasSignature)
+            if (!!signatureField) {
+              setDataLoadingType(FormLoadingModalTypeEnum.GeneratingPdf)
+
+              const signatureBase64 = formRef.getFieldValue(signatureField)
+              const blobName = await saveFile(base64ToBlob(signatureBase64), 'signature')
+
+              if (!!blobName) formRef.setFieldValue(signatureField, blobName)
+            }
+
             if (formDataId === NEW_FORM_DATA_IDENTIFIER) {
               if (convertScreenToPdf) generatePdfProof()
               else onCreateNewData()

package/src/components/form/layout-renderer/3-element/5-re-captcha.tsx

@@ -2,10 +2,11 @@ import { Form, FormInstance } from 'antd'
 import { useCallback, useState } from 'react'
 import ReCAPTCHA from 'react-google-recaptcha'
 import client from '../../../../functions/axios-handler'
+import { FormPreservedItemKeys } from '../../../../enums'
 
 export default function LayoutRenderer_ReCaptcha({ formRef, fieldKey, elementProps }: ILayoutRenderer_RichEditor) {
   const [tokenVerificationFailed, setTokenVerificationFailed] = useState(false)
-  const formKey = Form.useWatch('formKey', { form: formRef, preserve: true })
+  const formKey = Form.useWatch(FormPreservedItemKeys.FormKey, { form: formRef, preserve: true })
 
   const verifyReCaptcha = useCallback(
     (token: string | null) => {

package/src/components/form/layout-renderer/3-element/6-signature.tsx

@@ -1,71 +1,21 @@
 import { Form, FormInstance } from 'antd'
-import { useCallback, useRef, useState } from 'react'
+import { useRef } from 'react'
 import SignatureCanvas from 'react-signature-canvas'
-import { Button_FillerPortal } from '../../../common/button'
-import client from '../../../../functions/axios-handler'
-import { base64ToBlob } from '../../../../functions'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../../constants'
+import { FormPreservedItemKeys } from '../../../../enums'
 
 export default function LayoutRenderer_Signature({ formRef, fieldKey, elementProps }: ILayoutRenderer_Signature) {
-  const [loading, setLoading] = useState(false)
   const sigCanvasRef = useRef<SignatureCanvas>(null)
   const savedSignatureBlobName = Form.useWatch(fieldKey, formRef)
-  const formDataId = Form.useWatch('formDataId', { form: formRef, preserve: true })
-  const baseServerUrl = Form.useWatch('baseServerUrl', { form: formRef, preserve: true })
-  const companyKey = Form.useWatch('companyKey', { form: formRef, preserve: true })
-
-  const saveSignature = useCallback(
-    (signatureBase64: string) => {
-      setLoading(true)
-      const formData = new FormData()
-      formData.append('file', base64ToBlob(signatureBase64), 'signature.jpg')
-      client
-        .post('/api/attachment', formData)
-        .then((res) => {
-          if (res.status < 300 && res.data) formRef.setFieldValue(fieldKey, res.data)
-        })
-        .finally(() => setLoading(false))
-    },
-    [fieldKey],
-  )
-
-  const deleteSavedSignature = useCallback((blobName: string) => {
-    setLoading(true)
-    client
-      .delete(`/api/attachment/${blobName}`)
-      .then((res) => {
-        if (res.status < 300) {
-          formRef.setFieldValue(fieldKey, null)
-          sigCanvasRef.current?.clear()
-        }
-      })
-      .finally(() => setLoading(false))
-  }, [])
+  const formDataId = Form.useWatch(FormPreservedItemKeys.FormDataId, { form: formRef, preserve: true })
+  const baseServerUrl = Form.useWatch(FormPreservedItemKeys.BaseServerUrl, { form: formRef, preserve: true })
+  const companyKey = Form.useWatch(FormPreservedItemKeys.CompanyKey, { form: formRef, preserve: true })
+  const isGeneratingPdf = Form.useWatch(FormPreservedItemKeys.IsGeneratingPDF, { form: formRef, preserve: true })
 
   return (
-    <Form.Item
-      name={fieldKey}
-      label={
-        <>
-          <span>{elementProps.hasNoLabel ? '' : elementProps.label}</span>
-          {formDataId === NEW_FORM_DATA_IDENTIFIER && (
-            <Button_FillerPortal
-              link
-              loading={loading}
-              onClick={() => {
-                if (savedSignatureBlobName) deleteSavedSignature(savedSignatureBlobName)
-                else sigCanvasRef.current?.clear()
-              }}
-            >
-              <span className="underline">Clear field</span>
-            </Button_FillerPortal>
-          )}
-        </>
-      }
-      labelAlign="left"
-    >
-      {formDataId !== NEW_FORM_DATA_IDENTIFIER ? (
-        <div className="h-[300px] rounded-md">
+    <Form.Item name={fieldKey} label={elementProps.hasNoLabel ? '' : elementProps.label} labelAlign="left">
+      {formDataId !== NEW_FORM_DATA_IDENTIFIER || isGeneratingPdf ? (
+        <div className="h-[300px] rounded-md border-2 border-[#f0f0f0]">
           <img alt="signature" src={`${baseServerUrl}/api/attachment/${companyKey}/${savedSignatureBlobName}`} />
         </div>
       ) : (
@@ -78,7 +28,9 @@ export default function LayoutRenderer_Signature({ formRef, fieldKey, elementPro
           }}
           onEnd={() => {
             const sigBase64 = sigCanvasRef.current?.toDataURL()
-            if (sigBase64) saveSignature(sigBase64)
+            if (sigBase64)
+              formRef.setFieldsValue({ [fieldKey]: sigBase64, [FormPreservedItemKeys.HasSignature]: fieldKey })
+            // saveSignature(sigBase64)
           }}
         />
       )}

package/src/components/form/layout-renderer/3-element/7-file-upload.tsx

@@ -6,6 +6,7 @@ import { FaFile, FaUpload } from 'react-icons/fa6'
 import { IFileUploadElementRules } from '../../../../types'
 import { useNotification } from '../../../common/custom-hooks'
 import { FaTrashAlt } from 'react-icons/fa'
+import { saveFile } from '../../../../functions/form'
 
 export default function LayoutRenderer_FileUpload({
   formRef,
@@ -17,21 +18,6 @@ export default function LayoutRenderer_FileUpload({
   const [loading, setLoading] = useState(false)
   const savedSignatureBlobName = Form.useWatch(fieldKey, formRef)
 
-  const saveFile = useCallback(
-    (file: any) => {
-      setLoading(true)
-      const formData = new FormData()
-      formData.append('file', file.originFileObj, file.name)
-      client
-        .post('/api/attachment', formData)
-        .then((res) => {
-          if (res.status < 300 && res.data) formRef.setFieldValue(fieldKey, res.data)
-        })
-        .finally(() => setLoading(false))
-    },
-    [fieldKey],
-  )
-
   const deleteSavedFile = useCallback((blobName: string) => {
     setLoading(true)
     client
@@ -48,8 +34,13 @@ export default function LayoutRenderer_FileUpload({
     customRequest: ({ file, onSuccess }: any): void => {
       setTimeout(() => onSuccess('ok', file), 100)
     },
-    onChange: (fileInfo: any) => {
-      if (fileInfo.file.status === 'done') saveFile(fileInfo.file)
+    onChange: async (fileInfo: any) => {
+      if (fileInfo.file.status === 'done') {
+        setLoading(true)
+        const blobName = await saveFile(fileInfo.file.originFileObj, fileInfo.file.name)
+        if (blobName) formRef.setFieldValue(fieldKey, blobName)
+        setLoading(false)
+      }
     },
   }
 

package/src/constants.ts

@@ -10,6 +10,3 @@ export const DEFAULT_FLEX_CONFIG = {
   Item: { flexBasis: '0', flexGrow: 1, display: CSSLayoutType.Flex, flexDirection: FlexDirection.Col, gap: '10px' },
 }
 export const NEW_FORM_DATA_IDENTIFIER = 'new'
-export enum LOCAL_STORAGE_KEYS_ENUM {
-  DynamicForms = '38be231fe41c169037ed04c267ebe070',
-}

package/src/enums.ts

@@ -1,3 +1,6 @@
+export enum LOCAL_STORAGE_KEYS_ENUM {
+  DynamicForms = '38be231fe41c169037ed04c267ebe070',
+}
 export enum ElementTypeEnum {
   ShortInput = 'Short Input',
   LongInput = 'Long Input',
@@ -163,6 +166,7 @@ export enum ResponsivenessDeviceEnum {
   Mobile = 'xs',
 }
 export enum FormLoadingModalTypeEnum {
+  GeneratingPdf,
   SavingChanges,
   ErrorOccured,
 }
@@ -181,4 +185,14 @@ export enum FileTypeEnum {
   EXCEL = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
   CSV = 'text/csv',
   DOCX = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-}
+}
+export enum FormPreservedItemKeys {
+  FormId = 'formId',
+  FormKey = 'formKey',
+  FormDataId = 'formDataId',
+  BaseServerUrl = 'baseServerUrl',
+  CompanyKey = 'companyKey',
+  ConvertScreenToPDF = 'convertScreenToPdf',
+  IsGeneratingPDF = 'isGeneratingPdf',
+  HasSignature = 'hasSignature',
+}

package/src/functions/form.ts

@@ -0,0 +1,15 @@
+import client from './axios-handler'
+
+export const saveFile = async (file: any, fileName: string): Promise<string | null> => {
+  try {
+    const formData = new FormData()
+    formData.append('file', file, fileName)
+    const response = await client.post('/api/attachment', formData)
+    if (response.status < 300) return response.data
+
+    return null
+  } catch (error: any) {
+    console.error(error.response)
+    return null
+  }
+}