form-craft-package 1.8.1-dev.2 → 1.8.2-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.8.1-dev.2",
+  "version": "1.8.2-dev.0",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

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

@@ -1,19 +1,18 @@
 import { Form, FormInstance } from 'antd'
 import { useRef, useState } from 'react'
 
-export default function CustomColorField({ formRef, name, isPreview, disabled }: ICustomColorField) {
+export default function CustomColorField({ formRef, name, disabled }: ICustomColorField) {
   const colorInputRef = useRef<HTMLInputElement>(null)
   const [fieldValue, setFieldValue] = useState('')
 
   const color = Form.useWatch(name, formRef)
 
-  if (!isPreview && !formRef)
-    <div className="text-warning italic leading-4">Form instance is missing for color field!</div>
+  if (!formRef) <div className="text-warning italic leading-4">Form instance is missing for color field!</div>
 
   return (
     <div
       className={`flex items-center gap-2 border bg-white rounded-lg w-full p-1 ${
-        isPreview || disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer'
       }`}
       onClick={() => {
         colorInputRef.current?.click()
@@ -25,11 +24,8 @@ export default function CustomColorField({ formRef, name, isPreview, disabled }:
         ref={colorInputRef}
         value={fieldValue ?? color}
         onChange={(e) => setFieldValue(e.target.value)}
-        className={`opacity-0 absolute w-[24px] h-[24px] ${
-          isPreview || disabled ? 'cursor-not-allowed' : 'cursor-pointer'
-        }`}
+        className={`opacity-0 absolute w-[24px] h-[24px] ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
         onBlur={() => formRef?.setFieldValue(name, fieldValue)}
-        disabled={isPreview}
       />
       <div className="w-[24px] h-[24px] rounded cursor-pointer border" style={{ backgroundColor: color }}></div>
       <span className="uppercase pr-1">{color}</span>
@@ -38,7 +34,6 @@ export default function CustomColorField({ formRef, name, isPreview, disabled }:
 }
 
 interface ICustomColorField {
-  isPreview?: boolean
   formRef?: FormInstance
   name?: string | (string | number)[]
   disabled?: boolean

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

@@ -5,7 +5,6 @@ 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 inPreviewMode = Form.useWatch(FormPreservedItemKeys.InPreviewMode, { form: formRef, preserve: true })
   const isPublic = Form.useWatch(FormPreservedItemKeys.IsPublic, { form: formRef, preserve: true })
   const submissionPdfConfig = Form.useWatch(FormPreservedItemKeys.SubmissionPdfConfig, {
     form: formRef,
@@ -17,7 +16,6 @@ export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues
     [FormPreservedItemKeys.SubmissionPdfConfig]: submissionPdfConfig,
     [FormPreservedItemKeys.IsGeneratingPDF]: isGeneratingPdf,
     [FormPreservedItemKeys.HasSignature]: hasSignature,
-    [FormPreservedItemKeys.InPreviewMode]: inPreviewMode,
     [FormPreservedItemKeys.IsPublic]: isPublic,
   }
 }

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

@@ -2,7 +2,7 @@ import { Form } from 'antd'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
 import { extractFiltersFromLayout } from '../../../functions/forms'
-import { DeviceBreakpointEnum, FilterConfigTypeEnum, FormPreservedItemKeys } from '../../../enums'
+import { DeviceBreakpointEnum, FilterConfigTypeEnum } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
 import { IDataListHeaderLayoutContext } from './table'
@@ -52,10 +52,6 @@ export default function FormDataListHeaderComponent({
 
   const filterValues = Form.useWatch([], filtersFormRef)
 
-  useEffect(() => {
-    if (filtersFormRef) filtersFormRef.setFieldsValue({ [FormPreservedItemKeys.InPreviewMode]: false })
-  }, [filtersFormRef])
-
   const organizeFilterData = useCallback(
     async (values: { [key: string]: any }) => {
       const filtersWithConfig: [string, string][] = Object.entries(values).filter(

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

@@ -101,8 +101,6 @@ export default function FormDataListTableComponent({
     [tableColumns, currentBreakpoint],
   )
 
-  // if (loading) return
-  console.log(loading, parentLoadings)
   if ((loading || parentLoadings.initial) && loadingBlock) return loadingBlock
 
   return (

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

@@ -2,11 +2,6 @@ import { Form, Spin } from 'antd'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { IDndLayoutStructure_Responsive } from '../../../types'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
-import {
-  DynamicFormButtonRender,
-  ICustomFunctionCall,
-  IDynamicButton_DisplayStateProps,
-} from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListSkeleton_Details from '../../common/loading-skeletons/details'
 import { useLocation } from 'react-router-dom'
 import useGetCurrentBreakpoint from '../../common/custom-hooks/use-window-width.hook'
@@ -19,6 +14,12 @@ import { UserAuth } from '../../../api/user'
 import { useCacheFormLayoutConfig } from '../../common/custom-hooks/use-cache-form-layout-config.hook'
 import { useSetHiddenNodes } from '../../common/custom-hooks/use-node-condition.hook/use-hidden-elements.hook'
 import { useSetDisabledElements } from '../../common/custom-hooks/use-node-condition.hook/use-disabled-elements.hook'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
+import {
+  DynamicFormButtonRender,
+  ICustomFunctionCall,
+  IDynamicButton_DisplayStateProps,
+} from '../layout-renderer/3-element/1-dynamic-button'
 import {
   fromMongoDbExtendedJSON,
   getPickerFieldsWithOriginalTz,
@@ -26,7 +27,6 @@ import {
   isValidMongoDbId,
   queryParamsToObject,
 } from '../../../functions/forms'
-import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -94,7 +94,6 @@ export default function FormDataDetailsComponent({
       formDataRef.setFieldsValue({
         [FormPreservedItemKeys.BaseServerUrl]: baseServerUrl,
         [FormPreservedItemKeys.IsPublic]: isPublic,
-        [FormPreservedItemKeys.InPreviewMode]: false,
       })
   }, [formDataRef, baseServerUrl, isPublic])
 

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

@@ -18,11 +18,11 @@ import { useButtonNavigateAction } from './use-button-navigate.hook'
 import { constructDynamicFormHref, isNewFormDataPage } from '../../../../../functions'
 import { useCustomFunctionCallAction } from './use-custom-function-call.hook'
 import { IButtonElementProps, IButtonProps_Other, IButtonProps_Navigate } from '../../../../../types'
+import { ELEMENTS_DEFAULT_CLASS } from '../../../../../constants'
 import {
   useIsNodeDisabled,
   useIsNodeHidden,
 } from '../../../../common/custom-hooks/use-node-condition.hook/use-node-condition.hook'
-import { ELEMENTS_DEFAULT_CLASS } from '../../../../../constants'
 
 export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   const { displayStateProps = {}, formContext = {}, onCustomFunctionCall = () => {} } = props
@@ -33,7 +33,7 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
   const { success, warning, error, confirmModal } = useNotification()
   const [loading, setLoading] = useState(false)
   const [dataLoadingType, setDataLoadingType] = useState<FormLoadingModalTypeEnum | undefined>()
-  const { inPreviewMode, isPublic = false, submissionPdfConfig } = useFormPreservedItemValues(formRef)
+  const { isPublic = false, submissionPdfConfig } = useFormPreservedItemValues(formRef)
 
   const isElementHidden = useIsNodeHidden(btnKey)
   const isElementDisabled = useIsNodeDisabled(btnKey)
@@ -227,7 +227,6 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
         disabled={isElementDisabled}
         className={`${ELEMENTS_DEFAULT_CLASS.Button} w-full ${isElementHidden ? 'hidden' : ''}`}
         onClick={(e) => {
-          if (inPreviewMode) return
           if (
             isPublic &&
             isNewFormDataPage(formDataId) &&
@@ -252,7 +251,6 @@ export const DynamicFormButtonRender = memo((props: IDynamicButton) => {
           btnProps.category !== ButtonActionCategoryEnum.SaveDataChanges && (
             <WarningIcon tooltip={BUTTON_CUSTOM_ERROR_MESSAGES.UnavailableForPublic} />
           )}
-        {inPreviewMode && <WarningIcon tooltip={BUTTON_CUSTOM_ERROR_MESSAGES.InPreviewMode} />}
         {btnProps.label}
       </Button_FillerPortal>
       {!!dataLoadingType && (
@@ -296,5 +294,4 @@ export const BUTTON_CUSTOM_ERROR_MESSAGES = {
   DataIdNotFound: 'Data id was not found!',
   FormInstanceNotFound: 'Form ref was not found!',
   UnavailableForPublic: 'Button action is NOT allowed for public use!',
-  InPreviewMode: 'Buttons will not work in preview mode!',
 }

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

@@ -20,7 +20,7 @@ export default function LayoutRenderer_Signature({
   const { formRef, formDataId, companyKey } = formContext
   const sigCanvasRef = useRef<SignatureCanvas>(null)
   const savedSignatureBlobName = Form.useWatch(formItem.path, formRef)
-  const { isGeneratingPdf, baseServerUrl, inPreviewMode } = useFormPreservedItemValues(formRef)
+  const { isGeneratingPdf, baseServerUrl } = useFormPreservedItemValues(formRef)
 
   useEffect(() => {
     if (isDisabled) sigCanvasRef.current?.off()
@@ -55,7 +55,7 @@ export default function LayoutRenderer_Signature({
       }
       labelAlign="left"
     >
-      {(inPreviewMode || isNewFormDataPage(formDataId)) && !isGeneratingPdf ? (
+      {isNewFormDataPage(formDataId) && !isGeneratingPdf ? (
         <SignatureCanvas
           ref={sigCanvasRef}
           canvasProps={{

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

@@ -3,7 +3,6 @@ import { PageViewTypEnum, FieldElementOptionSourceEnum, FilterConfigTypeEnum } f
 import { IElementBaseProps } from '.'
 import { LayoutRenderer_FieldElement } from './2-field-element'
 import { getElementGeneralizedProps } from '../../../../functions/forms/get-element-props'
-import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
 import { IFormContext } from '../1-row'
 import { cancelableClient } from '../../../../api/client'
 import { useBreadcrumb } from '../../../common/custom-hooks/use-breadcrumb.hook'
@@ -36,7 +35,6 @@ export default function LayoutRenderer_FieldsWithOptions({
   const { getFormById } = useFindDynamiForm()
 
   const { formRef, formId, formDataId, detailPageFormId } = formContext
-  const { inPreviewMode } = useFormPreservedItemValues(formRef)
   const { breadcrumbs, push } = useBreadcrumb()
 
   const props = getElementGeneralizedProps(elementData.props)
@@ -193,12 +191,12 @@ export default function LayoutRenderer_FieldsWithOptions({
   )
 
   useEffect(() => {
-    if (!props.optionSource || inPreviewMode === undefined) return
+    if (!props.optionSource) return
 
     if (props.optionSource.type === FieldElementOptionSourceEnum.Static) {
       setOptions(props.optionSource.options.map((op: IFormLayoutFieldOption) => ({ value: op.id, label: op.value })))
       setLoading(false)
-    } else if (!inPreviewMode) {
+    } else {
       switch (props.optionSource.type) {
         case FieldElementOptionSourceEnum.DynamicForm:
           fetchFormData(props.optionSource)
@@ -214,8 +212,8 @@ export default function LayoutRenderer_FieldsWithOptions({
           setLoading(false)
           return
       }
-    } else setLoading(false)
-  }, [props.optionSource, inPreviewMode, fetchLinkedFormData, fetchFormData, cachedConfig])
+    }
+  }, [props.optionSource, fetchLinkedFormData, fetchFormData, cachedConfig])
 
   useEffect(() => {
     return () => {

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

@@ -33,8 +33,6 @@ export default function LayoutRenderer_LoadFormData({ formContext, elementProps
   const formJoinsRef = useRef<IFormJoin[]>([])
   const m2mForeignKeysRef = useRef<{ currentForm: string; otherForm: string } | undefined>()
 
-  console.log({ cachedConfig })
-
   const fetchDataList = useCallback(
     (
       headerAppliedFilters: string = initialFilter && initialFilter.type === FilterConfigTypeEnum.Custom

package/src/components/index.tsx

@@ -2,7 +2,6 @@ export * from './form/layout-renderer/1-row'
 export * from './form/layout-renderer/3-element/1-dynamic-button'
 export * from './form/1-list'
 export * from './form/2-details'
-export * from './form/3-preview'
 export * from './common/button'
 export * from './report/1-list'
 export * from './companies'

package/src/constants.ts

@@ -197,7 +197,6 @@ export const ELEMENTS_DEFAULT_CLASS = {
   DataTable: 'fc-form-data-table',
   DataListHeaderForm: 'fc-data-list-header-form',
   DataDetailsForm: 'fc-data-details-form',
-  PreviewForm: 'fc-preview-form',
   LayoutRowContainer: 'fc-layout-row-container',
   LayoutRow: 'fc-layout-row',
   LayoutCol: 'fc-layout-col',

package/src/enums/form.enum.ts

@@ -137,7 +137,6 @@ export enum FormPreservedItemKeys {
   SubmissionPdfConfig = 'submissionPdfConfig',
   IsGeneratingPDF = 'isGeneratingPdf',
   HasSignature = 'hasSignature',
-  InPreviewMode = 'inPreviewMode',
   IsPublic = 'isPublic',
 }
 export enum DataCategoryEnum {

package/src/functions/forms/get-data-list-option-value.ts

@@ -25,7 +25,8 @@ export async function processOptions(options: IFormDataListColumn[]): Promise<{
 
   groupedRequests.forEach((paths, formId) => {
     const cachedConfig = REACT_QUERY_CLIENT.getQueryData(['layoutConfig', String(formId)])
-    if (cachedConfig) apiCallPromises.push(Promise.resolve({ _id: '-1', Data: cachedConfig }))
+
+    if (cachedConfig) apiCallPromises.push(Promise.resolve({ _id: '-1', Data: extractByDotPaths(paths, cachedConfig) }))
     else
       apiCallPromises.push(
         client.post(`/api/form/${formId}`, { project: JSON.stringify(paths) }).then((res) => res.data),
@@ -73,3 +74,34 @@ export async function processOptions(options: IFormDataListColumn[]): Promise<{
   await Promise.all(dynamicApiPromises)
   return finalResult
 }
+
+export function extractByDotPaths(paths: Record<string, any>, source: Record<string, any>): Record<string, any> {
+  const result: Record<string, any> = {}
+
+  for (const rawPath of Object.keys(paths)) {
+    const parts = rawPath.split('.')
+    if (parts[0] === 'Data') parts.shift()
+
+    let cursor: any = source
+    for (const segment of parts) {
+      if (cursor != null && segment in cursor) cursor = cursor[segment]
+      else {
+        cursor = undefined
+        break
+      }
+    }
+
+    if (cursor !== undefined) {
+      let target = result
+      for (const segment of parts.slice(0, -1)) {
+        if (!(segment in target)) target[segment] = {}
+
+        target = target[segment]
+      }
+
+      target[parts[parts.length - 1]] = cursor
+    }
+  }
+
+  return result
+}

package/src/components/form/3-preview/index.tsx

@@ -1,47 +0,0 @@
-import { Form } from 'antd'
-import { IDndLayoutStructure } from '../../../types'
-import { FormPreservedItemKeys } from '../../../enums'
-import { LayoutRendererRow } from '../layout-renderer/1-row'
-import { useNotification } from '../../common/custom-hooks'
-import { useEffect, useMemo } from 'react'
-import {
-  DynamicFormButtonRender,
-  IDynamicButton_DisplayStateProps,
-} from '../layout-renderer/3-element/1-dynamic-button'
-import { ELEMENTS_DEFAULT_CLASS } from '../../../constants'
-
-export const FormPreviewComponent = ({
-  layout,
-  elements = {},
-  dataCount,
-}: { dataCount?: 'pending' | number } & IDndLayoutStructure) => {
-  const [previewFormRef] = Form.useForm()
-  const { infoModal } = useNotification()
-
-  useEffect(() => {
-    previewFormRef.setFieldValue(FormPreservedItemKeys.InPreviewMode, true)
-  }, [previewFormRef])
-
-  const formContext = useMemo(() => ({ formRef: previewFormRef }), [previewFormRef])
-
-  return (
-    <Form layout="vertical" form={previewFormRef} className={ELEMENTS_DEFAULT_CLASS.PreviewForm}>
-      {layout.map((row, rowIdx) => (
-        <LayoutRendererRow
-          key={rowIdx}
-          rowData={row}
-          dataCount={dataCount}
-          formContext={formContext}
-          elements={elements}
-          renderButton={(btnProps) => (
-            <DynamicFormButtonRender
-              displayStateProps={btnProps as IDynamicButton_DisplayStateProps}
-              formContext={formContext}
-              onCustomFunctionCall={() => infoModal({ content: 'Custom function call!' })}
-            />
-          )}
-        />
-      ))}
-    </Form>
-  )
-}