Enhance ObjectForm component with custom merge logic for array handling

- Introduced a custom mergeWith function to handle array replacements during state updates.
- Updated initial form data setting to include computed values while maintaining editing state.
- Refactored update event handler to utilize the new merge logic for improved data management.
This commit is contained in:
Tom Butcher 2025-12-28 01:08:54 +00:00
parent 4bd9acdc11
commit aa6fe3c839

View File

@ -14,10 +14,17 @@ import { useMessageContext } from '../context/MessageContext'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import DeleteObjectModal from './DeleteObjectModal' import DeleteObjectModal from './DeleteObjectModal'
import merge from 'lodash/merge' import merge from 'lodash/merge'
import mergeWith from 'lodash/mergeWith'
import set from 'lodash/set' import set from 'lodash/set'
import { getModelByName } from '../../../database/ObjectModels' import { getModelByName } from '../../../database/ObjectModels'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
const arrayReplaceCustomizer = (objValue, srcValue) => {
if (Array.isArray(srcValue)) {
return srcValue
}
}
const buildObjectFromEntries = (entries = []) => { const buildObjectFromEntries = (entries = []) => {
return entries.reduce((acc, entry) => { return entries.reduce((acc, entry) => {
const { namePath, value } = entry || {} const { namePath, value } = entry || {}
@ -285,14 +292,14 @@ const ObjectForm = forwardRef(
const lockEvent = await fetchObjectLock(id, type) const lockEvent = await fetchObjectLock(id, type)
setLock(lockEvent) setLock(lockEvent)
onStateChangeRef.current({ lock: lockEvent }) onStateChangeRef.current({ lock: lockEvent })
setObjectData({ ...data, _isEditing: isEditingRef.current })
serverObjectData.current = data serverObjectData.current = data
// Calculate and set computed values on initial load // Calculate and set computed values on initial load
const computedEntries = calculateComputedValues(data, model) const computedEntries = calculateComputedValues(data, model)
const computedValuesObject = buildObjectFromEntries(computedEntries) const computedValuesObject = buildObjectFromEntries(computedEntries)
const initialFormData = merge({}, data, computedValuesObject) const initialFormData = merge({}, data, computedValuesObject)
setObjectData({ ...initialFormData, _isEditing: isEditingRef.current })
form.setFieldsValue(initialFormData) form.setFieldsValue(initialFormData)
setFetchLoading(false) setFetchLoading(false)
onStateChangeRef.current({ loading: false }) onStateChangeRef.current({ loading: false })
@ -318,7 +325,9 @@ const ObjectForm = forwardRef(
// Update event handler // Update event handler
const updateObjectEventHandler = useCallback((value) => { const updateObjectEventHandler = useCallback((value) => {
setObjectData((prev) => merge({}, prev, value)) setObjectData((prev) =>
mergeWith({}, prev, value, arrayReplaceCustomizer)
)
}, []) }, [])
// Update event handler // Update event handler
@ -540,15 +549,22 @@ const ObjectForm = forwardRef(
} }
const computedValuesObject = buildObjectFromEntries(computedEntries) const computedValuesObject = buildObjectFromEntries(computedEntries)
const mergedFormValues = merge( const mergedFormValues = mergeWith(
{}, {},
allFormValues, allFormValues,
computedValuesObject arrayReplaceCustomizer
) )
merge(mergedFormValues, computedValuesObject)
mergedFormValues._isEditing = isEditingRef.current mergedFormValues._isEditing = isEditingRef.current
setObjectData((prev) => { setObjectData((prev) => {
return merge({}, prev, mergedFormValues) return mergeWith(
{},
prev,
mergedFormValues,
arrayReplaceCustomizer
)
}) })
}} }}
> >