form-craft-package 1.1.9 → 1.1.11

package/package.json

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

package/src/components/common/custom-hooks/index.ts

@@ -1,2 +1,2 @@
-export * from './use-find-dynamic-form'
+export * from './use-find-dynamic-form.hook'
 export * from './use-notification.hook'

package/src/components/common/custom-hooks/use-check-element-conditions.hook.ts

@@ -0,0 +1,50 @@
+import { Form, FormInstance } from 'antd'
+import { useEffect, useState } from 'react'
+import { IFormLayoutElementConditions } from '../../../types'
+import { FormElementConditionalKeyEnum } from '../../../enums'
+
+export const useCheckElementConditions = (
+  formRef: FormInstance | undefined,
+  conditionalConfigs: IFormLayoutElementConditions | undefined,
+  defaultDisabled: boolean = false,
+) => {
+  const [isDisabled, setIsDisabled] = useState(defaultDisabled)
+  const [isHidden, setIsHidden] = useState(false)
+
+  const formValues = Form.useWatch([], { form: formRef, preserve: true })
+
+  useEffect(() => {
+    if (!!formValues) {
+      // enableIf config
+      if (
+        conditionalConfigs?.[FormElementConditionalKeyEnum.EnableIf] &&
+        Object.keys(conditionalConfigs[FormElementConditionalKeyEnum.EnableIf]).length > 0
+      ) {
+        const fieldsMeetConditions = Object.entries(conditionalConfigs[FormElementConditionalKeyEnum.EnableIf]).every(
+          ([key, value]) => {
+            if (typeof value === 'boolean' && value) return !!formValues[key]
+            return formValues[key] === value
+          },
+        )
+
+        setIsDisabled(!fieldsMeetConditions)
+      } else setIsDisabled(false)
+
+      // showIf config
+      if (
+        conditionalConfigs?.[FormElementConditionalKeyEnum.ShowIf] &&
+        Object.keys(conditionalConfigs[FormElementConditionalKeyEnum.ShowIf]).length > 0
+      ) {
+        const fieldsMeetConditions = Object.entries(conditionalConfigs[FormElementConditionalKeyEnum.ShowIf]).every(
+          ([key, value]) => {
+            if (typeof value === 'boolean' && value) return !!formValues[key]
+            return formValues[key] === value
+          },
+        )
+        setIsHidden(!fieldsMeetConditions)
+      }
+    } else setIsDisabled(false)
+  }, [formValues, conditionalConfigs])
+
+  return { isElementDisabled: isDisabled, isElementHidden: isHidden }
+}

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

