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

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

@@ -2,22 +2,23 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { FieldElementOptionSourceEnum } from '../../../../enums'
 import { IElementBaseProps } from '.'
 import { LayoutRenderer_FieldElement } from './2-field-element'
-import { fetchFormDataAsLookup } from '../../../../functions/forms'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
-import { useLocation } from 'react-router-dom'
 import { IFormContext } from '../1-row'
 import client, { clientCancelToken } from '../../../../api/client'
 import { CancelToken } from 'axios'
+import { useBreadcrumb } from '../../../common/custom-hooks/use-breadcrumb.hook'
+import { Spin } from 'antd'
 import {
   IFilterByLinkedFormRelPath,
-  IFormDataApiReqConfig,
+  IFormJoin,
   IFormLayoutFieldOption,
   IOptionSourceConstant,
   IOptionSourceReadFromDetails,
   IRadioElement,
   ISelectElement,
 } from '../../../../types'
+import { getIdEqualsQuery } from '../../../../functions'
 
 export default function LayoutRenderer_FieldsWithOptions({
   formContext,
@@ -25,77 +26,109 @@ export default function LayoutRenderer_FieldsWithOptions({
   elementData,
   isDisabled,
 }: ILayoutRenderer_FieldsWithOptions) {
-  const { formRef, linkedParentsDataIds } = formContext
-  const { state: locationState } = useLocation()
+  const { formRef, parentFormJoins, formId, formDataId } = formContext
   const [options, setOptions] = useState<{ value: string; label: string }[]>([])
   const props = getElementGeneralizedProps(elementData.props)
   const cancelTokenRef = useRef<CancelToken | undefined>(undefined)
+  const { breadcrumbs } = useBreadcrumb()
+  const [loading, setLoading] = useState(true)
+  const isManyToManyPageRef = useRef(false)
 
   const { inPreviewMode } = useFormPreservedItemValues(formRef)
 
-  const addNewDataParentIds = useMemo(() => {
-    // when create new data button is clicked from "Form Load Data" element header, it passes parentInfo
-    // which has dataIds, which are the data of "Form Load Data" element.
-    // With these ids, it's filtering, so that the new data belongs to either of these.
-    // Example: Adding a Transaction from Case details, it filters parent (direct) data ids, which are Client ids. After filter, it ensures that the new transaction belongs to the Case it was in.
-    if (typeof formItem.name === 'string' && locationState?.parentInfo?.foreignKey === formItem.name)
-      return locationState.parentInfo.dataIds
+  const parentRelInfo = useMemo(() => {
+    if (breadcrumbs.length < 2) return { formJoins: [], formDataId: '' }
 
-    return {}
-  }, [locationState, formItem.name])
+    const breadcrumb = breadcrumbs[breadcrumbs.length - 2]
 
-  const fetchFormData = useCallback(
-    async (formId: number, field: string, filter?: Partial<IFormDataApiReqConfig>) => {
-      const formDataResData = await fetchFormDataAsLookup(formId, filter, cancelTokenRef.current)
-      let apiOptions = formDataResData
-      const parentDataIds = addNewDataParentIds[formId] ?? []
-      if (parentDataIds.length) {
-        apiOptions = apiOptions.filter((formData) => parentDataIds.includes(formData.id))
-        if (parentDataIds.length === 1) formRef?.setFieldValue(formItem.name, parentDataIds)
-      }
+    if (!!breadcrumb.manyToManyRelInfo) isManyToManyPageRef.current = true
 
-      setOptions(
-        apiOptions.map((formData) => ({
-          value: formData.id,
-          label: formData[field],
-        })),
-      )
-    },
-    [addNewDataParentIds],
-  )
+    return { formJoins: breadcrumb.formJoins ?? [], formDataId: breadcrumb.formDataId ?? '' }
+  }, [breadcrumbs])
 
-  const fetchLinkedFormData = useCallback(
-    (relationshipPath: IFilterByLinkedFormRelPath[] = []) => {
-      const lastPath = relationshipPath[relationshipPath.length - 1]
-
-      if (lastPath && lastPath.field)
-        fetchFormData(lastPath.formId, lastPath.field, {
-          dynamicFilter: JSON.stringify(
-            linkedParentsDataIds && Array.isArray(linkedParentsDataIds[lastPath.formId])
-              ? {
-                  $expr: {
-                    $in: [
-                      '$_id',
-                      linkedParentsDataIds[lastPath.formId].map((formDataId) => ({ $toObjectId: formDataId })),
-                    ],
-                  },
-                }
-              : {},
+  const fetchFormData = useCallback(
+    async (selectedFormId: number, selectedFormField: string) => {
+      const filteredJoins = (parentRelInfo.formJoins as IFormJoin[])
+        .filter((j) => j.formId !== selectedFormId)
+        .map((j, jIdx) => (jIdx === 0 ? { ...j, localField: j.localField.replace(`${selectedFormId}.`, '') } : j))
+      const lastJoin = filteredJoins.length ? filteredJoins[filteredJoins.length - 1] : null
+
+      client
+        .post(`/api/report/data/${selectedFormId}`, {
+          joins: filteredJoins,
+          match: JSON.stringify(
+            parentRelInfo.formDataId && !isManyToManyPageRef.current
+              ? { DeletedDate: null, ...getIdEqualsQuery(lastJoin?.alias, parentRelInfo.formDataId) }
+              : { DeletedDate: null },
           ),
+          project: JSON.stringify({ value: '$_id', label: `$Data.${selectedFormField}` }),
         })
+        .then((res) => {
+          if (res.status === 200) {
+            const { totalRecords, data } = res.data
+            if (totalRecords === 1) formRef?.setFieldValue(formItem.name, data[0]._id)
+            setOptions(data)
+          }
+        })
+        .finally(() => setLoading(false))
     },
-    [linkedParentsDataIds],
+    [parentRelInfo, formId, formRef],
   )
 
+  const fetchLinkedFormData = useCallback((relationshipPath: IFilterByLinkedFormRelPath[] = []) => {
+    const lastPath = relationshipPath[relationshipPath.length - 1]
+
+    if (lastPath && lastPath.field) {
+      // parentInfo.formJoins is the DIRECT joins between the details page form and base form of the LoadFormData
+      const parentJoinOfLastPathIdx =
+        parentFormJoins?.findIndex((j) => j.localField.startsWith(lastPath.formId.toString())) ?? -1
+
+      if (parentJoinOfLastPathIdx > -1) {
+        const slicedJoinsForLastPath =
+          parentFormJoins
+            ?.slice(parentJoinOfLastPathIdx)
+            .map((j, jIdx) =>
+              jIdx === 0 ? { ...j, localField: j.localField.replace(`${lastPath.formId}.`, '') } : j,
+            ) ?? []
+
+        const lastJoin = slicedJoinsForLastPath.length
+          ? slicedJoinsForLastPath[slicedJoinsForLastPath.length - 1]
+          : null
+
+        client
+          .post(`/api/report/data/${lastPath.formId}`, {
+            joins: slicedJoinsForLastPath,
+            match: JSON.stringify(
+              formDataId && lastJoin && !isManyToManyPageRef.current
+                ? {
+                    ...getIdEqualsQuery(lastJoin.alias, formDataId),
+                    DeletedDate: null,
+                  }
+                : { DeletedDate: null },
+            ),
+            project: slicedJoinsForLastPath.length
+              ? JSON.stringify({ value: '$_id', label: `$Data.${lastPath.field}` })
+              : '',
+          })
+          .then((res) => {
+            if (res.status === 200) {
+              const { totalRecords, data } = res.data
+              if (totalRecords.length === 1) formRef?.setFieldValue(formItem.name, data[0]._id)
+              setOptions(data)
+            }
+          })
+          .finally(() => setLoading(false))
+      } else setLoading(false)
+    } else setLoading(false)
+  }, [])
+
   const fetchDetailsStaticOptions = useCallback((optionSource: IOptionSourceReadFromDetails) => {
     const { formId, optionFieldPath } = optionSource
     client
       .post(
         `/api/form/${formId}`,
         { project: JSON.stringify({ [optionFieldPath]: 1 }) },
-        {
-          cancelToken: cancelTokenRef.current,
-        },
+        { cancelToken: cancelTokenRef.current },
       )
       .then((res) => {
         if (res.status === 200) {
@@ -110,6 +143,7 @@ export default function LayoutRenderer_FieldsWithOptions({
             setOptions(fieldOptionSource.options.map((op) => ({ value: op.id, label: op.value })))
         }
       })
+      .finally(() => setLoading(false))
   }, [])
 
   useEffect(() => {
@@ -118,44 +152,51 @@ export default function LayoutRenderer_FieldsWithOptions({
     const axiosSource = clientCancelToken.source()
     cancelTokenRef.current = axiosSource.token
 
-    if (props.optionSource.type === FieldElementOptionSourceEnum.Static)
+    if (props.optionSource.type === FieldElementOptionSourceEnum.Static) {
       setOptions(props.optionSource.options.map((op: IFormLayoutFieldOption) => ({ value: op.id, label: op.value })))
-    else if (!inPreviewMode) {
-      const deletedDateFilter = { DeletedDate: null }
+      setLoading(false)
+    } else if (!inPreviewMode) {
       switch (props.optionSource.type) {
         case FieldElementOptionSourceEnum.DynamicForm:
-          fetchFormData(props.optionSource.form.id, props.optionSource.form.field, {
-            dynamicFilter: JSON.stringify(deletedDateFilter),
-          })
+          fetchFormData(props.optionSource.form.id, props.optionSource.form.field)
           return
         case FieldElementOptionSourceEnum.LinkedForm:
           fetchLinkedFormData(props.filter.relationshipPath)
+
           return
         case FieldElementOptionSourceEnum.ReadFromDetails:
           fetchDetailsStaticOptions(props.optionSource)
           return
         default:
+          setLoading(false)
           return
       }
-    }
+    } else setLoading(false)
 
     return () => axiosSource.cancel()
-  }, [props.optionSource, inPreviewMode])
+  }, [props.optionSource, inPreviewMode, fetchLinkedFormData, fetchFormData])
 
   return (
-    <LayoutRenderer_FieldElement
-      fields={[
-        {
-          ...props,
-          type: elementData.elementType,
-          name: formItem.name,
-          validations: elementData.validations,
-          options,
-          disabled: isDisabled,
-        },
-      ]}
-      formRef={formRef}
-    />
+    <div className="relative">
+      <LayoutRenderer_FieldElement
+        fields={[
+          {
+            ...props,
+            type: elementData.elementType,
+            name: formItem.name,
+            validations: elementData.validations,
+            options,
+            disabled: isDisabled,
+          },
+        ]}
+        formRef={formRef}
+      />
+      {loading && (
+        <div className="absolute bottom-0 h-[32px] w-full rounded-md bg-black bg-opacity-10 flex items-center justify-end pr-2 gap-2 text-12 italic">
+          <Spin size="small" />
+        </div>
+      )}
+    </div>
   )
 }
 

package/src/components/form/layout-renderer/3-element/9-form-data-render.tsx

@@ -1,27 +1,25 @@
 import { IElementBaseProps } from '.'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import FormDataListTableComponent, { IDataListLayoutConfig } from '../../1-list/table'
 import FormDataListSkeleton_Table from '../../../common/loading-skeletons/table'
+import { getIdEqualsQuery, getProjectionKey } from '../../../../functions'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../../constants'
-import { FilterConfigTypeEnum } from '../../../../enums'
 import { cancelableClient } from '../../../../api/client'
 import { IFormContext } from '../1-row'
 import {
-  IDataListParentInfo,
   IFormDataListData,
   IFormDataLoadElementProps,
   IFormJoin,
   IFormRelationshipConfig,
   IFormSchema,
-  IRelationshipForm,
 } from '../../../../types'
 
 export default function LayoutRenderer_LoadFormData({ formContext, elementProps }: ILayoutRenderer_LoadFormData) {
   const { formId, formRef, formDataId } = formContext
-  const { joins } = elementProps
-  const lastChildInfo = useRef<{ formName: string; parentInfo: IDataListParentInfo }>({
+  const { joins, baseFormId, displayConfigFormId, displayConfigId } = elementProps
+  const lastChildInfo = useRef<{ formName: string; parentFormJoins: IFormJoin[] }>({
     formName: '',
-    parentInfo: { foreignKey: '', dataIds: {} },
+    parentFormJoins: [],
   })
   const [loadings, setLoadings] = useState({ initial: true, data: true })
   const [listLayoutConfig, setListLayoutConfig] = useState<IDataListLayoutConfig>()
@@ -30,27 +28,22 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
   const dataProjectRef = useRef<{ [key: string]: string }>({})
   const reportDataApiCancelFuncRef = useRef<() => void | undefined>(undefined)
 
-  const [defaultJoins, baseForm, defaultFilter] = useMemo(
-    () => getDefaultReqDataParams(joins, formId, formDataId),
-    [joins, formId, formDataId],
-  )
-
   const fetchDataList = useCallback(
     (headerAppliedFilters?: string) => {
-      if (!baseForm) return
+      if (!baseFormId) return
       setLoadings((c) => ({ ...c, data: true }))
 
-      const matchFilters: { [key: string]: any }[] = [...defaultFilter]
+      const matchFilters: { [key: string]: any }[] = [getIdEqualsQuery(formId, formDataId)]
       if (headerAppliedFilters) matchFilters.push(JSON.parse(headerAppliedFilters))
 
-      const { request, cancel } = cancelableClient.post(`/api/report/data/${baseForm.formId}`, {
-        joins: defaultJoins,
+      const { request, cancel } = cancelableClient.post(`/api/report/data/${baseFormId}`, {
+        joins,
         match: matchFilters.length
           ? JSON.stringify(matchFilters.length === 1 ? matchFilters[0] : { $and: matchFilters })
           : '',
         project: JSON.stringify({
           ...dataProjectRef.current,
-          ...defaultJoins.reduce((curr, j) => ({ ...curr, [`${j.formId}_id`]: `$${j.formId}._id` }), {}),
+          ...joins.reduce((curr, j) => ({ ...curr, [`${j.formId}_id`]: `$${j.formId}._id` }), {}),
         }),
       })
       reportDataApiCancelFuncRef.current = cancel
@@ -58,73 +51,61 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
       request
         .then((res) => {
           if (res.status === 200) {
-            const resData = res.data.data
-
-            if (!headerAppliedFilters)
-              // this is used for filtering the linked form dropdown options, so that the linked form dropdowns only show the relevant data
-              lastChildInfo.current = {
-                ...lastChildInfo.current,
-                parentInfo: {
-                  ...lastChildInfo.current.parentInfo,
-                  dataIds: defaultJoins.reduce(
-                    (curr, j) => ({
-                      ...curr,
-                      [j.formId]: [
-                        ...new Set(
-                          resData.reduce(
-                            (dataCurr: string[], data: IFormDataListData) => [...dataCurr, data[`${j.formId}_id`]],
-                            [],
-                          ),
-                        ),
-                      ],
-                    }),
-                    {},
-                  ),
-                },
-              }
-
             setDataList({ data: res.data.data, total: res.data.totalRecords })
           }
         })
         .finally(() => setLoadings({ initial: false, data: false }))
     },
-    [defaultJoins, baseForm, defaultFilter],
+    [joins, baseFormId],
   )
 
   useEffect(() => {
-    if (!baseForm || !formDataId || formDataId === NEW_FORM_DATA_IDENTIFIER) return
+    if (!displayConfigFormId || !formDataId || formDataId === NEW_FORM_DATA_IDENTIFIER) return
 
-    const { request, cancel } = cancelableClient.get(`/api/form/${baseForm.formId}`)
+    // fetching display config (base form can be different than display config form)
+    const { request, cancel } = cancelableClient.get(`/api/form/${displayConfigFormId}`)
     request.then((res) => {
       if (res.status === 200) {
         const parsedData: IFormSchema | null = JSON.parse(res.data.data)
         if (!parsedData) return
         const { relationships = [] } = parsedData
 
-        const relationship: IFormRelationshipConfig | undefined = relationships.find(
-          (r: IFormRelationshipConfig) => r.foreignKey === baseForm.foreignKey,
+        const relationship: IFormRelationshipConfig | undefined = relationships.find((r: IFormRelationshipConfig) =>
+          r.displayConfigs?.some((dc) => dc.id === displayConfigId),
         )
-
-        const displayConfig = relationship?.displayConfigs?.find((config) => config.id === baseForm.displayConfigId)
+        const displayConfig = relationship?.displayConfigs?.find((config) => config.id === displayConfigId)
         if (!displayConfig || displayConfig.isRenderChildForm) return
 
-        lastChildInfo.current = {
-          formName: res.data.name,
-          parentInfo: { ...lastChildInfo.current.parentInfo, foreignKey: relationship!.foreignKey },
-        }
+        const isManyToManyRelationship = displayConfigFormId !== baseFormId
+        lastChildInfo.current = { formName: res.data.name, parentFormJoins: joins }
 
         if (displayConfig.config) {
           if (Array.isArray(displayConfig.config.columns))
-            dataProjectRef.current = displayConfig.config.columns.reduce(
-              (curr, c) => (c.key ? { ...curr, [c.key.replace(/\./g, '_')]: `$${c.key}` } : curr),
-              {},
-            )
+            dataProjectRef.current = displayConfig.config.columns.reduce((curr, c) => {
+              if (!c.key) return curr
+
+              if (isManyToManyRelationship) {
+                // if the key starts with id, it means it's reading a field from other form joins that are already configured
+                // example: form id 145 one-to-many 145 many-to-many 146, and 149 is the rel form.
+                // the base form is 149, joined 145 (displayConfigFormId below) and 146. In this case, to read fields from 145, it appends 145 at front to make it 145.Data{...}
+                // However, to display data from 144, we can't append 145, whose keys already come with 144.Data.{...}. That's why it's checking if it starts with number or not
+                return {
+                  ...curr,
+                  [getProjectionKey(c.key)]: c.key.match(/^\d/) ? `$${c.key}` : `$${displayConfigFormId}.${c.key}`,
+                  // [getProjectionKey(c.key)]: `$${c.key}`,
+                  relDataId: '$_id',
+                  _id: `$${displayConfigFormId}._id`,
+                }
+              }
+
+              return { ...curr, [getProjectionKey(c.key)]: `$${c.key}` }
+            }, {})
 
           setListLayoutConfig({
-            configForFormId: baseForm.formId,
+            configForFormId: baseFormId,
             dataListConfig: {
               ...displayConfig.config,
-              columns: displayConfig.config.columns.map((c) => (c.key ? { ...c, key: c.key.replace(/\./g, '_') } : c)),
+              columns: displayConfig.config.columns.map((c) => (c.key ? { ...c, key: getProjectionKey(c.key) } : c)),
             },
           })
 
@@ -137,13 +118,21 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
       cancel()
       reportDataApiCancelFuncRef.current?.()
     }
-  }, [baseForm, formDataId, fetchDataList])
+  }, [displayConfigFormId, baseFormId, displayConfigId, formDataId, fetchDataList])
 
   const dataListHeaderContext = {
-    formId: baseForm?.formId,
+    formId: baseFormId,
     formDataId,
     formRef,
     ...lastChildInfo.current,
+    manyToManyRelInfo:
+      displayConfigFormId !== baseFormId && formId
+        ? {
+            middleFormId: baseFormId,
+            currentFormId: formId,
+            otherFormId: displayConfigFormId,
+          }
+        : null,
     onCustomFunctionCall: () => {},
   }
 
@@ -168,52 +157,3 @@ type ILayoutRenderer_LoadFormData = {
   formContext: IFormContext
   elementProps: IFormDataLoadElementProps
 } & IElementBaseProps
-
-const getDefaultReqDataParams = (
-  joins: IRelationshipForm[],
-  formId?: number,
-  formDataId?: string,
-): [IFormJoin[], IRelationshipForm | undefined, { [key: string]: any }[]] => {
-  if (!joins || !Array.isArray(joins) || joins.length === 0 || !formId) return [[], undefined, []]
-
-  const baseForm = joins[joins.length - 1]
-  const reversedJoins = [...joins].reverse()
-
-  const childrenJoins: IFormJoin[] = []
-  const filters: { [key: string]: any }[] = [{ $expr: { $eq: [`$${formId}._id`, { $toObjectId: formDataId }] } }]
-
-  if (
-    baseForm.filterConfig &&
-    baseForm.filterConfig.type === FilterConfigTypeEnum.Custom &&
-    baseForm.filterConfig.config
-  )
-    filters.push(
-      JSON.parse(
-        JSON.stringify(baseForm.filterConfig.config).replaceAll(`${baseForm.formId}.`, '').replaceAll('@', '$'),
-      ),
-    )
-
-  let prevJoinAlias = ''
-  reversedJoins.forEach((j, jIdx) => {
-    const nextJoin = reversedJoins[jIdx + 1]
-    const localField = `${prevJoinAlias}Data.${j.foreignKey}`
-    prevJoinAlias = `${nextJoin ? nextJoin.formId : formId}.`
-
-    const joinObj = {
-      formId: nextJoin ? nextJoin.formId : formId,
-      localField,
-      foreignField: '_id',
-      alias: nextJoin ? nextJoin.formId.toString() : formId.toString(),
-    }
-    childrenJoins.push(joinObj)
-
-    if (j.filterConfig && j.filterConfig.type === FilterConfigTypeEnum.Custom && j.filterConfig.config) {
-      let stringifiedFilter = JSON.stringify(j.filterConfig.config)
-
-      const filterConfig = JSON.parse(stringifiedFilter.replaceAll('@', '$'))
-      filters.push(filterConfig)
-    }
-  })
-
-  return [childrenJoins, baseForm, filters]
-}

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

@@ -1,12 +1,5 @@
 import { Divider } from 'antd'
 import { memo, ReactElement, ReactNode, useEffect, useMemo } from 'react'
-import {
-  IButtonElementProps,
-  IFormDataLoadElementProps,
-  IDndLayoutElement,
-  IFormLayoutElementConditions,
-  IReadFieldDataElementProps,
-} from '../../../../types'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
 import { ElementTypeEnum, TextElementTypeEnum } from '../../../../enums'
 import { LayoutRenderer_FieldElement } from './2-field-element'
@@ -22,6 +15,14 @@ import LayoutRenderer_LoadFormData from './9-form-data-render'
 import { IFormContext } from '../1-row'
 import LayoutRenderer_CurrencyField from './10-currency'
 import useGetCurrentBreakpoint from '../../../common/custom-hooks/use-window-width.hook'
+import LayoutRenderer_Breadcrumb from './11-breadcrumb'
+import {
+  IButtonElementProps,
+  IFormDataLoadElementProps,
+  IDndLayoutElement,
+  IFormLayoutElementConditions,
+  IReadFieldDataElementProps,
+} from '../../../../types'
 
 function LayoutRendererElementWrapper({
   hideElement,
@@ -83,7 +84,14 @@ function LayoutRendererElement({
     case ElementTypeEnum.RichTextEditor:
       if (!key) return <span className="text-warning">Rich text editor field could not render due to missing KEY!</span>
 
-      return <LayoutRenderer_RichEditor elementProps={props} formContext={formContext} {...elementBaseProps} />
+      return (
+        <LayoutRenderer_RichEditor
+          elementProps={props}
+          validations={validations}
+          formContext={formContext}
+          {...elementBaseProps}
+        />
+      )
 
     case ElementTypeEnum.ReCaptcha:
       if (!key) return <span className="text-warning">ReCaptcha field could not render due to missing field KEY!</span>
@@ -93,7 +101,14 @@ function LayoutRendererElement({
     case ElementTypeEnum.Signature:
       if (!key) return <span className="text-warning">Signature field could not render due to missing KEY!</span>
 
-      return <LayoutRenderer_Signature elementProps={props} formContext={formContext} {...elementBaseProps} />
+      return (
+        <LayoutRenderer_Signature
+          elementProps={props}
+          validations={validations}
+          formContext={formContext}
+          {...elementBaseProps}
+        />
+      )
 
     case ElementTypeEnum.FileUpload:
       if (!key) return <span className="text-warning">File upload field could not render due to missing KEY!</span>
@@ -159,6 +174,9 @@ function LayoutRendererElement({
     case ElementTypeEnum.CurrencyInput:
       return <LayoutRenderer_CurrencyField elementData={elementData} formContext={formContext} {...elementBaseProps} />
 
+    case ElementTypeEnum.Breadcrumb:
+      return <LayoutRenderer_Breadcrumb />
+
     default:
       return (
         <LayoutRenderer_FieldElement

package/src/components/modals/report-filters.modal/helper-functions.ts

@@ -1,5 +1,5 @@
 import { REPORT_EMPTY_CELL_CONTENT } from '../../../constants'
-import { renderData } from '../../../functions'
+import { getProjectionKey, renderData } from '../../../functions'
 import {
   AlignTypeEnum,
   ElementTypeEnum,
@@ -67,7 +67,7 @@ function groupData(
   const currentGroupConfig = groups[0]
   const groupingType: ReportGroupingTypeEnum = currentGroupConfig.type || ReportGroupingTypeEnum.RowSpan
   // Convert dependencyField (e.g. "81.Data.name") to underscore format (e.g. "81_Data_name").
-  const effectiveField = currentGroupConfig.dependencyField.replace(/\./g, '_')
+  const effectiveField = getProjectionKey(currentGroupConfig.dependencyField)
 
   // Group data by the effective field.
   const groupsMap = new Map<string, any[]>()
@@ -338,10 +338,7 @@ function evaluateSummary(dataSubset: any[], evaluationConfig: any): number {
   const evaluation = evaluationConfig.evaluations[0]
   let sum = evaluation.defaultValue || 0
   if (evaluation.operator === EvaluationOperatorsEnum.Add) {
-    const fieldKey = (typeof evaluation.field === 'string' ? evaluation.field : evaluation.field.field).replace(
-      /\./g,
-      '_',
-    )
+    const fieldKey = getProjectionKey(typeof evaluation.field === 'string' ? evaluation.field : evaluation.field.field)
     dataSubset.forEach((item) => {
       const num = parseFloat(item[fieldKey])
       if (!isNaN(num)) {