form-craft-package 1.1.12 → 1.1.13

package/package.json

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

package/src/components/common/custom-hooks/use-debounce.hook.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+
+export function useDebounced<T>(initialValue: T, delay: number): [T, (value: T | ((prevValue: T) => T)) => void, T] {
+  const [value, setValue] = useState(initialValue)
+  const [debouncedValue, setDebouncedValue] = useState(initialValue)
+
+  const updateValue = (value: T | ((prevValue: T) => T)) => {
+    if (typeof value === 'function') {
+      setValue((prev) => (value as (prevValue: T) => T)(prev))
+    } else {
+      setValue(value)
+    }
+  }
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+
+  return [value, updateValue, debouncedValue]
+}
+
+export default useDebounced

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

@@ -1,6 +1,6 @@
 import { Form } from 'antd'
 import { ReactNode, useEffect, useState } from 'react'
-import { defaultReqDataConfig, IReqDataConfig } from '.'
+import { DEFAULT_NO_FILTER, DEFAULT_NO_SORTER, IReqDataConfig } from '.'
 import dayjs from 'dayjs'
 import { IFilterConfig, IFilterNested, IFilterSimple, IFormLayoutRow } from '../../../types'
 import { extractFiltersFromLayout } from '../../../functions'
@@ -14,13 +14,15 @@ export default function FormDataListHeaderComponent({
   userId,
   formId,
   titleComponent,
+  defaultFilter,
   setFilterReqData,
   onCustomFunctionCall,
 }: IFormDataListHeaderComponent) {
   const [dataListHeaderFormRef] = Form.useForm()
-  const [appliedFilters, setAppliedFilters] = useState<IFilterSimple | undefined>(undefined)
   const [filterConfigs, setFilterConfigs] = useState<IFilterNested>({})
 
+  const filterValues = Form.useWatch([], dataListHeaderFormRef)
+
   useEffect(() => {
     if (dataListHeaderFormRef) dataListHeaderFormRef.setFieldValue('formId', formId)
   }, [dataListHeaderFormRef, formId])
@@ -30,58 +32,47 @@ export default function FormDataListHeaderComponent({
   }, [layout])
 
   useEffect(() => {
-    // needs to be called when there is a change in form values
-    if (!appliedFilters) return
-
-    let dynamicFilters = {}
-    let customFilters = {}
-
-    Object.values(appliedFilters).forEach((config) => {
-      if (config.type === FilterConfigTypeEnum.NoFilter) return
+    if (filterValues) {
+      const filteredValues = Object.entries(filterValues).filter(([field, value]) => !!value && !!filterConfigs[field])
+      console.log({ filterValues })
+      console.log({ filteredValues })
 
-      if (config.config) dynamicFilters = config.config
+      if (filteredValues.length > 0) {
+        const filtersToApply = filteredValues.map(([field, value]) => {
+          const config = filterConfigs[field]
 
-      if (config.type === FilterConfigTypeEnum.ByAuthUser) customFilters = { ...customFilters, createdById: userId }
-    })
-
-    setFilterReqData((c) =>
-      c ? { ...c, customFilter: customFilters, dynamicFilter: JSON.stringify(dynamicFilters) } : defaultReqDataConfig,
-    )
-  }, [appliedFilters])
+          if ('type' in config) return handleFilterValues(config as IFilterConfig, value, userId)
+          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 (
-    <Form
-      layout="vertical"
-      form={dataListHeaderFormRef}
-      onValuesChange={(changedValues) => {
-        Object.entries(changedValues).forEach(([key, value]) => {
-          const config = filterConfigs[key]
-          if (!config) {
-            console.warn(`Key '${key}' does not have a filter config`)
-            return
+            return handleFilterValues(eachConfig as IFilterConfig, value, userId)
           }
+        })
 
-          if ('type' in config) {
-            if (typeof value !== 'string') value = dayjs(value as Date).toISOString()
-
-            if (config.config) {
-              let stringifiedFilter = JSON.stringify(config.config)
-              stringifiedFilter = stringifiedFilter.replaceAll(VALUE_REPLACEMENT_PLACEHOLDER, value as string)
-
-              config.config = JSON.parse(stringifiedFilter)
+        const { customFilter, dynamicFilter } = filtersToApply.reduce(
+          (curr, next) => {
+            if (!next) return curr
+            const parsedDFilter = JSON.parse(next.dynamicFilter)
+            return {
+              customFilter: { ...curr.customFilter, ...next.customFilter },
+              dynamicFilter: { ...curr.dynamicFilter, ...parsedDFilter },
             }
+          },
+          { customFilter: {}, dynamicFilter: {} },
+        )
 
-            setAppliedFilters((c) => ({ ...c, [key]: config as IFilterConfig }))
-          } else {
-            // nested applies to radio button, where each option has its own filter, but only one needs to apply
-            const nestedConfig = config as IFilterSimple
-            if (typeof value === 'string' && value in nestedConfig)
-              setAppliedFilters((c) => ({ ...c, [key]: nestedConfig[value as string] as IFilterConfig }))
-            else console.warn(`Invalid key '${value}' for nestedConfig`)
-          }
+        setFilterReqData((c) => {
+          if (!c) return { ...DEFAULT_NO_SORTER, customFilter, dynamicFilter: JSON.stringify(dynamicFilter) }
+          return { ...c, customFilter, dynamicFilter: JSON.stringify(dynamicFilter) }
         })
-      }}
-    >
+      } else setFilterReqData(defaultFilter)
+    }
+  }, [filterValues, filterConfigs])
+
+  return (
+    <Form layout="vertical" form={dataListHeaderFormRef}>
       {layout.map((row, rowIdx) => (
         <LayoutRendererRow
           key={rowIdx}
@@ -108,4 +99,25 @@ type IFormDataListHeaderComponent = {
   titleComponent?: ReactNode
   formId?: number
   userId?: string | number
+  defaultFilter: IReqDataConfig
 } & ICustomFunctionCall
+
+const handleFilterValues = (config: IFilterConfig, value: any, userId?: string | number) => {
+  if (config.type === FilterConfigTypeEnum.NoFilter) return DEFAULT_NO_FILTER
+
+  const isDate = dayjs(value as Date).isValid()
+  if (isDate) value = dayjs(value as Date).toISOString()
+
+  let customFilters = {}
+  if (config.type === FilterConfigTypeEnum.ByAuthUser) customFilters = { createdById: userId }
+
+  console.log(config.config)
+  if (config.config) {
+    let stringifiedFilter = JSON.stringify(config.config)
+    stringifiedFilter = stringifiedFilter
+      .replaceAll(VALUE_REPLACEMENT_PLACEHOLDER, (value as string).trim())
+      .replaceAll('@', '$')
+
+    return { customFilter: customFilters, dynamicFilter: stringifiedFilter }
+  }
+}

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import client from '../../../functions/axios-handler'
 import { parseJSON } from '../../../functions/json-handlers'
 import { generateTableColumns } from '../../../functions'
@@ -9,6 +9,7 @@ import { Table } from 'antd'
 import { IFormData, IFormDataListConfig, IFormLayoutRow, IFormSchema, ITableColumn } from '../../../types'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import { SorterResult } from 'antd/es/table/interface'
+import useDebounced from '../../common/custom-hooks/use-debounce.hook'
 
 function FormDataListComponent({
   formId,
@@ -19,11 +20,12 @@ function FormDataListComponent({
 }: IFormDataListComponent) {
   const [loadings, setLoadings] = useState({ schema: true, data: true })
   const [tableColumns, setTableColumns] = useState<ITableColumn[]>([])
-  const [filterReqData, setFilterReqData] = useState<IReqDataConfig | undefined>()
+  const [_, setFilterReqData, debouncedFilterReqData] = useDebounced<IReqDataConfig | undefined>(undefined, 500)
   const [paginationConfig, setPaginationConfig] = useState<IPagination | undefined>()
   const [dataListConfig, setDataListConfig] = useState<Partial<IFormDataListConfig> | undefined>(undefined)
   const [formData, setFormData] = useState<{ data: IFormData[]; total: number }>({ data: [], total: 0 })
   const [headerLayout, setHeaderLayout] = useState<IFormLayoutRow[]>([])
+  const defaultFilterRef = useRef({ ...DEFAULT_NO_FILTER, ...DEFAULT_NO_SORTER })
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
 
@@ -49,17 +51,15 @@ function FormDataListComponent({
               setHeaderLayout(header.layout)
               setDataListConfig(restConfigs)
 
-              if (!defaultFilter || defaultFilter.type === FilterConfigTypeEnum.NoFilter)
-                setFilterReqData(defaultReqDataConfig)
-              else
-                setFilterReqData({
+              if (defaultFilter && defaultFilter.type !== FilterConfigTypeEnum.NoFilter)
+                defaultFilterRef.current = {
                   customFilter: defaultFilter.type === FilterConfigTypeEnum.ByAuthUser ? { createdById: userId } : {},
                   dynamicFilter: defaultFilter.config
                     ? // The operators are stored using @, and here it replaces @ with $. Otherwise, MongoDB's JSON-to-BSON conversion driver may detect certain operators, especially $regex, and automatically modify them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
                       JSON.stringify(defaultFilter.config).replaceAll('@', '$')
                     : JSON.stringify({}),
                   sort: defaultSorter ? { [defaultSorter.field]: defaultSorter.order } : {},
-                })
+                }
             }
           }
         })
@@ -69,9 +69,8 @@ function FormDataListComponent({
 
   const fetchFormDataList = useCallback(
     (dynamicFormId: number) => {
-      setLoadings((c) => ({ ...c, data: true }))
-
-      if (!filterReqData) return
+      if (!debouncedFilterReqData) return
+      console.log({ debouncedFilterReqData })
 
       if (!paginationConfig) {
         setLoadings((c) => ({ ...c, data: false }))
@@ -80,7 +79,7 @@ function FormDataListComponent({
 
       client
         .post(`/api/formdata/list/${dynamicFormId}`, {
-          ...filterReqData,
+          ...debouncedFilterReqData,
           pagination: { number: paginationConfig.current, size: paginationConfig.pageSize },
         })
         .then((res) => {
@@ -89,7 +88,7 @@ function FormDataListComponent({
         })
         .finally(() => setLoadings((c) => ({ ...c, data: false })))
     },
-    [filterReqData, paginationConfig],
+    [debouncedFilterReqData, paginationConfig],
   )
 
   useEffect(() => {
@@ -102,7 +101,11 @@ function FormDataListComponent({
     <div>
       <FormDataListHeaderComponent
         layout={headerLayout}
-        setFilterReqData={setFilterReqData}
+        setFilterReqData={(req) => {
+          setLoadings((c) => ({ ...c, data: true }))
+          setFilterReqData(req)
+        }}
+        defaultFilter={defaultFilterRef.current}
         userId={userId}
         formId={formId}
         titleComponent={
@@ -122,6 +125,7 @@ function FormDataListComponent({
           loading={loadings.data}
           onChange={(cbPagination, _, sorter: SorterResult<IFormData> | SorterResult<IFormData>[]) => {
             console.log('ON TABLE CHANGE', cbPagination, sorter)
+            setLoadings((c) => ({ ...c, data: true }))
             const { total, ...restCbPagination } = cbPagination
             setPaginationConfig(restCbPagination as IPagination)
 
@@ -139,7 +143,7 @@ function FormDataListComponent({
                           }
                         : {},
                     }
-                  : defaultReqDataConfig,
+                  : defaultFilterRef.current,
               )
           }}
         />
@@ -155,9 +159,11 @@ export interface IReqDataConfig {
   sort: object
 }
 
-export const defaultReqDataConfig = {
+export const DEFAULT_NO_FILTER = {
   customFilter: {},
   dynamicFilter: JSON.stringify({}),
+}
+export const DEFAULT_NO_SORTER = {
   sort: {},
 }