form-craft-package 1.4.0 → 1.4.2

package/package.json

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

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

@@ -15,7 +15,10 @@ export default function CustomColorField({ formRef, name, isPreview, disabled }:
       className={`flex items-center gap-2 border bg-white rounded-lg w-full p-1 ${
         isPreview || disabled ? 'cursor-not-allowed' : 'cursor-pointer'
       }`}
-      onClick={() => colorInputRef.current?.click()}
+      onClick={() => {
+        colorInputRef.current?.click()
+        colorInputRef.current?.focus()
+      }}
     >
       <input
         type="color"

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

@@ -0,0 +1,68 @@
+import { InputNumber } from 'antd'
+import { useMemo, useRef } from 'react'
+import { CountryEnum } from '../../enums'
+import { INTERNATIONALIZATION_DATA } from '../../constants'
+
+export default function CurrencyField({
+  country = CountryEnum.US,
+  decimalPoint = 0,
+  ...restProps
+}: ICurrencyField) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const currencySymbol = useMemo(() => {
+    const { locale, currency } = INTERNATIONALIZATION_DATA[country]
+
+    const formatter = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    })
+    const parts = formatter.formatToParts(0)
+    const currencyPart = parts.find((part) => part.type === 'currency')
+    return currencyPart?.value ?? '$'
+  }, [country])
+
+  const handleFocus = () => {
+    const input = inputRef.current
+    if (input) {
+      const decimal = input.value ? parseInt(input.value.replace(/\p{Sc}\s?|(,*)/gu, '')) : 0
+
+      setTimeout(() => {
+        const decimalPos = input.value.indexOf('.')
+        if (decimalPos !== -1) {
+          input.setSelectionRange(decimal === 0 ? decimalPos - 1 : decimalPos, decimalPos) // if the whole number is 0, then it highlights the 0 -> so that it can replace right away
+        }
+      }, 10)
+    }
+  }
+
+  return (
+    <InputNumber
+      {...restProps}
+      ref={inputRef}
+      onFocus={handleFocus}
+      precision={decimalPoint}
+      formatter={(value) => {
+        if (!value) return `${currencySymbol}${parseInt('0').toFixed(decimalPoint)}`
+
+        return typeof value === 'string'
+          ? currencySymbol +
+              parseFloat(value)
+                .toFixed(decimalPoint)
+                .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+          : `${currencySymbol}${parseInt('0').toFixed(decimalPoint)}`
+      }}
+      parser={(value) => (value ? parseFloat(value.replace(/\p{Sc}\s?|(,*)/gu, '')) : 0)}
+      className="w-full right-align"
+    />
+  )
+}
+
+interface ICurrencyField {
+  country?: CountryEnum
+  decimalPoint?: number
+  placeholder?: string
+  disabled?: boolean
+}

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

@@ -15,6 +15,7 @@ export const useFindDynamiForm = () => {
       if (storedData) {
         const parsedData: IDynamicForm[] = JSON.parse(storedData)
         const item = parsedData.find((entry) => entry.name.split(' ').join('-').toLocaleLowerCase() === formName)
+
         setFoundItem(item ?? null)
       }
     } catch (error) {
@@ -22,5 +23,5 @@ export const useFindDynamiForm = () => {
     }
   }, [formName])
 
-  return foundItem
+  return foundItem?.name?.split(' ').join('-').toLowerCase() === formName ? foundItem : undefined
 }

package/src/components/common/loading-skeletons/table.tsx

