form-craft-package 1.9.0 → 1.9.1

package/package.json

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

package/src/components/common/custom-hooks/use-preserved-form-items.hook.ts

@@ -4,7 +4,7 @@ import { FormPreservedItemKeys } from '../../../enums'
 export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues => {
   const baseServerUrl = Form.useWatch(FormPreservedItemKeys.BaseServerUrl, { form: formRef, preserve: true })
   const isGeneratingPdf = Form.useWatch(FormPreservedItemKeys.IsGeneratingPDF, { form: formRef, preserve: true })
-  const hasSignature = Form.useWatch(FormPreservedItemKeys.HasSignature, { form: formRef, preserve: true })
+  const signatureFields = Form.useWatch(FormPreservedItemKeys.SignatureFields, { form: formRef, preserve: true })
   const isPublic = Form.useWatch(FormPreservedItemKeys.IsPublic, { form: formRef, preserve: true })
   const submissionPdfConfig = Form.useWatch(FormPreservedItemKeys.SubmissionPdfConfig, {
     form: formRef,
@@ -15,7 +15,7 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
     [FormPreservedItemKeys.BaseServerUrl]: baseServerUrl,
     [FormPreservedItemKeys.SubmissionPdfConfig]: submissionPdfConfig,
     [FormPreservedItemKeys.IsGeneratingPDF]: isGeneratingPdf,
-    [FormPreservedItemKeys.HasSignature]: hasSignature,
+    [FormPreservedItemKeys.SignatureFields]: signatureFields,
     [FormPreservedItemKeys.IsPublic]: isPublic,
   }
 }

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

@@ -17,6 +17,8 @@ export function useTranslation(formId?: number) {
 
   const t = useCallback(
     (params: ITranslateFuncParam | ITranslateFuncParam[]) => {
+      if (!formId) return ''
+
       if (Array.isArray(params)) return params.map((p) => (p.key ? translationStore.translate(p, formId) : ''))
 
       return params.key ? translationStore.translate(params, formId) : ''

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

@@ -12,6 +12,8 @@ import { useManyToManyConnector } from '../../common/custom-hooks/use-many-to-ma
 import { PageViewTypEnum, DeviceBreakpointEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
 import { UserAuth } from '../../../api/user'
 import { useCacheFormLayoutConfig } from '../../common/custom-hooks/use-cache-form-layout-config.hook'
+import { translationStore } from '../../common/custom-hooks/use-translation.hook/store'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
 import {
   handleHiddenSet,
   useSetHiddenNodes,
@@ -20,7 +22,6 @@ import {
   handleDisabledSet,
   useSetDisabledElements,
 } from '../../common/custom-hooks/use-node-condition.hook/use-disabled-elements.hook'
-import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
 import {
   DynamicFormButtonRender,
   ICustomFunctionCall,
@@ -33,7 +34,6 @@ import {
   isValidMongoDbId,
   queryParamsToObject,
 } from '../../../functions/forms'
-import { translationStore } from '../../common/custom-hooks/use-translation.hook/store'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -41,7 +41,6 @@ export default function FormDataDetailsComponent({
   formKey,
   formDataId,
   formName,
-  companyKey,
   baseServerUrl,
   initialValues,
   onCustomFunctionCall,
@@ -117,6 +116,7 @@ export default function FormDataDetailsComponent({
             if (res.status === 200) {
               const { data: jsonData, ...restFormData } = res.data
               let parsedFormData = JSON.parse(jsonData)
+
               if (parsedFormData) {
                 const fieldsValue: { [key: string]: any } = fromMongoDbExtendedJSON(
                   parsedFormData,
@@ -165,17 +165,17 @@ export default function FormDataDetailsComponent({
     return deviceLayout
   }, [cachedConfig?.detailsConfig, currentBreakpoint])
 
-  const formContext = useMemo(
-    () => ({
-      detailPageFormId: formId,
-      formId,
-      formKey,
-      formDataId,
-      formRef: formDataRef,
-      companyKey: UserAuth.getCompanyKey(),
-    }),
-    [formDataId, formDataRef, formId, formKey, companyKey],
-  )
+  // const formContext = useMemo(
+  //   () => ({
+  //     detailPageFormId: formId,
+  //     formId,
+  //     formKey,
+  //     formDataId,
+  //     formRef: formDataRef,
+  //     companyKey: UserAuth.getCompanyKey(),
+  //   }),
+  //   [formId, formKey, formDataId, formDataRef, companyKey],
+  // )
 
   if (isConfigLoading || !cachedConfig) return <FormDataListSkeleton_Details />
 
@@ -197,12 +197,26 @@ export default function FormDataDetailsComponent({
           <LayoutRendererRow
             key={rowIdx}
             rowData={row}
-            formContext={formContext}
+            formContext={{
+              detailPageFormId: formId,
+              formId,
+              formKey,
+              formDataId,
+              formRef: formDataRef,
+              companyKey: UserAuth.getCompanyKey(),
+            }}
             elements={cachedConfig.detailsConfig.elements}
             renderButton={(btnProps) => (
               <DynamicFormButtonRender
                 displayStateProps={btnProps as IDynamicButton_DisplayStateProps}
-                formContext={formContext}
+                formContext={{
+                  detailPageFormId: formId,
+                  formId,
+                  formKey,
+                  formDataId,
+                  formRef: formDataRef,
+                  companyKey: UserAuth.getCompanyKey(),
+                }}
                 onCustomFunctionCall={onCustomFunctionCall}
               />
             )}

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

@@ -1,21 +1,17 @@
-import { useMemo } from 'react'
 import { IFormDndLayoutRowHeader } from '../../../../types'
-import { kebabCaseToCamelCase } from '../../../../functions/forms'
 import { FaCaretDown, FaCaretUp } from 'react-icons/fa6'
 
 export default function RowHeader({
   name,
   isCollapsible,
-  style,
+  style = {},
   isCollapsed = false,
   setIsCollapsed = () => {},
 }: IRowHeader) {
-  const styleConfig = useMemo(() => (style ? kebabCaseToCamelCase(style) : {}), [style])
-
   return (
     <div
       className={`flex items-center justify-between ${isCollapsible ? 'cursor-pointer' : ''}`}
-      style={styleConfig}
+      style={style}
       onClick={() => {
         if (isCollapsible) setIsCollapsed()
       }}

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

@@ -1,7 +1,7 @@
 import { FormInstance } from 'antd'
-import { getGridContainerStyle, getColumnStyle, kebabCaseToCamelCase } from '../../../../functions/forms'
+import { getGridContainerStyle, getColumnStyle } from '../../../../functions/forms'
 import LayoutRendererCol from '../2-col'
-import { memo, ReactElement, useMemo } from 'react'
+import { memo, ReactElement } from 'react'
 import { LayoutRowConditionalHeaderRenderer } from './header-render'
 import { LayoutRowRepeatableRenderer } from './repeatable-render'
 import { IDndLayoutElement, IDndLayoutRow, IFormJoin } from '../../../../types'
@@ -16,10 +16,6 @@ export const LayoutRendererRow = memo(
   ({ basePath = [], rowData, dataCount, formContext, elements, renderButton }: ILayoutRendererRow) => {
     const isHidden = useIsNodeHidden(rowData.id)
 
-    const styleConfig = useMemo(() => {
-      if (!rowData.style) return {}
-      return kebabCaseToCamelCase(rowData.style)
-    }, [rowData.style])
 
     return (
       <div
@@ -40,7 +36,10 @@ export const LayoutRendererRow = memo(
             repeatingSection={rowData.props?.repeatingSection}
           >
             {(formListItemProps) => {
-              const style: { [key: string]: any } = { ...styleConfig, ...getGridContainerStyle(rowData.display) }
+              const style: { [key: string]: any } = {
+                ...(rowData.style || {}),
+                ...getGridContainerStyle(rowData.display),
+              }
               const hiddenColsIndices = rowData.children.reduce(
                 (curr: number[], col, colIdx) => (checkIsNodeHidden(col.id) ? [...curr, colIdx] : curr),
                 [],

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

@@ -13,12 +13,6 @@ import { getButtonRenderProps } from '../../../../../functions/forms/get-element
 import WarningIcon from '../../../../common/warning-icon'
 import FormDataLoadingIndicatorModal from '../../../../modals/form-data-loading.modal'
 import { IFormContext } from '../../1-row'
-import {
-  ButtonActionCategoryEnum,
-  FormLoadingModalTypeEnum,
-  TranslationTextSubTypeEnum,
-  TranslationTextTypeEnum,
-} from '../../../../../enums'
 import { useButtonNavigateAction } from './use-button-navigate.hook'
 import { constructDynamicFormHref, isNewFormDataPage } from '../../../../../functions'
 import { useCustomFunctionCallAction } from './use-custom-function-call.hook'
@@ -29,6 +23,12 @@ import {
   useIsNodeDisabled,
   useIsNodeHidden,
 } from '../../../../common/custom-hooks/use-node-condition.hook/use-node-condition.hook'
+import {
+  ButtonActionCategoryEnum,
+  FormLoadingModalTypeEnum,
+  TranslationTextSubTypeEnum,
+  TranslationTextTypeEnum,
+} from '../../../../../enums'
 
 export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   const { displayStateProps = {}, formContext = {}, onCustomFunctionCall = () => {} } = props

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-save-signature.hook.ts

@@ -15,15 +15,26 @@ export const useSaveSignatureAction = ({ formRef, companyKey }: IFormContext) =>
     if (!formRef) return
 
     try {
-      const signatureField = formRef.getFieldValue(FormPreservedItemKeys.HasSignature)
-      if (!signatureField) return
+      const signatureFieldContainer = formRef.getFieldValue(FormPreservedItemKeys.SignatureFields)
+      if (!signatureFieldContainer) return
 
-      const signatureBase64 = formRef.getFieldValue(signatureField)
+      const signatureFields = Object.entries(signatureFieldContainer) || []
 
-      const blob = base64ToBlob(signatureBase64)
-      const blobName = await saveFile(blob, 'signature', isPublic ? companyKey : '')
+      const blobsToSave = signatureFields.reduce((acc: [string, Blob][], [fieldName, signatureBase64]) => {
+        if (signatureBase64) return [...acc, [fieldName, base64ToBlob(signatureBase64 as string)] as [string, Blob]]
 
-      if (blobName) formRef.setFieldValue(signatureField, blobName)
+        return acc
+      }, [])
+
+      const blobNames = await Promise.all(
+        blobsToSave.map(([fieldName, blob]) => saveFile(blob, `${fieldName}_signature`, isPublic ? companyKey : '')),
+      )
+
+      const fieldValuesToSet: Record<string, string> = {}
+      blobsToSave.forEach(([fieldName], blobToSaveIdx) => {
+        if (blobNames[blobToSaveIdx]) fieldValuesToSet[fieldName as string] = blobNames[blobToSaveIdx]
+      })
+      formRef.setFieldsValue(fieldValuesToSet)
     } catch (err) {
       console.error('Error saving signature:', err)
     }

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

@@ -14,7 +14,8 @@ function LayoutRenderer_PickerField({ formContext, formItem, elementData, isDisa
   const { t } = useTranslation(formContext.formId)
   const props = getElementGeneralizedProps(elementData.props)
 
-  const [placeholder1, placeholder2] = t([
+  const [label, placeholder1, placeholder2] = t([
+    { key: elementData.key, type: TranslationTextTypeEnum.Label },
     { key: elementData.key, type: TranslationTextTypeEnum.Placeholder },
     { key: elementData.key, type: TranslationTextTypeEnum.Placeholder, subType: TranslationTextSubTypeEnum.Secondary },
   ])
@@ -27,6 +28,7 @@ function LayoutRenderer_PickerField({ formContext, formItem, elementData, isDisa
     <LayoutRenderer_FieldElement formRef={formContext.formRef} elementKey={elementData.key} formId={formContext.formId}>
       {() => ({
         ...props,
+        label,
         placeholder,
         type: elementData.elementType,
         name: formItem.name ?? '',

package/src/components/form/layout-renderer/3-element/13-language-selector/index.scss

@@ -0,0 +1,11 @@
+.ant-select.fc-language-selector {
+  .ant-select-selector {
+    @apply bg-transparent border-none outline-none shadow-none;
+  }
+  &.ant-select-focused.ant-select-outlined:not(.ant-select-disabled):not(.ant-select-customize-input):not(
+      .ant-pagination-size-changer
+    )
+    .ant-select-selector {
+    @apply shadow-none outline-none;
+  }
+}

package/src/components/form/layout-renderer/3-element/{13-language-selector.tsx → 13-language-selector/index.tsx}

@@ -1,11 +1,14 @@
-import { IElementBaseProps } from '.'
-import { CountryEnum, LOCAL_STORAGE_KEYS_ENUM, TranslationTextTypeEnum } from '../../../../enums'
+import { IElementBaseProps } from '../'
+import { CountryEnum, LOCAL_STORAGE_KEYS_ENUM, TranslationTextTypeEnum } from '../../../../../enums'
 import { memo, useEffect, useState } from 'react'
-import { ELEMENTS_DEFAULT_CLASS } from '../../../../constants'
-import { useTranslation } from '../../../common/custom-hooks/use-translation.hook/hook'
-import { translationStore } from '../../../common/custom-hooks/use-translation.hook/store'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../../../constants'
+import { useTranslation } from '../../../../common/custom-hooks/use-translation.hook/hook'
+import { translationStore } from '../../../../common/custom-hooks/use-translation.hook/store'
 import { Select } from 'antd'
 import { FaCaretDown } from 'react-icons/fa6'
+import { MdOutlineLanguage } from 'react-icons/md'
+
+import './index.scss'
 
 function LayoutRenderer_LanguageSelector({ formId, isDisabled, elementKey }: ILayoutRenderer_LanguageSelector) {
   const { t } = useTranslation(formId)
@@ -24,13 +27,14 @@ function LayoutRenderer_LanguageSelector({ formId, isDisabled, elementKey }: ILa
     <div className="flex flex-col min-w-max">
       {label && <span>{label}</span>}
       <Select
+        prefix={<MdOutlineLanguage size={16} className="mr-2 text-primary" />}
         placeholder={placeholder}
         suffixIcon={<FaCaretDown />}
         options={languages}
         defaultValue={localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.SelectedLanguage)}
         disabled={isDisabled}
         allowClear={false}
-        className={`${ELEMENTS_DEFAULT_CLASS.Select} min-w-max`}
+        className={`${ELEMENTS_DEFAULT_CLASS.LanguageSelector} min-w-max`}
         onChange={(lang) => translationStore.setLanguage(lang as CountryEnum)}
       />
     </div>

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

@@ -43,16 +43,18 @@ function LayoutRenderer_Signature({
         !elementProps.hasNoLabel && (
           <div className="flex items-center gap-1">
             <span>{t({ key: elementKey, type: TranslationTextTypeEnum.Label })}</span>
-            <Button_FillerPortal
-              link
-              onClick={() => {
-                sigCanvasRef.current?.clear()
-                if (fieldKeyJoined)
-                  formRef?.setFieldsValue({ [fieldKeyJoined]: null, [FormPreservedItemKeys.HasSignature]: null })
-              }}
-            >
-              Clear
-            </Button_FillerPortal>
+            {isNewFormDataPage(formDataId) && (
+              <Button_FillerPortal
+                link
+                onClick={() => {
+                  sigCanvasRef.current?.clear()
+                  if (fieldKeyJoined)
+                    formRef?.setFieldsValue({ [FormPreservedItemKeys.SignatureFields]: { [fieldKeyJoined]: null } })
+                }}
+              >
+                Clear
+              </Button_FillerPortal>
+            )}
           </div>
         )
       }
@@ -69,15 +71,18 @@ function LayoutRenderer_Signature({
           onEnd={() => {
             const sigBase64 = sigCanvasRef.current?.toDataURL()
             if (sigBase64 && fieldKeyJoined)
-              formRef?.setFieldsValue({
-                [fieldKeyJoined]: sigBase64,
-                [FormPreservedItemKeys.HasSignature]: fieldKeyJoined,
-              })
+              formRef?.setFieldsValue({ [FormPreservedItemKeys.SignatureFields]: { [fieldKeyJoined]: sigBase64 } })
           }}
         />
       ) : (
-        <div className={`${ELEMENTS_DEFAULT_CLASS.SignatureCanvas} h-[300px] rounded-md border-2 border-[#f0f0f0]`}>
-          <img alt="signature" src={`${baseServerUrl}/api/attachment/${companyKey}/${savedSignatureBlobName}`} />
+        <div
+          className={`${ELEMENTS_DEFAULT_CLASS.SignatureCanvas} h-[300px] rounded-md border-2 border-[#f0f0f0] text-center bg-gray-100 flex justify-center p-2`}
+        >
+          <img
+            alt="signature"
+            src={`${baseServerUrl}/api/attachment/${companyKey}/${savedSignatureBlobName}`}
+            className="bg-white rounded-md"
+          />
         </div>
       )}
     </Form.Item>

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

@@ -3,7 +3,7 @@ import { lazy, memo, ReactElement, useMemo } from 'react'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
 import { ElementTypeEnum, TextElementTypeEnum, TranslationTextTypeEnum } from '../../../../enums'
 import useGetCurrentBreakpoint from '../../../common/custom-hooks/use-window-width.hook'
-import { findMaxAndMinValues, kebabCaseToCamelCase } from '../../../../functions/forms'
+import { findMaxAndMinValues } from '../../../../functions/forms'
 import { IFormContext } from '../1-row'
 import { LayoutRenderer_FieldElement } from './2-field-element'
 import { IDynamicButton_DisplayStateProps } from './1-dynamic-button'
@@ -166,7 +166,7 @@ function LayoutRendererElement({
       renderButton ? renderButton({ btnKey: key, btnProps: props as IButtonElementProps }) : <></>,
 
     [ElementTypeEnum.Text]: () => {
-      const textStyle = kebabCaseToCamelCase((elementData as ITextElement).style?.[currentBreakpoint] ?? {})
+      const textStyle = (elementData as ITextElement).style?.[currentBreakpoint] || {}
       if (props.type === TextElementTypeEnum.Plain)
         return (
           <div style={textStyle}>
@@ -245,6 +245,7 @@ function LayoutRendererElement({
   }
 
   const renderer = renderers[elementType]
+
   return renderer ? (
     renderer()
   ) : (
@@ -255,6 +256,7 @@ function LayoutRendererElement({
         placeholder,
         numberFieldMax: maxValue,
         numberFieldMin: minValue,
+        minRows: elementType === ElementTypeEnum.LongInput ? 2 : undefined,
         type: elementType,
         name: formItemName as string,
         nameFullPath: fullPath,

package/src/constants.ts

@@ -211,6 +211,7 @@ export const ELEMENTS_DEFAULT_CLASS = {
   Currency: 'fc-currency',
   Breadcrumb: 'fc-breadcrumb',
   Select: 'fc-select',
+  LanguageSelector: 'fc-language-selector',
   Input: 'fc-input',
   CheckboxGroup: 'fc-checkbox-group',
   Checkbox: 'fc-checkbox',

package/src/enums/form.enum.ts

@@ -136,7 +136,7 @@ export enum FormPreservedItemKeys {
   BaseServerUrl = 'baseServerUrl',
   SubmissionPdfConfig = 'submissionPdfConfig',
   IsGeneratingPDF = 'isGeneratingPdf',
-  HasSignature = 'hasSignature',
+  SignatureFields = 'signatureFields',
   IsPublic = 'isPublic',
 }
 export enum DataCategoryEnum {

package/src/functions/forms/index.ts

@@ -136,21 +136,6 @@ export const queryParamsToObject = (query: string): Record<string, string | unde
 
 /** ---------------------------------------------------------------------------------------------------------  */
 
-export const kebabCaseToCamelCase = (cssObject: Record<string, string | number>): Record<string, string | number> => {
-  const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
-
-  const camelCaseObject: Record<string, string | number> = {}
-
-  for (const [key, value] of Object.entries(cssObject)) {
-    const camelCaseKey = toCamelCase(key)
-    camelCaseObject[camelCaseKey] = value
-  }
-
-  return camelCaseObject
-}
-
-/** ---------------------------------------------------------------------------------------------------------  */
-
 export async function fetchFormDataAsLookup(
   formId: number,
   filter: Partial<IFormDataApiReqConfig> = {},