form-craft-package 1.11.5-dev.0 → 1.11.6-dev.0

package/package.json

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

package/src/components/form/1-list/index.tsx

@@ -53,9 +53,14 @@ function FormDataListComponentChild({
     () => `${baseServerUrl}/api/attachment/${companyKey}`,
     [baseServerUrl, companyKey],
   )
-  const headerLayoutContext = { formId, attachmentBaseUrl, companyKey, onCustomFunctionCall }
-
   const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(formId)
+  const headerLayoutContext = {
+    formId,
+    attachmentBaseUrl,
+    companyKey,
+    onCustomFunctionCall,
+    formRelationships: cachedConfig?.relationships,
+  }
 
   useEffect(() => {
     reportDataApiCancelFuncRef.current?.()
@@ -116,6 +121,8 @@ function FormDataListComponentChild({
       const cacheKey = buildDataListCacheKey('form-data-list', [
         formId,
         nextReqData.match ?? '',
+        nextReqData.pipeline ?? '',
+        nextReqData.joins ?? [],
         nextReqData.sort ?? '',
         nextReqData.skip ?? 0,
         nextReqData.limit ?? '',
@@ -133,13 +140,49 @@ function FormDataListComponentChild({
       setCheckingForUpdates(true)
       apiCallCounterRef.current += 1
 
-      const { current, ...restReqData } = nextReqData
-
-      const { request, cancel } = cancelableClient.post(`/api/report/data/${formId}`, {
-        joins: formJoinsRef.current,
-        project: JSON.stringify(dataProjectRef.current),
-        ...restReqData,
-      })
+      const { current, joins, pipeline, ...restReqData } = nextReqData
+
+      const resolvedJoins = mergeJoins([formJoinsRef.current, joins || []])
+      const { request, cancel } = pipeline
+        ? cancelableClient.post(`/api/report/dataDynamic/${formId}`, {
+            joins: resolvedJoins,
+            pipeline: JSON.stringify([
+              ...(JSON.parse(pipeline) as { [key: string]: any }[]),
+              ...(restReqData.sort
+                ? [
+                    {
+                      $sort: Object.entries(JSON.parse(restReqData.sort)).reduce(
+                        (curr, [field, value]) => ({ ...curr, [`doc.${field}`]: value }),
+                        {},
+                      ),
+                    },
+                  ]
+                : []),
+              ...(Object.values(dataProjectRef.current).length
+                ? [
+                    {
+                      $project: Object.entries(dataProjectRef.current).reduce(
+                        (curr, [key, value]) => ({
+                          ...curr,
+                          [key]:
+                            typeof value === 'string' && value.startsWith('$')
+                              ? `$doc.${value.slice(1)}`
+                              : value,
+                        }),
+                        {},
+                      ),
+                    },
+                  ]
+                : []),
+            ]),
+            skip: restReqData.skip,
+            limit: restReqData.limit,
+          })
+        : cancelableClient.post(`/api/report/data/${formId}`, {
+            joins: resolvedJoins,
+            project: JSON.stringify(dataProjectRef.current),
+            ...restReqData,
+          })
       reportDataApiCancelFuncRef.current = cancel
 
       request
@@ -150,6 +193,8 @@ function FormDataListComponentChild({
             setCachedDataList(cacheKey, payload, {
               formId,
               match: nextReqData.match,
+              pipeline: nextReqData.pipeline,
+              joins: nextReqData.joins,
               sort: nextReqData.sort,
               skip: nextReqData.skip,
               limit: nextReqData.limit,
@@ -250,6 +295,8 @@ function FormDataListComponentChild({
       const initialCacheKey = buildDataListCacheKey('form-data-list', [
         formId,
         initialReqData.match ?? '',
+        initialReqData.pipeline ?? '',
+        initialReqData.joins ?? [],
         initialReqData.sort ?? '',
         initialSkip ?? 0,
         initialReqData.limit ?? '',
@@ -304,4 +351,6 @@ export interface IDataListReqData {
   limit?: number
   sort?: string
   match?: string
+  pipeline?: string
+  joins?: IFormJoin[]
 }

package/src/components/form/1-list/table-header.tsx

@@ -1,8 +1,8 @@
 import { Form } from 'antd'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
-import { extractFiltersFromLayout } from '../../../functions/forms'
-import { DeviceBreakpointEnum, FilterConfigTypeEnum } from '../../../enums'
+import { extractFiltersFromLayout, mergeJoins } from '../../../functions/forms'
+import { DeviceBreakpointEnum, FilterConfigTypeEnum, FormRelationshipEnum } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import { IDataListHeaderLayoutContext } from './table'
@@ -23,6 +23,8 @@ import {
   IFilterCustom,
   IFilterNested,
   IFilterSimple,
+  IFormJoin,
+  IFormRelationshipConfig,
 } from '../../../types'
 
 export default function FormDataListHeaderComponent({
@@ -62,20 +64,35 @@ export default function FormDataListHeaderComponent({
 
       if (filtersWithConfig.length > 0) {
         const filtersToApply = []
+        const joinsToApply: IFormJoin[][] = []
+        let pipelineToApply: string | undefined
+
         for (const filterConfig of filtersWithConfig) {
           const [field, value] = filterConfig
           const config = filterConfigs[field]
 
           if ('type' in config) {
-            const stringifiedFilter = await handleFilterValues(config as IFilterConfig, value)
-            if (stringifiedFilter) filtersToApply.push(stringifiedFilter)
+            const filterData = await handleFilterValues(
+              config as IFilterConfig,
+              value,
+              headerLayoutContext.formRelationships,
+            )
+            if (filterData?.match) filtersToApply.push(filterData.match)
+            if (filterData?.pipeline && !pipelineToApply) pipelineToApply = filterData.pipeline
+            if (Array.isArray(filterData?.joins) && filterData.joins.length) joinsToApply.push(filterData.joins)
           } else {
             // cases like radio buttons, where each has its own filter, but only 1 needs to apply
             const nestedConfig = config as IFilterSimple
             const eachConfig = nestedConfig[value as string]
 
-            const stringifiedFilter = await handleFilterValues(eachConfig as IFilterConfig, value)
-            if (stringifiedFilter) filtersToApply.push(stringifiedFilter)
+            const filterData = await handleFilterValues(
+              eachConfig as IFilterConfig,
+              value,
+              headerLayoutContext.formRelationships,
+            )
+            if (filterData?.match) filtersToApply.push(filterData.match)
+            if (filterData?.pipeline && !pipelineToApply) pipelineToApply = filterData.pipeline
+            if (Array.isArray(filterData?.joins) && filterData.joins.length) joinsToApply.push(filterData.joins)
           }
         }
 
@@ -85,13 +102,21 @@ export default function FormDataListHeaderComponent({
           return { ...curr, ...parsedDFilter }
         }, {})
 
-        const updatedDynamicFilter = JSON.stringify(
-          // dynamicFilters.length === 1 ? dynamicFilters[0] : { $and: dynamicFilters },
-          dynamicFilters,
-        )
+        const match = Object.values(dynamicFilters).length ? JSON.stringify(dynamicFilters) : undefined
+
+        if (pipelineToApply) {
+          const parsedPipeline = JSON.parse(pipelineToApply) as { $match?: { [key: string]: any } }[]
+          const pipeline = JSON.stringify([
+            ...(match ? [{ $match: JSON.parse(match) }] : []),
+            ...(parsedPipeline[0]?.$match ? parsedPipeline.slice(1) : parsedPipeline),
+          ])
+
+          updateDynamicFilter({ match, pipeline, joins: mergeJoins(joinsToApply) })
+          return
+        }
 
-        updateDynamicFilter(updatedDynamicFilter)
-      } else updateDynamicFilter()
+        updateDynamicFilter({ match })
+      } else updateDynamicFilter({})
     },
     [filterConfigs],
   )
@@ -158,12 +183,16 @@ export default function FormDataListHeaderComponent({
 
 type IFormDataListHeaderComponent = {
   layoutConfig?: IDndLayoutStructure_Responsive
-  updateDynamicFilter: (match?: string) => void
+  updateDynamicFilter: (data?: { match?: string; pipeline?: string; joins?: IFormJoin[] }) => void
   dataCount?: 'pending' | number
   headerLayoutContext: IDataListHeaderLayoutContext
 }
 
-const handleFilterValues = async (config: IFilterConfig, value: any) => {
+const handleFilterValues = async (
+  config: IFilterConfig,
+  value: any,
+  formRelationships?: IFormRelationshipConfig[],
+) => {
   const isNumber = typeof value === 'number'
   const isBoolean = typeof value === 'boolean'
 
@@ -171,6 +200,31 @@ const handleFilterValues = async (config: IFilterConfig, value: any) => {
 
   if (config.type === FilterConfigTypeEnum.NoFilter) return null
 
+  if (config.type === FilterConfigTypeEnum.RelatedChildForm) {
+    const childFormId = typeof value === 'number' ? value : parseInt(value, 10)
+    const relationship = formRelationships?.find(
+      (rel) => rel.type === FormRelationshipEnum.OneToMany && rel.formId === childFormId,
+    )
+
+    if (!childFormId || !relationship) return null
+
+    return {
+      match: JSON.stringify({
+        [`${childFormId}._id`]: { $ne: null },
+        [`${childFormId}.DeletedDate`]: null,
+      }),
+      joins: [
+        {
+          formId: childFormId,
+          localField: '_id',
+          foreignField: `Data.${relationship.foreignKey}`,
+          alias: `${childFormId}`,
+        },
+      ],
+      pipeline: JSON.stringify([{ $group: { _id: '$_id', doc: { $first: '$$ROOT' } } }]),
+    }
+  }
+
   if ((config as IFilterCustom).bsonDataType === BSON_DATA_IDENTIFIER_PREFIXES.Date) {
     const isRangeFilter =
       Array.isArray(value) && value.every((v) => [null, undefined].includes(v) || dayjs(v).isValid())
@@ -204,6 +258,10 @@ const handleFilterValues = async (config: IFilterConfig, value: any) => {
 
     if (value2) stringifiedFilter = stringifiedFilter.replaceAll(VALUE_REPLACEMENT_PLACEHOLDER2, value2)
 
-    return stringifiedFilter
+    return {
+      match: stringifiedFilter,
+      pipeline: (config as IFilterCustom).pipeline,
+      joins: (config as IFilterCustom).joins,
+    }
   }
 }

package/src/components/form/1-list/table.tsx

@@ -201,9 +201,14 @@ export default function FormDataListTableComponent({
     <>
       <FormDataListHeaderComponent
         layoutConfig={layoutsConfigs?.dataListConfig.header}
-        updateDynamicFilter={(match) => {
+        updateDynamicFilter={(data) => {
           setParentLoading(true)
-          setFilterReqData((c) => ({ ...c, match }))
+          setFilterReqData((c) => ({
+            ...c,
+            match: data?.match,
+            pipeline: data?.pipeline,
+            joins: data?.joins,
+          }))
         }}
         dataCount={dataListOtherConfigs?.showCount ? (parentLoadings.data ? 'pending' : dataList.total) : undefined}
         headerLayoutContext={headerLayoutContext}
@@ -281,6 +286,8 @@ function normalizeFilter(filter?: IDataListReqData & { skip?: number }) {
     skip: typeof filter?.skip === 'number' ? filter.skip : undefined,
     sort: filter?.sort ?? undefined,
     match: filter?.match ?? undefined,
+    pipeline: filter?.pipeline ?? undefined,
+    joins: filter?.joins ? JSON.stringify(filter.joins) : undefined,
   }
 }
 
@@ -293,7 +300,9 @@ function areFiltersEqual(a?: IDataListReqData & { skip?: number }, b?: IDataList
     normalizedA.limit === normalizedB.limit &&
     normalizedA.skip === normalizedB.skip &&
     normalizedA.sort === normalizedB.sort &&
-    normalizedA.match === normalizedB.match
+    normalizedA.match === normalizedB.match &&
+    normalizedA.pipeline === normalizedB.pipeline &&
+    normalizedA.joins === normalizedB.joins
   )
 }
 

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

@@ -4,7 +4,7 @@ import LayoutRendererCol from '../2-col'
 import { memo, ReactElement, useMemo } from 'react'
 import { LayoutRowConditionalHeaderRenderer } from './header-render'
 import { LayoutRowRepeatableRenderer } from './repeatable-render'
-import { IDndLayoutElement, IDndLayoutRow, IFormJoin } from '../../../../types'
+import { IDndLayoutElement, IDndLayoutRow, IFormJoin, IFormRelationshipConfig } from '../../../../types'
 import { IDynamicButton_DisplayStateProps } from '../3-element/1-dynamic-button'
 import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
 import { useHiddenIds } from '../../../common/custom-hooks/use-node-condition.hook/use-node-condition.hook'
@@ -108,5 +108,6 @@ export interface IFormContext {
   formId?: number
   detailPageFormId?: number
   parentFormJoins?: IFormJoin[]
+  formRelationships?: IFormRelationshipConfig[]
   manyToManyRelInfo?: { middleFormId: number; currentFormId: number; otherFormId: number } | null
 }

package/src/components/form/layout-renderer/3-element/18-gallery/delete.modal.tsx

@@ -115,7 +115,7 @@ export default function GalleryDeleteModal({
             {discardText || 'Discard'}
           </Button_FillerPortal>
           <Button_FillerPortal primary loading={isDeleting} onClick={deletePictures}>
-            {deleteText || 'Delete Selected'}
+            {deleteText || 'Delete selected'}
           </Button_FillerPortal>
         </div>
       }

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

@@ -3,7 +3,12 @@ import { memo, useMemo, useState } from 'react'
 import { FaPlus, FaTrashAlt } from 'react-icons/fa'
 import { FaUpload } from 'react-icons/fa6'
 import { isNewFormDataPage, mapToFormItemRules, resolveConditionalText } from '../../../../../functions'
-import { DeviceBreakpointEnum, FormElementConditionalKeyEnum, TranslationTextSubTypeEnum, TranslationTextTypeEnum } from '../../../../../enums'
+import {
+  DeviceBreakpointEnum,
+  FormElementConditionalKeyEnum,
+  TranslationTextSubTypeEnum,
+  TranslationTextTypeEnum,
+} from '../../../../../enums'
 import { IGalleryElementProps, IValidationRule } from '../../../../../types'
 import { Button_FillerPortal } from '../../../../common/button'
 import { useTranslation } from '../../../../common/custom-hooks'
@@ -66,10 +71,11 @@ function LayoutRenderer_Gallery({
       }),
     [allValues, currentBreakpoint, elementKey, formDataId, t, textConditions],
   )
-  const [emptyDescription = 'No pictures uploaded'] = useMemo(
+  const [emptyDescription, deleteButtonText] = useMemo(
     () =>
       t([
         { key: elementKey, type: TranslationTextTypeEnum.Description, subType: TranslationTextSubTypeEnum.EmptyState },
+        { key: elementKey, type: TranslationTextTypeEnum.Label, subType: TranslationTextSubTypeEnum.DeleteButton },
       ]),
     [elementKey, t],
   )
@@ -156,7 +162,7 @@ function LayoutRenderer_Gallery({
                   className="text-danger underline hover:text-danger"
                 >
                   <FaTrashAlt />
-                  Delete
+                  {deleteButtonText || 'Delete selected'}
                 </Button_FillerPortal>
               )}
               {!isUploadButtonHidden && (
@@ -215,7 +221,7 @@ function LayoutRenderer_Gallery({
             </div>
           </Image.PreviewGroup>
         ) : (
-          <Empty description={emptyDescription || undefined} />
+          <Empty description={emptyDescription || 'No pictures uploaded'} />
         )}
       </Form.Item>
       <GalleryUploadModal

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

@@ -24,6 +24,7 @@ import {
   PageViewTypEnum,
   FieldElementOptionSourceEnum,
   FilterConfigTypeEnum,
+  FormRelationshipEnum,
   IdMatchFieldTypeEnum,
   TranslationTextTypeEnum,
   TranslationTextSubTypeEnum,
@@ -61,6 +62,8 @@ function LayoutRenderer_FieldsWithOptions({
   const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(
     props.optionSource.type === FieldElementOptionSourceEnum.ReadFromDetails
       ? props.optionSource?.baseFormId
+      : props.optionSource.type === FieldElementOptionSourceEnum.RelatedChildForm
+        ? formContext.formId
       : undefined,
   )
 
@@ -318,9 +321,22 @@ function LayoutRenderer_FieldsWithOptions({
         }),
       )
       setLoading(false)
+    } else if (props.optionSource.type === FieldElementOptionSourceEnum.RelatedChildForm) {
+      setRawOptions(
+        (cachedConfig?.relationships ?? [])
+          .filter((rel) => rel.type === FormRelationshipEnum.OneToMany)
+          .filter((rel, idx, arr) => arr.findIndex((eachRel) => eachRel.formId === rel.formId) === idx)
+          .map((rel) => {
+            const childFormId = rel.formId
+            const label = getFormById(childFormId)?.name || `Form #${childFormId}`
+
+            return { value: childFormId, label, fullLabel: label }
+          }),
+      )
+      setLoading(false)
     } else if (props.optionSource.type === FieldElementOptionSourceEnum.ReadFromDetails) fetchDetailsStaticOptions()
     else setLoading(false)
-  }, [props.optionSource, fetchDetailsStaticOptions, t])
+  }, [props.optionSource, fetchDetailsStaticOptions, t, cachedConfig?.relationships, getFormById])
 
   useEffect(() => {
     return () => {

package/src/enums/form.enum.ts

@@ -79,6 +79,7 @@ export enum FieldElementOptionSourceEnum {
   Any = 'Any',
   Static = 'Static',
   DynamicForm = 'DynamicForm',
+  RelatedChildForm = 'RelatedChildForm',
   ReadFromDetails = 'ReadFromDetails', // used in data list header
   Roles = 'Roles',
 }
@@ -124,6 +125,7 @@ export enum JustifyAndAlignContent {
 export enum FilterConfigTypeEnum {
   NoFilter = 'NoFilter',
   Custom = 'Custom',
+  RelatedChildForm = 'RelatedChildForm',
 }
 export enum DeviceBreakpointEnum {
   Default = 'default',

package/src/enums/index.ts

@@ -136,6 +136,7 @@ export enum TranslationTextSubTypeEnum {
   RepeatButtonRemove = 'RepeatRemove',
   Secondary = '2',
   EmptyState = 'EmptyState',
+  DeleteButton = 'DeleteButton',
   DeleteModalTitle = 'DeleteModalTitle',
   DeleteModalDiscard = 'DeleteModalDiscard',
   DeleteModalDelete = 'DeleteModalDelete',

package/src/functions/forms/data-list-cache.ts

@@ -1,5 +1,5 @@
 import { LOCAL_STORAGE_KEYS_ENUM } from '../../enums'
-import { IFormDataListData } from '../../types'
+import { IFormDataListData, IFormJoin } from '../../types'
 
 type DataListSnapshot = { data: IFormDataListData[]; total: number }
 
@@ -91,6 +91,8 @@ export type IDataListFilterState = {
   limit?: number
   sort?: string
   match?: string
+  pipeline?: string
+  joins?: IFormJoin[]
   skip?: number
 }
 

package/src/functions/forms/index.ts

@@ -23,6 +23,7 @@ import {
   DataRenderTypeEnum,
   ElementTypeEnum,
   FieldElementOptionSourceEnum,
+  FilterConfigTypeEnum,
   LOCAL_STORAGE_KEYS_ENUM,
   NotificationTypeEnum,
   TemplateDataReplacementFieldTypesEnum,
@@ -32,6 +33,7 @@ import {
   IEmail_Attachment,
   IFilterNested,
   IDndLayoutElement,
+  IFormLayoutFieldOption,
   IGridContainerConfig,
   IDynamicForm,
   IFormDataApiReqConfig,
@@ -45,13 +47,22 @@ export const extractFiltersFromLayout = (elements: { [key: string]: IDndLayoutEl
 
   Object.values(elements).forEach((el) => {
     if (
-      el.elementType === ElementTypeEnum.Radio &&
+      [ElementTypeEnum.Radio, ElementTypeEnum.Select].includes(el.elementType) &&
+      el.props &&
+      'optionSource' in el.props &&
       el.props.optionSource?.type === FieldElementOptionSourceEnum.Static
     ) {
-      el.props.optionSource.options.forEach((op) => {
+      el.props.optionSource.options.forEach((op: IFormLayoutFieldOption) => {
         if (op.filter)
-          filters[el.key] = filters[el.key] ? { ...filters[el.key], [op.value]: op.filter } : { [op.value]: op.filter }
+          filters[el.key] = filters[el.key] ? { ...filters[el.key], [op.id]: op.filter } : { [op.id]: op.filter }
       })
+    } else if (
+      el.elementType === ElementTypeEnum.Select &&
+      el.props &&
+      'optionSource' in el.props &&
+      el.props.optionSource?.type === FieldElementOptionSourceEnum.RelatedChildForm
+    ) {
+      filters[el.key] = { type: FilterConfigTypeEnum.RelatedChildForm }
     } else if (el.props && 'filter' in el.props && el.props.filter) {
       filters[el.key] = {
         ...el.props.filter,
@@ -427,8 +438,8 @@ const emailFieldKeys: Array<'to' | 'from' | 'cc' | 'bcc'> = ['to', 'from', 'cc',
 const getValueFromPath = (path: string, data: Record<string, any>) => {
   if (!path) return undefined
   return path.split('.').reduce((acc: any, key: string) => {
-    if (!acc) return undefined
-    return acc[key] ?? acc
+    if (acc === undefined || acc === null) return undefined
+    return acc[key]
   }, data)
 }
 

package/src/types/forms/data-list/filter-config.ts

@@ -1,13 +1,17 @@
 import { IFormJoin } from '..'
 import { FilterConfigTypeEnum } from '../../../enums'
 
-export type IFilterConfig = INoFilterConfig | IFilterCustom
+export type IFilterConfig = INoFilterConfig | IFilterCustom | IFilterRelatedChildForm
 export interface INoFilterConfig {
   type: FilterConfigTypeEnum.NoFilter
 }
+export interface IFilterRelatedChildForm {
+  type: FilterConfigTypeEnum.RelatedChildForm
+}
 export interface IFilterCustom {
   type: FilterConfigTypeEnum.Custom
   config: { [key: string]: any }
+  pipeline?: string
   bsonDataType?: string
   joins?: IFormJoin[]
   conditionFormBranches?: string[]

package/src/types/forms/layout-elements/field-option-source.ts

@@ -3,6 +3,7 @@ import { FieldElementOptionSourceEnum } from '../../../enums'
 
 export type IFieldElementOptionSource =
   | IOptionSourceDynamicForm
+  | IOptionSourceRelatedChildForm
   | IOptionSourceConstant // constant options - used in details page
   | IOptionSourceReadFromDetails // reading constant options (above) in list header
   | IOptionSourceAny // no options configured, but users can enter any options for informational purpose only
@@ -27,6 +28,10 @@ export type IOptionSourceDynamicForm = {
   }
 } & IDataFetchConfig
 
+export interface IOptionSourceRelatedChildForm {
+  type: FieldElementOptionSourceEnum.RelatedChildForm
+}
+
 export interface IOptionSourceReadFromDetails {
   type: FieldElementOptionSourceEnum.ReadFromDetails
   formId: number