form-craft-package 1.6.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -14,6 +14,7 @@
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-signature-canvas": "^1.0.6",
     "ajv": "^8.17.1",
+    "pdfmake": "^0.2.18",
     "react-google-recaptcha": "^3.1.0",
     "react-signature-canvas": "^1.0.7"
   },
@@ -31,6 +32,7 @@
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",
+    "@types/pdfmake": "^0.2.11",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "react": "^18.3.1",

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

@@ -2,10 +2,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import client from '../../../functions/axios-handler'
 import { parseJSON } from '../../../functions/forms/json-handlers'
 import FormDataListSkeleton_Table from '../../common/loading-skeletons/table'
-import { IFormData, IFormDataListConfig, IFormLayoutElement, IFormLayoutRow, IFormSchema } from '../../../types'
+import { IFormData, IFormDataListConfig, IFormSchema, IDndLayoutStructure_Responsive } from '../../../types'
 import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
 import FormDataListTableComponent, { IReqDataConfig } from './table'
-import { DeviceBreakpointEnum } from '../../../enums'
 
 function FormDataListComponent({
   formName,
@@ -20,10 +19,7 @@ function FormDataListComponent({
   const [dataListConfig, setDataListConfig] = useState<
     | {
         dataListConfig: IFormDataListConfig & { configForFormId: number }
-        detailsLayoutConfig: {
-          elements: { [key: string]: IFormLayoutElement }
-          layouts: { [key in DeviceBreakpointEnum]?: IFormLayoutRow[] }
-        }
+        detailsLayoutConfig: IDndLayoutStructure_Responsive
       }
     | undefined
   >()

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

@@ -15,12 +15,12 @@ import {
   IReqDataConfig,
 } from './table'
 import {
+  IDndLayoutStructure_Responsive,
   IFilterByAuthUser,
   IFilterConfig,
   IFilterCustom,
   IFilterNested,
   IFilterSimple,
-  IFormDetailsConfig,
 } from '../../../types'
 
 export default function FormDataListHeaderComponent({
@@ -149,7 +149,7 @@ export default function FormDataListHeaderComponent({
 }
 
 type IFormDataListHeaderComponent = {
-  layoutConfig: IFormDetailsConfig
+  layoutConfig: IDndLayoutStructure_Responsive
   updateReqData: React.Dispatch<React.SetStateAction<IReqDataConfig | undefined>>
   titleComponent?: ReactNode
   defaultFilter: IReqDataConfig

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

@@ -1,5 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { IDataListParentInfo, IFormData, IFormDataListConfig, IFormDetailsConfig, ITableColumn } from '../../../types'
+import {
+  IDataListParentInfo,
+  IDndLayoutStructure_Responsive,
+  IFormData,
+  IFormDataListConfig,
+  IFormDataTableColumn,
+} from '../../../types'
 import FormDataListHeaderComponent from './table-header'
 import useDebounced from '../../common/custom-hooks/use-debounce.hook'
 import { FormInstance, Table } from 'antd'
@@ -28,7 +34,9 @@ export default function FormDataListTableComponent({
 }: IFormDataListTableComponent) {
   const currentBreakpoint = useGetCurrentBreakpoint()
   const location = useLocation()
-  const [tableColumns, setTableColumns] = useState<(ITableColumn & { hideScreens?: DeviceBreakpointEnum[] })[]>([])
+  const [tableColumns, setTableColumns] = useState<(IFormDataTableColumn & { hideScreens?: DeviceBreakpointEnum[] })[]>(
+    [],
+  )
   const [filterReqData, setFilterReqData, debouncedFilterReqData] = useDebounced<IReqDataConfig | undefined>(
     undefined,
     250,
@@ -36,7 +44,10 @@ export default function FormDataListTableComponent({
   const [otherConfigs, setOtherConfigs] = useState<
     (Partial<IFormDataListConfig> & { hasNoPagination: boolean }) | undefined
   >(undefined)
-  const [headerLayoutConfig, setHeaderLayoutConfig] = useState<IFormDetailsConfig>({ elements: {}, layouts: {} })
+  const [headerLayoutConfig, setHeaderLayoutConfig] = useState<IDndLayoutStructure_Responsive>({
+    elements: {},
+    layouts: {},
+  })
   const [isHandlingSchema, setIsHandlingSchema] = useState(true)
   const isFinishedHandlingRef = useRef(false)
 
@@ -57,7 +68,10 @@ export default function FormDataListTableComponent({
   }, [debouncedFilterReqData])
 
   const handleDataListConfig = useCallback(
-    async (config: IFormDataListConfig & { configForFormId?: number }, layoutConfig?: IFormDetailsConfig) => {
+    async (
+      config: IFormDataListConfig & { configForFormId?: number },
+      layoutConfig?: IDndLayoutStructure_Responsive,
+    ) => {
       if (config.configForFormId && config.configForFormId !== formId) return
 
       const {
@@ -183,7 +197,7 @@ export default function FormDataListTableComponent({
 
 type IFormDataListTableComponent = {
   dataListConfig?: IFormDataListConfig & { configForFormId?: number }
-  detailsLayoutConfig?: IFormDetailsConfig
+  detailsLayoutConfig?: IDndLayoutStructure_Responsive
   dataList: { data: IFormData[]; total: number }
   parentLoading: boolean
   loadingBlock?: JSX.Element

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

@@ -1,6 +1,6 @@
 import { Form } from 'antd'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { IFormLayoutElement, IFormLayoutRow, IFormSchema } from '../../../types'
+import { IDndLayoutStructure_Responsive, IFormSchema } from '../../../types'
 import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
 import client from '../../../functions/axios-handler'
 import { parseJSON } from '../../../functions/forms/json-handlers'
@@ -22,14 +22,12 @@ export default function FormDataDetailsComponent({
   companyKey,
   baseServerUrl,
   onCustomFunctionCall,
+  initialValues,
 }: IFormDataDetailsComponent) {
   const location = useLocation()
   const [formDataRef] = Form.useForm()
   const [loadings, setLoadings] = useState({ layout: true, data: true })
-  const [layoutConfig, setLayoutConfig] = useState<{
-    elements: { [key: string]: IFormLayoutElement }
-    layouts: { [key in DeviceBreakpointEnum]?: IFormLayoutRow[] }
-  }>({ elements: {}, layouts: {} })
+  const [layoutConfig, setLayoutConfig] = useState<IDndLayoutStructure_Responsive>({ elements: {}, layouts: {} })
 
   const currentBreakpoint = useGetCurrentBreakpoint()
 
@@ -37,6 +35,12 @@ export default function FormDataDetailsComponent({
     () => layoutConfig.layouts[currentBreakpoint] ?? layoutConfig.layouts[DeviceBreakpointEnum.Default] ?? [],
     [layoutConfig.layouts, currentBreakpoint],
   )
+  // Apply initialValues
+  useEffect(() => {
+    if (initialValues && formDataId === NEW_FORM_DATA_IDENTIFIER) {
+      formDataRef.setFieldsValue(initialValues)
+    }
+  }, [initialValues, formDataId, formDataRef])
 
   useEffect(() => {
     // this is for converting the screen to PDF
@@ -152,6 +156,7 @@ type IFormDataDetailsComponent = {
   companyKey?: string
   formDataId: string
   formName?: string
+  initialValues?: Record<string, any>
 } & (IDataDetailsPublicProps | IDataDetailsPrivateProps) &
   ICustomFunctionCall
 

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

@@ -1,5 +1,5 @@
 import { Form } from 'antd'
-import { IFormLayoutElement, IFormLayoutRow } from '../../../types'
+import { IDndLayoutStructure } from '../../../types'
 import { FormPreservedItemKeys } from '../../../enums'
 import { LayoutRendererRow } from '../layout-renderer/1-row'
 import { DynamicFormButtonRender } from '../layout-renderer/3-element/1-dynamic-button'
@@ -10,11 +10,7 @@ export const FormPreviewComponent = ({
   layout,
   elements = {},
   titleComponent,
-}: {
-  layout: IFormLayoutRow[]
-  elements: { [key: string]: IFormLayoutElement }
-  titleComponent?: ReactNode
-}) => {
+}: { titleComponent?: ReactNode } & IDndLayoutStructure) => {
   const [previewFormRef] = Form.useForm()
   const { infoModal } = useNotification()
 

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

@@ -1,5 +1,5 @@
 import { ReactNode, useState } from 'react'
-import { IFormLayoutRowHeader } from '../../../../types'
+import { IFormDndLayoutRowHeader } from '../../../../types'
 import { Collapse } from 'antd'
 import RowHeader from './header'
 
@@ -8,7 +8,7 @@ export const LayoutRowConditionalHeaderRenderer = ({
   header,
 }: {
   children: ReactNode
-  header: IFormLayoutRowHeader | undefined
+  header: IFormDndLayoutRowHeader | undefined
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(false)
 

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { IFormLayoutRowHeader } from '../../../../types'
+import { IFormDndLayoutRowHeader } from '../../../../types'
 import { kebabCaseToCamelCase } from '../../../../functions/forms'
 import { FaCaretDown, FaCaretUp } from 'react-icons/fa6'
 
@@ -34,7 +34,7 @@ export default function RowHeader({
   )
 }
 
-interface IRowHeader extends IFormLayoutRowHeader {
+interface IRowHeader extends IFormDndLayoutRowHeader {
   isCollapsed?: boolean
   setIsCollapsed?: () => void
 }

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

@@ -6,9 +6,9 @@ import { LayoutRowConditionalHeaderRenderer } from './header-render'
 import { LayoutRowRepeatableRenderer } from './repeatable-render'
 import {
   IButtonElementProps,
-  IFormLayoutElement,
+  IDndLayoutElement,
   IFormLayoutElementConditions,
-  IFormLayoutRow,
+  IDndLayoutRow,
 } from '../../../../types'
 
 export const LayoutRendererRow = memo(
@@ -67,10 +67,10 @@ export const LayoutRendererRow = memo(
 
 interface ILayoutRendererRow {
   basePath?: (string | number)[]
-  rowData: IFormLayoutRow
+  rowData: IDndLayoutRow
   titleComponent?: ReactNode
   formContext: IFormContext
-  elements: { [key: string]: IFormLayoutElement }
+  elements: { [key: string]: IDndLayoutElement }
   renderButton?: (props: IButtonElementProps, conditions?: IFormLayoutElementConditions) => ReactElement
 }
 

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

@@ -1,13 +1,13 @@
 import { memo, ReactElement, ReactNode, useEffect, useMemo, useState } from 'react'
 import { IFormContext, LayoutRendererRow } from '../1-row'
-import { FormLayoutNodeEnum } from '../../../../enums'
+import { DndLayoutNodeEnum } from '../../../../enums'
 import LayoutRendererElementWrapper from '../3-element'
 import {
   IButtonElementProps,
-  IFormLayoutCol,
-  IFormLayoutElement,
+  IDndLayoutCol,
+  IDndLayoutElement,
   IFormLayoutElementConditions,
-  IFormLayoutRow,
+  IDndLayoutRow,
 } from '../../../../types'
 
 function LayoutRendererCol({
@@ -33,8 +33,8 @@ function LayoutRendererCol({
 
   return (
     <div style={{ gap: colStyle.gap, display: isAllChildrenHidden ? 'none' : 'flex', flexDirection: 'column' }}>
-      {colData.children.map((item: IFormLayoutRow | string) =>
-        typeof item !== 'string' && item.nodeType === FormLayoutNodeEnum.Row ? (
+      {colData.children.map((item: IDndLayoutRow | string) =>
+        typeof item !== 'string' && item.nodeType === DndLayoutNodeEnum.Row ? (
           <LayoutRendererRow
             key={item.id}
             basePath={basePath}
@@ -71,9 +71,9 @@ function LayoutRendererCol({
 export default memo(LayoutRendererCol)
 interface ILayoutRendererCol {
   basePath: (string | number)[]
-  colData: IFormLayoutCol
+  colData: IDndLayoutCol
   titleComponent?: ReactNode
-  elements: { [key: string]: IFormLayoutElement }
+  elements: { [key: string]: IDndLayoutElement }
   formContext: IFormContext
   colStyle: { [key: string]: number | string }
   hideRow: (bool: boolean) => void

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

@@ -102,7 +102,7 @@ export const useCreateDataWithPdfActions = ({
             .map((v: any) => (v.isDynamic ? values[v.value] : v.value))
             .join(submissionPdfConfig.title?.delimiter ?? '') ?? 'submission-pdf'
 
-        const res = await client.post(`/api/attachment/pdf/${companyKey}/${blobName}?url=${fullUrl}`)
+        const res = await client.post(`/api/template/pdf/${companyKey}/${blobName}?url=${fullUrl}`)
 
         if (res.status < 300) onCreateNewData(res.data)
       })

package/src/components/form/layout-renderer/3-element/1-dynamic-button/use-generate-report.hook.tsx

@@ -55,7 +55,7 @@ export const useGenerateReportAction = ({
                       })
                       .then((res) => {
                         if (res.status === 200) {
-                          setFormData(res.data[0])
+                          setFormData(res.data.data[0])
                           setTemplateReports(reports)
                         }
                       })
@@ -136,7 +136,7 @@ export const useGenerateReportAction = ({
 
               client
                 .post(
-                  `/api/attachment/template/${companyKey}/${selectedTemplateInfo.fileBlobName}`,
+                  `/api/template/${companyKey}/${selectedTemplateInfo.fileBlobName}`,
                   replacements.map((r) => ({
                     key: r.placeholder,
                     value: r.value?.toString() ?? '-',

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

@@ -8,10 +8,10 @@ import client from '../../../../functions/axios-handler'
 import { IFormContext } from '../1-row'
 import {
   IDataListParentInfo,
+  IDndLayoutStructure_Responsive,
   IFormData,
   IFormDataListConfig,
   IFormDataLoadElementProps,
-  IFormDetailsConfig,
   IFormRelationshipConfig,
 } from '../../../../types'
 
@@ -30,7 +30,7 @@ export default function LayoutRenderer_LoadFormData({
   const [displayConfig, setDisplayConfig] = useState<
     | {
         dataListConfig: IFormDataListConfig
-        detailsLayoutConfig: IFormDetailsConfig | undefined
+        detailsLayoutConfig: IDndLayoutStructure_Responsive | undefined
       }
     | undefined
   >()
@@ -133,7 +133,7 @@ export default function LayoutRenderer_LoadFormData({
           })
           .then((res) => {
             if (res.status === 200) {
-              const resData = res.data
+              const resData = res.data.data
 
               if (!tableHeaderFilters)
                 lastChildInfo.current = {

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

@@ -3,7 +3,7 @@ import { memo, ReactElement, ReactNode, useEffect, useMemo } from 'react'
 import {
   IButtonElementProps,
   IFormDataLoadElementProps,
-  IFormLayoutElement,
+  IDndLayoutElement,
   IFormLayoutElementConditions,
   IReadFieldDataElementProps,
 } from '../../../../types'
@@ -180,7 +180,7 @@ function LayoutRendererElement({
 
 interface ILayoutRendererElement {
   basePath: (string | number)[]
-  elementData: IFormLayoutElement
+  elementData: IDndLayoutElement
   titleComponent?: ReactNode
   formContext: IFormContext
   renderButton?: (props: IButtonElementProps, conditions?: IFormLayoutElementConditions) => ReactElement

package/src/components/index.tsx

@@ -4,3 +4,4 @@ export * from './form/1-list'
 export * from './form/2-details'
 export * from './form/3-preview'
 export * from './common/button'
+export * from './report/1-list'