erp-platform/ui/src/views/form/FormDevExpress.tsx

import { DX_CLASSNAMES } from '@/constants/app.constant'
import {
  Form as FormDx,
  GroupItem as GroupItemDx,
  Label as LabelDx,
  SimpleItem as SimpleItemDx,
} from 'devextreme-react/form'
import { FieldDataChangedEvent, GroupItem } from 'devextreme/ui/form'
import { Dispatch, RefObject } from 'react'
import { GridBoxEditorComponent } from './editors/GridBoxEditorComponent'
import { TagBoxEditorComponent } from './editors/TagBoxEditorComponent'
import { RowMode, SimpleItemWithColData } from './types'
import { PlatformEditorTypes } from '@/proxy/form/models'

const FormDevExpress = (props: {
  listFormCode: string
  isSubForm?: boolean
  mode: RowMode
  refForm: RefObject<FormDx>
  formData: any
  formItems: GroupItem[]
  setFormData: Dispatch<any>
}) => {
  const { listFormCode, isSubForm, mode, refForm, formData, formItems, setFormData } = props

  return (
    <form className={`${DX_CLASSNAMES} ${!isSubForm ? 'px-2' : ''} pb-2`}>
      <FormDx
        ref={refForm}
        formData={formData}
        onFieldDataChanged={(e: FieldDataChangedEvent) => {
          setFormData({ ...formData, [e.dataField!]: e.value })
        }}
        onContentReady={(e) => {
          const firstItem = formItems?.flatMap((g) => g.items || []).find((it) => !!it.name)

          if (firstItem?.name) {
            const editor = e.component.getEditor(firstItem.name as string)
            editor?.focus()
          }
        }}
      >
        {formItems.map((formGroupItem, i) => {
          return (
            <GroupItemDx
            
              key={'formGroupItem-' + i}
              colCount={formGroupItem.colCount}
              colSpan={formGroupItem.colSpan}
              caption={formGroupItem.caption}
            >
              {(formGroupItem.items as SimpleItemWithColData[])?.map((formItem, i) => {
                return formItem.editorType2 === PlatformEditorTypes.dxTagBox ? (
                  <SimpleItemDx
                    key={'formItem-' + i}
                    {...formItem}
                    render={() => (
                      <TagBoxEditorComponent
                        value={formData[formItem.dataField!] || []}
                        setDefaultValue={false}
                        values={formData}
                        options={formItem.tagBoxOptions}
                        col={formItem.colData}
                        onValueChanged={(e: any) => {
                          setFormData({ ...formData, [formItem.dataField!]: e })
                        }}
                        editorOptions={{
                          ...formItem.editorOptions,
                          ...(mode === 'view' ? { readOnly: true } : {}),
                        }}
                      ></TagBoxEditorComponent>
                    )}
                  >
                    <LabelDx text={formItem.name} />
                  </SimpleItemDx>
                ) : formItem.editorType2 === PlatformEditorTypes.dxGridBox ? (
                  <SimpleItemDx
                    key={'formItem-' + i}
                    {...formItem}
                    render={() => (
                      <GridBoxEditorComponent
                        value={formData[formItem.dataField!] || []}
                        values={formData}
                        options={formItem.gridBoxOptions}
                        col={formItem.colData}
                        onValueChanged={(e: any) => {
                          setFormData({ ...formData, [formItem.dataField!]: e })
                        }}
                        editorOptions={{
                          ...formItem.editorOptions,
                          ...(mode === 'view' ? { readOnly: true } : {}),
                        }}
                      ></GridBoxEditorComponent>
                    )}
                  >
                    <LabelDx text={formItem.name} />
                  </SimpleItemDx>
                ) : (
                  <SimpleItemDx
                    cssClass='font-semibold'
                    key={'formItem-' + i}
                    {...formItem}
                    editorOptions={{
                      ...formItem.editorOptions,
                      ...(mode === 'view' ? { readOnly: true } : { autoFocus: i === 1 }),
                    }}
                  />
                )
              })}
            </GroupItemDx>
          )
        })}
      </FormDx>
    </form>
  )
}

export default FormDevExpress