form-craft-package 1.7.9-dev.1 → 1.7.9-dev.2

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

@@ -1,9 +1,8 @@
-import { useLocation, useNavigate } from 'react-router-dom'
-import { useNotification } from '../../../../common/custom-hooks'
+import { useNavigate } from 'react-router-dom'
+import { useFindDynamiForm, useNotification } from '../../../../common/custom-hooks'
 import { useCheckElementConditions } from '../../../../common/custom-hooks/use-check-element-conditions.hook'
-import { memo, useCallback, useMemo, useState } from 'react'
+import { memo, useCallback, useState } from 'react'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
-import { constructDynamicFormHref } from '../../../../../functions/forms'
 import { useDuplicateDataAction } from './use-duplicate-data.hook'
 import { useDeleteDataAction } from './use-delete-data.hook'
 import { usePublishDataAction } from './use-publish-data.hook'
@@ -16,36 +15,33 @@ import { Button_FillerPortal } from '../../../../common/button'
 import { getButtonRenderProps } from '../../../../../functions/forms/get-element-props'
 import WarningIcon from '../../../../common/warning-icon'
 import FormDataLoadingIndicatorModal from '../../../../modals/form-data-loading.modal'
-import { useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
 import { IFormContext } from '../../1-row'
+import { ButtonActionCategoryEnum, FormLoadingModalTypeEnum } from '../../../../../enums'
+import { useButtonNavigateAction } from './use-button-navigate.hook'
+import { constructDynamicFormHref } from '../../../../../functions'
 import {
   IButtonElementProps,
   IFormLayoutElementConditions,
   IButtonProps_Other,
   IButtonProps_Navigate,
 } from '../../../../../types'
-import {
-  ButtonActionCategoryEnum,
-  FormLoadingModalTypeEnum,
-  NavigateButtonCustomComponentType,
-  NavigateButtonTypesEnum,
-} from '../../../../../enums'
 
 export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   const { displayStateProps = {}, formContext = {}, onCustomFunctionCall = () => {} } = props
   const { btnProps, conditions, defaultDisabled = false } = displayStateProps as IDynamicButton_DisplayStateProps
-  const { formDataId, formRef, formName = '', parentFormJoins } = formContext as IFormContext
+  const { formDataId, formRef } = formContext as IFormContext
 
-  const location = useLocation()
+  const { getFormById } = useFindDynamiForm()
   const navigate = useNavigate()
-  const { updateCrumb } = useBreadcrumb()
   const { success, warning, error, confirmModal } = useNotification()
   const { isElementDisabled, isElementHidden } = useCheckElementConditions({ formRef, conditions, defaultDisabled })
   const [loading, setLoading] = useState(false)
   const [dataLoadingType, setDataLoadingType] = useState<FormLoadingModalTypeEnum | undefined>()
-  const { inPreviewMode, isPublic = false } = useFormPreservedItemValues(formRef)
+  const { inPreviewMode, isPublic = false, submissionPdfConfig } = useFormPreservedItemValues(formRef)
 
-  const baseDynamicUrl = useMemo(() => constructDynamicFormHref(formName) ?? '', [formName])
+  const formInfo = btnProps.formId ? getFormById(btnProps.formId) : undefined
+  formContext.formId = btnProps.formId
+  formContext.formName = formInfo?.name
 
   const displayResultMessage = useCallback(
     (isSuccess: boolean = true) => {
@@ -55,24 +51,49 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
     [btnProps.messages, success, error],
   )
 
+  const onButtonNavigate = useButtonNavigateAction({
+    ...formContext,
+    onSuccess: () => {},
+    onError: () => {},
+    onFinal: () => {},
+  })
+
+  const handleSecondaryAction = useCallback(
+    (formDataId?: string) => {
+      if (!btnProps.secondaryAction) {
+        if (formInfo?.name) navigate(`${constructDynamicFormHref(formInfo.name)}/${formDataId}`, { replace: true })
+        setTimeout(() => {
+          setDataLoadingType(undefined)
+          displayResultMessage()
+        }, 500)
+        return
+      }
+
+      const { category } = btnProps.secondaryAction
+      if (category === ButtonActionCategoryEnum.Navigate) onButtonNavigate(btnProps.secondaryAction)
+      else if (category === ButtonActionCategoryEnum.CustomFunction) {
+        onCustomFunctionCall(btnProps.secondaryAction.functionName, btnProps.messages ?? defaultMessage)
+        setTimeout(() => setLoading(false), 500)
+      }
+    },
+    [btnProps, onButtonNavigate, formInfo],
+  )
+
   const onDuplicateData = useDuplicateDataAction({
     ...formContext,
-    onSuccess: () => displayResultMessage(),
+    onSuccess: () => handleSecondaryAction(),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
   const onDeleteData = useDeleteDataAction({
     ...formContext,
-    onSuccess: () => {
-      displayResultMessage(true)
-      navigate(baseDynamicUrl)
-    },
+    onSuccess: () => handleSecondaryAction(),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
   const onPublishData = usePublishDataAction({
     ...formContext,
-    onSuccess: () => displayResultMessage(),
+    onSuccess: () => handleSecondaryAction(),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
@@ -83,22 +104,14 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       setDataLoadingType(undefined)
       setLoading(false)
     },
-    onSuccess: () => {
-      setDataLoadingType(undefined)
-      displayResultMessage()
-    },
+    onSuccess: (formDataId?: string) => handleSecondaryAction(formDataId),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
   const onSaveExistingData = useSaveExistingDataAction({
     ...formContext,
     setDataLoadingType,
-    onSuccess: () => {
-      setTimeout(() => {
-        setDataLoadingType(undefined)
-        displayResultMessage()
-      }, 500)
-    },
+    onSuccess: () => handleSecondaryAction(),
     onError: () => displayResultMessage(false),
     onFinal: () => setLoading(false),
   })
@@ -113,56 +126,14 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   const handleButtonClick = useCallback(async () => {
     switch (btnProps.category) {
       case ButtonActionCategoryEnum.Navigate:
-        switch (btnProps.navigateType) {
-          case NavigateButtonTypesEnum.NewDataPage:
-            if (formDataId !== NEW_FORM_DATA_IDENTIFIER)
-              updateCrumb(location.pathname, { formJoins: parentFormJoins, formDataId })
-            navigate(`${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`)
-            break
-
-          case NavigateButtonTypesEnum.ViewDataDetails:
-            if (formDataId) navigate(`${baseDynamicUrl}/${formDataId}`)
-            else error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
-            break
-
-          case NavigateButtonTypesEnum.ReturnToList:
-            navigate(baseDynamicUrl)
-            break
-
-          case NavigateButtonTypesEnum.Custom:
-            if (Array.isArray(btnProps.urlComponents)) {
-              const validComponents = btnProps.urlComponents.filter((c) => !!c.type && !!c.value)
-              const formData = formRef?.getFieldsValue() ?? {}
-
-              const finalUrl = validComponents
-                .map((c) => {
-                  if (c.type === NavigateButtonCustomComponentType.DynamicPath) {
-                    const data = formData[c.value] ?? ''
-                    return data.replaceAll(' ', '')
-                  }
-
-                  return c.value
-                })
-                .join('/')
-
-              window.open(finalUrl, '_blank')
-            }
-            break
-
-          case NavigateButtonTypesEnum.ReturnOneBack:
-          default:
-            navigate(-1)
-            break
-        }
-        // window.location.href = `${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`
-
+        onButtonNavigate(btnProps)
         setLoading(false)
         break
 
       case ButtonActionCategoryEnum.DuplicateData:
         if (formDataId) await onDuplicateData()
         else {
-          error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+          error({ message: BUTTON_CUSTOM_ERROR_MESSAGES.DataIdNotFound })
           setLoading(false)
         }
         break
@@ -170,7 +141,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       case ButtonActionCategoryEnum.DeleteData:
         if (formDataId) await onDeleteData()
         else {
-          error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+          error({ message: BUTTON_CUSTOM_ERROR_MESSAGES.DataIdNotFound })
           setLoading(false)
         }
         break
@@ -178,7 +149,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
       case ButtonActionCategoryEnum.PublishDataChanges:
         if (formDataId) await onPublishData()
         else {
-          error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+          error({ message: BUTTON_CUSTOM_ERROR_MESSAGES.DataIdNotFound })
           setLoading(false)
         }
         break
@@ -187,7 +158,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         await onSaveSignature()
 
         if (formDataId === NEW_FORM_DATA_IDENTIFIER) {
-          if (isPublic) onGeneratePdfProof()
+          if (isPublic && submissionPdfConfig) onGeneratePdfProof()
           else onCreateNewData()
         } else onSaveExistingData()
 
@@ -222,12 +193,10 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         break
     }
   }, [
-    location.pathname,
-    parentFormJoins,
     btnProps,
-    baseDynamicUrl,
     formDataId,
     isPublic,
+    submissionPdfConfig,
     onCustomFunctionCall,
     onDuplicateData,
     onDeleteData,
@@ -236,6 +205,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
     onGeneratePdfProof,
     onSaveExistingData,
     onGenerateReport,
+    onButtonNavigate,
     setDataLoadingType,
   ])
 
@@ -253,7 +223,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
           if (
             isPublic &&
             formDataId === NEW_FORM_DATA_IDENTIFIER &&
-            btnProps.category !== ButtonActionCategoryEnum.SaveDataChanges
+            [ButtonActionCategoryEnum.SaveDataChanges, ButtonActionCategoryEnum.Navigate].includes(btnProps.category)
           )
             return
           setLoading(true)
@@ -272,9 +242,9 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         {isPublic &&
           formDataId === NEW_FORM_DATA_IDENTIFIER &&
           btnProps.category !== ButtonActionCategoryEnum.SaveDataChanges && (
-            <WarningIcon tooltip={CUSTOM_ERROR_MESSAGES.UnavailableForPublic} />
+            <WarningIcon tooltip={BUTTON_CUSTOM_ERROR_MESSAGES.UnavailableForPublic} />
           )}
-        {inPreviewMode && <WarningIcon tooltip={CUSTOM_ERROR_MESSAGES.InPreviewMode} />}
+        {inPreviewMode && <WarningIcon tooltip={BUTTON_CUSTOM_ERROR_MESSAGES.InPreviewMode} />}
         {btnProps.label}
       </Button_FillerPortal>
       {!!dataLoadingType && (
@@ -309,14 +279,14 @@ export interface ICustomFunctionCall {
   ) => void
 }
 export interface IOnSuccessFunctions {
-  onSuccess: () => void
+  onSuccess: (formDataId?: string) => void
   onError: () => void
   onFinal: () => void
 }
 
 const defaultMessage = { success: 'Successfully completed!', error: 'Error occured' }
 
-const CUSTOM_ERROR_MESSAGES = {
+export const BUTTON_CUSTOM_ERROR_MESSAGES = {
   DataIdNotFound: 'Data id was not found!',
   FormInstanceNotFound: 'Form ref was not found!',
   UnavailableForPublic: 'Button action is NOT allowed for public use!',

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

@@ -0,0 +1,88 @@
+import { useCallback } from 'react'
+import { IButtonProps_Navigate } from '../../../../../types'
+import { useFindDynamiForm, useNotification } from '../../../../common/custom-hooks'
+import { constructDynamicFormHref } from '../../../../../functions/forms'
+import { NavigateButtonCustomComponentType, NavigateButtonTypesEnum } from '../../../../../enums'
+import { IFormContext } from '../../1-row'
+import { BUTTON_CUSTOM_ERROR_MESSAGES, IOnSuccessFunctions } from '.'
+import { useNavigate } from 'react-router-dom'
+import { NEW_FORM_DATA_IDENTIFIER } from '../../../../../constants'
+import { useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
+
+/* --------------------------------------------------------------------------
+  Navigation button action handler
+-------------------------------------------------------------------------- */
+export const useButtonNavigateAction = ({
+  onSuccess,
+  onError,
+  onFinal,
+  ...formContext
+}: IOnSuccessFunctions & IFormContext) => {
+  const { formRef, formDataId, parentFormJoins, manyToManyRelInfo } = formContext
+  const { getFormById } = useFindDynamiForm()
+  const { error } = useNotification()
+  const { updateCrumb } = useBreadcrumb()
+  const navigate = useNavigate()
+
+  const onButtonNavigate = useCallback(
+    async (btnProps: IButtonProps_Navigate) => {
+      const formInfo = btnProps.formId ? getFormById(btnProps.formId) : undefined
+      const baseDynamicUrl = formInfo ? constructDynamicFormHref(formInfo.name) : ''
+
+      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 })
+
+          navigate(newDatapageNavigateUrl)
+          break
+
+        case NavigateButtonTypesEnum.ViewDataDetails:
+          if (formDataId) navigate(`${baseDynamicUrl}/${formDataId}`)
+          else error({ message: BUTTON_CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+          break
+
+        case NavigateButtonTypesEnum.GoToDataList:
+          navigate(baseDynamicUrl)
+          break
+
+        case NavigateButtonTypesEnum.Custom:
+          if (btnProps.customUrl) {
+            navigate(btnProps.customUrl)
+          } else if (Array.isArray(btnProps.urlComponents)) {
+            const validComponents = btnProps.urlComponents.filter((c) => !!c.type && !!c.value)
+            const formData = formRef?.getFieldsValue() ?? {}
+
+            const finalUrl = validComponents
+              .map((c) => {
+                if (c.type === NavigateButtonCustomComponentType.DynamicPath) {
+                  const data = formData[c.value] ?? ''
+                  return data.replaceAll(' ', '')
+                }
+
+                return c.value
+              })
+              .join('/')
+
+            window.open(finalUrl, '_blank')
+          }
+          break
+
+        case NavigateButtonTypesEnum.GoBack:
+        default:
+          navigate(-1 * (btnProps.navigateBackCount ?? 1))
+          break
+      }
+    },
+    [parentFormJoins, manyToManyRelInfo, formRef],
+  )
+
+  return onButtonNavigate
+}

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-create-data.hook.ts

@@ -1,13 +1,14 @@
 import { useCallback } from 'react'
 import { FormLoadingModalTypeEnum } from '../../../../../enums'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
-import { stringifyJSON } from '../../../../../functions/forms/json-handlers'
+import { toMongoDbExtendedJSON } from '../../../../../functions/forms/extended-json-handlers'
 import client from '../../../../../api/client'
-import { constructDynamicFormHref, objectToQueryParams } from '../../../../../functions/forms'
+import { objectToQueryParams } from '../../../../../functions/forms'
 import { useNotification } from '../../../../common/custom-hooks'
 import { useNavigate } from 'react-router-dom'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
+import { useBreadcrumb } from '../../../../common/custom-hooks/use-breadcrumb.hook'
 
 /* --------------------------------------------------------------------------
   - Creates new form data.
@@ -28,43 +29,40 @@ export const useCreateDataWithPdfActions = ({
   const { formRef, formKey, formId, formName, companyKey } = formContext
 
   const navigate = useNavigate()
-  // const { isModalOpen: isSuccessModalOpen, isPendingTransition: isSuccessModalPending, openModal: openSuccessModal, closeModal: closeSuccessModal } = useLazyModalOpener()
   const { errorModal, confirmModal } = useNotification()
   const { baseServerUrl, submissionPdfConfig, isPublic } = useFormPreservedItemValues(formRef)
+  const { breadcrumbs } = useBreadcrumb()
 
   const onCreateNewData = useCallback(
     (generatedPdfBlobName?: string) => {
       try {
         formRef?.validateFields().then(async (values) => {
           setDataLoadingType(FormLoadingModalTypeEnum.SavingChanges)
-
           const reqData = {
             name: '', // TODO: maybe later, make it dynamic
-            data: stringifyJSON({ ...values, generatedPdfBlobName }),
+            data: JSON.stringify(toMongoDbExtendedJSON({ ...values, generatedPdfBlobName })),
             ...(isPublic ? { private: false } : { version: 1 }),
           }
 
           const endpoint = isPublic ? `/api/site/${formKey}` : `/api/formdata/${formId}`
           const res = await client.post(endpoint, reqData)
 
-          if (res.status === 200)
-            setTimeout(() => {
-              onCreateSuccess()
-              if (!isPublic && formName) navigate(`${constructDynamicFormHref(formName)}/${res.data}`)
-              else if (submissionPdfConfig?.showDownloadModal) {
-                confirmModal({
-                  title: submissionPdfConfig.successTitle ?? 'Successfully generated the PDF!',
-                  content: submissionPdfConfig.successContent ?? 'Would you like to download the PDF?',
-                  centered: true,
-                  okText: 'Download',
-                  onOk: () => {
-                    const href = `${baseServerUrl}/api/attachment/${companyKey}/${generatedPdfBlobName}`
-                    window.open(href, '_blank')
-                    window.location.reload()
-                  },
-                })
-              }
-            }, 500)
+          if (res.status === 200) {
+            onCreateSuccess(res.data)
+            if (submissionPdfConfig?.showDownloadModal) {
+              confirmModal({
+                title: submissionPdfConfig.successTitle ?? 'Successfully generated the PDF!',
+                content: submissionPdfConfig.successContent ?? 'Would you like to download the PDF?',
+                centered: true,
+                okText: 'Download',
+                onOk: () => {
+                  const href = `${baseServerUrl}/api/attachment/${companyKey}/${generatedPdfBlobName}`
+                  window.open(href, '_blank')
+                  window.location.reload()
+                },
+              })
+            }
+          }
         })
       } catch (err) {
         if (submissionPdfConfig?.errorMsg) errorModal({ title: submissionPdfConfig.errorMsg })
@@ -74,6 +72,7 @@ export const useCreateDataWithPdfActions = ({
       }
     },
     [
+      breadcrumbs,
       formRef,
       formId,
       formKey,

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

@@ -4,9 +4,8 @@ import { FaCaretDown } from 'react-icons/fa6'
 import { IDynamicForm, IFormSchema, IFormTemplateReport } from '../../../../../types'
 import { Button_FillerPortal } from '../../../../common/button'
 import { useNotification } from '../../../../common/custom-hooks'
-import { fetchFormDataAsLookup, renderData } from '../../../../../functions/forms'
+import { fetchFormDataAsLookup, getIdEqualsQuery, renderData } from '../../../../../functions/forms'
 import client from '../../../../../api/client'
-import { parseJSON } from '../../../../../functions/forms/json-handlers'
 import { FieldElementOptionSourceEnum, LOCAL_STORAGE_KEYS_ENUM } from '../../../../../enums'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
@@ -44,14 +43,14 @@ export const useGenerateReportAction = ({
             .get(`/api/form/${form.id}`)
             .then((res) => {
               if (res.status === 200) {
-                const parsedFormData: IFormSchema | null = parseJSON(res.data.data)
+                const parsedFormData: IFormSchema | null = JSON.parse(res.data.data)
                 if (parsedFormData) {
                   const reports = parsedFormData.generateConfig.templateReports ?? []
                   if (reports.length)
                     client
                       .post(`/api/report/data/${form.id}`, {
                         joins: parsedFormData.generateConfig.formJoins,
-                        match: JSON.stringify({ $expr: { $eq: [`$_id`, { $toObjectId: formDataId }] } }),
+                        match: JSON.stringify(getIdEqualsQuery('', formDataId)),
                       })
                       .then((res) => {
                         if (res.status === 200) {

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-save-data.hook.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 import { FormLoadingModalTypeEnum } from '../../../../../enums'
-import { stringifyJSON } from '../../../../../functions/forms/json-handlers'
+import { toMongoDbExtendedJSON } from '../../../../../functions/forms/extended-json-handlers'
 import client from '../../../../../api/client'
 import { IFormContext } from '../../1-row'
 import { IOnSuccessFunctions } from '.'
@@ -27,7 +27,7 @@ export const useSaveExistingDataAction = ({
         setDataLoadingType(FormLoadingModalTypeEnum.SavingChanges)
         const reqData = {
           name: 'Dynamic form data', // TODO: maybe later, make it dynamic
-          data: stringifyJSON(values),
+          data: JSON.stringify(toMongoDbExtendedJSON(values)),
           version: 1, // FIXME: increment
           private: false, // not used anymore, sending it as false by default
         }

package/src/components/form/layout-renderer/3-element/11-breadcrumb.tsx

@@ -2,6 +2,7 @@ import { useBreadcrumb } from '../../../common/custom-hooks/use-breadcrumb.hook'
 import { Button_FillerPortal } from '../../../common/button'
 import { useNavigate } from 'react-router-dom'
 import { FaChevronRight } from 'react-icons/fa6'
+import React from 'react'
 
 export default function LayoutRenderer_Breadcrumb() {
   const navigate = useNavigate()
@@ -10,7 +11,7 @@ export default function LayoutRenderer_Breadcrumb() {
   return (
     <div className="flex items-center text-12">
       {breadcrumbs.map((bc, bcIdx) => (
-        <>
+        <React.Fragment key={bcIdx}>
           <Button_FillerPortal
             link
             disabled={breadcrumbs.length - 1 === bcIdx}
@@ -22,7 +23,7 @@ export default function LayoutRenderer_Breadcrumb() {
             <span className="font-normal italic">{bc.label}</span>
           </Button_FillerPortal>
           {breadcrumbs.length - 1 !== bcIdx && <FaChevronRight className="text-primary" />}
-        </>
+        </React.Fragment>
       ))}
     </div>
   )

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

@@ -50,6 +50,9 @@ export const LayoutRenderer_FieldElement = ({
               const sanitizationRule = field.sanitization
               if (!sanitizationRule || sanitizationRule.type === DataSanitizationTypeEnum.Default) return value
 
+              if (sanitizationRule.type === DataSanitizationTypeEnum.Predefined && sanitizationRule.pattern)
+                return formatByPattern(value, sanitizationRule.pattern)
+
               if (sanitizationRule.type === DataSanitizationTypeEnum.Custom)
                 return formatByPattern(value, sanitizationRule.pattern)
             }}
@@ -193,7 +196,7 @@ const getField = ({
       )
     case ElementTypeEnum.ShortInput:
     default:
-      return <Input placeholder={placeholder} disabled={disabled} autoComplete='off'/>
+      return <Input placeholder={placeholder} disabled={disabled} autoComplete="off" />
   }
 }
 

package/src/components/form/layout-renderer/3-element/8-fields-with-options.tsx

@@ -18,6 +18,7 @@ import {
   IRadioElement,
   ISelectElement,
 } from '../../../../types'
+import { getIdEqualsQuery } from '../../../../functions'
 
 export default function LayoutRenderer_FieldsWithOptions({
   formContext,
@@ -31,6 +32,7 @@ export default function LayoutRenderer_FieldsWithOptions({
   const cancelTokenRef = useRef<CancelToken | undefined>(undefined)
   const { breadcrumbs } = useBreadcrumb()
   const [loading, setLoading] = useState(true)
+  const isManyToManyPageRef = useRef(false)
 
   const { inPreviewMode } = useFormPreservedItemValues(formRef)
 
@@ -38,6 +40,9 @@ export default function LayoutRenderer_FieldsWithOptions({
     if (breadcrumbs.length < 2) return { formJoins: [], formDataId: '' }
 
     const breadcrumb = breadcrumbs[breadcrumbs.length - 2]
+
+    if (!!breadcrumb.manyToManyRelInfo) isManyToManyPageRef.current = true
+
     return { formJoins: breadcrumb.formJoins ?? [], formDataId: breadcrumb.formDataId ?? '' }
   }, [breadcrumbs])
 
@@ -52,16 +57,8 @@ export default function LayoutRenderer_FieldsWithOptions({
         .post(`/api/report/data/${selectedFormId}`, {
           joins: filteredJoins,
           match: JSON.stringify(
-            parentRelInfo.formDataId
-              ? {
-                  $expr: {
-                    $eq: [
-                      lastJoin?.alias ? `$${lastJoin.alias}._id` : '$_id',
-                      { $toObjectId: parentRelInfo.formDataId },
-                    ],
-                  },
-                  DeletedDate: null,
-                }
+            parentRelInfo.formDataId && !isManyToManyPageRef.current
+              ? { DeletedDate: null, ...getIdEqualsQuery(lastJoin?.alias, parentRelInfo.formDataId) }
               : { DeletedDate: null },
           ),
           project: JSON.stringify({ value: '$_id', label: `$Data.${selectedFormField}` }),
@@ -102,9 +99,9 @@ export default function LayoutRenderer_FieldsWithOptions({
           .post(`/api/report/data/${lastPath.formId}`, {
             joins: slicedJoinsForLastPath,
             match: JSON.stringify(
-              formDataId && lastJoin
+              formDataId && lastJoin && !isManyToManyPageRef.current
                 ? {
-                    $expr: { $eq: [`$${lastJoin.alias}._id`, { $toObjectId: formDataId }] },
+                    ...getIdEqualsQuery(lastJoin.alias, formDataId),
                     DeletedDate: null,
                   }
                 : { DeletedDate: null },