form-craft-package 1.3.3 → 1.4.0

package/package.json

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

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

@@ -0,0 +1,42 @@
+import { Form, FormInstance } from 'antd'
+import { useRef, useState } from 'react'
+
+export default function CustomColorField({ formRef, name, isPreview, 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>
+
+  return (
+    <div
+      className={`flex items-center gap-2 border bg-white rounded-lg w-full p-1 ${
+        isPreview || disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+      }`}
+      onClick={() => colorInputRef.current?.click()}
+    >
+      <input
+        type="color"
+        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'
+        }`}
+        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>
+    </div>
+  )
+}
+
+interface ICustomColorField {
+  isPreview?: boolean
+  formRef?: FormInstance
+  name?: string | (string | number)[]
+  disabled?: boolean
+}

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

@@ -18,6 +18,7 @@ import {
   Switch,
   FormInstance,
 } from 'antd'
+import CustomColorField from '../../../common/color-field'
 
 export const LayoutRenderer_FieldElement = ({
   fields,
@@ -49,7 +50,11 @@ export const LayoutRenderer_FieldElement = ({
               return value
             }}
           >
-            {getField(field)}
+            {field.type === ElementTypeEnum.ColorPicker ? (
+              <CustomColorField formRef={formRef} name={field.name} disabled={field.disabled} />
+            ) : (
+              getField(field)
+            )}
           </Form.Item>
           {field.disabled && field.type !== ElementTypeEnum.Checkbox && <DisabledFieldIndicator />}
         </Fragment>

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

@@ -6,10 +6,10 @@ import { useMemo } from 'react'
 import { DataRenderTypeEnum } from '../../../../enums'
 import { IFormItemPath } from '.'
 
-export default function LayoutRenderer_ReadOnly({ formRef, fullPath, elementProps }: ILayoutRenderer_ReadOnly) {
+export default function LayoutRenderer_ReadOnly({ formRef, elementProps }: ILayoutRenderer_ReadOnly) {
   const fieldValue = elementProps.isHardCoded
     ? elementProps.value
-    : Form.useWatch(fullPath, { form: formRef, preserve: true })
+    : Form.useWatch(elementProps.value, { form: formRef, preserve: true })
   const { baseServerUrl, companyKey } = useFormPreservedItemValues(formRef)
 
   const formValues = Form.useWatch([], { form: formRef, preserve: true })
@@ -21,7 +21,7 @@ export default function LayoutRenderer_ReadOnly({ formRef, fullPath, elementProp
 
   return (
     <div className="flex items-center gap-2">
-      <span>{elementProps.label}: </span>
+      {elementProps.label && <span>{elementProps.label}: </span>}
       <span className="font-bold">
         {renderData(
           elementProps.renderConfig?.type === DataRenderTypeEnum.Image
@@ -29,7 +29,7 @@ export default function LayoutRenderer_ReadOnly({ formRef, fullPath, elementProp
             : elementProps.renderConfig?.type === DataRenderTypeEnum.Conditional
             ? formValues
             : fieldValue,
-          elementProps.renderConfig,
+          elementProps.renderConfig ?? { type: DataRenderTypeEnum.Default },
         ) ?? 'N/A'}
       </span>
     </div>

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

@@ -1,6 +1,12 @@
 import { Form, FormInstance } from 'antd'
 import { IFormItemPath } from '.'
-import { IFormData, IFormDataListConfig, IFormLayoutRow, IFormRelationshipConfig } from '../../../../types'
+import {
+  IFormData,
+  IFormDataListConfig,
+  IFormLayoutRow,
+  IFormRelationshipConfig,
+  IRelationshipForm,
+} from '../../../../types'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import client from '../../../../functions/axios-handler'
 import { useFormPreservedItemValues } from '../../../common/custom-hooks/use-preserved-form-items.hook'
@@ -28,6 +34,7 @@ export default function LayoutRenderer_FormDataRender({ formRef, elementProps }:
     async (
       childFormId: number,
       parentFormId: number,
+      displayConfigId: string,
       foreignKeyIds: string[],
       parentDataMap: { [id: string]: any },
     ): Promise<
@@ -70,8 +77,11 @@ export default function LayoutRenderer_FormDataRender({ formRef, elementProps }:
                 }),
               }
 
-              if (relationship.isRenderChildForm) {
-                if (!relationship.renderChildConfig) return
+              const displayConfig = relationship.displayConfigs?.find((config) => config.id === displayConfigId)
+              if (!displayConfig) return
+
+              if (displayConfig.isRenderChildForm) {
+                if (!displayConfig.renderChildConfig) return
 
                 const formDataMap: { [id: string]: any } = {}
                 const parentDataIds: string[] = []
@@ -82,8 +92,9 @@ export default function LayoutRenderer_FormDataRender({ formRef, elementProps }:
                 })
 
                 const childResData = await fetchFormDetails(
-                  relationship.renderChildConfig.formId,
+                  displayConfig.renderChildConfig.formId,
                   childFormId,
+                  displayConfig.renderChildConfig.displayConfigId,
                   parentDataIds,
                   formDataMap,
                 )
@@ -91,7 +102,7 @@ export default function LayoutRenderer_FormDataRender({ formRef, elementProps }:
                 return childResData
               } else {
                 return {
-                  config: relationship.displayConfig as IFormDataListConfig,
+                  config: displayConfig.config as IFormDataListConfig,
                   layout: detailsConfig.layout,
                   data: {
                     ...formData,
@@ -129,14 +140,15 @@ export default function LayoutRenderer_FormDataRender({ formRef, elementProps }:
     }
 
     if (!hasInitialFetched.current) {
-      fetchFormDetails(form.id, form.relationshipConfig.formId, [formDataId], { [formDataId]: formValues }).then(
-        (resData) => {
-          const { config, data, layout = [] } = resData ?? {}
-
-          if (config) setDisplayConfig({ dataListConfig: config, detailsLayout: layout })
-          if (data) setDataList(data)
-        },
-      )
+      console.log({ form })
+      fetchFormDetails(form.id, form.relationshipConfig.formId, form.relationshipConfig.displayConfigId, [formDataId], {
+        [formDataId]: formValues,
+      }).then((resData) => {
+        const { config, data, layout = [] } = resData ?? {}
+
+        if (config) setDisplayConfig({ dataListConfig: config, detailsLayout: layout })
+        if (data) setDataList(data)
+      })
       hasInitialFetched.current = true
     }
   }, [form, fetchFormDetails, formDataId, formValues])
@@ -165,11 +177,7 @@ type ILayoutRenderer_FormDataRender = {
   formRef: FormInstance
   elementProps: {
     label?: string
-    form?: {
-      id: number
-      name: string
-      relationshipConfig: Partial<IFormRelationshipConfig>
-    }
+    form?: IRelationshipForm
     filterConfig?: { [key: string]: any } | null
   }
 } & IFormItemPath

package/src/enums.ts

@@ -23,7 +23,7 @@ export enum ElementTypeEnum {
   Button = 'Button',
   TitlePlacement = 'Title Placement',
   Signature = 'Signature',
-  Text = 'Title',
+  Text = 'Text',
   ReCaptcha = 'reCAPTCHA',
   ColorPicker = 'Color Picker',
   FormDataRender = 'Load Form Data',

package/src/types/index.ts

@@ -30,6 +30,7 @@ import {
   IReCaptchaElement,
   IDataRender_ButtonProps,
   IFormDataRenderElement,
+  IColorPickerElement,
 } from './layout-elements'
 import { ICssStyle, IFlexConfig } from './layout-elements/style'
 import { IFormRelationshipConfig } from './relationship'
@@ -107,6 +108,7 @@ export type IFormLayoutElement =
   | ITitleElement
   | IReCaptchaElement
   | IFormDataRenderElement
+  | IColorPickerElement
 
 export type IMigrationRule = { operation: MigrationReasonOperationEnum.CreateRepeatingSection; fields: string[] }
 // | { operation: MigrationReasonOperationEnum.RenameField; from: string; to: string }

package/src/types/layout-elements/index.ts

@@ -2,7 +2,7 @@ export * from './data-render-config'
 export * from './field-option-source'
 export * from './style'
 export * from './conditions'
-import { ICssStyle, IFilterConfig, IFormRelationshipConfig } from '..'
+import { ICssStyle, IFilterConfig, IRelationshipForm } from '..'
 import { IFieldElementOptionSource } from './field-option-source'
 import { IDataRenderConfig } from './data-render-config'
 import {
@@ -245,11 +245,14 @@ export interface IFormDataRenderElement extends BaseFormLayoutElement {
   elementType: ElementTypeEnum.FormDataRender
   props: {
     hasNoLabel: boolean
-    form?: {
-      id: number
-      name: string
-      relationshipConfig: Partial<IFormRelationshipConfig>
-    }
+    form?: IRelationshipForm
     filterConfig?: { [key: string]: any } | null
   }
 }
+export interface IColorPickerElement extends BaseFormLayoutElement {
+  elementType: ElementTypeEnum.ColorPicker
+  props: {
+    label?: string
+    description?: string
+  }
+}

package/src/types/relationship/index.ts

@@ -6,18 +6,33 @@ export type IFormRelationshipConfig = {
   type: FormRelationshipEnum
   foreignKey: string
   viewType?: NewFormViewTypeEnum
+  displayConfigs?: IRelationshipDisplayConfig[]
+}
+
+export type IRelationshipDisplayConfig = {
+  id: string
+  name: string
 } & (
   | {
       isRenderChildForm: true
-      renderChildConfig?: IFormRelationshipRenderChildConfig
+      renderChildConfig?: IRelationshipRenderChildConfig
     }
   | {
       isRenderChildForm: false
-      displayConfig?: IFormDataListConfig
+      config?: IFormDataListConfig
     }
 )
 
-export interface IFormRelationshipRenderChildConfig {
+export interface IRelationshipRenderChildConfig {
   formId: number
+  displayConfigId: string
   filterConfig?: { [key: string]: any } | null
 }
+
+export interface IRelationshipForm {
+  id: number
+  name: string
+  relationshipConfig: Partial<IFormRelationshipConfig> & {
+    displayConfigId: string
+  }
+}