form-craft-package 1.7.2 → 1.7.3

package/package.json

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

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

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import client from '../../../functions/axios-handler'
 import { parseJSON } from '../../../functions/forms/json-handlers'
 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 from './table'
-import { IFormDataListConfig, IFormSchema, IFormJoin, IDndLayoutElement, IFormDataListData } from '../../../types'
+import FormDataListTableComponent, { IReqDataConfig } from './table'
 
 function FormDataListComponent({
   formName,
@@ -15,12 +15,14 @@ function FormDataListComponent({
   onCustomFunctionCall,
 }: IFormDataListComponent) {
   const [loading, setLoading] = useState(true)
-  const [dataList, setDataList] = useState<{ data: IFormDataListData[]; total: number }>({ data: [], total: 0 })
-  const [listLayoutConfig, setListLayoutConfig] = useState<IDataListLayoutConfig>()
-
-  const dataProjectRef = useRef<{ [key: string]: string }>({})
-  const formJoinsRef = useRef<IFormJoin[]>([])
-  const defaultFilterReqDataRef = useRef<IDataListReqData | undefined>(undefined)
+  const [formData, setFormData] = useState<{ data: IFormData[]; total: number }>({ data: [], total: 0 })
+  const [dataListConfig, setDataListConfig] = useState<
+    | {
+        dataListConfig: IFormDataListConfig & { configForFormId: number }
+        detailsLayoutConfig: IDndLayoutStructure_Responsive
+      }
+    | undefined
+  >()
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
   const dataListHeaderContext = { formId, userId, attachmentBaseUrl, formName, companyKey }
@@ -31,115 +33,50 @@ function FormDataListComponent({
         if (res.status === 200) {
           const parsedData: IFormSchema | null = parseJSON(res.data.data)
           if (parsedData) {
-            console.log(parsedData.dataListConfig)
-            const { columns, joins, 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(joins)) formJoinsRef.current = joins
-
-            const defaultReqData: IDataListReqData = {}
-            if (!pagination?.hasNoPagination) {
-              defaultReqData.skip = 0
-              defaultReqData.size = pagination?.defaultPageSize ?? 10
-            }
-            if (defaultSorter) defaultReqData.sort = JSON.stringify({ [defaultSorter.field]: defaultSorter.order })
-            if (defaultFilter?.config)
-              // 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 })
+            setDataListConfig({
+              dataListConfig: { ...parsedData.dataListConfig, configForFormId: formId },
+              detailsLayoutConfig: {
+                elements: parsedData.detailsConfig.elements,
+                layouts: parsedData.detailsConfig.layouts,
+              },
+            })
           }
         }
       })
     }
   }, [formId])
 
