form-craft-package 1.7.3 → 1.7.4

package/package.json

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

package/src/components/common/currency-field.tsx

@@ -6,6 +6,8 @@ import { INTERNATIONALIZATION_DATA } from '../../constants'
 export default function CurrencyField({
   country = CountryEnum.US,
   decimalPoint = 0,
+  value,
+  onChange,
   ...restProps
 }: ICurrencyField) {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -44,6 +46,10 @@ export default function CurrencyField({
       ref={inputRef}
       onFocus={handleFocus}
       precision={decimalPoint}
+      value={value}
+      onChange={(val) => {
+        if (typeof val === 'number' && onChange) onChange(val)
+      }}
       formatter={(value) => {
         if (!value) return `${currencySymbol}${parseInt('0').toFixed(decimalPoint)}`
 
@@ -65,4 +71,6 @@ interface ICurrencyField {
   decimalPoint?: number
   placeholder?: string
   disabled?: boolean
+  value?: number
+  onChange?: (val: number) => void
 }

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

@@ -1,10 +1,9 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import client from '../../../functions/axios-handler'
-import { parseJSON } from '../../../functions/forms/json-handlers'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { cancelableClient } from '../../../functions/axios-handler'
 import FormDataListSkeleton_Table from '../../common/loading-skeletons/table'
-import { IFormData, IFormDataListConfig, IFormSchema, IDndLayoutStructure_Responsive } from '../../../types'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
-import FormDataListTableComponent, { IReqDataConfig } from './table'
+import FormDataListTableComponent, { IDataListLayoutConfig } from './table'
+import { IFormSchema, IFormJoin, IFormDataListData } from '../../../types'
 
 function FormDataListComponent({
   formName,
@@ -14,75 +13,114 @@ function FormDataListComponent({
   baseServerUrl,
   onCustomFunctionCall,
 }: IFormDataListComponent) {
-  const [loading, setLoading] = useState(true)
-  const [formData, setFormData] = useState<{ data: IFormData[]; total: number }>({ data: [], total: 0 })
-  const [dataListConfig, setDataListConfig] = useState<
-    | {
-        dataListConfig: IFormDataListConfig & { configForFormId: number }
-        detailsLayoutConfig: IDndLayoutStructure_Responsive
-      }
-    | undefined
-  >()
+  const [loadings, setLoadings] = useState({ initial: true, data: true })
+  const [dataList, setDataList] = useState<{ data: IFormDataListData[]; total: number }>({ data: [], total: 0 })
+  const [listLayoutConfig, setListLayoutConfig] = useState<IDataListLayoutConfig>()
+
+  const reportDataApiCancelFuncRef = useRef<() => void | undefined>(undefined)
+  const dataProjectRef = useRef<{ [key: string]: string }>({})
+  const formJoinsRef = useRef<IFormJoin[]>([])
+  const defaultFilterReqDataRef = useRef<IDataListReqData | undefined>(undefined)
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
-  const dataListHeaderContext = { formId, userId, attachmentBaseUrl, formName, companyKey }
+  const headerLayoutContext = { formId, userId, attachmentBaseUrl, formName, companyKey, onCustomFunctionCall }
+
+  useEffect(() => {
+    setLoadings({ initial: true, data: true })
+    setDataList({ data: [], total: 0 })
+    dataProjectRef.current = {}
+    formJoinsRef.current = []
+    defaultFilterReqDataRef.current = undefined
+  }, [location.pathname])
 
   useEffect(() => {
-    if (formId) {
-      client.get(`/api/form/${formId}`).then(async (res) => {
-        if (res.status === 200) {
-          const parsedData: IFormSchema | null = parseJSON(res.data.data)
-          if (parsedData) {
-            // configForFormId is passed to ensure that the table shows the correct data list when the forms are switched quickly
-            setDataListConfig({
-              dataListConfig: { ...parsedData.dataListConfig, configForFormId: formId },
-              detailsLayoutConfig: {
-                elements: parsedData.detailsConfig.elements,
-                layouts: parsedData.detailsConfig.layouts,
-              },
-            })
+    if (!formId) return
+    const { request, cancel } = cancelableClient.get(`/api/form/${formId}`)
+    request.then(async (res) => {
+      if (res.status === 200) {
+        const parsedData: IFormSchema | null = JSON.parse(res.data.data)
+        if (parsedData) {
+          const { columns, formJoins, pagination, defaultFilter, defaultSorter } = parsedData.dataListConfig
+
+          if (Array.isArray(columns))
+            dataProjectRef.current = columns.reduce(
+              (curr, c) => (c.key ? { ...curr, [c.key.replace(/\./g, '_')]: `$${c.key}` } : curr),
+              {},
+            )
+          if (Array.isArray(formJoins)) formJoinsRef.current = formJoins
+
+          const defaultReqData: IDataListReqData = {}
+          if (!pagination?.hasNoPagination) {
+            defaultReqData.current = 1
+            defaultReqData.limit = pagination?.defaultPageSize ?? 10
           }
+          if (defaultSorter) defaultReqData.sort = JSON.stringify({ [defaultSorter.field]: defaultSorter.order })
+          if (defaultFilter?.config && Object.values(defaultFilter.config).length)
+            // The operators are stored using @, and here it replaces @ with $. Otherwise, MongoDB's JSON-to-BSON conversion driver was detecting certain operators, especially $regex, and automatically modified them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
+            defaultReqData.match = JSON.stringify(defaultFilter.config).replaceAll('@', '$')
+
+          defaultFilterReqDataRef.current = defaultReqData
+
+          fetchFormDataList(defaultReqData)
+
+          // configForFormId is passed to ensure that the table shows the correct data list when the forms are switched quickly
+          setListLayoutConfig({
+            configForFormId: formId,
+            dataListConfig: {
+              ...parsedData.dataListConfig,
+              columns: columns.map((c) => (c.key ? { ...c, key: c.key.replace(/\./g, '_') } : c)),
+            },
+          })
         }
-      })
-    }
+      }
+    })
+
+    return () => cancel()
   }, [formId])
 
-  const fetchFormDataList = useCallback((reqData: IReqDataConfig, dynamicFormId?: number) => {
-    if (!reqData || !dynamicFormId) return
+  const fetchFormDataList = useCallback(
+    (reqData?: IDataListReqData & { skip?: number }) => {
+      if (!reqData || !formId) return
 
-    client
-      .post(`/api/formdata/list/${dynamicFormId}`, {
-        ...reqData,
-        pagination: {
-          number: reqData.pagination.current,
-          size: reqData.pagination.pageSize,
-        },
-      })
-      .then((res) => {
-        if (res.status === 200)
-          setFormData({
-            ...res.data,
-            data: res.data.data.map((d: IFormData) => {
-              const { data, ...restD } = d
-              return { ...restD, ...JSON.parse(data) }
-            }),
-          })
+      if (!reqData.current && defaultFilterReqDataRef.current?.current)
+        reqData.current = defaultFilterReqDataRef.current.current
+      if (!reqData.limit && defaultFilterReqDataRef.current?.limit)
+        reqData.limit = defaultFilterReqDataRef.current.limit
+      if (!reqData.sort && defaultFilterReqDataRef.current?.sort) reqData.sort = defaultFilterReqDataRef.current.sort
+      if (!reqData.match && defaultFilterReqDataRef.current?.match)
+        reqData.match = defaultFilterReqDataRef.current.match
+
+      if (reqData.current && reqData.limit) reqData.skip = (reqData.current - 1) * reqData.limit
+
+      const { current, ...restReqData } = reqData
+
+      const { request, cancel } = cancelableClient.post(`/api/report/data/${formId}`, {
+        joins: formJoinsRef.current,
+        ...restReqData,
+        project: JSON.stringify(dataProjectRef.current),
       })
-      .finally(() => setLoading(false))
-  }, [])
+      reportDataApiCancelFuncRef.current = cancel
+
+      request
+        .then((res) => {
+          if (res.status === 200) setDataList({ data: res.data.data, total: res.data.totalRecords })
+        })
+        .finally(() => setLoadings({ initial: false, data: false }))
+    },
+    [formId],
+  )
 
   return (
     <FormDataListTableComponent
-      {...dataListConfig}
-      dataList={formData}
+      layoutsConfigs={listLayoutConfig}
+      dataList={dataList}
       updateDataList={(reqData) => {
-        fetchFormDataList(reqData, formId)
+        fetchFormDataList(reqData)
       }}
-      parentLoading={loading}
+      parentLoadings={loadings}
       loadingBlock={<FormDataListSkeleton_Table />}
-      setParentLoading={setLoading}
-      onCustomFunctionCall={onCustomFunctionCall}
-      {...dataListHeaderContext}
+      setParentLoading={(bool) => setLoadings((c) => ({ ...c, data: bool as boolean }))}
+      headerLayoutContext={headerLayoutContext}
     />
   )
 }
@@ -95,3 +133,10 @@ type IFormDataListComponent = {
   formId?: number
   userId: string | number
 } & ICustomFunctionCall
+
+export interface IDataListReqData {
+  current?: number
+  limit?: number
+  sort?: string
+  match?: string
+}

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

@@ -1,19 +1,13 @@
 import { Form } from 'antd'
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
 import { extractFiltersFromLayout } from '../../../functions/forms'
 import { DeviceBreakpointEnum, 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 { DynamicFormButtonRender } from '../layout-renderer/3-element/1-dynamic-button'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
-import {
-  DEFAULT_NO_FILTER,
-  DEFAULT_NO_SORTER,
-  DEFAULT_PAGINATION,
-  IDataListHeaderContext,
-  IReqDataConfig,
-} from './table'
+import { IDataListHeaderLayoutContext } from './table'
 import {
   IDndLayoutStructure_Responsive,
   IFilterByAuthUser,
@@ -26,30 +20,34 @@ import {
 export default function FormDataListHeaderComponent({
   layoutConfig,
   titleComponent,
-  defaultFilter,
   startLoading,
-  updateReqData,
-  onCustomFunctionCall,
-  ...dataListHeaderContext
+  updateDynamicFilter,
+  headerLayoutContext,
 }: IFormDataListHeaderComponent) {
-  const [dataListHeaderFormRef] = Form.useForm()
+  const [filtersFormRef] = Form.useForm()
   const [filterConfigs, setFilterConfigs] = useState<IFilterNested>({})
-  const { userId, formId, formName, parentInfo, formDataId } = dataListHeaderContext
+  const { userId, formId, formName, parentInfo, formDataId, onCustomFunctionCall } = headerLayoutContext
+  const isInitialFetchRef = useRef(true)
 
   const currentBreakpoint = useGetCurrentBreakpoint()
 
-  const layout = useMemo(
-    () => layoutConfig.layouts[currentBreakpoint] ?? layoutConfig.layouts[DeviceBreakpointEnum.Default] ?? [],
-    [layoutConfig.layouts, currentBreakpoint],
-  )
+  useEffect(() => {
+    if (layoutConfig) setFilterConfigs(extractFiltersFromLayout(layoutConfig.elements))
+  }, [layoutConfig])
 
-  const filterValues = Form.useWatch([], dataListHeaderFormRef)
+  const dndLayout = useMemo(() => {
+    const breakpoint = currentBreakpoint || DeviceBreakpointEnum.Default
 
-  useEffect(() => {
-    if (dataListHeaderFormRef) dataListHeaderFormRef.setFieldsValue({ [FormPreservedItemKeys.InPreviewMode]: false })
-  }, [dataListHeaderFormRef])
+    if (!layoutConfig || !layoutConfig.layouts[breakpoint]) return []
+
+    return layoutConfig.layouts[breakpoint]
+  }, [layoutConfig, currentBreakpoint])
+
+  const filterValues = Form.useWatch([], filtersFormRef)
 
-  useEffect(() => setFilterConfigs(extractFiltersFromLayout(layoutConfig.elements)), [layoutConfig])
+  useEffect(() => {
+    if (filtersFormRef) filtersFormRef.setFieldsValue({ [FormPreservedItemKeys.InPreviewMode]: false })
+  }, [filtersFormRef])
 
   const organizeFilterData = useCallback(
     async (values: { [key: string]: any }) => {
@@ -67,7 +65,7 @@ export default function FormDataListHeaderComponent({
             if (config.type === FilterConfigTypeEnum.ByLinkedForm) startLoading()
 
             const filterData = await handleFilterValues(config as IFilterConfig, value, { userId })
-            filtersToApply.push(filterData)
+            if (filterData) 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
@@ -76,11 +74,11 @@ export default function FormDataListHeaderComponent({
             if (eachConfig.type === FilterConfigTypeEnum.ByLinkedForm) startLoading()
 
             const filterData = await handleFilterValues(eachConfig as IFilterConfig, value, { userId })
-            filtersToApply.push(filterData)
+            if (filterData) filtersToApply.push(filterData)
           }
         }
 
-        const { customFilter, dynamicFilters } = filtersToApply.reduce(
+        const { dynamicFilters } = filtersToApply.reduce(
           (curr: { customFilter: { [key: string]: any }; dynamicFilters: { [key: string]: any }[] }, next) => {
             if (!next) return curr
             const parsedDFilter = JSON.parse(next.dynamicFilter)
@@ -95,46 +93,34 @@ export default function FormDataListHeaderComponent({
         const updatedDynamicFilter = JSON.stringify(
           dynamicFilters.length === 1 ? dynamicFilters[0] : { $and: dynamicFilters },
         )
-        updateReqData((c) => {
-          if (!c)
-            return {
-              ...DEFAULT_NO_SORTER,
-              pagination: DEFAULT_PAGINATION,
-              customFilter,
-              dynamicFilter: updatedDynamicFilter,
-            }
 
-          return {
-            ...c,
-            sort: defaultFilter.sort,
-            pagination: { ...defaultFilter.pagination, current: 1 },
-            customFilter,
-            dynamicFilter: updatedDynamicFilter,
-          }
-        })
-      } else updateReqData(defaultFilter)
+        updateDynamicFilter(updatedDynamicFilter)
+      } else updateDynamicFilter()
     },
-    [filterConfigs, defaultFilter],
+    [filterConfigs],
   )
 
   useEffect(() => {
-    if (filterValues) organizeFilterData(filterValues)
+    if (filterValues) {
+      if (!isInitialFetchRef.current) organizeFilterData(filterValues)
+      else isInitialFetchRef.current = false
+    }
   }, [filterValues])
 
   const formContext = useMemo(
-    () => ({ formRef: dataListHeaderFormRef, formName, formId, formDataId, linkedParentsDataIds: parentInfo?.dataIds }),
-    [dataListHeaderFormRef, formName, formId, formDataId, parentInfo],
+    () => ({ formRef: filtersFormRef, formName, formId, formDataId, linkedParentsDataIds: parentInfo?.dataIds }),
+    [filtersFormRef, formName, formId, formDataId, parentInfo],
   )
 
   return (
-    <Form layout="vertical" form={dataListHeaderFormRef}>
-      {layout.map((row, rowIdx) => (
+    <Form layout="vertical" form={filtersFormRef}>
+      {dndLayout.map((row, rowIdx) => (
         <LayoutRendererRow
           key={rowIdx}
           rowData={row}
           titleComponent={titleComponent}
           formContext={formContext}
-          elements={layoutConfig.elements}
+          elements={layoutConfig?.elements ?? {}}
           renderButton={(btnProps, conditions) => (
             <DynamicFormButtonRender
               displayStateProps={{ btnProps, conditions, stateToPass: { parentInfo } }}
@@ -149,20 +135,19 @@ export default function FormDataListHeaderComponent({
 }
 
 type IFormDataListHeaderComponent = {
-  layoutConfig: IDndLayoutStructure_Responsive
-  updateReqData: React.Dispatch<React.SetStateAction<IReqDataConfig | undefined>>
+  layoutConfig?: IDndLayoutStructure_Responsive
+  updateDynamicFilter: (match?: string) => void
   titleComponent?: ReactNode
-  defaultFilter: IReqDataConfig
   startLoading: () => void
-} & ICustomFunctionCall &
-  IDataListHeaderContext
+  headerLayoutContext: IDataListHeaderLayoutContext
+}
 
 const handleFilterValues = async (
   config: IFilterConfig,
   value: any,
   contextValues: { userId?: string | number; isDateFilter?: boolean },
 ) => {
-  if (config.type === FilterConfigTypeEnum.NoFilter) return DEFAULT_NO_FILTER
+  if (config.type === FilterConfigTypeEnum.NoFilter) return null
   const { userId } = contextValues
 
   if ((config as IFilterCustom).isDateFilter) value = dayjs(value as Date).toISOString()