@@ -0,0 +1,31 @@
+import { Form, FormInstance } from 'antd'
+import { FormPreservedItemKeys } from '../../../enums'
+
+export const useFormPreservedItemValues = (formRef?: FormInstance): IFormValues => {
+  const formId = Form.useWatch(FormPreservedItemKeys.FormId, { form: formRef, preserve: true })
+  const formKey = Form.useWatch(FormPreservedItemKeys.FormKey, { form: formRef, preserve: true })
+  const formDataId = Form.useWatch(FormPreservedItemKeys.FormDataId, { form: formRef, preserve: true })
+  const baseServerUrl = Form.useWatch(FormPreservedItemKeys.BaseServerUrl, { form: formRef, preserve: true })
+  const companyKey = Form.useWatch(FormPreservedItemKeys.CompanyKey, { 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 submissionPdfConfig = Form.useWatch(FormPreservedItemKeys.SubmissionPdfConfig, {
+    form: formRef,
+    preserve: true,
+  })
+
+  return {
+    [FormPreservedItemKeys.FormId]: formId,
+    [FormPreservedItemKeys.FormKey]: formKey,
+    [FormPreservedItemKeys.FormDataId]: formDataId,
+    [FormPreservedItemKeys.BaseServerUrl]: baseServerUrl,
+    [FormPreservedItemKeys.CompanyKey]: companyKey,
+    [FormPreservedItemKeys.SubmissionPdfConfig]: submissionPdfConfig,
+    [FormPreservedItemKeys.IsGeneratingPDF]: isGeneratingPdf,
+    [FormPreservedItemKeys.HasSignature]: hasSignature,
+  }
+}
+
+type IFormValues = {
+  [key in FormPreservedItemKeys]?: any
+}

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

@@ -1,6 +1,6 @@
 import { Form } from 'antd'
 import { ReactNode, useEffect, useState } from 'react'
-import { IReqDataConfig } from '.'
+import { defaultReqDataConfig, IReqDataConfig } from '.'
 import dayjs from 'dayjs'
 import { IFilterConfig, IFilterNested, IFilterSimple, IFormLayoutRow } from '../../../types'
 import { extractFiltersFromLayout } from '../../../functions'
@@ -13,11 +13,11 @@ export default function FormDataListHeaderComponent({
   userId,
   formId,
   titleComponent,
-  setPaginatedReqData,
+  setFilterReqData,
   onCustomFunctionCall,
 }: IFormDataListHeaderComponent) {
   const [dataListHeaderFormRef] = Form.useForm()
-  const [appliedFilters, setAppliedFilters] = useState<IFilterSimple>({})
+  const [appliedFilters, setAppliedFilters] = useState<IFilterSimple | undefined>(undefined)
   const [filterConfigs, setFilterConfigs] = useState<IFilterNested>({})
 
   useEffect(() => {
@@ -29,27 +29,23 @@ export default function FormDataListHeaderComponent({
   }, [layout])
 
   useEffect(() => {
-    const allCombinedFilters = {
-      customFilter: {},
-      dynamicFilter: {},
-    }
+    // needs to be called when there is a change in form values
+    if (!appliedFilters) return
+
+    let dynamicFilters = {}
+    let customFilters = {}
+
     Object.values(appliedFilters).forEach((config) => {
       if (config.type === FilterConfigTypeEnum.NoFilter) return
 
-      if (config.config?.customFilter)
-        allCombinedFilters.customFilter = { ...allCombinedFilters.customFilter, ...config.config.customFilter }
-      if (config.config?.dynamicFilter)
-        allCombinedFilters.dynamicFilter = { ...allCombinedFilters.dynamicFilter, ...config.config.dynamicFilter }
+      if (config.config) dynamicFilters = config.config
 
-      if (config.type === FilterConfigTypeEnum.ByMe)
-        allCombinedFilters.customFilter = { ...allCombinedFilters.customFilter, createdById: userId }
+      if (config.type === FilterConfigTypeEnum.ByAuthUser) customFilters = { ...customFilters, createdById: userId }
     })
 
-    setPaginatedReqData((c) => ({
-      ...c,
-      customFilter: allCombinedFilters.customFilter,
-      dynamicFilter: JSON.stringify(allCombinedFilters.dynamicFilter),
-    }))
+    setFilterReqData((c) =>
+      c ? { ...c, customFilter: customFilters, dynamicFilter: JSON.stringify(dynamicFilters) } : defaultReqDataConfig,
+    )
   }, [appliedFilters])
 
   return (
@@ -63,24 +59,20 @@ export default function FormDataListHeaderComponent({
             console.warn(`Key '${key}' does not have a filter config`)
             return
           }
+
           if ('type' in config) {
             if (typeof value !== 'string') value = dayjs(value as Date).toISOString()
 
-            if (config.config && 'dynamicFilter' in config.config && config.config.dynamicFilter) {
-              let stringifiedDynamicFilter = JSON.stringify(config.config.dynamicFilter)
-              stringifiedDynamicFilter = stringifiedDynamicFilter.replaceAll('{{VALUE}}', value as string)
-
-              config.config.dynamicFilter = JSON.parse(stringifiedDynamicFilter)
-            }
-            if (config.config && 'customFilter' in config.config && config.config.customFilter) {
-              let stringifiedCustomFilter = JSON.stringify(config.config.customFilter)
-              stringifiedCustomFilter = stringifiedCustomFilter.replaceAll('{{VALUE}}', value as string)
+            if (config.config) {
+              let stringifiedFilter = JSON.stringify(config.config)
+              stringifiedFilter = stringifiedFilter.replaceAll('{{VALUE}}', value as string)
 
-              config.config.customFilter = JSON.parse(stringifiedCustomFilter)
+              config.config = JSON.parse(stringifiedFilter)
             }
 
             setAppliedFilters((c) => ({ ...c, [key]: config as IFilterConfig }))
           } else {
+            // nested applies to radio button, where each option has its own filter, but only one needs to apply
             const nestedConfig = config as IFilterSimple
             if (typeof value === 'string' && value in nestedConfig)
               setAppliedFilters((c) => ({ ...c, [key]: nestedConfig[value as string] as IFilterConfig }))
@@ -111,7 +103,7 @@ export default function FormDataListHeaderComponent({
 
 type IFormDataListHeaderComponent = {
   layout: IFormLayoutRow[]
-  setPaginatedReqData: React.Dispatch<React.SetStateAction<IReqDataConfig>>
+  setFilterReqData: React.Dispatch<React.SetStateAction<IReqDataConfig | undefined>>
   titleComponent?: ReactNode
   formId?: number
   userId?: string | number

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

@@ -4,22 +4,19 @@ import { parseJSON } from '../../../functions/json-handlers'
 import { generateTableColumns } from '../../../functions'
 import FormDataListSkeleton_Table from '../../common/loading-skeletons/table'
 import FormDataListHeaderComponent from './header'
-import { FormDataListViewTypeEnum } from '../../../enums'
+import { FilterConfigTypeEnum, FormDataListViewTypeEnum, MongoDbSortOrderEnum } from '../../../enums'
 import { Table } from 'antd'
 import { IFormData, IFormDataListConfig, IFormLayoutRow, IFormSchema, ITableColumn } from '../../../types'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
+import { SorterResult } from 'antd/es/table/interface'
 
 function FormDataListComponent({ formId, userId, onCustomFunctionCall }: IFormDataListComponent) {
   const [loadings, setLoadings] = useState({ schema: true, data: true })
   const [tableColumns, setTableColumns] = useState<ITableColumn[]>([])
-  const [paginatedReqData, setPaginatedReqData] = useState<IReqDataConfig>({
-    customFilter: { deletedDate: null },
-    dynamicFilter: JSON.stringify({}),
-    sort: {},
-  })
-  const [pagination, setPagination] = useState<IPagination | undefined>()
-  const [otherGenericConfigs, setOtherGenericConfigs] = useState<Partial<IFormDataListConfig> | undefined>(undefined)
-  const [formData, setFormData] = useState({ data: [], total: 0 })
+  const [filterReqData, setFilterReqData] = useState<IReqDataConfig | undefined>()
+  const [paginationConfig, setPaginationConfig] = useState<IPagination | undefined>()
+  const [dataListConfig, setDataListConfig] = useState<Partial<IFormDataListConfig> | undefined>(undefined)
+  const [formData, setFormData] = useState<{ data: IFormData[]; total: number }>({ data: [], total: 0 })
   const [headerLayout, setHeaderLayout] = useState<IFormLayoutRow[]>([])
 
   useEffect(() => {
@@ -30,16 +27,28 @@ function FormDataListComponent({ formId, userId, onCustomFunctionCall }: IFormDa
           if (res.status === 200) {
             const parsedData: IFormSchema | null = parseJSON(res.data.data)
             if (parsedData) {
-              const { elements, header, pagination: apiPagination, ...restConfigs } = parsedData.dataListConfig
+              console.log(parsedData.dataListConfig)
+              const { elements, header, pagination, defaultFilter, defaultSorter, ...restConfigs } =
+                parsedData.dataListConfig
+
               setTableColumns(generateTableColumns(elements))
-              setPagination({
+              setPaginationConfig({
                 current: 1,
-                pageSize: apiPagination?.defaultPageSize ?? 10,
-                showSizeChanger: apiPagination?.showSizeChanger ?? false,
-                pageSizeOptions: apiPagination?.pageSizeOptions ?? [],
+                pageSize: pagination?.defaultPageSize ?? 10,
+                showSizeChanger: pagination?.showSizeChanger ?? false,
+                pageSizeOptions: pagination?.pageSizeOptions ?? [],
               })
               setHeaderLayout(header.layout)
-              setOtherGenericConfigs(restConfigs)
+              setDataListConfig(restConfigs)
+
+              if (!defaultFilter || defaultFilter.type === FilterConfigTypeEnum.NoFilter)
+                setFilterReqData(defaultReqDataConfig)
+              else
+                setFilterReqData({
+                  customFilter: defaultFilter.type === FilterConfigTypeEnum.ByAuthUser ? { createdById: userId } : {},
+                  dynamicFilter: defaultFilter.config ? JSON.stringify(defaultFilter.config) : JSON.stringify({}),
+                  sort: defaultSorter ? { [defaultSorter.field]: defaultSorter.order } : {},
+                })
             }
           }
         })
@@ -49,20 +58,27 @@ function FormDataListComponent({ formId, userId, onCustomFunctionCall }: IFormDa
 
   const fetchFormDataList = useCallback(
     (dynamicFormId: number) => {
-      if (!pagination) {
+      setLoadings((c) => ({ ...c, data: true }))
+
+      if (!filterReqData) return
+
+      if (!paginationConfig) {
         setLoadings((c) => ({ ...c, data: false }))
         return
       }
 
       client
-        .post(`/api/formdata/list/${dynamicFormId}`, paginatedReqData)
+        .post(`/api/formdata/list/${dynamicFormId}`, {
+          ...filterReqData,
+          pagination: { number: paginationConfig.current, size: paginationConfig.pageSize },
+        })
         .then((res) => {
           if (res.status === 200)
             setFormData({ ...res.data, data: res.data.data.map((d: IFormData) => ({ ...d, ...JSON.parse(d.data) })) })
         })
         .finally(() => setLoadings((c) => ({ ...c, data: false })))
     },
-    [paginatedReqData, pagination],
+    [filterReqData, paginationConfig],
   )
 
   useEffect(() => {
@@ -75,26 +91,45 @@ function FormDataListComponent({ formId, userId, onCustomFunctionCall }: IFormDa
     <div>
       <FormDataListHeaderComponent
         layout={headerLayout}
-        setPaginatedReqData={setPaginatedReqData}
+        setFilterReqData={setFilterReqData}
         userId={userId}
         formId={formId}
         titleComponent={
           <div className="text-primary font-bold text-18 flex items-center gap-2">
-            <span>{otherGenericConfigs?.title}</span>
-            {otherGenericConfigs?.showCount && <span>({formData.total})</span>}
+            <span>{dataListConfig?.title}</span>
+            {dataListConfig?.showCount && <span>({formData.total})</span>}
           </div>
         }
         onCustomFunctionCall={onCustomFunctionCall}
       />
-      {otherGenericConfigs?.listType === FormDataListViewTypeEnum.Table && (
+      {dataListConfig?.listType === FormDataListViewTypeEnum.Table && (
         <Table<IFormData>
           dataSource={formData.data}
           columns={tableColumns}
           rowKey={(record) => record.id}
-          pagination={pagination}
+          pagination={{ ...paginationConfig, total: formData.total }}
           loading={loadings.data}
-          onChange={(pagination, _, sorter) => {
-            console.log('ON TABLE CHANGE', pagination, sorter)
+          onChange={(cbPagination, _, sorter: SorterResult<IFormData> | SorterResult<IFormData>[]) => {
+            console.log('ON TABLE CHANGE', cbPagination, sorter)
+            const { total, ...restCbPagination } = cbPagination
+            setPaginationConfig(restCbPagination as IPagination)
+
+            if (sorter && Object.values(sorter).length > 0)
+              setFilterReqData((c) =>
+                c
+                  ? {
+                      ...c,
+                      sort: (sorter as SorterResult<IFormData>).field
+                        ? {
+                            [(sorter as SorterResult<IFormData>).field as string]:
+                              (sorter as SorterResult<IFormData>).order === 'ascend'
+                                ? MongoDbSortOrderEnum.Ascending
+                                : MongoDbSortOrderEnum.Descending,
+                          }
+                        : {},
+                    }
+                  : defaultReqDataConfig,
+              )
           }}
         />
       )}
@@ -104,9 +139,15 @@ function FormDataListComponent({ formId, userId, onCustomFunctionCall }: IFormDa
 export { FormDataListComponent }
 
 export interface IReqDataConfig {
-  customFilter: {}
-  dynamicFilter: {}
-  sort: {}
+  customFilter: object
+  dynamicFilter: string
+  sort: object
+}
+
+export const defaultReqDataConfig = {
+  customFilter: {},
+  dynamicFilter: JSON.stringify({}),
+  sort: {},
 }
 
 interface IPagination {

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

@@ -38,9 +38,13 @@ export default function FormDataDetailsComponent({
   }, [formDataRef, formId, formKey, baseServerUrl, formDataId, companyKey])
 
   const fetchFormData = useCallback(
-    (dFormId: number, migrationRules: { [key: string]: IMigrationRule[] }) => {
+    (dFormId?: number, migrationRules?: { [key: string]: IMigrationRule[] }) => {
       if (formDataId === NEW_FORM_DATA_IDENTIFIER) setLoadings((c) => ({ ...c, data: false }))
       else {
+        if (!dFormId) {
+          console.error('Form ID is required to fetch form data')
+          return
+        }
         client
           .get(`/api/formdata/${dFormId}/${formDataId}`)
           .then((res) => {
@@ -68,10 +72,14 @@ export default function FormDataDetailsComponent({
             const parsedData: IFormSchema | null = parseJSON(res.data.data)
             if (parsedData) {
               console.log({ parsedData })
-              const { layout, migrationRules, convertScreenToPdf = false } = parsedData.detailsConfig
+              const { layout, migrationRules } = parsedData.detailsConfig
 
               if (isPublic) {
-                formDataRef.setFieldValue(FormPreservedItemKeys.ConvertScreenToPDF, convertScreenToPdf)
+                if (parsedData.generateConfig?.submissionPdf?.enabled)
+                  formDataRef.setFieldValue(
+                    FormPreservedItemKeys.SubmissionPdfConfig,
+                    parsedData.generateConfig.submissionPdf,
+                  )
                 setLoadings((c) => ({ ...c, data: false }))
               } else fetchFormData(formId, migrationRules)
               setLayout(layout)

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

@@ -27,16 +27,15 @@ export const LayoutRendererRow = ({
         }}
       >
         {rowData.children.map((col, colIdx) => (
-          <div key={colIdx} style={getFlexItemStyle(breakpointDevice, colIdx, rowData.responsiveness)}>
-            <LayoutRendererCol
-              key={colIdx}
-              colData={col}
-              formRef={formRef}
-              titleComponent={titleComponent}
-              breakpointDevice={breakpointDevice}
-              renderButton={renderButton}
-            />
-          </div>
+          <LayoutRendererCol
+            key={colIdx}
+            colData={col}
+            formRef={formRef}
+            titleComponent={titleComponent}
+            breakpointDevice={breakpointDevice}
+            renderButton={renderButton}
+            colStyle={getFlexItemStyle(breakpointDevice, colIdx, rowData.responsiveness)}
+          />
         ))}
       </div>
     </>

package/src/components/form/layout-renderer/2-col/index.tsx

@@ -1,6 +1,5 @@
-import { ReactElement, ReactNode } from 'react'
+import { ReactElement, ReactNode, useState } from 'react'
 import { LayoutRendererRow } from '../1-row'
-import LayoutRendererElement from '../3-element'
 import {
   IDataRender_ButtonProps,
   IFormLayoutCol,
@@ -8,40 +7,59 @@ import {
   IFormLayoutElementConditions,
   IFormLayoutRow,
 } from '../../../../types'
-import { FormLayoutNodeEnum, ResponsivenessDeviceEnum } from '../../../../enums'
+import { FlexDirection, FormLayoutNodeEnum, ResponsivenessDeviceEnum } from '../../../../enums'
 import { FormInstance } from 'antd'
+import LayoutRendererElementWrapper from '../3-element'
 
 export default function LayoutRendererCol({
   colData,
   formRef,
   titleComponent,
   breakpointDevice,
+  colStyle,
   renderButton,
 }: ILayoutRendererCol) {
-  return colData.children.map((item: IFormLayoutRow | IFormLayoutElement) =>
-    item.nodeType === FormLayoutNodeEnum.Row ? (
-      <LayoutRendererRow
-        key={item.id}
-        rowData={item}
-        formRef={formRef}
-        titleComponent={titleComponent}
-        breakpointDevice={breakpointDevice}
-        renderButton={renderButton}
-      />
-    ) : (
-      <div className="flex flex-col" key={item.id}>
-        <LayoutRendererElement
-          elementData={item}
-          formRef={formRef}
-          titleComponent={titleComponent}
-          breakpointDevice={breakpointDevice}
-          renderButton={renderButton}
-        />
-        {item.props && 'description' in item.props && (
-          <span className="text-neutral text-12 italic">{item.props.description}</span>
-        )}
-      </div>
-    ),
+  const [hiddenElementCount, setHiddenElementCount] = useState(0)
+
+  // display: colData.children.length === hiddenElementCount ? 'none' : 'flex'
+  console.log(colStyle)
+  return (
+    <div
+      style={{
+        ...colStyle,
+        display: colData.children.length === hiddenElementCount ? 'none' : 'flex',
+        flexDirection: FlexDirection.Col,
+      }}
+    >
+      {colData.children.map((item: IFormLayoutRow | IFormLayoutElement) =>
+        item.nodeType === FormLayoutNodeEnum.Row ? (
+          <LayoutRendererRow
+            key={item.id}
+            rowData={item}
+            formRef={formRef}
+            titleComponent={titleComponent}
+            breakpointDevice={breakpointDevice}
+            renderButton={renderButton}
+          />
+        ) : (
+          <LayoutRendererElementWrapper
+            key={item.id}
+            elementData={item}
+            formRef={formRef}
+            titleComponent={titleComponent}
+            breakpointDevice={breakpointDevice}
+            renderButton={renderButton}
+            hideElement={(isHidden) =>
+              setHiddenElementCount((c) => {
+                if (isHidden) return c + 1
+                if (c - 1 < 0) return 0
+                return c - 1
+              })
+            }
+          />
+        ),
+      )}
+    </div>
   )
 }
 
@@ -50,5 +68,6 @@ interface ILayoutRendererCol {
   formRef: FormInstance
   titleComponent?: ReactNode
   breakpointDevice: ResponsivenessDeviceEnum
+  colStyle: { [key: string]: number | string }
   renderButton?: (props: IDataRender_ButtonProps, conditions?: IFormLayoutElementConditions) => ReactElement
 }

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

@@ -1,10 +1,10 @@
 import { lazy, memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Form, FormInstance } from 'antd'
+import { FormInstance } from 'antd'
 import { getButtonRenderProps } from '../../../../functions/get-element-props'
 import { stringifyJSON } from '../../../../functions/json-handlers'
 import { ButtonActionCategoryEnum, FormLoadingModalTypeEnum, FormPreservedItemKeys } from '../../../../enums'
-import { IDataRender_ButtonProps, IFormLayoutElementConditions } from '../../../../types'
+import { IDataRender_ButtonProps, IFormLayoutElementConditions, IFormSubmissionPdf } from '../../../../types'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../../constants'
 import { Button_FillerPortal } from '../../../common/button'
 import { base64ToBlob, extractDynamicFormHref, objectToQueryParams } from '../../../../functions'
@@ -13,6 +13,8 @@ import client from '../../../../functions/axios-handler'
 import { useLazyModalOpener } from '../../../common/custom-hooks/use-lazy-modal-opener.hook'
 import WarningIcon from '../../../common/warning-icon'
 import { saveFile } from '../../../../functions/form'
+import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
+import { useCheckElementConditions } from '../../../common/custom-hooks/use-check-element-conditions.hook'
 
 const FormDataLoadingIndicatorModal = lazy(() => import('../../../modals/form-data-loading.modal'))
 
@@ -27,37 +29,17 @@ export const DynamicFormButtonRender = memo(
   }: IDynamicButton) => {
     const navigate = useNavigate()
     const location = useLocation()
-    const { success, warning, error, confirmModal } = useNotification()
+    const { success, warning, error, confirmModal, errorModal } = useNotification()
     const { isModalOpen, isPendingTransition, openModal, closeModal } = useLazyModalOpener()
+    const { isElementDisabled, isElementHidden } = useCheckElementConditions(formRef, conditions, true)
 
     const [loading, setLoading] = useState(false)
-    const [isButtonDisabled, setIsButtonDisabled] = useState(true)
     const [dataLoadingType, setDataLoadingType] = useState<FormLoadingModalTypeEnum | undefined>()
 
-    const formValues = Form.useWatch([], { form: formRef, preserve: true })
-    const formId = Form.useWatch(FormPreservedItemKeys.FormId, { form: formRef, preserve: true }) // for public use
-    const formKey = Form.useWatch(FormPreservedItemKeys.FormKey, { form: formRef, preserve: true }) // for public use
-    const companyKey = Form.useWatch(FormPreservedItemKeys.CompanyKey, { form: formRef, preserve: true }) // for public use
-    const convertScreenToPdf = Form.useWatch(FormPreservedItemKeys.ConvertScreenToPDF, {
-      form: formRef,
-      preserve: true,
-    }) // for public use
+    const { formId, formKey, baseServerUrl, companyKey, submissionPdfConfig } = useFormPreservedItemValues(formRef)
 
     const baseDynamicUrl = useMemo(() => extractDynamicFormHref(location.pathname), [location.pathname])
 
-    useEffect(() => {
-      if (!!formValues) {
-        if (conditions?.enableIf && Object.keys(conditions.enableIf).length > 0) {
-          const fieldsMeetConditions = Object.entries(conditions.enableIf).every(([key, value]) => {
-            if (typeof value === 'boolean' && value) return !!formValues[key]
-            return formValues[key] === value
-          })
-
-          setIsButtonDisabled(!fieldsMeetConditions)
-        } else setIsButtonDisabled(false)
-      } else setIsButtonDisabled(false)
-    }, [formValues, conditions])
-
     useEffect(() => {
       if (dataLoadingType !== undefined) openModal()
     }, [dataLoadingType])
@@ -126,7 +108,7 @@ export const DynamicFormButtonRender = memo(
     }, [])
 
     const onCreateNewData = useCallback(
-      (generatedPdfBlobName?: string) => {
+      (generatedPdfBlobName?: string, pdfConfig?: IFormSubmissionPdf) => {
         formRef?.validateFields().then((values) => {
           setDataLoadingType(FormLoadingModalTypeEnum.SavingChanges)
           setLoading(true)
@@ -135,7 +117,7 @@ export const DynamicFormButtonRender = memo(
             name: '', // TODO: maybe later, make it dynamic
             data: stringifyJSON({ ...values, generatedPdfBlobName }),
           }
-          if (isPublic) reqData.private = true // TODO: figure out what this is
+          if (isPublic) reqData.private = false // not used anymore, sending it as false by default
           else reqData.version = 1
 
           const endpoint = isPublic ? `/api/site/${formKey}` : `/api/formdata/${formId}`
@@ -148,34 +130,59 @@ export const DynamicFormButtonRender = memo(
                   closeModal()
                   displayResultMessage()
                   if (!isPublic) navigate(`${baseDynamicUrl}/${res.data}`)
+                  else {
+                    if (pdfConfig?.showDownloadModal)
+                      confirmModal({
+                        title: pdfConfig.successTitle ?? 'Successfully generated the PDF!',
+                        content: pdfConfig.successContent ?? 'Would you like to download the PDF?',
+                        centered: true,
+                        okText: 'Download',
+                        onOk: () => {
+                          const href = `${baseServerUrl}/api/attachment/${companyKey}/${generatedPdfBlobName}`
+                          window.open(href, '_blank')
+                          window.location.reload()
+                        },
+                      })
+                  }
                 }, 500)
               }
             })
-            .catch(() => displayResultMessage(false))
+            .catch(() => {
+              if (pdfConfig?.errorMsg) errorModal({ title: pdfConfig.errorMsg })
+              displayResultMessage(false)
+            })
             .finally(() => setLoading(false))
         })
       },
-      [formRef, formId, baseDynamicUrl, isPublic, formKey],
+      [formRef, formId, baseDynamicUrl, isPublic, formKey, baseServerUrl, companyKey],
     )
 
-    const generatePdfProof = useCallback(() => {
-      formRef?.validateFields().then((values) => {
-        const queryParams = objectToQueryParams(values)
-        const feDomainUrl = window.location.origin
-        const fullUrl = encodeURIComponent(`${feDomainUrl}${location.pathname}?${queryParams}`)
+    const generatePdfProof = useCallback(
+      (pdfConfig: IFormSubmissionPdf) => {
+        formRef?.validateFields().then((values) => {
+          const queryParams = objectToQueryParams(values)
+          const feDomainUrl = window.location.origin
+          const fullUrl = encodeURIComponent(`${feDomainUrl}${location.pathname}?${queryParams}`)
 
-        const blobName = 'abc.pdf'
-        client
-          .post(`/api/attachment/pdf/${companyKey}/${blobName}?url=${fullUrl}`)
-          .then((res) => {
-            if (res.status < 300) onCreateNewData(res.data)
-          })
-          .catch(() => {
-            closeModal()
-            error({ message: 'Error occured while generating PDF!' })
-          })
-      })
-    }, [formRef, location.pathname, companyKey])
+          const blobName =
+            pdfConfig.title?.values
+              .sort((a, b) => a.order - b.order)
+              .map((v) => (v.isDynamic ? values[v.value] : v.value))
+              .join(pdfConfig.title?.delimiter ?? '') ?? 'submission-pdf'
+
+          client
+            .post(`/api/attachment/pdf/${companyKey}/${blobName}?url=${fullUrl}`)
+            .then((res) => {
+              if (res.status < 300) onCreateNewData(res.data, pdfConfig)
+            })
+            .catch(() => {
+              closeModal()
+              error({ message: 'Error occured while generating PDF!' })
+            })
+        })
+      },
+      [formRef, location.pathname, companyKey],
+    )
 
     const onSaveExistingData = useCallback(() => {
       formRef!.validateFields().then((values) => {
@@ -186,7 +193,7 @@ export const DynamicFormButtonRender = memo(
           name: 'Dynamic form data', // TODO: maybe later, make it dynamic
           data: stringifyJSON(values),
           version: 1, // FIXME: increment
-          private: true, // TODO: figure out what this is
+          private: false, // not used anymore, sending it as false by default
         }
 
         client
@@ -237,10 +244,10 @@ export const DynamicFormButtonRender = memo(
             }
 
             if (formDataId === NEW_FORM_DATA_IDENTIFIER) {
-              if (isPublic && convertScreenToPdf) {
+              if (isPublic && submissionPdfConfig) {
                 // pdf generate does not work when auth-ed
                 setDataLoadingType(FormLoadingModalTypeEnum.GeneratingPdf)
-                generatePdfProof()
+                generatePdfProof(submissionPdfConfig)
               } else onCreateNewData()
             } else onSaveExistingData()
           } else error({ message: CUSTOM_ERROR_MESSAGES.FormInstanceNotFound })
@@ -269,14 +276,16 @@ export const DynamicFormButtonRender = memo(
           warning({ message: errorMessage })
           return
       }
-    }, [btnProps, baseDynamicUrl, formDataId, convertScreenToPdf, companyKey])
+    }, [btnProps, baseDynamicUrl, formDataId, submissionPdfConfig, companyKey])
+
+    if (isElementHidden) return <></>
 
     return (
       <>
         <Button_FillerPortal
           {...getButtonRenderProps(btnProps)}
           loading={loading || isPendingTransition}
-          disabled={isButtonDisabled}
+          disabled={isElementDisabled}
           className="w-full"
           onClick={() => {
             if (

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

@@ -1,18 +1,5 @@
 import { Key, ReactNode, Fragment } from 'react'
-import {
-  Checkbox,
-  Col,
-  Form,
-  Input,
-  Select,
-  Radio,
-  Row,
-  InputNumber,
-  DatePicker,
-  Modal,
-  Upload,
-  Switch,
-} from 'antd'
+import { Checkbox, Form, Input, Select, Radio, InputNumber, DatePicker, Modal, Upload, Switch } from 'antd'
 import { FaCaretDown } from 'react-icons/fa'
 import dayjs, { Dayjs } from 'dayjs'
 import { FaUpload } from 'react-icons/fa6'
@@ -20,11 +7,7 @@ import { ElementTypeEnum } from '../../../../enums'
 import { IValidationRule, mapToFormItemRules } from '../../../../functions'
 import { DisabledFieldIndicator } from '../../../common/disabled-field-indicator'
 
-interface IFieldsMapperProps {
-  fields: IMapperFieldObj[]
-}
-
-export const LayoutRenderer_FieldElement = ({ fields }: IFieldsMapperProps): JSX.Element => (
+export const LayoutRenderer_FieldElement = ({ fields }: { fields: IMapperFieldObj[] }): JSX.Element => (
   <>
     {fields
       .filter(({ isHidden = false }) => !isHidden)
@@ -42,10 +25,6 @@ export const LayoutRenderer_FieldElement = ({ fields }: IFieldsMapperProps): JSX
                   : 'value'
               }
               rules={mapToFormItemRules(field.validations ?? [])}
-              // rules={[
-              //   { pattern: /^([0-9]{1,2}|100)$/, message: 'Max value exceeded' },
-              //   { pattern: /^(18|[1-9][0-9]*)$/, message: 'Min value exceeded' },
-              // ]}
             >
               {getField(field)}
             </Form.Item>
@@ -67,6 +46,7 @@ const getField = ({
   minRows = 3,
   numberFieldMin,
   numberFieldMax,
+  isCustom,
   disabledDate,
 }: Partial<IMapperFieldObj>): JSX.Element => {
   placeholder = placeholder && placeholder.length > 0 ? placeholder : typeof label === 'string' ? label : ''
@@ -105,24 +85,25 @@ const getField = ({
       if (isMultiValue)
         return (
           <Checkbox.Group disabled={disabled}>
-            <Row gutter={[3, 3]}>
+            <div className="flex items-center gap-1">
               {options?.map((o, oIdx) => (
-                <Col key={oIdx}>
-                  <Checkbox value={o.value}>{o.label}</Checkbox>
-                </Col>
+                <Checkbox key={oIdx} value={o.value}>
+                  {o.label}
+                </Checkbox>
               ))}
-            </Row>
+            </div>
           </Checkbox.Group>
         )
+
       return (
-        <Radio.Group disabled={disabled} className="w-full">
-          <Row gutter={[5, 5]} align="middle">
+        <Radio.Group disabled={disabled} className={`w-full ${isCustom ? 'fc-custom' : ''}`}>
+          <div className="flex items-center gap-1">
             {options?.map((o, oIdx) => (
-              <Col key={oIdx}>
-                <Radio value={o.value}>{o.label}</Radio>
-              </Col>
+              <Radio key={oIdx} value={o.value}>
+                {o.label}
+              </Radio>
             ))}
-          </Row>
+          </div>
         </Radio.Group>
       )
     case ElementTypeEnum.NumberInput:
@@ -194,6 +175,7 @@ interface IMapperFieldObj {
   allowClear?: boolean
   numberFieldMin?: number
   numberFieldMax?: number
+  isCustom?: boolean
   disabledDate?: (date: Dayjs) => boolean
 }
 interface ISelectOption {

package/src/components/form/layout-renderer/3-element/4-rich-text-editor.tsx

@@ -2,7 +2,12 @@ import { Form, FormInstance } from 'antd'
 import ReactQuill from 'react-quill'
 import 'react-quill/dist/quill.snow.css'
 
-export default function LayoutRenderer_RichEditor({ formRef, fieldKey, elementProps }: ILayoutRenderer_RichEditor) {
+export default function LayoutRenderer_RichEditor({
+  formRef,
+  fieldKey,
+  elementProps,
+  isElementDisabled,
+}: ILayoutRenderer_RichEditor) {
   const fieldValue = Form.useWatch(fieldKey, { form: formRef, preserve: true })
 
   return (
@@ -10,6 +15,7 @@ export default function LayoutRenderer_RichEditor({ formRef, fieldKey, elementPr
       <ReactQuill
         theme="snow"
         value={fieldValue}
+        readOnly={isElementDisabled}
         onChange={(value) => formRef.setFieldValue(fieldKey, value)}
         modules={modules}
         formats={formats}
@@ -33,5 +39,6 @@ const modules = {
 interface ILayoutRenderer_RichEditor {
   formRef: FormInstance
   fieldKey: string
+  isElementDisabled: boolean
   elementProps: { label?: string; placeholder?: string; description?: string; hasNoLabel?: string }
 }

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

@@ -4,7 +4,12 @@ import ReCAPTCHA from 'react-google-recaptcha'
 import client from '../../../../functions/axios-handler'
 import { FormPreservedItemKeys } from '../../../../enums'
 
-export default function LayoutRenderer_ReCaptcha({ formRef, fieldKey, elementProps }: ILayoutRenderer_RichEditor) {
+export default function LayoutRenderer_ReCaptcha({
+  formRef,
+  fieldKey,
+  elementProps,
+  isElementDisabled,
+}: ILayoutRenderer_RichEditor) {
   const [tokenVerificationFailed, setTokenVerificationFailed] = useState(false)
   const formKey = Form.useWatch(FormPreservedItemKeys.FormKey, { form: formRef, preserve: true })
 
@@ -25,11 +30,20 @@ export default function LayoutRenderer_ReCaptcha({ formRef, fieldKey, elementPro
   )
 
   if (!elementProps.siteKey)
-    return <span className="text-warning">Signature field could not render due to missing field KEY!</span>
+    return <span className="text-warning">ReCaptcha field could not render due to missing SITE KEY!</span>
 
   return (
     <>
-      <ReCAPTCHA sitekey={elementProps.siteKey ?? ''} onChange={(value: string | null) => verifyReCaptcha(value)} />
+      <div className={isElementDisabled ? 'relative w-max' : ''}>
+        <ReCAPTCHA
+          sitekey={elementProps.siteKey ?? ''}
+          onChange={(value: string | null) => verifyReCaptcha(value)}
+          className="cursor-not-allowed"
+        />
+        {isElementDisabled && (
+          <div className="absolute top-0 right-0 left-0 bottom-0 bg-transparent cursor-not-allowed" />
+        )}
+      </div>
       {tokenVerificationFailed && <span className="text-danger">Warning: reCAPTCHA verification failed!</span>}
     </>
   )
@@ -38,5 +52,6 @@ export default function LayoutRenderer_ReCaptcha({ formRef, fieldKey, elementPro
 interface ILayoutRenderer_RichEditor {
   formRef: FormInstance
   fieldKey: string
+  isElementDisabled: boolean
   elementProps: { siteKey?: string; description?: string }
 }

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

@@ -1,10 +1,16 @@
 import { Form, FormInstance } from 'antd'
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import SignatureCanvas from 'react-signature-canvas'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../../constants'
 import { FormPreservedItemKeys } from '../../../../enums'
+import { Button_FillerPortal } from '../../../common/button'
 
-export default function LayoutRenderer_Signature({ formRef, fieldKey, elementProps }: ILayoutRenderer_Signature) {
+export default function LayoutRenderer_Signature({
+  formRef,
+  fieldKey,
+  elementProps,
+  isElementDisabled,
+}: ILayoutRenderer_Signature) {
   const sigCanvasRef = useRef<SignatureCanvas>(null)
   const savedSignatureBlobName = Form.useWatch(fieldKey, formRef)
   const formDataId = Form.useWatch(FormPreservedItemKeys.FormDataId, { form: formRef, preserve: true })
@@ -12,8 +18,34 @@ export default function LayoutRenderer_Signature({ formRef, fieldKey, elementPro
   const companyKey = Form.useWatch(FormPreservedItemKeys.CompanyKey, { form: formRef, preserve: true })
   const isGeneratingPdf = Form.useWatch(FormPreservedItemKeys.IsGeneratingPDF, { form: formRef, preserve: true })
 
+  useEffect(() => {
+    if (isElementDisabled) sigCanvasRef.current?.off()
+    else sigCanvasRef.current?.on()
+  }, [isElementDisabled])
+
   return (
-    <Form.Item name={fieldKey} label={elementProps.hasNoLabel ? '' : elementProps.label} labelAlign="left">
+    <Form.Item
+      name={fieldKey}
+      label={
+        elementProps.hasNoLabel ? (
+          ''
+        ) : (
+          <div>
+            <span>{elementProps.label}</span>
+            <Button_FillerPortal
+              link
+              onClick={() => {
+                sigCanvasRef.current?.clear()
+                formRef.setFieldsValue({ [fieldKey]: null, [FormPreservedItemKeys.HasSignature]: null })
+              }}
+            >
+              Clear
+            </Button_FillerPortal>
+          </div>
+        )
+      }
+      labelAlign="left"
+    >
       {formDataId !== NEW_FORM_DATA_IDENTIFIER || isGeneratingPdf ? (
         <div className="h-[300px] rounded-md border-2 border-[#f0f0f0]">
           <img alt="signature" src={`${baseServerUrl}/api/attachment/${companyKey}/${savedSignatureBlobName}`} />
@@ -40,5 +72,6 @@ export default function LayoutRenderer_Signature({ formRef, fieldKey, elementPro
 interface ILayoutRenderer_Signature {
   formRef: FormInstance
   fieldKey: string
+  isElementDisabled: boolean
   elementProps: { label?: string; hasNoLabel?: boolean; description?: string }
 }

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

@@ -14,6 +14,7 @@ export default function LayoutRenderer_FileUpload({
   fieldKey,
   elementProps,
   uploadRules,
+  isElementDisabled,
 }: ILayoutRenderer_FileUpload) {
   const { warningModal, confirmModal } = useNotification()
   const [loading, setLoading] = useState(false)
@@ -87,7 +88,7 @@ export default function LayoutRenderer_FileUpload({
           </Button_FillerPortal>
         </div>
       ) : elementProps.isDragger ? (
-        <Upload.Dragger {...uploadProps} beforeUpload={(file) => beforeUpload(file)}>
+        <Upload.Dragger {...uploadProps} disabled={isElementDisabled} beforeUpload={(file) => beforeUpload(file)}>
           <div className="flex flex-col items-center">
             <FaUpload size={24} className="text-primary" />
             <span className="font-semibold mt-2">{elementProps.placeholder}</span>
@@ -95,8 +96,8 @@ export default function LayoutRenderer_FileUpload({
           </div>
         </Upload.Dragger>
       ) : (
-        <Upload {...uploadProps} beforeUpload={(file) => beforeUpload(file)}>
-          <Button_FillerPortal outline onClick={() => {}}>
+        <Upload {...uploadProps} disabled={isElementDisabled} beforeUpload={(file) => beforeUpload(file)}>
+          <Button_FillerPortal disabled={isElementDisabled} outline onClick={() => {}}>
             <FaUpload />
             {elementProps.placeholder}
           </Button_FillerPortal>
@@ -110,6 +111,7 @@ interface ILayoutRenderer_FileUpload {
   formRef: FormInstance
   fieldKey: string
   uploadRules?: IFileUploadElementRules
+  isElementDisabled: boolean
   elementProps: {
     label?: string
     hasNoLabel?: boolean

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

@@ -1,5 +1,5 @@
 import { Divider, FormInstance } from 'antd'
-import { ReactElement, ReactNode, useMemo } from 'react'
+import { ReactElement, ReactNode, useEffect, useMemo } from 'react'
 import {
   IDataRender_ButtonProps,
   IFieldElementSourceManual,
@@ -15,14 +15,41 @@ import LayoutRenderer_RichEditor from './4-rich-text-editor'
 import LayoutRenderer_ReCaptcha from './5-re-captcha'
 import LayoutRenderer_Signature from './6-signature'
 import LayoutRenderer_FileUpload from './7-file-upload'
+import { useCheckElementConditions } from '../../../common/custom-hooks/use-check-element-conditions.hook'
+
+export default function LayoutRendererElementWrapper({
+  hideElement,
+  ...componentProps
+}: ILayoutRendererElement & { hideElement: (isHidden: boolean) => void }) {
+  const { isElementDisabled, isElementHidden } = useCheckElementConditions(
+    componentProps.formRef,
+    componentProps.elementData.conditions,
+  )
+
+  useEffect(() => {
+    hideElement(isElementHidden)
+  }, [isElementHidden])
+
+  if (isElementHidden) return <></>
+
+  return (
+    <div className="flex flex-col">
+      <LayoutRendererElement {...componentProps} isElementDisabled={isElementDisabled} />
+      {componentProps.elementData.props && 'description' in componentProps.elementData.props && (
+        <span className="text-neutral text-12 italic">{componentProps.elementData.props.description}</span>
+      )}
+    </div>
+  )
+}
 
-export default function LayoutRendererElement({
+function LayoutRendererElement({
   elementData,
   formRef,
   titleComponent,
   breakpointDevice,
+  isElementDisabled,
   renderButton,
-}: ILayoutRendererElement) {
+}: ILayoutRendererElement & { isElementDisabled: boolean }) {
   const props = getElementGeneralizedProps(elementData.props)
   const { elementType, key, validations, conditions } = elementData
   const { options = [] } = (props.optionSource as IFieldElementSourceManual) ?? {}
@@ -32,17 +59,38 @@ export default function LayoutRendererElement({
     case ElementTypeEnum.RichTextEditor:
       if (!key) return <span className="text-warning">Rich text editor field could not render due to missing KEY!</span>
 
-      return <LayoutRenderer_RichEditor formRef={formRef} fieldKey={key} elementProps={props} />
+      return (
+        <LayoutRenderer_RichEditor
+          formRef={formRef}
+          fieldKey={key}
+          elementProps={props}
+          isElementDisabled={isElementDisabled}
+        />
+      )
 
     case ElementTypeEnum.ReCaptcha:
-      if (!key) return <span className="text-warning">Signature field could not render due to missing field KEY!</span>
+      if (!key) return <span className="text-warning">ReCaptcha field could not render due to missing field KEY!</span>
 
-      return <LayoutRenderer_ReCaptcha formRef={formRef} fieldKey={key} elementProps={props} />
+      return (
+        <LayoutRenderer_ReCaptcha
+          formRef={formRef}
+          fieldKey={key}
+          elementProps={props}
+          isElementDisabled={isElementDisabled}
+        />
+      )
 
     case ElementTypeEnum.Signature:
       if (!key) return <span className="text-warning">Signature field could not render due to missing KEY!</span>
 
-      return <LayoutRenderer_Signature formRef={formRef} fieldKey={key} elementProps={props} />
+      return (
+        <LayoutRenderer_Signature
+          formRef={formRef}
+          fieldKey={key}
+          elementProps={props}
+          isElementDisabled={isElementDisabled}
+        />
+      )
 
     case ElementTypeEnum.FileUpload:
       if (!key) return <span className="text-warning">File upload field could not render due to missing KEY!</span>
@@ -53,6 +101,7 @@ export default function LayoutRendererElement({
           fieldKey={key}
           elementProps={props}
           uploadRules={elementData.uploadRules}
+          isElementDisabled={isElementDisabled}
         />
       )
 
@@ -91,6 +140,7 @@ export default function LayoutRendererElement({
               name: key ?? '',
               validations,
               options: options.map((op) => ({ value: op.value, label: op.value })),
+              disabled: isElementDisabled,
             },
           ]}
         />

package/src/enums.ts

@@ -152,7 +152,7 @@ export enum FlexAlignItems {
 }
 export enum FilterConfigTypeEnum {
   NoFilter = 'NoFilter',
-  ByMe = 'ByMe',
+  ByAuthUser = 'ByAuthUser',
   Custom = 'Custom',
 }
 export enum TitleElementTypeEnum {
@@ -192,7 +192,11 @@ export enum FormPreservedItemKeys {
   FormDataId = 'formDataId',
   BaseServerUrl = 'baseServerUrl',
   CompanyKey = 'companyKey',
-  ConvertScreenToPDF = 'convertScreenToPdf',
+  SubmissionPdfConfig = 'submissionPdfConfig',
   IsGeneratingPDF = 'isGeneratingPdf',
   HasSignature = 'hasSignature',
 }
+export enum MongoDbSortOrderEnum {
+  Ascending = 1,
+  Descending = -1,
+}

package/src/types/{form → data-list}/index.ts

@@ -9,7 +9,6 @@ export interface IFormDataListElement {
   order: number
   isStatic?: boolean
   sortable?: boolean
-  defaultSorted?: boolean
   align?: AlignTypeEnum
   width?: string | number
   renderConfig?: IElementDataRenderConfig
@@ -19,10 +18,7 @@ export interface IFormDataListHeader {
 }
 export interface IFilterConfig {
   type: FilterConfigTypeEnum
-  config?: {
-    customFilter?: { [key: string]: any } | null
-    dynamicFilter?: { [key: string]: any } | null
-  }
+  config?: { [key: string]: any } | null
 }
 export interface IFilterSimple {
   [key: string]: IFilterConfig

package/src/types/generate/index.ts

@@ -0,0 +1,8 @@
+export interface IFormSubmissionPdf {
+  enabled: false
+  title?: { values: { value: string; isDynamic: boolean; order: number }[]; delimiter: string }
+  showDownloadModal?: boolean
+  successTitle?: string
+  successContent?: string
+  errorMsg?: string
+}

package/src/types/index.ts

@@ -1,13 +1,16 @@
 export * from './layout-elements'
-export * from './form'
+export * from './data-list'
+export * from './generate'
 
 import {
   FormDataListViewTypeEnum,
   FormLayoutAddableNodeEnum,
   FormLayoutNodeEnum,
   MigrationReasonOperationEnum,
+  MongoDbSortOrderEnum,
 } from '../enums'
-import { IFilterConfig, IFormDataListElement, IFormDataListHeader, IFormDataListPagination } from './form'
+import { IFilterConfig, IFormDataListElement, IFormDataListHeader, IFormDataListPagination } from './data-list'
+import { IFormSubmissionPdf } from './generate'
 import {
   IPickerElement,
   INumberInputElement,
@@ -31,11 +34,11 @@ import { ICssStyle, IFlexConfig } from './layout-elements/style'
 export interface IFormSchema {
   detailsConfig: IFormDetailsConfig
   dataListConfig: IFormDataListConfig
+  generateConfig: IFormGenerateConfig
 }
 export interface IFormDetailsConfig {
   layout: IFormLayoutRow[]
   migrationRules: { [key: string]: IMigrationRule[] }
-  convertScreenToPdf?: boolean
 }
 // non-templates
 export interface IFormDataListConfig {
@@ -46,6 +49,12 @@ export interface IFormDataListConfig {
   title?: string
   showCount?: boolean
   usePopup?: boolean
+  defaultFilter?: { [key: string]: any } | null
+  defaultSorter?: { field: string; order: MongoDbSortOrderEnum }
+}
+export interface IFormGenerateConfig {
+  submissionPdf?: IFormSubmissionPdf
+  // reports: []
 }
 export interface IFormLayoutRow {
   nodeType: FormLayoutNodeEnum.Row