form-craft-package 1.3.0 → 1.3.2

package/package.json

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

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

@@ -1,55 +1,78 @@
 import { Form } from 'antd'
-import { ReactNode, useEffect, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useState } from 'react'
 import dayjs from 'dayjs'
-import { IFilterConfig, IFilterNested, IFilterSimple, IFormLayoutRow } from '../../../types'
+import {
+  IFilterByAuthUser,
+  IFilterByLinkedForm,
+  IFilterConfig,
+  IFilterCustom,
+  IFilterNested,
+  IFilterSimple,
+  IFormData,
+  IFormLayoutRow,
+} from '../../../types'
 import { extractFiltersFromLayout } from '../../../functions'
 import { FilterConfigTypeEnum, FormPreservedItemKeys } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import { VALUE_REPLACEMENT_PLACEHOLDER } from '../../../constants'
 import { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import { DEFAULT_NO_FILTER, DEFAULT_NO_SORTER, DEFAULT_PAGINATION, IConstantValues, IReqDataConfig } from './table'
+import client from '../../../functions/axios-handler'
 
 export default function FormDataListHeaderComponent({
   layout,
   titleComponent,
   defaultFilter,
+  startLoading,
   updateReqData,
   onCustomFunctionCall,
   ...constantValues
 }: IFormDataListHeaderComponent) {
   const [dataListHeaderFormRef] = Form.useForm()
   const [filterConfigs, setFilterConfigs] = useState<IFilterNested>({})
-  const { userId, formId } = constantValues
+  const { userId, formId, formDataId } = constantValues
 
   const filterValues = Form.useWatch([], dataListHeaderFormRef)
 
   useEffect(() => {
-    if (dataListHeaderFormRef) dataListHeaderFormRef.setFieldValue(FormPreservedItemKeys.FormId, formId)
-  }, [dataListHeaderFormRef, formId])
-
-  useEffect(() => {
-    setFilterConfigs(extractFiltersFromLayout(layout))
-  }, [layout])
-
-  useEffect(() => {
-    if (filterValues) {
-      const filtersWithConfig = Object.entries(filterValues).filter(
+    if (dataListHeaderFormRef)
+      dataListHeaderFormRef.setFieldsValue({
+        [FormPreservedItemKeys.FormId]: formId,
+        [FormPreservedItemKeys.FormDataId]: formDataId,
+        [FormPreservedItemKeys.InPreviewMode]: false,
+      })
+  }, [dataListHeaderFormRef, formId, formDataId])
+
+  useEffect(() => setFilterConfigs(extractFiltersFromLayout(layout)), [layout])
+
+  const organizeFilterData = useCallback(
+    async (values: { [key: string]: any }) => {
+      const filtersWithConfig: [string, string][] = Object.entries(values).filter(
         ([field, value]) => !!value && !!filterConfigs[field],
       )
 
       if (filtersWithConfig.length > 0) {
-        const filtersToApply = filtersWithConfig.map(([field, value]) => {
+        const filtersToApply = []
+        for (const filterConfig of filtersWithConfig) {
+          const [field, value] = filterConfig
           const config = filterConfigs[field]
 
-          if ('type' in config) return handleFilterValues(config as IFilterConfig, value, userId)
-          else {
+          if ('type' in config) {
+            if (config.type === FilterConfigTypeEnum.ByLinkedForm) startLoading()
+
+            const filterData = await handleFilterValues(config as IFilterConfig, value, userId)
+            filtersToApply.push(filterData)
+          } 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]
 
-            return handleFilterValues(eachConfig as IFilterConfig, value, userId)
+            if (eachConfig.type === FilterConfigTypeEnum.ByLinkedForm) startLoading()
+
+            const filterData = await handleFilterValues(eachConfig as IFilterConfig, value, userId)
+            filtersToApply.push(filterData)
           }
-        })
+        }
 
         const { customFilter, dynamicFilter } = filtersToApply.reduce(
           (curr, next) => {
@@ -79,11 +102,14 @@ export default function FormDataListHeaderComponent({
             dynamicFilter: JSON.stringify(dynamicFilter),
           }
         })
-      } else {
-        updateReqData(defaultFilter)
-      }
-    }
-  }, [filterValues, filterConfigs])
+      } else updateReqData(defaultFilter)
+    },
+    [filterConfigs],
+  )
+
+  useEffect(() => {
+    if (filterValues) organizeFilterData(filterValues)
+  }, [filterValues])
 
   return (
     <Form layout="vertical" form={dataListHeaderFormRef}>
@@ -112,10 +138,31 @@ type IFormDataListHeaderComponent = {
   updateReqData: React.Dispatch<React.SetStateAction<IReqDataConfig | undefined>>
   titleComponent?: ReactNode
   defaultFilter: IReqDataConfig
+  startLoading: () => void
 } & ICustomFunctionCall &
   IConstantValues
 
-const handleFilterValues = (config: IFilterConfig, value: any, userId?: string | number) => {
+const getLinkedFormFilter = async (
+  config: IFilterByLinkedForm,
+  parentDataIds: string[],
+  lastRelIndex: number,
+): Promise<{ dataIds: string[]; foreignKey: string }> => {
+  const lastRel = config.relationshipPath[lastRelIndex]
+
+  if (lastRelIndex - 1 >= 0) {
+    const childOfLastRel = config.relationshipPath[lastRelIndex - 1]
+    const childFormDataRes = await client.post(`/api/formdata/list/${childOfLastRel.formId}`, {
+      dynamicFilter: JSON.stringify({ [`Data.${lastRel.foreignKey}`]: { $in: parentDataIds } }),
+    })
+    if (childFormDataRes.status === 200) {
+      const childDataIds = childFormDataRes.data.data.map((d: IFormData) => d.id)
+
+      return getLinkedFormFilter(config, childDataIds, lastRelIndex - 1)
+    } else return { dataIds: parentDataIds, foreignKey: childOfLastRel.foreignKey }
+  } else return { dataIds: parentDataIds, foreignKey: lastRel.foreignKey }
+}
+
+const handleFilterValues = async (config: IFilterConfig, value: any, userId?: string | number) => {
   if (config.type === FilterConfigTypeEnum.NoFilter) return DEFAULT_NO_FILTER
 
   const isDate = dayjs(value as Date).isValid()
@@ -124,12 +171,24 @@ const handleFilterValues = (config: IFilterConfig, value: any, userId?: string |
   let customFilters = {}
   if (config.type === FilterConfigTypeEnum.ByAuthUser) customFilters = { createdById: userId }
 
-  if (config.config) {
-    let stringifiedFilter = JSON.stringify(config.config)
+  if (
+    [FilterConfigTypeEnum.ByAuthUser, FilterConfigTypeEnum.Custom].includes(config.type) &&
+    (config as IFilterByAuthUser | IFilterCustom).config
+  ) {
+    let stringifiedFilter = JSON.stringify((config as IFilterByAuthUser | IFilterCustom).config)
     stringifiedFilter = stringifiedFilter
       .replaceAll(VALUE_REPLACEMENT_PLACEHOLDER, (value as string).trim())
       .replaceAll('@', '$')
 
     return { customFilter: customFilters, dynamicFilter: stringifiedFilter }
   }
+
+  if (config.type === FilterConfigTypeEnum.ByLinkedForm && value) {
+    const finalFilter = await getLinkedFormFilter(config, [value], config.relationshipPath.length - 1)
+
+    return {
+      customFilter: {},
+      dynamicFilter: JSON.stringify({ [`Data.${finalFilter.foreignKey}`]: { $in: finalFilter.dataIds } }),
+    }
+  }
 }

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

@@ -17,7 +17,7 @@ function FormDataListComponent({
   const [formData, setFormData] = useState<{ data: IFormData[]; total: number }>({ data: [], total: 0 })
   const [dataListConfig, setDataListConfig] = useState<
     | {
-        dataListConfig: IFormDataListConfig
+        dataListConfig: IFormDataListConfig & { configForFormId: number }
         detailsLayout: IFormLayoutRow[]
       }
     | undefined
@@ -33,7 +33,7 @@ function FormDataListComponent({
           const parsedData: IFormSchema | null = parseJSON(res.data.data)
           if (parsedData) {
             setDataListConfig({
-              dataListConfig: parsedData.dataListConfig,
+              dataListConfig: { ...parsedData.dataListConfig, configForFormId: formId },
               detailsLayout: parsedData.detailsConfig.layout,
             })
           }

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

@@ -37,7 +37,7 @@ export default function FormDataListTableComponent({
     pagination: DEFAULT_PAGINATION,
   })
 
-  const { attachmentBaseUrl, userId } = constantValues
+  const { attachmentBaseUrl, userId, formId } = constantValues
 
   useEffect(() => {
     setIsHandlingSchema(true)
@@ -50,7 +50,9 @@ export default function FormDataListTableComponent({
   }, [debouncedFilterReqData])
 
   const handleDataListConfig = useCallback(
-    async (config: IFormDataListConfig, layout: IFormLayoutRow[] = []) => {
+    async (config: IFormDataListConfig & { configForFormId?: number }, layout: IFormLayoutRow[] = []) => {
+      if (config.configForFormId && config.configForFormId !== formId) return
+
       const {
         elements = [],
         header = { layout: [] },
@@ -93,7 +95,7 @@ export default function FormDataListTableComponent({
       setIsHandlingSchema(false)
       isFinishedHandlingRef.current = true
     },
-    [attachmentBaseUrl, userId],
+    [attachmentBaseUrl, userId, formId],
   )
 
   useEffect(() => {
@@ -112,6 +114,7 @@ export default function FormDataListTableComponent({
           setParentLoading(true)
           setFilterReqData(req)
         }}
+        startLoading={() => setParentLoading(true)}
         defaultFilter={defaultFilterRef.current}
         titleComponent={
           <>
@@ -162,7 +165,7 @@ export default function FormDataListTableComponent({
 }
 
 type IFormDataListTableComponent = {
-  dataListConfig?: IFormDataListConfig
+  dataListConfig?: IFormDataListConfig & { configForFormId?: number }
   detailsLayout?: IFormLayoutRow[]
   dataList: { data: IFormData[]; total: number }
   parentLoading: boolean
@@ -201,4 +204,5 @@ export interface IConstantValues {
   userId?: string | number
   formId?: number
   attachmentBaseUrl?: string
+  formDataId?: string
 }

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

@@ -35,8 +35,16 @@ export default function FormDataDetailsComponent({
   }, [isPublic, location, formDataRef])
 
   useEffect(() => {
-    if (formDataRef) formDataRef.setFieldsValue({ formId, formKey, baseServerUrl, companyKey, isPublic })
-  }, [formDataRef, formId, formKey, baseServerUrl, companyKey, isPublic])
+    if (formDataRef)
+      formDataRef.setFieldsValue({
+        [FormPreservedItemKeys.FormId]: formId,
+        [FormPreservedItemKeys.FormKey]: formKey,
+        [FormPreservedItemKeys.BaseServerUrl]: baseServerUrl,
+        [FormPreservedItemKeys.CompanyKey]: companyKey,
+        [FormPreservedItemKeys.IsPublic]: isPublic,
+        [FormPreservedItemKeys.InPreviewMode]: false,
+      })
+  }, [formDataRef, formId, formKey, baseServerUrl, companyKey, isPublic, formDataId])
 
   const fetchFormData = useCallback(
     (dFormId?: number, dateFields: string[] = []) => {

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

@@ -7,8 +7,8 @@ import { IFileUploadElementRules } from '../../../../types'
 import { useNotification } from '../../../common/custom-hooks'
 import { FaTrashAlt } from 'react-icons/fa'
 import { saveFile } from '../../../../functions/form'
-import { FormPreservedItemKeys } from '../../../../enums'
 import { IFormItemPath } from '.'
+import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 
 export default function LayoutRenderer_FileUpload({
   formRef,
@@ -21,7 +21,8 @@ export default function LayoutRenderer_FileUpload({
   const { warningModal, confirmModal } = useNotification()
   const [loading, setLoading] = useState(false)
   const savedSignatureBlobName = Form.useWatch(fullPath, formRef)
-  const companyKey = Form.useWatch(FormPreservedItemKeys.CompanyKey, { form: formRef, preserve: true }) // for public use
+
+  const { companyKey } = useFormPreservedItemValues(formRef)
 
   const deleteSavedFile = useCallback(
     (blobName: string) => {

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

@@ -1,11 +1,13 @@
 import { FormInstance } from 'antd'
 import { useCallback, useEffect, useState } from 'react'
-import { IFormLayoutFieldOption, IRadioElement, ISelectElement } from '../../../../types'
+import { IFilterByLinkedFormRelPath, IFormLayoutFieldOption, IRadioElement, ISelectElement } from '../../../../types'
 import { FieldElementOptionSourceEnum } from '../../../../enums'
 import { IFormItemPath } from '.'
 import { LayoutRenderer_FieldElement } from './2-field-element'
 import { fetchFormDataAsLookup } from '../../../../functions'
 import { getElementGeneralizedProps } from '../../../../functions/get-element-props'
+import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
+import { IReqDataConfig } from '../../1-list/table'
 
 export default function LayoutRenderer_FieldsWithOptions({
   formRef,
@@ -16,24 +18,44 @@ export default function LayoutRenderer_FieldsWithOptions({
   const [options, setOptions] = useState<{ value: string; label: string }[]>([])
   const props = getElementGeneralizedProps(elementData.props)
 
-  const fetchFormData = useCallback(async (formId: number) => {
-    const formDataResData = await fetchFormDataAsLookup(formId)
+  const { inPreviewMode, formDataId } = useFormPreservedItemValues(formRef)
+
+  const fetchFormData = useCallback(async (formId: number, field: string, filter?: Partial<IReqDataConfig>) => {
+    const formDataResData = await fetchFormDataAsLookup(formId, filter)
     setOptions(
       formDataResData.map((formData) => ({
         value: formData.id,
-        label: formData[props.optionSource.form.field],
+        label: formData[field],
       })),
     )
   }, [])
 
+  const fetchLinkedFormData = useCallback(
+    async (relationshipPath: IFilterByLinkedFormRelPath[] = []) => {
+      const lastPath = relationshipPath[relationshipPath.length - 1]
+
+      if (lastPath && lastPath.field)
+        fetchFormData(lastPath.formId, lastPath.field, {
+          dynamicFilter: JSON.stringify(
+            lastPath.parentForeignKey && formDataId
+              ? { [`Data.${lastPath.parentForeignKey}`]: { $eq: formDataId } }
+              : {},
+          ),
+        })
+    },
+    [formDataId],
+  )
+
   useEffect(() => {
-    if (!props.optionSource) return
+    if (!props.optionSource || inPreviewMode === undefined) return
 
     if (props.optionSource.type === FieldElementOptionSourceEnum.Static)
       setOptions(props.optionSource.options.map((op: IFormLayoutFieldOption) => ({ value: op.id, label: op.value })))
-    else if (props.optionSource.type === FieldElementOptionSourceEnum.DynamicForm)
-      fetchFormData(props.optionSource.form.id)
-  }, [props.optionSource])
+    else if (!inPreviewMode && props.optionSource.type === FieldElementOptionSourceEnum.DynamicForm)
+      fetchFormData(props.optionSource.form.id, props.optionSource.form.field)
+    else if (!inPreviewMode && props.optionSource.type === FieldElementOptionSourceEnum.LinkedForm)
+      fetchLinkedFormData(props.filter.relationshipPath)
+  }, [props.optionSource, inPreviewMode, formDataId])
 
   return (
     <LayoutRenderer_FieldElement

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

@@ -6,11 +6,13 @@ import client from '../../../../functions/axios-handler'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import FormDataListTableComponent from '../../1-list/table'
 import FormDataListSkeleton_Table from '../../../common/loading-skeletons/table'
+import { NEW_FORM_DATA_IDENTIFIER } from '../../../../constants'
 
 export default function LayoutRenderer_FormDataRender({ formRef, elementProps }: ILayoutRenderer_FormDataRender) {
   const { form } = elementProps
   const { formDataId } = useFormPreservedItemValues(formRef)
   const recursiveCallCount = useRef(0)
+  const hasInitialFetched = useRef(false)
   const [loading, setLoading] = useState(true)
   const [displayConfig, setDisplayConfig] = useState<
     | {
@@ -59,7 +61,7 @@ export default function LayoutRenderer_FormDataRender({ formRef, elementProps }:
             const childFormDataRes = await client.post(`/api/formdata/list/${childFormId}`, {
               dynamicFilter: JSON.stringify({ [`Data.${relationship.foreignKey}`]: { $in: foreignKeyIds } }),
             })
-            if (childFormDataRes.status < 300) {
+            if ((childFormDataRes.status = 200)) {
               const formData = {
                 ...childFormDataRes.data,
                 data: childFormDataRes.data.data.map((d: IFormData) => {
@@ -70,6 +72,7 @@ export default function LayoutRenderer_FormDataRender({ formRef, elementProps }:
 
               if (relationship.isRenderChildForm) {
                 if (!relationship.renderChildConfig) return
+
                 const formDataMap: { [id: string]: any } = {}
                 const parentDataIds: string[] = []
 
@@ -84,6 +87,7 @@ export default function LayoutRenderer_FormDataRender({ formRef, elementProps }:
                   parentDataIds,
                   formDataMap,
                 )
+
                 return childResData
               } else {
                 return {
@@ -113,24 +117,33 @@ export default function LayoutRenderer_FormDataRender({ formRef, elementProps }:
   )
 
   useEffect(() => {
-    if (!form || !form.relationshipConfig?.formId || !formDataId || !formValues) {
+    if (
+      !form ||
+      !form.relationshipConfig?.formId ||
+      !formDataId ||
+      formDataId === NEW_FORM_DATA_IDENTIFIER ||
+      !formValues
+    ) {
       setLoading(false)
       return
     }
 
-    fetchFormDetails(form.id, form.relationshipConfig.formId, [formDataId], { [formDataId]: formValues }).then(
-      (resData) => {
-        const { config, data, layout = [] } = resData ?? {}
+    if (!hasInitialFetched.current) {
+      fetchFormDetails(form.id, form.relationshipConfig.formId, [formDataId], { [formDataId]: formValues }).then(
+        (resData) => {
+          const { config, data, layout = [] } = resData ?? {}
 
-        if (config) setDisplayConfig({ dataListConfig: config, detailsLayout: layout })
-        if (data) setDataList(data)
-      },
-    )
+          if (config) setDisplayConfig({ dataListConfig: config, detailsLayout: layout })
+          if (data) setDataList(data)
+        },
+      )
+      hasInitialFetched.current = true
+    }
   }, [form, fetchFormDetails, formDataId, formValues])
 
   if (!form || !form.relationshipConfig?.formId) return <></>
 
-  const constantValues = {}
+  const constantValues = { formDataId }
 
   return (
     <FormDataListTableComponent

package/src/enums.ts

@@ -126,6 +126,7 @@ export enum ButtonElementSizeEnum {
 export enum FieldElementOptionSourceEnum {
   Static = 'Static',
   DynamicForm = 'DynamicForm',
+  LinkedForm = 'LinkedForm',
 }
 export enum FormDataListViewTypeEnum {
   Table = 'table',
@@ -174,6 +175,7 @@ export enum FlexAlignItems {
 export enum FilterConfigTypeEnum {
   NoFilter = 'NoFilter',
   ByAuthUser = 'ByAuthUser',
+  ByLinkedForm = 'ByLinkedForm',
   Custom = 'Custom',
 }
 export enum TextElementTypeEnum {

package/src/functions/index.ts

@@ -1,3 +1,4 @@
+import { IReqDataConfig } from '../components/form/1-list/table'
 import { DEFAULT_FLEX_CONFIG } from '../constants'
 import { ElementTypeEnum, FieldElementOptionSourceEnum, FormLayoutNodeEnum, ResponsivenessDeviceEnum } from '../enums'
 import {
@@ -206,13 +207,17 @@ export const kebabCaseToCamelCase = (cssObject: Record<string, string | number>)
 
 /** ---------------------------------------------------------------------------------------------------------  */
 
-export async function fetchFormDataAsLookup(formId: number): Promise<(IFormData & { [key: string]: any })[]> {
+export async function fetchFormDataAsLookup(
+  formId: number,
+  filter: Partial<IReqDataConfig> = {},
+): Promise<(IFormData & { [key: string]: any })[]> {
   try {
     const response = await client.post(`/api/formdata/list/${formId}`, {
       customFilter: {},
       dynamicFilter: JSON.stringify({}),
       pagination: {},
       sorter: {},
+      ...filter,
     })
     if (response.status === 200)
       return response.data.data.map((formData: IFormData) => ({ ...formData, ...JSON.parse(formData.data) }))

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

@@ -0,0 +1,29 @@
+import { FilterConfigTypeEnum } from '../../enums'
+
+export type IFilterConfig = INoFilterConfig | IFilterByAuthUser | IFilterByLinkedForm | IFilterCustom
+export interface INoFilterConfig {
+  type: FilterConfigTypeEnum.NoFilter
+}
+export interface IFilterByAuthUser {
+  type: FilterConfigTypeEnum.ByAuthUser
+  config?: { [key: string]: any }
+}
+export interface IFilterByLinkedForm {
+  type: FilterConfigTypeEnum.ByLinkedForm
+  relationshipPath: IFilterByLinkedFormRelPath[]
+}
+export interface IFilterByLinkedFormRelPath {
+  formId: number
+  foreignKey: string
+  parentForeignKey?: string
+  field?: string
+}
+export interface IFilterCustom {
+  type: FilterConfigTypeEnum.Custom
+  config: { [key: string]: any }
+}
+
+export interface IFilterSimple {
+  [key: string]: IFilterConfig
+}
+export type IFilterNested = IFilterSimple | { [key: string]: IFilterSimple }

package/src/types/data-list/index.ts

@@ -1,6 +1,7 @@
+export * from './filter-config'
 import { ReactNode } from 'react'
 import { IFormLayoutRow } from '..'
-import { AlignTypeEnum, DataListElementAddTypeEnum, FilterConfigTypeEnum } from '../../enums'
+import { AlignTypeEnum, DataListElementAddTypeEnum } from '../../enums'
 import { IDataRenderConfig } from '../layout-elements'
 
 export interface IFormDataListElement {
@@ -17,14 +18,6 @@ export interface IFormDataListElement {
 export interface IFormDataListHeader {
   layout: IFormLayoutRow[]
 }
-export interface IFilterConfig {
-  type: FilterConfigTypeEnum
-  config?: { [key: string]: any } | null
-}
-export interface IFilterSimple {
-  [key: string]: IFilterConfig
-}
-export type IFilterNested = IFilterSimple | { [key: string]: IFilterSimple }
 export interface IFormDataListPagination {
   hasNoPagination?: boolean
   showSizeChanger: boolean