form-craft-package 1.5.4 → 1.5.6

package/package.json

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

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

@@ -6,7 +6,7 @@ import { FormInstance, Table } from 'antd'
 import { FilterConfigTypeEnum, FormDataListViewTypeEnum, MongoDbSortOrderEnum } from '../../../enums'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import { SorterResult } from 'antd/es/table/interface'
-import { extractElementsOptions, generateTableColumns } from '../../../functions'
+import { appendOptionsFromDetailsLayout, extractElementsOptions, generateTableColumns } from '../../../functions'
 import { useLocation } from 'react-router-dom'
 
 export default function FormDataListTableComponent({
@@ -69,7 +69,7 @@ export default function FormDataListTableComponent({
         optionKeyValuePair = await extractElementsOptions(layout, elementsWithOptions_key)
 
       setTableColumns(generateTableColumns(elements, optionKeyValuePair, { attachmentBaseUrl, formName, formRef }))
-      setHeaderLayout(header.layout)
+      setHeaderLayout(appendOptionsFromDetailsLayout(header.layout, layout))
       setOtherConfigs({ ...restConfigs, hasNoPagination: pagination?.hasNoPagination ?? false })
 
       if (defaultFilter && defaultFilter.type !== FilterConfigTypeEnum.NoFilter)

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

@@ -16,7 +16,6 @@ export const LayoutRendererRow = memo(
     formContext,
     renderButton,
   }: ILayoutRendererRow) => {
-    const { formRef } = formContext
     const [hiddenElementCount, setHiddenElementCount] = useState(0)
 
     const styleConfig = useMemo(() => {

package/src/components/form/layout-renderer/3-element/1-dynamic-button/index.tsx

@@ -1,8 +1,8 @@
 import { useNavigate } from 'react-router-dom'
 import { useNotification } from '../../../../common/custom-hooks'
 import { useCheckElementConditions } from '../../../../common/custom-hooks/use-check-element-conditions.hook'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { ButtonActionCategoryEnum, FormLoadingModalTypeEnum, FormPreservedItemKeys } from '../../../../../enums'
+import { memo, useCallback, useMemo, useState } from 'react'
+import { ButtonActionCategoryEnum, FormLoadingModalTypeEnum } from '../../../../../enums'
 import { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
 import { constructDynamicFormHref } from '../../../../../functions'
 import { useDuplicateDataAction } from './use-duplicate-data.hook'
@@ -17,7 +17,6 @@ import { Button_FillerPortal } from '../../../../common/button'
 import { getButtonRenderProps } from '../../../../../functions/get-element-props'
 import WarningIcon from '../../../../common/warning-icon'
 import { IButtonNavigateState, IDataRender_ButtonProps, IFormLayoutElementConditions } from '../../../../../types'
-import { FormInstance } from 'antd'
 import FormDataLoadingIndicatorModal from '../../../../modals/form-data-loading.modal'
 import { IFormContext } from '../../1-row'
 
@@ -152,7 +151,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
 
         break
 
-      case ButtonActionCategoryEnum.ReturnToDataList:
+      case ButtonActionCategoryEnum.ReturnOneBack:
         navigate(-1)
         setLoading(false)
         break

package/src/components/form/layout-renderer/3-element/10-currency.tsx

@@ -0,0 +1,52 @@
+import { LayoutRenderer_FieldElement } from './2-field-element'
+import { IFormContext } from '../1-row'
+import { ICurrencyInputElement } from '../../../../types'
+import { IElementBaseProps } from '.'
+import { getElementGeneralizedProps } from '../../../../functions/get-element-props'
+import { Form } from 'antd'
+import { useEffect, useMemo } from 'react'
+import { evaluateValue } from '../../../../functions/evaluate-value'
+
+export default function LayoutRenderer_CurrencyField({
+  formContext,
+  formItem,
+  elementData,
+  isDisabled,
+}: ILayoutRenderer_CurrencyField) {
+  const { formRef } = formContext
+  const props = getElementGeneralizedProps(elementData.props)
+
+  const formValues = Form.useWatch([], { form: formRef, preserve: true })
+
+  const evaluatedValue = useMemo(() => {
+    if (!props.evaluationConfig) return -1
+
+    if (formValues) return evaluateValue(props.evaluationConfig, formValues)
+
+    return 0
+  }, [formValues, props])
+
+  useEffect(() => {
+    if (evaluatedValue > -1 && isDisabled) formRef?.setFieldValue(formItem.path, evaluatedValue)
+  }, [evaluatedValue, isDisabled, formItem.path])
+
+  return (
+    <LayoutRenderer_FieldElement
+      fields={[
+        {
+          ...props,
+          type: elementData.elementType,
+          name: formItem.name,
+          validations: elementData.validations,
+          disabled: isDisabled,
+        },
+      ]}
+      formRef={formRef}
+    />
+  )
+}
+
+type ILayoutRenderer_CurrencyField = {
+  formContext: IFormContext
+  elementData: ICurrencyInputElement
+} & IElementBaseProps

package/src/components/form/layout-renderer/3-element/3-read-field-data.tsx

@@ -2,16 +2,10 @@ import { Form } from 'antd'
 import { renderData } from '../../../../functions'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { useMemo } from 'react'
-import { DataRenderTypeEnum, EvaluationOperatorsEnum, EvaluationValueTypeEnum } from '../../../../enums'
-import { IElementBaseProps } from '.'
-import {
-  IEvaluationCondition,
-  IEvaluationConfig,
-  IEvaluationOnField,
-  IEvaluationOnList,
-  IReadFieldDataElementProps,
-} from '../../../../types'
+import { DataRenderTypeEnum } from '../../../../enums'
+import { IReadFieldDataElementProps } from '../../../../types'
 import { IFormContext } from '../1-row'
+import { evaluateValue } from '../../../../functions/evaluate-value'
 
 export default function LayoutRenderer_ReadFieldData({
   formContext,
@@ -34,7 +28,7 @@ export default function LayoutRenderer_ReadFieldData({
   const evaluatedValue = useMemo(() => {
     if (elementProps.isValueEvaluated && formValues) {
       const config = elementProps.evaluationConfig
-      return evaluateConfig(config, formValues)
+      return evaluateValue(config, formValues)
     }
     return 0
   }, [formValues, elementProps])
@@ -63,101 +57,3 @@ type ILayoutRenderer_ReadFieldData = {
   elementProps: IReadFieldDataElementProps
   style?: { [key: string]: any }
 }
-
-const evaluateConfig = (config: IEvaluationConfig, data: { [key: string]: any }): number => {
-  // Helper to check an evaluation’s condition (if any)
-  function checkConditions(
-    dataToCheckConditions: { [key: string]: any },
-    conditions?: IEvaluationCondition[],
-  ): boolean {
-    if (!conditions || conditions.length === 0) return true
-    // As stated, at most one condition is supported.
-    const condition = conditions[0]
-
-    // Currently only the Equal operator is supported.
-    return dataToCheckConditions[condition.field] === condition.value
-  }
-
-  // Helper to combine values using the operator.
-  function applyOperator(operator: EvaluationOperatorsEnum, values: number[]): number {
-    if (values.length === 0) return 0
-    let result = values[0]
-    for (let i = 1; i < values.length; i++) {
-      const value = values[i]
-      switch (operator) {
-        case EvaluationOperatorsEnum.Add:
-          result += value
-          break
-        case EvaluationOperatorsEnum.Subtract:
-          result -= value
-          break
-        case EvaluationOperatorsEnum.Multiply:
-          result *= value
-          break
-        case EvaluationOperatorsEnum.Divide:
-          result /= value
-          break
-        default:
-          throw new Error(`Unsupported operator: ${operator}`)
-      }
-    }
-    return result
-  }
-
-  // Object to store results from each evaluation by its id.
-  const evaluationResults: { [id: string]: number } = {}
-
-  // Process each evaluation in the config.
-  for (const evaluation of config.evaluations) {
-    // Evaluation based on fields (IEvaluationOnField)
-    if (evaluation.type === EvaluationValueTypeEnum.Fields) {
-      // If a condition exists and fails, treat the result as 0.
-      if (!checkConditions(data, evaluation.conditions)) {
-        evaluationResults[evaluation.id] = 0
-        continue
-      }
-
-      const evalFields = (evaluation as IEvaluationOnField).fields
-      // For each field, take the value from data (using default if missing)
-      const values = evalFields.map((fieldConfig) => {
-        const value = data[fieldConfig.field]
-        return value !== undefined && value !== null ? value : fieldConfig.defaultValue ?? 0
-      })
-      evaluationResults[evaluation.id] = applyOperator(evaluation.operator, values)
-    }
-    // Evaluation based on a list (IEvaluationOnList)
-    else if (evaluation.type === EvaluationValueTypeEnum.List) {
-      const listData = data[(evaluation as IEvaluationOnList).list]
-      if (Array.isArray(listData)) {
-        const values = listData.map((item, itemIdx) => {
-          const listItemData = listData[itemIdx]
-          if (!checkConditions(listItemData, evaluation.conditions)) return 0
-
-          const fieldValue = item[(evaluation as IEvaluationOnList).listField.field]
-
-          return fieldValue !== undefined && fieldValue !== null
-            ? fieldValue
-            : (evaluation as IEvaluationOnList).listField.defaultValue ?? 0
-        })
-        evaluationResults[evaluation.id] = applyOperator(evaluation.operator, values)
-      } else {
-        evaluationResults[evaluation.id] = 0
-      }
-    }
-  }
-
-  // Determine and return the final result.
-  // If evaluationGroups is provided, use the last one as the final evaluation.
-  if (config.evaluationGroups && config.evaluationGroups.length > 0) {
-    const finalGroup = config.evaluationGroups[config.evaluationGroups.length - 1]
-    // Retrieve results for the evaluation IDs in the group (defaulting to 0 if missing)
-    const groupValues = finalGroup.evaluationIds.map((id) => evaluationResults[id] ?? 0)
-    return applyOperator(finalGroup.operator, groupValues)
-  }
-  // Otherwise, return the result from the last evaluation.
-  else if (config.evaluations.length > 0) {
-    const lastEvaluation = config.evaluations[config.evaluations.length - 1]
-    return evaluationResults[lastEvaluation.id]
-  }
-  return 0
-}

package/src/components/form/layout-renderer/3-element/5-re-captcha.tsx

@@ -1,8 +1,6 @@
-import { Form } from 'antd'
 import { useCallback, useState } from 'react'
 import ReCAPTCHA from 'react-google-recaptcha'
 import client from '../../../../functions/axios-handler'
-import { FormPreservedItemKeys } from '../../../../enums'
 import { IElementBaseProps } from '.'
 import { IReCaptchaElementProps } from '../../../../types'
 import { IFormContext } from '../1-row'

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

@@ -1,4 +1,4 @@
-import { Form, FormInstance, Input, Upload } from 'antd'
+import { Form, Input, Upload } from 'antd'
 import { useCallback, useState } from 'react'
 import { Button_FillerPortal } from '../../../common/button'
 import client from '../../../../functions/axios-handler'

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

@@ -1,4 +1,3 @@
-import { FormInstance } from 'antd'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { IFilterByLinkedFormRelPath, IFormLayoutFieldOption, IRadioElement, ISelectElement } from '../../../../types'
 import { FieldElementOptionSourceEnum } from '../../../../enums'

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

@@ -168,12 +168,6 @@ export default function LayoutRenderer_LoadFormData({
     }
 
     if (!hasInitialFetched.current) {
-      // client.get(`/api/form/${form.relationshipConfig.formId}`).then((res) => {
-      //   if (res.status === 200) {
-      //     const { relationships: allRelationships, detailsConfig = { layout: [] } } = JSON.parse(res.data.data)
-      //   }
-      // c})
-
       fetchFormDetails(
         form.id,
         form.relationshipConfig.formId,

package/src/components/form/layout-renderer/3-element/index.tsx

@@ -1,4 +1,4 @@
-import { Divider, FormInstance } from 'antd'
+import { Divider } from 'antd'
 import { memo, ReactElement, ReactNode, useEffect, useMemo } from 'react'
 import { IDataRender_ButtonProps, IFormLayoutElement, IReadFieldDataElementProps } from '../../../../types'
 import { getElementGeneralizedProps } from '../../../../functions/get-element-props'
@@ -15,6 +15,7 @@ import { IFormLayoutElementConditions } from '../../../../types/layout-elements/
 import LayoutRenderer_FieldsWithOptions from './8-fields-with-options'
 import LayoutRenderer_LoadFormData from './9-form-data-render'
 import { IFormContext } from '../1-row'
+import LayoutRenderer_CurrencyField from './10-currency'
 
 function LayoutRendererElementWrapper({
   hideElement,
@@ -141,6 +142,9 @@ function LayoutRendererElement({
     case ElementTypeEnum.LoadFormData:
       return <LayoutRenderer_LoadFormData elementProps={props} formContext={formContext} {...elementBaseProps} />
 
+    case ElementTypeEnum.CurrencyInput:
+      return <LayoutRenderer_CurrencyField elementData={elementData} formContext={formContext} {...elementBaseProps} />
+
     default:
       return (
         <LayoutRenderer_FieldElement

package/src/enums.ts

@@ -126,6 +126,7 @@ export enum ButtonElementSizeEnum {
 }
 export enum FieldElementOptionSourceEnum {
   Static = 'Static',
+  ReadFromDetails = 'ReadFromDetails',
   DynamicForm = 'DynamicForm',
   LinkedForm = 'LinkedForm',
 }
@@ -140,7 +141,7 @@ export enum ButtonActionCategoryEnum {
   DuplicateData = 'duplicate-data',
   SaveDataChanges = 'save-data-changes',
   PublishDataChanges = 'publish-data-changes',
-  ReturnToDataList = 'return-to-data-list',
+  ReturnOneBack = 'return-one-back',
   ViewDataVersions = 'view-data-versions',
   GenerateReport = 'generate-report',
   CustomFunction = 'custom-function',

package/src/functions/evaluate-value.ts

@@ -0,0 +1,100 @@
+import { EvaluationOperatorsEnum, EvaluationValueTypeEnum } from '../enums'
+import { IEvaluationCondition, IEvaluationConfig, IEvaluationOnField, IEvaluationOnList } from '../types'
+
+export const evaluateValue = (config: IEvaluationConfig, data: { [key: string]: any }): number => {
+  // Helper to check an evaluation’s condition (if any)
+  function checkConditions(
+    dataToCheckConditions: { [key: string]: any },
+    conditions?: IEvaluationCondition[],
+  ): boolean {
+    if (!conditions || conditions.length === 0) return true
+    // As stated, at most one condition is supported.
+    const condition = conditions[0]
+
+    // Currently only the Equal operator is supported.
+    return dataToCheckConditions[condition.field] === condition.value
+  }
+
+  // Helper to combine values using the operator.
+  function applyOperator(operator: EvaluationOperatorsEnum, values: number[]): number {
+    if (values.length === 0) return 0
+    let result = values[0]
+    for (let i = 1; i < values.length; i++) {
+      const value = values[i]
+      switch (operator) {
+        case EvaluationOperatorsEnum.Add:
+          result += value
+          break
+        case EvaluationOperatorsEnum.Subtract:
+          result -= value
+          break
+        case EvaluationOperatorsEnum.Multiply:
+          result *= value
+          break
+        case EvaluationOperatorsEnum.Divide:
+          result /= value
+          break
+        default:
+          throw new Error(`Unsupported operator: ${operator}`)
+      }
+    }
+    return result
+  }
+
+  // Object to store results from each evaluation by its id.
+  const evaluationResults: { [id: string]: number } = {}
+
+  // Process each evaluation in the config.
+  for (const evaluation of config.evaluations) {
+    // Evaluation based on fields (IEvaluationOnField)
+    if (evaluation.type === EvaluationValueTypeEnum.Fields) {
+      // If a condition exists and fails, treat the result as 0.
+      if (!checkConditions(data, evaluation.conditions)) {
+        evaluationResults[evaluation.id] = 0
+        continue
+      }
+
+      const evalFields = (evaluation as IEvaluationOnField).fields
+      // For each field, take the value from data (using default if missing)
+      const values = evalFields.map((fieldConfig) => {
+        const value = data[fieldConfig.field]
+        return value !== undefined && value !== null ? value : fieldConfig.defaultValue ?? 0
+      })
+      evaluationResults[evaluation.id] = applyOperator(evaluation.operator, values)
+    }
+    // Evaluation based on a list (IEvaluationOnList)
+    else if (evaluation.type === EvaluationValueTypeEnum.List) {
+      const listData = data[(evaluation as IEvaluationOnList).list]
+      if (Array.isArray(listData)) {
+        const values = listData.map((item, itemIdx) => {
+          const listItemData = listData[itemIdx]
+          if (!checkConditions(listItemData, evaluation.conditions)) return 0
+
+          const fieldValue = item[(evaluation as IEvaluationOnList).listField.field]
+
+          return fieldValue !== undefined && fieldValue !== null
+            ? fieldValue
+            : (evaluation as IEvaluationOnList).listField.defaultValue ?? 0
+        })
+        evaluationResults[evaluation.id] = applyOperator(evaluation.operator, values)
+      } else {
+        evaluationResults[evaluation.id] = 0
+      }
+    }
+  }
+
+  // Determine and return the final result.
+  // If evaluationGroups is provided, use the last one as the final evaluation.
+  if (config.evaluationGroups && config.evaluationGroups.length > 0) {
+    const finalGroup = config.evaluationGroups[config.evaluationGroups.length - 1]
+    // Retrieve results for the evaluation IDs in the group (defaulting to 0 if missing)
+    const groupValues = finalGroup.evaluationIds.map((id) => evaluationResults[id] ?? 0)
+    return applyOperator(finalGroup.operator, groupValues)
+  }
+  // Otherwise, return the result from the last evaluation.
+  else if (config.evaluations.length > 0) {
+    const lastEvaluation = config.evaluations[config.evaluations.length - 1]
+    return evaluationResults[lastEvaluation.id]
+  }
+  return 0
+}

package/src/functions/index.ts

@@ -13,6 +13,7 @@ import {
   IOptionSourceConstant,
   IOptionSourceForm,
   IFormData,
+  IOptionSourceReadFromDetails,
 } from '../types'
 import client from './axios-handler'
 export * from './create-form-rules'
@@ -116,6 +117,71 @@ export const extractDateFields = (layout: IFormLayoutRow[]): string[] => {
   return dateFieldKeys.filter((s) => !!s)
 }
 
+export const appendOptionsFromDetailsLayout = (
+  headerLayout: IFormLayoutRow[],
+  detailsLayout: IFormLayoutRow[],
+): IFormLayoutRow[] => {
+  function findNodeByKey(
+    node: IFormLayoutRow | IFormLayoutCol | IFormLayoutElement,
+    key: string,
+  ): ISelectElement | IRadioElement | null {
+    // Only check for the key if the nodeType is not "Row" or "Col"
+    if (node.nodeType !== FormLayoutNodeEnum.Row && node.nodeType !== FormLayoutNodeEnum.Col) {
+      if (node.elementType === ElementTypeEnum.Select || node.elementType === ElementTypeEnum.Radio) return node
+      return null
+    }
+
+    // If the node has children, traverse them recursively
+    if (node.children) {
+      for (const child of node.children) {
+        const found = findNodeByKey(child, key)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  function traverseAndSearch(
+    node: IFormLayoutRow | IFormLayoutCol | IFormLayoutElement,
+  ): IFormLayoutRow | IFormLayoutCol | IFormLayoutElement {
+    if (node.nodeType === FormLayoutNodeEnum.Row || node.nodeType === FormLayoutNodeEnum.Col)
+      return {
+        ...node,
+        children: node.children.map((nodeChild) => traverseAndSearch(nodeChild)),
+      } as IFormLayoutRow | IFormLayoutCol
+
+    if (![ElementTypeEnum.Select, ElementTypeEnum.Radio].includes(node.elementType)) return node as IFormLayoutElement
+
+    const optionSource = (node as ISelectElement | IRadioElement).props.optionSource
+    if (!optionSource || optionSource.type !== FieldElementOptionSourceEnum.ReadFromDetails) return node as IFormLayoutElement
+
+    const fieldKey = ((node as ISelectElement | IRadioElement).props.optionSource as IOptionSourceReadFromDetails)
+      ?.field
+
+    let field: ISelectElement | IRadioElement | null = null
+    detailsLayout.forEach((row) => {
+      field = findNodeByKey(row, fieldKey)
+    })
+
+    const options =
+      field && [ElementTypeEnum.Select, ElementTypeEnum.Radio].includes((field as IFormLayoutElement).elementType)
+        ? ((field as ISelectElement | IRadioElement).props.optionSource as IOptionSourceConstant).options ?? []
+        : []
+
+    return {
+      ...node,
+      props: node.props
+        ? {
+            ...node.props,
+            optionSource: { type: FieldElementOptionSourceEnum.Static, options },
+          }
+        : {},
+    } as ISelectElement | IRadioElement
+  }
+
+  return headerLayout.map((node) => traverseAndSearch(node)) as IFormLayoutRow[]
+}
+
 /** ---------------------------------------------------------------------------------------------------------  */
 
 export const getFlexContainerStyle = (device: ResponsivenessDeviceEnum, responsiveness?: IFlexConfig) =>

package/src/types/layout-elements/field-option-source.ts

@@ -1,7 +1,11 @@
 import { IFilterConfig } from '..'
 import { FieldElementOptionSourceEnum } from '../../enums'
 
-export type IFieldElementOptionSource = IOptionSourceConstant | IOptionSourceForm
+export type IFieldElementOptionSource =
+  | IOptionSourceConstant
+  | IOptionSourceForm
+  | IOptionSourceReadFromDetails
+  | IOptionSourceLinkedForm
 
 export interface IOptionSourceConstant {
   type: FieldElementOptionSourceEnum.Static
@@ -23,3 +27,12 @@ export interface IOptionSourceFormInfo {
   formName: string
   field: string
 }
+
+export interface IOptionSourceReadFromDetails {
+  type: FieldElementOptionSourceEnum.ReadFromDetails
+  field: string
+}
+
+export interface IOptionSourceLinkedForm {
+  type: FieldElementOptionSourceEnum.LinkedForm
+}

package/src/types/layout-elements/index.ts

@@ -101,6 +101,7 @@ export interface ICurrencyInputElementProps {
   description?: string
   country?: CountryEnum
   decimalPoint?: number
+  evaluationConfig?: IEvaluationConfig
 }
 
 /** -------------------------------------------------------------------------------------------- */