-  const fetchFormDataList = useCallback(
-    (reqData?: IDataListReqData) => {
-      if (!reqData || !formId) return
-
-      if (!reqData.skip && defaultFilterReqDataRef.current?.skip) reqData.skip = defaultFilterReqDataRef.current.skip
-      if (!reqData.size && defaultFilterReqDataRef.current?.size) reqData.size = defaultFilterReqDataRef.current.size
-      if (!reqData.sort && defaultFilterReqDataRef.current?.sort) reqData.sort = defaultFilterReqDataRef.current.sort
-      if (!reqData.match && defaultFilterReqDataRef.current?.match)
-        reqData.match = defaultFilterReqDataRef.current.match
-
-      console.log({ reqData })
+  const fetchFormDataList = useCallback((reqData: IReqDataConfig, dynamicFormId?: number) => {
+    if (!reqData || !dynamicFormId) return
 
-      client
-        .post(`/api/report/data/${formId}`, {
-          joins: formJoinsRef.current,
-          ...reqData,
-          project: JSON.stringify(dataProjectRef.current),
-        })
-        .then((res) => {
-          if (res.status === 200) setDataList({ data: res.data.data, total: res.data.totalRecords })
-        })
-        .finally(() => setLoading(false))
-    },
-    [formId],
-  )
-
-  // useEffect(() => {
-  //   client.post('/api/report/data/86', {
-  //     joins: [
-  //       // {
-  //       //   formId: 85,
-  //       //   foreignField: '_id',
-  //       //   localField: 'Data.dId',
-  //       //   alias: '85',
-  //       // },
-  //       // {
-  //       //   formId: 84,
-  //       //   foreignField: '_id',
-  //       //   localField: '85.Data.cId',
-  //       //   alias: '84',
-  //       // },
-  //       // {
-  //       //   formId: 83,
-  //       //   foreignField: '_id',
-  //       //   localField: '84.Data.bId',
-  //       //   alias: '83',
-  //       // },
-  //       // {
-  //       //   formId: 82,
-  //       //   foreignField: '_id',
-  //       //   localField: '83.Data.aId',
-  //       //   alias: '82',
-  //       // },
-  //     ],
-  //     // match: JSON.stringify({ $expr: { $eq: ['$82._id', { $toObjectId: '67b7c0a5e46d36ac56ea6548' }] } }),
-  //     sort: JSON.stringify({
-  //       '82.Data.field1': MongoDbSortOrderEnum.Descending,
-  //       'Data.field1': MongoDbSortOrderEnum.Ascending,
-  //     }),
-  //     project: JSON.stringify({
-  //       Data_field1: '$Data.field1',
-  //       '85_Data_field1': '$85.Data.field1',
-  //       '84_Data_field1': '$84.Data.field1',
-  //       '83_Data_field1': '$83.Data.field1',
-  //       '82_Data_field1': '$82.Data.field1',
-  //     }),
-  //     skip: 0, // current
-  //     limit: 10, // pageSize
-  //   })
-  // }, [])
+    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) }
+            }),
+          })
+      })
+      .finally(() => setLoading(false))
+  }, [])
 
   return (
     <FormDataListTableComponent
-      layoutsConfigs={listLayoutConfig}
-      dataList={dataList}
+      {...dataListConfig}
+      dataList={formData}
       updateDataList={(reqData) => {
-        fetchFormDataList(reqData)
+        fetchFormDataList(reqData, formId)
       }}
       parentLoading={loading}
       loadingBlock={<FormDataListSkeleton_Table />}
@@ -158,17 +95,3 @@ type IFormDataListComponent = {
   formId?: number
   userId: string | number
 } & ICustomFunctionCall
-
-export interface IDataListReqData {
-  skip?: number
-  size?: number
-  sort?: string
-  match?: string
-}
-
-export type IDataListLayoutConfig =
-  | {
-      configForFormId: number
-      dataListConfig: IFormDataListConfig
-    }
-  | undefined

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

@@ -4,7 +4,6 @@ import {
   IDndLayoutStructure_Responsive,
   IFormData,
   IFormDataListConfig,
-  IFormDataListData,
   IFormDataTableColumn,
 } from '../../../types'
 import FormDataListHeaderComponent from './table-header'
@@ -21,10 +20,10 @@ import {
   FormDataListViewTypeEnum,
   MongoDbSortOrderEnum,
 } from '../../../enums'
-import { IDataListReqData, IDataListLayoutConfig } from '.'
 
 export default function FormDataListTableComponent({
-  layoutsConfigs,
+  dataListConfig,
+  detailsLayoutConfig,
   parentLoading,
   dataList,
   loadingBlock,
@@ -64,15 +63,16 @@ export default function FormDataListTableComponent({
     setIsHandlingSchema(true)
   }, [location.pathname])
 
-  // useEffect(() => {
-  //   if (debouncedFilterReqData) updateDataList(debouncedFilterReqData)
-  // }, [debouncedFilterReqData])
+  useEffect(() => {
+    if (debouncedFilterReqData) updateDataList(debouncedFilterReqData)
+  }, [debouncedFilterReqData])
 
   const handleDataListConfig = useCallback(
-    async (layoutsConfigs: IDataListLayoutConfig) => {
-      const { configForFormId, dataListConfig } = layoutsConfigs!
-
-      if (configForFormId !== formId) return
+    async (
+      config: IFormDataListConfig & { configForFormId?: number },
+      layoutConfig?: IDndLayoutStructure_Responsive,
+    ) => {
+      if (config.configForFormId && config.configForFormId !== formId) return
 
       const {
         columns = [],
@@ -81,44 +81,42 @@ export default function FormDataListTableComponent({
         defaultFilter,
         defaultSorter,
         ...restConfigs
-      } = dataListConfig
+      } = config
 
-      console.log({ columns })
-
-      // TODO:
-      // const elementsWithOptions_key = columns.filter((op) => op.key && op.isSelectOption).map((op) => op.key)
+      const elementsWithOptions_key = columns
+        .filter((op) => op.isSelectOption)
+        .map((op) => (op.key.includes('Data.') ? op.key.replace('Data.', '') : op.key))
 
       let optionKeyValuePair = {}
-      // if (elementsWithOptions_key.length > 0)
-      //   optionKeyValuePair = await extractElementsOptions(elements ?? {}, elementsWithOptions_key)
+      if (elementsWithOptions_key.length > 0)
+        optionKeyValuePair = await extractElementsOptions(layoutConfig?.elements ?? {}, elementsWithOptions_key)
 
       setTableColumns(generateTableColumns(columns, optionKeyValuePair, dataListHeaderContext))
       setHeaderLayoutConfig({
         layouts: header.layouts,
-        elements: header.elements,
-        // elements: appendOptionsFromDetailsLayout(header.elements, layoutConfig?.elements),
+        elements: appendOptionsFromDetailsLayout(header.elements, layoutConfig?.elements),
       })
       setOtherConfigs({ ...restConfigs, hasNoPagination: pagination?.hasNoPagination ?? false })
 
-      // if (defaultFilter && defaultFilter.type !== FilterConfigTypeEnum.NoFilter)
-      //   defaultFilterRef.current = {
-      //     ...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 was detecting certain operators, especially $regex, and automatically modified them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
-      //         JSON.stringify(defaultFilter.config).replaceAll('@', '$')
-      //       : JSON.stringify({}),
-      //   }
-      // defaultFilterRef.current = {
-      //   ...defaultFilterRef.current,
-      //   sort: defaultSorter ? { [defaultSorter.field]: defaultSorter.order } : {},
-      //   pagination: {
-      //     current: 1,
-      //     pageSize: pagination?.defaultPageSize ?? 10,
-      //     showSizeChanger: pagination?.showSizeChanger ?? false,
-      //     pageSizeOptions: pagination?.pageSizeOptions ?? [],
-      //   },
-      // }
+      if (defaultFilter && defaultFilter.type !== FilterConfigTypeEnum.NoFilter)
+        defaultFilterRef.current = {
+          ...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 was detecting certain operators, especially $regex, and automatically modified them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
+              JSON.stringify(defaultFilter.config).replaceAll('@', '$')
+            : JSON.stringify({}),
+        }
+      defaultFilterRef.current = {
+        ...defaultFilterRef.current,
+        sort: defaultSorter ? { [defaultSorter.field]: defaultSorter.order } : {},
+        pagination: {
+          current: 1,
+          pageSize: pagination?.defaultPageSize ?? 10,
+          showSizeChanger: pagination?.showSizeChanger ?? false,
+          pageSizeOptions: pagination?.pageSizeOptions ?? [],
+        },
+      }
 
       setIsHandlingSchema(false)
       isFinishedHandlingRef.current = true
@@ -127,8 +125,8 @@ export default function FormDataListTableComponent({
   )
 
   useEffect(() => {
-    if (layoutsConfigs) handleDataListConfig(layoutsConfigs)
-  }, [layoutsConfigs])
+    if (dataListConfig) handleDataListConfig(dataListConfig, detailsLayoutConfig)
+  }, [dataListConfig, detailsLayoutConfig])
 
   const tableColumnsFiltered = useMemo(
     () => tableColumns.filter((op) => !Array.isArray(op.hideScreens) || !op.hideScreens.includes(currentBreakpoint)),
@@ -158,35 +156,39 @@ export default function FormDataListTableComponent({
         onCustomFunctionCall={onCustomFunctionCall}
         {...dataListHeaderContext}
       />
-      {(!otherConfigs || otherConfigs.listType === FormDataListViewTypeEnum.Table) && (
-        <Table<IFormDataListData>
+      {dataListConfig?.listType === FormDataListViewTypeEnum.Table && (
+        <Table<IFormData>
           dataSource={dataList.data}
           columns={tableColumnsFiltered}
-          rowKey={(record) => record.id} // TODO: change this to _id
-          pagination={otherConfigs?.hasNoPagination ? false : { ...filterReqData?.pagination, total: dataList.total }}
+          rowKey={(record) => record.id}
+          pagination={
+            otherConfigs?.hasNoPagination
+              ? false
+              : { ...defaultFilterRef.current.pagination, ...filterReqData?.pagination, total: dataList.total }
+          }
           loading={parentLoading}
-          // onChange={(cbPagination, _, sorter: SorterResult<IFormData> | SorterResult<IFormData>[]) => {
-          //   console.log('ON TABLE CHANGE', cbPagination, sorter)
-          //   setParentLoading(true)
-
-          //   setFilterReqData((c) => {
-          //     if (!c) return c
-
-          //     return {
-          //       ...c,
-          //       sort:
-          //         sorter && (sorter as SorterResult<IFormData>).field
-          //           ? {
-          //               [(sorter as SorterResult<IFormData>).field as string]:
-          //                 (sorter as SorterResult<IFormData>).order === 'ascend'
-          //                   ? MongoDbSortOrderEnum.Ascending
-          //                   : MongoDbSortOrderEnum.Descending,
-          //             }
-          //           : {},
-          //       pagination: cbPagination as IPagination,
-          //     }
-          //   })
-          // }}
+          onChange={(cbPagination, _, sorter: SorterResult<IFormData> | SorterResult<IFormData>[]) => {
+            console.log('ON TABLE CHANGE', cbPagination, sorter)
+            setParentLoading(true)
+
+            setFilterReqData((c) => {
+              if (!c) return c
+
+              return {
+                ...c,
+                sort:
+                  sorter && (sorter as SorterResult<IFormData>).field
+                    ? {
+                        [(sorter as SorterResult<IFormData>).field as string]:
+                          (sorter as SorterResult<IFormData>).order === 'ascend'
+                            ? MongoDbSortOrderEnum.Ascending
+                            : MongoDbSortOrderEnum.Descending,
+                      }
+                    : {},
+                pagination: cbPagination as IPagination,
+              }
+            })
+          }}
         />
       )}
     </>
@@ -194,12 +196,13 @@ export default function FormDataListTableComponent({
 }
 
 type IFormDataListTableComponent = {
-  layoutsConfigs: IDataListLayoutConfig
-  dataList: { data: IFormDataListData[]; total: number }
+  dataListConfig?: IFormDataListConfig & { configForFormId?: number }
+  detailsLayoutConfig?: IDndLayoutStructure_Responsive
+  dataList: { data: IFormData[]; total: number }
   parentLoading: boolean
   loadingBlock?: JSX.Element
   setParentLoading: React.Dispatch<React.SetStateAction<boolean>>
-  updateDataList: (reqData: IDataListReqData) => void
+  updateDataList: (reqData: IReqDataConfig) => void
 } & ICustomFunctionCall &
   IDataListHeaderContext
 

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

@@ -4,56 +4,63 @@ import LayoutRendererCol from '../2-col'
 import { memo, ReactElement, ReactNode, useMemo, useState } from 'react'
 import { LayoutRowConditionalHeaderRenderer } from './header-render'
 import { LayoutRowRepeatableRenderer } from './repeatable-render'
-import { IButtonElementProps, IDndLayoutElement, IFormLayoutElementConditions, IDndLayoutRow } from '../../../../types'
+import {
+  IButtonElementProps,
+  IDndLayoutElement,
+  IFormLayoutElementConditions,
+  IDndLayoutRow,
+} from '../../../../types'
 
 export const LayoutRendererRow = memo(
   ({ basePath = [], rowData, titleComponent, formContext, elements, renderButton }: ILayoutRendererRow) => {
     const [hiddenElementCount, setHiddenElementCount] = useState(0)
 
     const styleConfig = useMemo(() => {
-      if (!rowData.style) return {}
+      if (!rowData.style || !rowData.style) return {}
       return kebabCaseToCamelCase(rowData.style)
     }, [rowData.style])
 
     return (
-      <LayoutRowConditionalHeaderRenderer header={rowData.props?.header}>
-        <LayoutRowRepeatableRenderer basePath={basePath} repeatingSection={rowData.props?.repeatingSection}>
-          {(formListItemProps) => {
-            const style: { [key: string]: any } = {
-              ...styleConfig,
-              ...getFlexContainerStyle(rowData.display),
-            }
-            if (hiddenElementCount === rowData.children.length) style.display = 'none'
+      <>
+        <LayoutRowConditionalHeaderRenderer header={rowData.props?.header}>
+          <LayoutRowRepeatableRenderer basePath={basePath} repeatingSection={rowData.props?.repeatingSection}>
+            {(formListItemProps) => {
+              const style: { [key: string]: any } = {
+                ...styleConfig,
+                ...getFlexContainerStyle(rowData.display),
+              }
+              if (hiddenElementCount === rowData.children.length) style.display = 'none'
 
-            return (
-              <div style={{ ...style, maxWidth: '100vw', overflowX: 'auto' }}>
-                {rowData.children.map((col, colIdx) => (
-                  <LayoutRendererCol
-                    key={colIdx}
-                    basePath={formListItemProps ? formListItemProps.updatedBasePath : basePath}
-                    colData={col}
-                    titleComponent={titleComponent}
-                    elements={elements}
-                    formContext={formContext}
-                    colStyle={getColumnStyle(colIdx, rowData.display)}
-                    renderButton={renderButton}
-                    hideRow={(isHidden) =>
-                      setHiddenElementCount((c) => {
-                        if (isHidden) return c + 1
-                        else {
-                          if (c - 1 < 0) return 0
-                          return c - 1
-                        }
-                      })
-                    }
-                  />
-                ))}
-                {formListItemProps?.removeButton}
-              </div>
-            )
-          }}
-        </LayoutRowRepeatableRenderer>
-      </LayoutRowConditionalHeaderRenderer>
+              return (
+                <div style={style}>
+                  {rowData.children.map((col, colIdx) => (
+                    <LayoutRendererCol
+                      key={colIdx}
+                      basePath={formListItemProps ? formListItemProps.updatedBasePath : basePath}
+                      colData={col}
+                      titleComponent={titleComponent}
+                      elements={elements}
+                      formContext={formContext}
+                      colStyle={getColumnStyle(colIdx, rowData.display)}
+                      renderButton={renderButton}
+                      hideRow={(isHidden) =>
+                        setHiddenElementCount((c) => {
+                          if (isHidden) return c + 1
+                          else {
+                            if (c - 1 < 0) return 0
+                            return c - 1
+                          }
+                        })
+                      }
+                    />
+                  ))}
+                  {formListItemProps?.removeButton}
+                </div>
+              )
+            }}
+          </LayoutRowRepeatableRenderer>
+        </LayoutRowConditionalHeaderRenderer>
+      </>
     )
   },
 )

package/src/enums/index.ts

@@ -8,7 +8,6 @@ export enum ElementTypeEnum {
   NumberInput = 'NumberInput',
   CurrencyInput = 'CurrencyInput',
   Select = 'Select',
-  TreeSelect = 'TreeSelect',
   Radio = 'Radio',
   Checkbox = 'Checkbox',
   CheckboxGroup = 'CheckboxGroup',

package/src/types/forms/index.ts

@@ -20,7 +20,6 @@ export interface IFormDataListConfig {
   listType: FormDataListViewTypeEnum
   columns: IFormDataListColumn[]
   header: IDndLayoutStructure_Responsive
-  joins?: IFormJoin[]
   pagination?: IFormDataListPagination
   title?: string
   showCount?: boolean
@@ -54,6 +53,3 @@ export interface IFormJoin {
   localField: string
   alias: string
 }
-export interface IFormDataListData {
-  [key: string]: any
-}