@@ -3,7 +3,7 @@ import SkeletonBlock from '.'
 export default function FormDataListSkeleton_Table({ small = false }: { small?: boolean }) {
   return (
     <>
-      <div className={`bg-white flex items-center justify-between rounded-md ${small ? 'p-2' : 'mb-2 p-3'}`}>
+      <div className={`bg-white flex items-center justify-between rounded-md mb-2 ${small ? 'p-2' : 'p-3'}`}>
         <SkeletonBlock width="200px" height={small ? 20 : undefined} />
         <div className="flex items-center gap-2">
           <SkeletonBlock width="150px" height={small ? 20 : undefined} />

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

@@ -7,6 +7,7 @@ import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-butt
 import FormDataListTableComponent, { IReqDataConfig } from './table'
 
 function FormDataListComponent({
+  formName,
   formId,
   userId,
   companyKey,
@@ -24,7 +25,7 @@ function FormDataListComponent({
   >()
 
   const attachmentBaseUrl = useMemo(() => `${baseServerUrl}/api/attachment/${companyKey}`, [baseServerUrl, companyKey])
-  const constantValues = { formId, userId, attachmentBaseUrl }
+  const constantValues = { formId, userId, attachmentBaseUrl, formName }
 
   useEffect(() => {
     if (formId) {
@@ -84,6 +85,7 @@ function FormDataListComponent({
 export { FormDataListComponent }
 
 type IFormDataListComponent = {
+  formName?: string
   baseServerUrl?: string
   companyKey?: string
   formId?: number

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

@@ -30,7 +30,7 @@ export default function FormDataListHeaderComponent({
 }: IFormDataListHeaderComponent) {
   const [dataListHeaderFormRef] = Form.useForm()
   const [filterConfigs, setFilterConfigs] = useState<IFilterNested>({})
-  const { userId, formId, formDataId } = constantValues
+  const { userId, formId, formDataId, formName, parentInfo } = constantValues
 
   const filterValues = Form.useWatch([], dataListHeaderFormRef)
 
@@ -60,7 +60,7 @@ export default function FormDataListHeaderComponent({
           if ('type' in config) {
             if (config.type === FilterConfigTypeEnum.ByLinkedForm) startLoading()
 
-            const filterData = await handleFilterValues(config as IFilterConfig, value, userId)
+            const filterData = await handleFilterValues(config as IFilterConfig, value, { userId })
             filtersToApply.push(filterData)
           } else {
             // cases like radio buttons, where each has its own filter, but only 1 needs to apply
@@ -69,7 +69,7 @@ export default function FormDataListHeaderComponent({
 
             if (eachConfig.type === FilterConfigTypeEnum.ByLinkedForm) startLoading()
 
-            const filterData = await handleFilterValues(eachConfig as IFilterConfig, value, userId)
+            const filterData = await handleFilterValues(eachConfig as IFilterConfig, value, { userId })
             filtersToApply.push(filterData)
           }
         }
@@ -97,6 +97,7 @@ export default function FormDataListHeaderComponent({
 
           return {
             ...c,
+            sort: defaultFilter.sort,
             pagination: { ...defaultFilter.pagination, current: 1 },
             customFilter,
             dynamicFilter: JSON.stringify(dynamicFilter),
@@ -104,7 +105,7 @@ export default function FormDataListHeaderComponent({
         })
       } else updateReqData(defaultFilter)
     },
-    [filterConfigs],
+    [filterConfigs, defaultFilter],
   )
 
   useEffect(() => {
@@ -125,6 +126,8 @@ export default function FormDataListHeaderComponent({
               conditions={conditions}
               formRef={dataListHeaderFormRef}
               onCustomFunctionCall={onCustomFunctionCall}
+              formName={formName}
+              stateToPass={{ parentInfo }}
             />
           )}
         />
@@ -162,11 +165,15 @@ const getLinkedFormFilter = async (
   } else return { dataIds: parentDataIds, foreignKey: lastRel.foreignKey }
 }
 
-const handleFilterValues = async (config: IFilterConfig, value: any, userId?: string | number) => {
+const handleFilterValues = async (
+  config: IFilterConfig,
+  value: any,
+  contextValues: { userId?: string | number; isDateFilter?: boolean },
+) => {
   if (config.type === FilterConfigTypeEnum.NoFilter) return DEFAULT_NO_FILTER
+  const { userId } = contextValues
 
-  const isDate = dayjs(value as Date).isValid()
-  if (isDate) value = dayjs(value as Date).toISOString()
+  if ((config as IFilterCustom).isDateFilter) value = dayjs(value as Date).toISOString()
 
   let customFilters = {}
   if (config.type === FilterConfigTypeEnum.ByAuthUser) customFilters = { createdById: userId }

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { IFormData, IFormDataListConfig, IFormLayoutRow, ITableColumn } from '../../../types'
-import FormDataListHeaderComponent from './header'
+import { IDataListParentInfo, IFormData, IFormDataListConfig, IFormLayoutRow, ITableColumn } from '../../../types'
+import FormDataListHeaderComponent from './table-header'
 import useDebounced from '../../common/custom-hooks/use-debounce.hook'
 import { Table } from 'antd'
 import { FilterConfigTypeEnum, FormDataListViewTypeEnum, MongoDbSortOrderEnum } from '../../../enums'
@@ -26,7 +26,9 @@ export default function FormDataListTableComponent({
     undefined,
     250,
   )
-  const [otherConfigs, setOtherConfigs] = useState<Partial<IFormDataListConfig> | undefined>(undefined)
+  const [otherConfigs, setOtherConfigs] = useState<
+    (Partial<IFormDataListConfig> & { hasNoPagination: boolean }) | undefined
+  >(undefined)
   const [headerLayout, setHeaderLayout] = useState<IFormLayoutRow[]>([])
   const [isHandlingSchema, setIsHandlingSchema] = useState(true)
   const isFinishedHandlingRef = useRef(false)
@@ -37,16 +39,14 @@ export default function FormDataListTableComponent({
     pagination: DEFAULT_PAGINATION,
   })
 
-  const { attachmentBaseUrl, userId, formId } = constantValues
+  const { attachmentBaseUrl, userId, formId, formName } = constantValues
 
   useEffect(() => {
     setIsHandlingSchema(true)
   }, [location.pathname])
 
   useEffect(() => {
-    if (debouncedFilterReqData) {
-      updateDataList(debouncedFilterReqData)
-    }
+    if (debouncedFilterReqData) updateDataList(debouncedFilterReqData)
   }, [debouncedFilterReqData])
 
   const handleDataListConfig = useCallback(
@@ -68,22 +68,22 @@ export default function FormDataListTableComponent({
       if (elementsWithOptions_key.length > 0)
         optionKeyValuePair = await extractElementsOptions(layout, elementsWithOptions_key)
 
-      setTableColumns(generateTableColumns(elements, optionKeyValuePair, attachmentBaseUrl))
+      setTableColumns(generateTableColumns(elements, optionKeyValuePair, { attachmentBaseUrl, formName }))
       setHeaderLayout(header.layout)
-      setOtherConfigs(restConfigs)
+      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 may detect certain operators, especially $regex, and automatically modify them. To prevent data manipulation by the MongoDB driver, @ is used instead of $.
+            ? // 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({}),
-          sort: defaultSorter ? { [defaultSorter.field]: defaultSorter.order } : {},
         }
       defaultFilterRef.current = {
         ...defaultFilterRef.current,
+        sort: defaultSorter ? { [defaultSorter.field]: defaultSorter.order } : {},
         pagination: {
           current: 1,
           pageSize: pagination?.defaultPageSize ?? 10,
@@ -95,7 +95,7 @@ export default function FormDataListTableComponent({
       setIsHandlingSchema(false)
       isFinishedHandlingRef.current = true
     },
-    [attachmentBaseUrl, userId, formId],
+    [attachmentBaseUrl, formName, userId, formId],
   )
 
   useEffect(() => {
@@ -131,7 +131,7 @@ export default function FormDataListTableComponent({
           columns={tableColumns}
           rowKey={(record) => record.id}
           pagination={
-            !otherConfigs?.pagination || otherConfigs.pagination.hasNoPagination
+            otherConfigs?.hasNoPagination
               ? false
               : { ...defaultFilterRef.current.pagination, ...filterReqData?.pagination, total: dataList.total }
           }
@@ -205,4 +205,6 @@ export interface IConstantValues {
   formId?: number
   attachmentBaseUrl?: string
   formDataId?: string
+  formName?: string
+  parentInfo?: IDataListParentInfo
 }

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

@@ -1,10 +1,10 @@
-import { useLocation, useNavigate } from 'react-router-dom'
+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 { useFormPreservedItemValues } from '../../../../common/custom-hooks/use-preserved-form-items.hook'
-import { extractDynamicFormHref } from '../../../../../functions'
+import { constructDynamicFormHref } from '../../../../../functions'
 import { useDuplicateDataAction } from './use-duplicate-data.hook'
 import { useDeleteDataAction } from './use-delete-data.hook'
 import { usePublishDataAction } from './use-publish-data.hook'
@@ -16,21 +16,30 @@ import { NEW_FORM_DATA_IDENTIFIER } from '../../../../../constants'
 import { Button_FillerPortal } from '../../../../common/button'
 import { getButtonRenderProps } from '../../../../../functions/get-element-props'
 import WarningIcon from '../../../../common/warning-icon'
-import { IDataRender_ButtonProps, IFormLayoutElementConditions } from '../../../../../types'
+import { IButtonNavigateState, IDataRender_ButtonProps, IFormLayoutElementConditions } from '../../../../../types'
 import { FormInstance } from 'antd'
 import FormDataLoadingIndicatorModal from '../../../../modals/form-data-loading.modal'
 
 export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
-  const { btnProps, conditions, formDataId, formRef, defaulDisabled = false, onCustomFunctionCall = () => {} } = props
+  const {
+    btnProps,
+    conditions,
+    formDataId,
+    formRef,
+    defaulDisabled = false,
+    onCustomFunctionCall = () => {},
+    formName = '',
+    stateToPass = {},
+  } = props
 
   const navigate = useNavigate()
-  const location = useLocation()
   const { success, warning, error, confirmModal } = useNotification()
   const { isElementDisabled, isElementHidden } = useCheckElementConditions(formRef, conditions, defaulDisabled)
   const [loading, setLoading] = useState(false)
   const [dataLoadingType, setDataLoadingType] = useState<FormLoadingModalTypeEnum | undefined>()
   const { inPreviewMode, isPublic = false } = useFormPreservedItemValues(formRef)
-  const baseDynamicUrl = useMemo(() => extractDynamicFormHref(location.pathname), [location.pathname])
+
+  const baseDynamicUrl = useMemo(() => constructDynamicFormHref(formName), [formName])
 
   useEffect(() => {
     formRef?.setFieldValue(FormPreservedItemKeys.FormDataId, formDataId)
@@ -102,7 +111,8 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   const handleButtonClick = useCallback(async () => {
     switch (btnProps.category) {
       case ButtonActionCategoryEnum.CreateNewData:
-        navigate(`${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`)
+        // window.location.href = `${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`
+        navigate(`${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`, { state: stateToPass })
         setLoading(false)
         break
 
@@ -246,6 +256,8 @@ type IDynamicButton = {
   formDataId?: string
   formRef?: FormInstance
   defaulDisabled?: boolean
+  formName?: string
+  stateToPass?: IButtonNavigateState
 } & ICustomFunctionCall
 
 export interface ICustomFunctionCall {

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

@@ -2,9 +2,12 @@ import { Key, ReactNode, Fragment } from 'react'
 import { FaCaretDown } from 'react-icons/fa'
 import dayjs, { Dayjs } from 'dayjs'
 import { FaUpload } from 'react-icons/fa6'
-import { CountryEnum, ElementTypeEnum } from '../../../../enums'
-import { IValidationRule, mapToFormItemRules, renderPhoneData } from '../../../../functions'
+import { CountryEnum, DataSanitizationTypeEnum, ElementTypeEnum } from '../../../../enums'
+import { formatByPattern, IValidationRule, mapToFormItemRules } from '../../../../functions'
 import { DisabledFieldIndicator } from '../../../common/disabled-field-indicator'
+import CustomColorField from '../../../common/color-field'
+import { IDataSanitization } from '../../../../types'
+import CurrencyField from '../../../common/currency-field'
 import {
   Checkbox,
   Form,
@@ -18,7 +21,6 @@ import {
   Switch,
   FormInstance,
 } from 'antd'
-import CustomColorField from '../../../common/color-field'
 
 export const LayoutRenderer_FieldElement = ({
   fields,
@@ -45,9 +47,11 @@ export const LayoutRenderer_FieldElement = ({
             }
             rules={mapToFormItemRules(field.validations ?? [], field.name as string)}
             normalize={(value) => {
-              if (field.phoneFormatCountry) return renderPhoneData(value, field.phoneFormatCountry)
+              const sanitizationRule = field.sanitization
+              if (!sanitizationRule || sanitizationRule.type === DataSanitizationTypeEnum.Default) return value
 
-              return value
+              if (sanitizationRule.type === DataSanitizationTypeEnum.Custom)
+                return formatByPattern(value, sanitizationRule.pattern)
             }}
           >
             {field.type === ElementTypeEnum.ColorPicker ? (
@@ -74,6 +78,8 @@ const getField = ({
   numberFieldMin,
   numberFieldMax,
   isCustom,
+  country = CountryEnum.US,
+  decimalPoint = 0,
   disabledDate,
 }: Partial<IMapperFieldObj>): JSX.Element => {
   placeholder = placeholder && placeholder.length > 0 ? placeholder : typeof label === 'string' ? label : ''
@@ -146,6 +152,10 @@ const getField = ({
           // parser={(value) => (value ? parseFloat(value.replace(/\D/g, '')) : undefined)}
         />
       )
+    case ElementTypeEnum.CurrencyInput:
+      return (
+        <CurrencyField placeholder={placeholder} disabled={disabled} country={country} decimalPoint={decimalPoint} />
+      )
     case ElementTypeEnum.Password:
       return <Input.Password placeholder={placeholder} disabled={disabled} />
     case ElementTypeEnum.DatePicker:
@@ -204,7 +214,9 @@ interface IMapperFieldObj {
   numberFieldMin?: number
   numberFieldMax?: number
   isCustom?: boolean
-  phoneFormatCountry?: CountryEnum
+  sanitization?: IDataSanitization
+  country?: CountryEnum
+  decimalPoint?: number
   disabledDate?: (date: Dayjs) => boolean
 }
 interface ISelectOption {

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

@@ -6,7 +6,7 @@ import { useMemo } from 'react'
 import { DataRenderTypeEnum } from '../../../../enums'
 import { IFormItemPath } from '.'
 
-export default function LayoutRenderer_ReadOnly({ formRef, elementProps }: ILayoutRenderer_ReadOnly) {
+export default function LayoutRenderer_ReadOnly({ formRef, elementProps, style = {} }: ILayoutRenderer_ReadOnly) {
   const fieldValue = elementProps.isHardCoded
     ? elementProps.value
     : Form.useWatch(elementProps.value, { form: formRef, preserve: true })
@@ -22,7 +22,7 @@ export default function LayoutRenderer_ReadOnly({ formRef, elementProps }: ILayo
   return (
     <div className="flex items-center gap-2">
       {elementProps.label && <span>{elementProps.label}: </span>}
-      <span className="font-bold">
+      <span style={style}>
         {renderData(
           elementProps.renderConfig?.type === DataRenderTypeEnum.Image
             ? attachmentUrl
@@ -45,4 +45,5 @@ type ILayoutRenderer_ReadOnly = {
     value?: string
     renderConfig?: IDataRenderConfig
   }
+  style?: { [key: string]: any }
 } & IFormItemPath

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

@@ -1,5 +1,5 @@
 import { FormInstance } from 'antd'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { IFilterByLinkedFormRelPath, IFormLayoutFieldOption, IRadioElement, ISelectElement } from '../../../../types'
 import { FieldElementOptionSourceEnum } from '../../../../enums'
 import { IFormItemPath } from '.'
@@ -8,6 +8,7 @@ import { fetchFormDataAsLookup } from '../../../../functions'
 import { getElementGeneralizedProps } from '../../../../functions/get-element-props'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { IReqDataConfig } from '../../1-list/table'
+import { useLocation } from 'react-router-dom'
 
 export default function LayoutRenderer_FieldsWithOptions({
   formRef,
@@ -15,23 +16,39 @@ export default function LayoutRenderer_FieldsWithOptions({
   elementData,
   isElementDisabled,
 }: ILayoutRenderer_FieldsWithOptions) {
+  const { state: locationState } = useLocation()
   const [options, setOptions] = useState<{ value: string; label: string }[]>([])
   const props = getElementGeneralizedProps(elementData.props)
 
   const { inPreviewMode, formDataId } = useFormPreservedItemValues(formRef)
 
-  const fetchFormData = useCallback(async (formId: number, field: string, filter?: Partial<IReqDataConfig>) => {
-    const formDataResData = await fetchFormDataAsLookup(formId, filter)
-    setOptions(
-      formDataResData.map((formData) => ({
-        value: formData.id,
-        label: formData[field],
-      })),
-    )
-  }, [])
+  const potentialParentDataIds = useMemo(() => {
+    if (typeof formItemName === 'string' && locationState?.parentInfo?.foreignKey === formItemName)
+      return locationState.parentInfo.dataIds
+    return []
+  }, [locationState, formItemName])
+
+  const fetchFormData = useCallback(
+    async (formId: number, field: string, filter?: Partial<IReqDataConfig>) => {
+      const formDataResData = await fetchFormDataAsLookup(formId, filter)
+      let apiOptions = formDataResData
+      if (potentialParentDataIds.length) {
+        apiOptions = apiOptions.filter((formData) => potentialParentDataIds.includes(formData.id))
+        if (potentialParentDataIds.length === 1) formRef.setFieldValue(formItemName, potentialParentDataIds[0])
+      }
+
+      setOptions(
+        apiOptions.map((formData) => ({
+          value: formData.id,
+          label: formData[field],
+        })),
+      )
+    },
+    [potentialParentDataIds],
+  )
 
   const fetchLinkedFormData = useCallback(
-    async (relationshipPath: IFilterByLinkedFormRelPath[] = []) => {
+    (relationshipPath: IFilterByLinkedFormRelPath[] = []) => {
       const lastPath = relationshipPath[relationshipPath.length - 1]
 
       if (lastPath && lastPath.field)