form-craft-package 1.7.9-dev.1 → 1.7.9-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.7.9-dev.1",
+  "version": "1.7.9-dev.2",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -14,6 +14,7 @@
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-signature-canvas": "^1.0.7",
     "ajv": "^8.17.1",
+    "bson": "^4.7.2",
     "pdfmake": "^0.2.18",
     "qs": "^6.14.0",
     "react-google-recaptcha": "^3.1.0",

package/src/components/common/custom-hooks/use-find-dynamic-form.hook.ts

@@ -1,27 +1,46 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useParams } from 'react-router-dom'
 import { IDynamicForm } from '../../../types'
 import { LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 
 export const useFindDynamiForm = () => {
   const { formName } = useParams<{ formName: string }>()
-  const [foundItem, setFoundItem] = useState<IDynamicForm | undefined | null>(undefined)
+  const [foundItem, setFoundItem] = useState<IDynamicForm | null | undefined>(undefined)
 
   useEffect(() => {
     if (!formName) return
 
     try {
-      const storedData = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
-      if (storedData) {
-        const parsedData: IDynamicForm[] = JSON.parse(storedData)
-        const item = parsedData.find((entry) => entry.name.split(' ').join('-').toLocaleLowerCase() === formName)
-
-        setFoundItem(item ?? null)
+      const stored = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
+      if (stored) {
+        const list: IDynamicForm[] = JSON.parse(stored)
+        const match = list.find((entry) => entry.name.split(' ').join('-').toLowerCase() === formName)
+        setFoundItem(match ?? null)
+      } else {
+        setFoundItem(null)
       }
-    } catch (error) {
-      console.error('Error reading or parsing localStorage data', error)
+    } catch (err) {
+      console.error('Error reading or parsing DynamicForms:', err)
+      setFoundItem(null)
     }
   }, [formName])
 
-  return foundItem?.name?.split(' ').join('-').toLowerCase() === formName ? foundItem : undefined
+  const getFormById = useCallback((id: number): IDynamicForm | undefined => {
+    if (!id) return
+
+    try {
+      const stored = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
+      if (!stored) return undefined
+
+      const list: IDynamicForm[] = JSON.parse(stored)
+      return list.find((entry) => entry.id === id)
+    } catch (err) {
+      console.error('Error in getFormById reading DynamicForms:', err)
+      return
+    }
+  }, [])
+
+  const formInfo = foundItem && foundItem.name.split(' ').join('-').toLowerCase() === formName ? foundItem : undefined
+
+  return { formInfo, getFormById }
 }

package/src/components/common/custom-hooks/use-many-to-many-connector.hook.ts

@@ -0,0 +1,30 @@
+import { useEffect, useMemo } from 'react'
+import { useBreadcrumb } from './use-breadcrumb.hook'
+import { FormInstance } from 'antd'
+import { getForeignKeysFromBreadcrumb } from '../../../functions/forms/breadcrumb-handlers'
+
+export const useManyToManyConnector = (formRef: FormInstance) => {
+  const { breadcrumbs } = useBreadcrumb()
+
+  const prevPageBreadcrumb = useMemo(() => {
+    if (breadcrumbs.length > 2) {
+      const prevPageBreadcrumb = breadcrumbs[breadcrumbs.length - 2]
+      const { formDataId, formJoins, manyToManyRelInfo } = prevPageBreadcrumb
+      if (!formDataId || !formJoins || !Array.isArray(formJoins) || !manyToManyRelInfo) return
+
+      return prevPageBreadcrumb
+    }
+
+    return
+  }, [breadcrumbs])
+
+  useEffect(() => {
+    if (!prevPageBreadcrumb) return
+
+    const { foreignKey, foreignKey2 } = getForeignKeysFromBreadcrumb(prevPageBreadcrumb)
+
+    if (foreignKey && foreignKey2) formRef.setFieldValue(foreignKey, prevPageBreadcrumb.formDataId)
+  }, [prevPageBreadcrumb, formRef])
+
+  return
+}

package/src/components/common/not-found.tsx

@@ -0,0 +1,21 @@
+import { Result } from 'antd'
+import { Button_FillerPortal } from './button'
+import { useNavigate } from 'react-router-dom'
+
+export default function NotFound() {
+  const navigate = useNavigate()
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle="Sorry, the page you visited does not exist."
+      extra={
+        <div className="grid justify-center grid-cols-[200px]">
+          <Button_FillerPortal primary onClick={() => navigate('/d')}>
+            Go Back
+          </Button_FillerPortal>
+        </div>
+      }
+    />
+  )
+}

package/src/components/companies/1-authenticated/change-password.tsx

@@ -43,7 +43,7 @@ export const ChangePassword = () => {
   }
 
   // Validate that the confirm password matches the new password
-  const validateConfirmPassword = (_, value: string) => {
+  const validateConfirmPassword = (_: any, value: string) => {
     if (!value || value === '') {
       return Promise.resolve()
     }

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

@@ -4,9 +4,9 @@ import FormDataListSkeleton_Table from '../../common/loading-skeletons/table'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListTableComponent, { IDataListLayoutConfig } from './table'
 import { IFormJoin, IFormDataListData, IFormDataListConfig } from '../../../types'
+import { getProjectionKey } from '../../../functions'
 
 function FormDataListComponent({
-  formName,
   formId,
   userId,
   companyKey,
@@ -23,7 +23,7 @@ function FormDataListComponent({
   const defaultFilterReqDataRef = useRef<IDataListReqData | undefined>(undefined)
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
-  const headerLayoutContext = { formId, userId, attachmentBaseUrl, formName, companyKey, onCustomFunctionCall }
+  const headerLayoutContext = { formId, userId, attachmentBaseUrl, companyKey, onCustomFunctionCall }
 
   useEffect(() => {
     setLoadings({ initial: true, data: true })
@@ -45,7 +45,7 @@ function FormDataListComponent({
 
         if (Array.isArray(columns))
           dataProjectRef.current = columns.reduce(
-            (curr, c) => (c.key ? { ...curr, [c.key.replace(/\./g, '_')]: `$${c.key}` } : curr),
+            (curr, c) => (c.key ? { ...curr, [getProjectionKey(c.key)]: `$${c.key}` } : curr),
             {},
           )
         if (Array.isArray(formJoins)) formJoinsRef.current = formJoins
@@ -69,7 +69,7 @@ function FormDataListComponent({
           configForFormId: formId,
           dataListConfig: {
             ...dataListConfig,
-            columns: columns.map((c) => (c.key ? { ...c, key: c.key.replace(/\./g, '_') } : c)),
+            columns: columns.map((c) => (c.key ? { ...c, key: getProjectionKey(c.key) } : c)),
           },
         })
       }
@@ -127,7 +127,6 @@ function FormDataListComponent({
 export { FormDataListComponent }
 
 type IFormDataListComponent = {
-  formName?: string
   baseServerUrl?: string
   companyKey?: string
   formId?: number

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

@@ -1,7 +1,7 @@
 import { Form } from 'antd'
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
-import { extractFiltersFromLayout } from '../../../functions/forms'
+import { extractFiltersFromLayout, getIdEqualsQuery } from '../../../functions/forms'
 import { DeviceBreakpointEnum, FilterConfigTypeEnum, FormPreservedItemKeys } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import { VALUE_REPLACEMENT_PLACEHOLDER } from '../../../constants'
@@ -26,7 +26,7 @@ export default function FormDataListHeaderComponent({
 }: IFormDataListHeaderComponent) {
   const [filtersFormRef] = Form.useForm()
   const [filterConfigs, setFilterConfigs] = useState<IFilterNested>({})
-  const { userId, formId, formName, parentFormJoins, formDataId, onCustomFunctionCall } = headerLayoutContext
+  const { userId, formId, parentFormJoins, formDataId, manyToManyRelInfo, onCustomFunctionCall } = headerLayoutContext
   const isInitialFetchRef = useRef(true)
 
   const currentBreakpoint = useGetCurrentBreakpoint()
@@ -108,8 +108,8 @@ export default function FormDataListHeaderComponent({
   }, [filterValues])
 
   const formContext = useMemo(
-    () => ({ formRef: filtersFormRef, formName, formId, formDataId, parentFormJoins }),
-    [filtersFormRef, formName, formId, formDataId, parentFormJoins],
+    () => ({ formRef: filtersFormRef, formId, formDataId, parentFormJoins, manyToManyRelInfo }),
+    [filtersFormRef, formId, formDataId, parentFormJoins, manyToManyRelInfo],
   )
 
   return (
@@ -172,7 +172,7 @@ const handleFilterValues = async (
 
     return {
       customFilter: {},
-      dynamicFilter: JSON.stringify({ $expr: { $eq: [`$${lastRel.formId}._id`, { $toObjectId: value }] } }),
+      dynamicFilter: JSON.stringify(getIdEqualsQuery(lastRel.formId, value)),
     }
   }
 }

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import FormDataListHeaderComponent from './table-header'
 import useDebounced from '../../common/custom-hooks/use-debounce.hook'
-import { FormInstance, Table } from 'antd'
+import { Table } from 'antd'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import { SorterResult } from 'antd/es/table/interface'
 import { generateTableColumns } from '../../../functions/forms'
@@ -9,8 +9,9 @@ import { useLocation } from 'react-router-dom'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import { DeviceBreakpointEnum, FormDataListViewTypeEnum, MongoDbSortOrderEnum } from '../../../enums'
 import { IDataListReqData } from '.'
-import { IFormDataListConfig, IFormDataListData, IFormDataTableColumn, IFormJoin } from '../../../types'
+import { IFormDataListConfig, IFormDataListData, IFormDataTableColumn } from '../../../types'
 import { processOptions } from '../../../functions/forms/get-data-list-option-value'
+import { IFormContext } from '../layout-renderer/1-row'
 
 export default function FormDataListTableComponent({
   layoutsConfigs,
@@ -33,7 +34,9 @@ export default function FormDataListTableComponent({
   )
   const [otherConfigs, setOtherConfigs] = useState<Partial<IFormDataListConfig> | undefined>(undefined)
 
-  const { formId } = headerLayoutContext
+  useEffect(() => {
+    setFilterReqData(undefined)
+  }, [location.pathname])
 
   useEffect(() => {
     if (Array.isArray(layoutsConfigs?.dataListConfig.columns)) {
@@ -64,7 +67,7 @@ export default function FormDataListTableComponent({
     async (layoutsConfigs: IDataListLayoutConfig) => {
       const { configForFormId, dataListConfig } = layoutsConfigs!
 
-      if (configForFormId !== formId) {
+      if (configForFormId !== headerLayoutContext.formId) {
         setLoading(false)
         return
       }
@@ -82,7 +85,7 @@ export default function FormDataListTableComponent({
 
       setLoading(false)
     },
-    [formId, headerLayoutContext, layoutsConfigs],
+    [headerLayoutContext, layoutsConfigs],
   )
 
   useEffect(() => {
@@ -170,14 +173,9 @@ type IFormDataListTableComponent = {
 
 export type IDataListHeaderLayoutContext = {
   userId?: string | number
-  formId?: number
   attachmentBaseUrl?: string
-  formDataId?: string
-  formName?: string
-  parentFormJoins?: IFormJoin[]
-  formRef?: FormInstance
-  companyKey?: string
-} & ICustomFunctionCall
+} & ICustomFunctionCall &
+  IFormContext
 
 export type IDataListLayoutConfig =
   | {

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

@@ -2,17 +2,17 @@ import { Form } from 'antd'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { IDndLayoutStructure_Responsive, IFormSchema } from '../../../types'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
-import { parseJSON } from '../../../functions/forms/json-handlers'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListSkeleton_Details from '../../common/loading-skeletons/details'
 import { useLocation } from 'react-router-dom'
-import { extractDateFields, queryParamsToObject } from '../../../functions/forms'
-import { DeviceBreakpointEnum, FormPreservedItemKeys } from '../../../enums'
-import dayjs from 'dayjs'
+import { fromMongoDbExtendedJSON, isValidMongoDbId, queryParamsToObject } from '../../../functions/forms'
+import { DeviceBreakpointEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import client from '../../../api/client'
 import { useBreadcrumb } from '../../common/custom-hooks/use-breadcrumb.hook'
+import NotFound from '../../common/not-found'
+import { useManyToManyConnector } from '../../common/custom-hooks/use-many-to-many-connector.hook'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -30,13 +30,28 @@ export default function FormDataDetailsComponent({
   const [formDataRef] = Form.useForm()
   const [loadings, setLoadings] = useState({ layout: true, data: true })
   const [layoutConfig, setLayoutConfig] = useState<IDndLayoutStructure_Responsive>({ elements: {}, layouts: {} })
+  const [isNotFound, setIsNotFound] = useState(false)
+  useManyToManyConnector(formDataRef)
 
   const currentBreakpoint = useGetCurrentBreakpoint()
 
+  useEffect(() => {
+    // for public forms, setting the details form into localStorage, so that buttons work correctly
+    if (isPublic)
+      localStorage.setItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms, JSON.stringify([{ id: formId, name: formName }]))
+  }, [isPublic, formId, formName])
+
+  useEffect(() => {
+    if (!formDataId || !isValidMongoDbId(formDataId)) setIsNotFound(true)
+  }, [formDataId])
+
   useEffect(() => {
     const isNewDataPage = formDataId === NEW_FORM_DATA_IDENTIFIER
     const splittedFormName = formName?.split(' ')?.[0] ?? ''
-    push({ label: isNewDataPage ? `New ${splittedFormName.toLowerCase()}` : `${splittedFormName} details`, href: location.pathname })
+    push({
+      label: isNewDataPage ? `New ${splittedFormName.toLowerCase()}` : `${splittedFormName} details`,
+      href: location.pathname,
+    })
   }, [location.pathname, formName, formDataId])
 
   const layout = useMemo(
@@ -69,8 +84,9 @@ export default function FormDataDetailsComponent({
   }, [formDataRef, baseServerUrl, isPublic])
 
   const fetchFormData = useCallback(
-    (dFormId?: number, dateFields: string[] = []) => {
-      if (formDataId === NEW_FORM_DATA_IDENTIFIER) setLoadings((c) => ({ ...c, data: false }))
+    (dFormId?: number) => {
+      if (formDataId === NEW_FORM_DATA_IDENTIFIER || !isValidMongoDbId(formDataId))
+        setLoadings((c) => ({ ...c, data: false }))
       else {
         if (!dFormId) {
           console.error('Form ID is required to fetch form data')
@@ -81,18 +97,14 @@ export default function FormDataDetailsComponent({
           .then((res) => {
             if (res.status === 200) {
               const { data: jsonData, ...restFormData } = res.data
-              let parsedFormData = parseJSON(jsonData)
+              let parsedFormData = JSON.parse(jsonData)
               if (parsedFormData) {
-                const fieldsValue: { [key: string]: any } = parsedFormData
-                if (dateFields.length > 0)
-                  Object.entries(parsedFormData).map(([field, value]) => {
-                    if (dateFields.includes(field) && value) fieldsValue[field] = dayjs(value)
-                    else fieldsValue[field] = value
-                  })
+                const fieldsValue: { [key: string]: any } = fromMongoDbExtendedJSON(parsedFormData)
                 formDataRef.setFieldsValue({ ...restFormData, ...fieldsValue })
+
+                console.log('FORM DATA FETCH (PARSED)', fieldsValue)
               }
-              console.log('FORM DATA FETCH (PARSED)', parsedFormData)
-            }
+            } else setIsNotFound(true)
           })
           .finally(() => setLoadings((c) => ({ ...c, data: false })))
       }
@@ -107,7 +119,7 @@ export default function FormDataDetailsComponent({
         .get(endpoint)
         .then((res) => {
           if (res.status === 200) {
-            const parsedData: IFormSchema | null = parseJSON(res.data.data)
+            const parsedData: IFormSchema | null = JSON.parse(res.data.data)
             if (parsedData) {
               console.log('FORM LAYOUT FETCH (PARSED)', parsedData)
               const { layouts: rawLayouts, elements } = parsedData.detailsConfig
@@ -119,11 +131,8 @@ export default function FormDataDetailsComponent({
                     parsedData.generateConfig.submissionPdf,
                   )
                 setLoadings((c) => ({ ...c, data: false }))
-              } else {
-                const dateFields = extractDateFields(elements)
+              } else fetchFormData(formId)
 
-                fetchFormData(formId, dateFields)
-              }
               setLayoutConfig({ elements, layouts: rawLayouts })
             }
           }
@@ -133,30 +142,34 @@ export default function FormDataDetailsComponent({
   }, [formId, formKey, isPublic, formDataRef, fetchFormData])
 
   const formContext = useMemo(
-    () => ({ formId, formKey, formDataId, formRef: formDataRef, formName, companyKey }),
-    [formDataId, formDataRef, formName, formId, formKey, companyKey],
+    () => ({ formId, formKey, formDataId, formRef: formDataRef, companyKey }),
+    [formDataId, formDataRef, formId, formKey, companyKey],
   )
 
   if (loadings.layout || loadings.data) return <FormDataListSkeleton_Details />
 
+  if (isNotFound) return <NotFound />
+
   return (
-    <Form layout="vertical" name="dynamic_form_data_form" form={formDataRef}>
-      {layout.map((row, rowIdx) => (
-        <LayoutRendererRow
-          key={rowIdx}
-          rowData={row}
-          formContext={formContext}
-          elements={layoutConfig.elements}
-          renderButton={(btnProps, conditions) => (
-            <DynamicFormButtonRender
-              displayStateProps={{ btnProps, conditions, defaultDisabled: true }}
-              formContext={formContext}
-              onCustomFunctionCall={onCustomFunctionCall}
-            />
-          )}
-        />
-      ))}
-    </Form>
+    <>
+      <Form layout="vertical" name="dynamic_form_data_form" form={formDataRef}>
+        {layout.map((row, rowIdx) => (
+          <LayoutRendererRow
+            key={rowIdx}
+            rowData={row}
+            formContext={formContext}
+            elements={layoutConfig.elements}
+            renderButton={(btnProps, conditions) => (
+              <DynamicFormButtonRender
+                displayStateProps={{ btnProps, conditions, defaultDisabled: true }}
+                formContext={formContext}
+                onCustomFunctionCall={onCustomFunctionCall}
+              />
+            )}
+          />
+        ))}
+      </Form>
+    </>
   )
 }
 

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

@@ -99,8 +99,9 @@ export interface IFormContext {
   formDataId?: string
   formRef?: FormInstance
   companyKey?: string
-  formName?: string
+  formName?: string // only passed in DynamicButton component
   formKey?: string
   formId?: number
   parentFormJoins?: IFormJoin[]
+  manyToManyRelInfo?: { middleFormId: number; currentFormId: number; otherFormId: number } | null
 }