form-craft-package 1.7.9-dev.2 → 1.7.10-dev.0

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

@@ -1,18 +1,22 @@
 import { Form } from 'antd'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { IDndLayoutStructure_Responsive, IFormSchema } from '../../../types'
-import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListSkeleton_Details from '../../common/loading-skeletons/details'
 import { useLocation } from 'react-router-dom'
-import { fromMongoDbExtendedJSON, isValidMongoDbId, queryParamsToObject } from '../../../functions/forms'
 import { DeviceBreakpointEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import client from '../../../api/client'
 import { useBreadcrumb } from '../../common/custom-hooks/use-breadcrumb.hook'
 import NotFound from '../../common/not-found'
 import { useManyToManyConnector } from '../../common/custom-hooks/use-many-to-many-connector.hook'
+import {
+  fromMongoDbExtendedJSON,
+  isNewFormDataPage,
+  isValidMongoDbId,
+  queryParamsToObject,
+} from '../../../functions/forms'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -46,10 +50,9 @@ export default function FormDataDetailsComponent({
   }, [formDataId])
 
   useEffect(() => {
-    const isNewDataPage = formDataId === NEW_FORM_DATA_IDENTIFIER
     const splittedFormName = formName?.split(' ')?.[0] ?? ''
     push({
-      label: isNewDataPage ? `New ${splittedFormName.toLowerCase()}` : `${splittedFormName} details`,
+      label: isNewFormDataPage(formDataId) ? `New ${splittedFormName.toLowerCase()}` : `${splittedFormName} details`,
       href: location.pathname,
     })
   }, [location.pathname, formName, formDataId])
@@ -61,7 +64,7 @@ export default function FormDataDetailsComponent({
 
   // Apply initialValues from parent
   useEffect(() => {
-    if (initialValues && formDataId === NEW_FORM_DATA_IDENTIFIER) {
+    if (initialValues && isNewFormDataPage(formDataId)) {
       formDataRef.setFieldsValue(initialValues)
     }
   }, [initialValues, formDataId, formDataRef])
@@ -85,8 +88,7 @@ export default function FormDataDetailsComponent({
 
   const fetchFormData = useCallback(
     (dFormId?: number) => {
-      if (formDataId === NEW_FORM_DATA_IDENTIFIER || !isValidMongoDbId(formDataId))
-        setLoadings((c) => ({ ...c, data: false }))
+      if (isNewFormDataPage(formDataId) || !isValidMongoDbId(formDataId)) setLoadings((c) => ({ ...c, data: false }))
       else {
         if (!dFormId) {
           console.error('Form ID is required to fetch form data')
@@ -151,25 +153,23 @@ export default function FormDataDetailsComponent({
   if (isNotFound) return <NotFound />
 
   return (
-    <>
-      <Form layout="vertical" name="dynamic_form_data_form" form={formDataRef}>
-        {layout.map((row, rowIdx) => (
-          <LayoutRendererRow
-            key={rowIdx}
-            rowData={row}
-            formContext={formContext}
-            elements={layoutConfig.elements}
-            renderButton={(btnProps, conditions) => (
-              <DynamicFormButtonRender
-                displayStateProps={{ btnProps, conditions, defaultDisabled: true }}
-                formContext={formContext}
-                onCustomFunctionCall={onCustomFunctionCall}
-              />
-            )}
-          />
-        ))}
-      </Form>
-    </>
+    <Form layout="vertical" name="dynamic_form_data_form" form={formDataRef}>
+      {layout.map((row, rowIdx) => (
+        <LayoutRendererRow
+          key={rowIdx}
+          rowData={row}
+          formContext={formContext}
+          elements={layoutConfig.elements}
+          renderButton={(btnProps, conditions) => (
+            <DynamicFormButtonRender
+              displayStateProps={{ btnProps, conditions, defaultDisabled: true }}
+              formContext={formContext}
+              onCustomFunctionCall={onCustomFunctionCall}
+            />
+          )}
+        />
+      ))}
+    </Form>
   )
 }
 

package/src/components/form/layout-renderer/1-row/index.tsx

@@ -1,5 +1,5 @@
 import { FormInstance } from 'antd'
-import { getFlexContainerStyle, getColumnStyle, kebabCaseToCamelCase } from '../../../../functions/forms'
+import { getGridContainerStyle, getColumnStyle, kebabCaseToCamelCase } from '../../../../functions/forms'
 import LayoutRendererCol from '../2-col'
 import { memo, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { LayoutRowConditionalHeaderRenderer } from './header-render'
@@ -26,14 +26,15 @@ export const LayoutRendererRow = memo(
       if (hideCol) hideCol(hiddenElementCount === rowData.children.length)
     }, [hiddenElementCount, JSON.stringify(rowData.children)])
 
+    useEffect(() => {
+      return () => setHiddenElementCount(0)
+    }, [])
+
     return (
       <LayoutRowConditionalHeaderRenderer header={rowData.props?.header}>
         <LayoutRowRepeatableRenderer basePath={basePath} repeatingSection={rowData.props?.repeatingSection}>
           {(formListItemProps) => {
-            const style: { [key: string]: any } = {
-              ...styleConfig,
-              ...getFlexContainerStyle(rowData.display),
-            }
+            const style: { [key: string]: any } = { ...styleConfig, ...getGridContainerStyle(rowData.display) }
 
             if (hiddenElementCount === rowData.children.length) return <></>
 
@@ -62,7 +63,7 @@ export const LayoutRendererRow = memo(
                     formContext={formContext}
                     colStyle={getColumnStyle(colIdx, rowData.display)}
                     renderButton={renderButton}
-                    hideRow={(isHidden) =>
+                    hideRow={(isHidden) => {
                       setHiddenElementCount((c) => {
                         if (isHidden) {
                           hiddenColIdx.current = [...hiddenColIdx.current, colIdx]
@@ -72,7 +73,7 @@ export const LayoutRendererRow = memo(
                           return c - 1
                         }
                       })
-                    }
+                    }}
                   />
                 ))}
                 {formListItemProps?.removeButton}
@@ -102,6 +103,7 @@ export interface IFormContext {
   formName?: string // only passed in DynamicButton component
   formKey?: string
   formId?: number
+  detailPageFormId?: number
   parentFormJoins?: IFormJoin[]
   manyToManyRelInfo?: { middleFormId: number; currentFormId: number; otherFormId: number } | null
 }

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

@@ -10,7 +10,6 @@ import { useCreateDataWithPdfActions } from './use-create-data.hook'
 import { useSaveExistingDataAction } from './use-save-data.hook'
 import { useGenerateReportAction } from './use-generate-report.hook'
 import { useSaveSignatureAction } from './use-save-signature.hook'
-import { NEW_FORM_DATA_IDENTIFIER } from '../../../../../constants'
 import { Button_FillerPortal } from '../../../../common/button'
 import { getButtonRenderProps } from '../../../../../functions/forms/get-element-props'
 import WarningIcon from '../../../../common/warning-icon'
@@ -18,7 +17,8 @@ import FormDataLoadingIndicatorModal from '../../../../modals/form-data-loading.
 import { IFormContext } from '../../1-row'
 import { ButtonActionCategoryEnum, FormLoadingModalTypeEnum } from '../../../../../enums'
 import { useButtonNavigateAction } from './use-button-navigate.hook'
-import { constructDynamicFormHref } from '../../../../../functions'
+import { constructDynamicFormHref, isNewFormDataPage } from '../../../../../functions'
+import { useCustomFunctionCallAction } from './use-custom-function-call.hook'
 import {
   IButtonElementProps,
   IFormLayoutElementConditions,
@@ -60,8 +60,9 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
 
   const handleSecondaryAction = useCallback(
     (formDataId?: string) => {
-      if (!btnProps.secondaryAction) {
-        if (formInfo?.name) navigate(`${constructDynamicFormHref(formInfo.name)}/${formDataId}`, { replace: true })
+      if (!btnProps.secondaryAction || Object.values(btnProps.secondaryAction).length === 0) {
+        if (formInfo?.name && formDataId)
+          navigate(`${constructDynamicFormHref(formInfo.name)}/${formDataId}`, { replace: true })
         setTimeout(() => {
           setDataLoadingType(undefined)
           displayResultMessage()
@@ -72,7 +73,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       const { category } = btnProps.secondaryAction
       if (category === ButtonActionCategoryEnum.Navigate) onButtonNavigate(btnProps.secondaryAction)
       else if (category === ButtonActionCategoryEnum.CustomFunction) {
-        onCustomFunctionCall(btnProps.secondaryAction.functionName, btnProps.messages ?? defaultMessage)
+        onFunctionCall(btnProps.secondaryAction.functionName, btnProps.messages ?? defaultMessage)
         setTimeout(() => setLoading(false), 500)
       }
     },
@@ -105,16 +106,23 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       setLoading(false)
     },
     onSuccess: (formDataId?: string) => handleSecondaryAction(formDataId),
-    onError: () => displayResultMessage(false),
+    onError: () => {
+      setDataLoadingType(undefined)
+      displayResultMessage(false)
+    },
     onFinal: () => setLoading(false),
   })
   const onSaveExistingData = useSaveExistingDataAction({
     ...formContext,
     setDataLoadingType,
     onSuccess: () => handleSecondaryAction(),
-    onError: () => displayResultMessage(false),
+    onError: () => {
+      setDataLoadingType(undefined)
+      displayResultMessage(false)
+    },
     onFinal: () => setLoading(false),
   })
+  const onFunctionCall = useCustomFunctionCallAction({ ...formContext, onCustomFunctionCall })
   const { onGenerateReport, ChooseTemplateReportModal } = useGenerateReportAction({
     ...formContext,
     onSuccess: () => {},
@@ -157,7 +165,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       case ButtonActionCategoryEnum.SaveDataChanges:
         await onSaveSignature()
 
-        if (formDataId === NEW_FORM_DATA_IDENTIFIER) {
+        if (isNewFormDataPage(formDataId)) {
           if (isPublic && submissionPdfConfig) onGeneratePdfProof()
           else onCreateNewData()
         } else onSaveExistingData()
@@ -179,7 +187,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         break
 
       case ButtonActionCategoryEnum.CustomFunction:
-        onCustomFunctionCall(btnProps.functionName, btnProps.messages ?? defaultMessage)
+        onFunctionCall(btnProps.functionName, btnProps.messages)
         setTimeout(() => setLoading(false), 500)
         break
 
@@ -197,7 +205,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
     formDataId,
     isPublic,
     submissionPdfConfig,
-    onCustomFunctionCall,
+    onFunctionCall,
     onDuplicateData,
     onDeleteData,
     onPublishData,
@@ -222,7 +230,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
           if (inPreviewMode) return
           if (
             isPublic &&
-            formDataId === NEW_FORM_DATA_IDENTIFIER &&
+            isNewFormDataPage(formDataId) &&
             [ButtonActionCategoryEnum.SaveDataChanges, ButtonActionCategoryEnum.Navigate].includes(btnProps.category)
           )
             return
@@ -240,7 +248,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         }}
       >
         {isPublic &&
-          formDataId === NEW_FORM_DATA_IDENTIFIER &&
+          isNewFormDataPage(formDataId) &&
           btnProps.category !== ButtonActionCategoryEnum.SaveDataChanges && (
             <WarningIcon tooltip={BUTTON_CUSTOM_ERROR_MESSAGES.UnavailableForPublic} />
           )}
@@ -270,13 +278,11 @@ interface IDynamicButton_DisplayStateProps {
 }
 
 export interface ICustomFunctionCall {
-  onCustomFunctionCall?: (
-    fnName?: string,
-    messages?: {
-      success?: string
-      error?: string
-    },
-  ) => void
+  onCustomFunctionCall?: (params: {
+    fnName: string
+    messages?: { success?: string; error?: string }
+    formData?: { [key: string]: any }
+  }) => void
 }
 export interface IOnSuccessFunctions {
   onSuccess: (formDataId?: string) => void

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

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { IButtonProps_Navigate } from '../../../../../types'
 import { useFindDynamiForm, useNotification } from '../../../../common/custom-hooks'
-import { constructDynamicFormHref } from '../../../../../functions/forms'
+import { constructDynamicFormHref, isNewFormDataPage } from '../../../../../functions/forms'
 import { NavigateButtonCustomComponentType, NavigateButtonTypesEnum } from '../../../../../enums'
 import { IFormContext } from '../../1-row'
 import { BUTTON_CUSTOM_ERROR_MESSAGES, IOnSuccessFunctions } from '.'
@@ -18,7 +18,7 @@ export const useButtonNavigateAction = ({
   onFinal,
   ...formContext
 }: IOnSuccessFunctions & IFormContext) => {
-  const { formRef, formDataId, parentFormJoins, manyToManyRelInfo } = formContext
+  const { formRef, formDataId, detailPageFormId, parentFormJoins, manyToManyRelInfo } = formContext
   const { getFormById } = useFindDynamiForm()
   const { error } = useNotification()
   const { updateCrumb } = useBreadcrumb()
@@ -32,14 +32,20 @@ export const useButtonNavigateAction = ({
       switch (btnProps.navigateType) {
         case NavigateButtonTypesEnum.NewDataPage:
           let newDatapageNavigateUrl = `${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`
+
           if (manyToManyRelInfo && parentFormJoins && formDataId) {
             const middleFormInfo = getFormById(manyToManyRelInfo.middleFormId)
 
             if (middleFormInfo)
               newDatapageNavigateUrl = `${constructDynamicFormHref(middleFormInfo.name)}/${NEW_FORM_DATA_IDENTIFIER}`
           }
-          if (formDataId !== NEW_FORM_DATA_IDENTIFIER)
-            updateCrumb(location.pathname, { formJoins: parentFormJoins, formDataId, manyToManyRelInfo })
+          if (!isNewFormDataPage(formDataId))
+            updateCrumb(location.pathname, {
+              formJoins: parentFormJoins,
+              detailPageFormId,
+              formDataId,
+              manyToManyRelInfo,
+            })
 
           navigate(newDatapageNavigateUrl)
           break
@@ -81,7 +87,7 @@ export const useButtonNavigateAction = ({
           break
       }
     },
-    [parentFormJoins, manyToManyRelInfo, formRef],
+    [parentFormJoins, detailPageFormId, manyToManyRelInfo, formRef],
   )
 
   return onButtonNavigate

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-custom-function-call.hook.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react'
+import { IFormContext } from '../../1-row'
+import { ICustomFunctionCall } from '.'
+
+export const useCustomFunctionCallAction = ({
+  formRef,
+  formDataId,
+  formId,
+  onCustomFunctionCall,
+}: IFormContext & ICustomFunctionCall) => {
+  const onFunctionCall = useCallback(
+    async (functionName: string, messages?: { success?: string; error?: string }) => {
+      let formData: { [key: string]: any } | undefined = undefined
+      if (formRef) formData = await formRef.validateFields()
+
+      onCustomFunctionCall?.({ fnName: functionName, messages, formData: { ...formData, formId, formDataId } })
+    },
+    [formRef, formId, formDataId],
+  )
+
+  return onFunctionCall
+}

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-generate-report.hook.tsx

@@ -112,13 +112,13 @@ export const useGenerateReportAction = ({
                         ),
                       }
                     } else if (rep.optionSource.type === FieldElementOptionSourceEnum.DynamicForm) {
-                      const formDataResData = await fetchFormDataAsLookup(rep.optionSource.form.id)
+                      const formDataResData = await fetchFormDataAsLookup(rep.optionSource.formId)
 
                       return {
                         placeholder: rep.placeholder,
                         value: renderData(
                           formDataResData.find((data) => data.id === (value as unknown as string))?.[
-                            rep.optionSource.form.field
+                            rep.optionSource.field
                           ],
                           rep.renderConfig,
                         ),

package/src/components/form/layout-renderer/3-element/2-field-element.tsx

@@ -3,7 +3,7 @@ import { FaCaretDown } from 'react-icons/fa'
 import dayjs, { Dayjs } from 'dayjs'
 import { FaUpload } from 'react-icons/fa6'
 import { CountryEnum, DataSanitizationTypeEnum, ElementTypeEnum } from '../../../../enums'
-import { formatByPattern, mapToFormItemRules } from '../../../../functions/forms'
+import { formatByPattern, mapToFormItemRules, renderData } from '../../../../functions/forms'
 import { DisabledFieldIndicator } from '../../../common/disabled-field-indicator'
 import CustomColorField from '../../../common/color-field'
 import { IDataSanitization, IValidationRule } from '../../../../types'
@@ -83,6 +83,7 @@ const getField = ({
   isCustom,
   country = CountryEnum.US,
   decimalPoint = 0,
+  mode,
   disabledDate,
 }: Partial<IMapperFieldObj>): JSX.Element => {
   placeholder = placeholder && placeholder.length > 0 ? placeholder : typeof label === 'string' ? label : ''
@@ -99,13 +100,44 @@ const getField = ({
           disabled={disabled}
           showSearch
           optionFilterProp="label"
-          filterOption={(input, option) =>
-            option && typeof option.label === 'string'
-              ? option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-              : false
-          }
+          filterOption={(input, option) => {
+            const noOtherField = !option?.field2 && !option?.field3 && !option?.field4
+            const text = option
+              ? typeof option.label === 'string' && noOtherField
+                ? option.label
+                : [option.label, option.field2 ?? '', option.field3 ?? '', option.field4 ?? ''].join(' ')
+              : ''
+
+            return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }}
+          optionRender={(option: any) => {
+            const opData = option.data || {}
+            const noOtherField = !opData.field2 && !opData.field3 && !opData.field4
+
+            if (noOtherField) return option.label
+
+            return (
+              <div key={opData.value} className="flex flex-col gap-0.5">
+                <div className="space-x-2">
+                  <span className="text-primary font-bold">{opData.label}</span>
+                  {opData.field2 && (
+                    <span className="text-12 italic font-normal">
+                      ({opData.field2_RC ? renderData(opData.field2, opData.field2_RC) : opData.field2})
+                    </span>
+                  )}
+                </div>
+                {opData.field3 && (
+                  <div className="text-12">
+                    {opData.field3_RC ? renderData(opData.field3, opData.field3_RC) : opData.field3}
+                  </div>
+                )}
+                {opData.field4 && opData.field4_RC ? renderData(opData.field4, opData.field4_RC) : opData.field4}
+              </div>
+            )
+          }}
           allowClear={allowClear}
           className="w-full"
+          mode={mode}
         />
       )
     case ElementTypeEnum.Checkbox:
@@ -220,11 +252,13 @@ interface IMapperFieldObj {
   sanitization?: IDataSanitization
   country?: CountryEnum
   decimalPoint?: number
+  mode?: 'multiple' | 'tags'
   disabledDate?: (date: Dayjs) => boolean
 }
 interface ISelectOption {
   value: number | boolean | string
   label: string | ReactNode
+  [key: string]: any
 }
 const datepickerFormats = [
   'MM/DD/YYYY',

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

@@ -13,7 +13,7 @@ export default function LayoutRenderer_ReCaptcha({
 }: ILayoutRenderer_RichEditor) {
   const { formRef, formKey } = formContext
   const [tokenVerificationFailed, setTokenVerificationFailed] = useState(false)
-  const verifyApiCancelFuncRef = useRef<() => void | undefined>(undefined)
+  const verifyApiCancelFuncRef = useRef<() => void | undefined>()
 
   const verifyReCaptcha = useCallback(
     (token: string | null) => {

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

@@ -1,14 +1,13 @@
 import { Form } from 'antd'
 import { useEffect, useMemo, useRef } from 'react'
 import SignatureCanvas from 'react-signature-canvas'
-import { NEW_FORM_DATA_IDENTIFIER } from '../../../../constants'
 import { FormPreservedItemKeys } from '../../../../enums'
 import { Button_FillerPortal } from '../../../common/button'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { IElementBaseProps } from '.'
 import { ISignatureElementProps, IValidationRule } from '../../../../types'
 import { IFormContext } from '../1-row'
-import { mapToFormItemRules } from '../../../../functions'
+import { isNewFormDataPage, mapToFormItemRules } from '../../../../functions'
 
 export default function LayoutRenderer_Signature({
   formItem,
@@ -55,7 +54,7 @@ export default function LayoutRenderer_Signature({
       }
       labelAlign="left"
     >
-      {(inPreviewMode || formDataId === NEW_FORM_DATA_IDENTIFIER) && !isGeneratingPdf ? (
+      {(inPreviewMode || isNewFormDataPage(formDataId)) && !isGeneratingPdf ? (
         <SignatureCanvas
           ref={sigCanvasRef}
           canvasProps={{