diff --git a/src/components/Dashboard/common/ObjectChildTable.jsx b/src/components/Dashboard/common/ObjectChildTable.jsx index f3301ea..6269136 100644 --- a/src/components/Dashboard/common/ObjectChildTable.jsx +++ b/src/components/Dashboard/common/ObjectChildTable.jsx @@ -1,6 +1,6 @@ import { useMemo, useEffect, useRef } from 'react' import PropTypes from 'prop-types' -import { Table, Skeleton, Card, Button, Flex, Form, Typography } from 'antd' +import { Table, Skeleton, Card, Button, Flex, Typography } from 'antd' import PlusIcon from '../../Icons/PlusIcon' import ObjectProperty from './ObjectProperty' import { LoadingOutlined } from '@ant-design/icons' @@ -21,6 +21,14 @@ const getDefaultWidth = (type) => { return DEFAULT_COLUMN_WIDTHS[type] || 200 } +const resolveChangeValue = (val, type) => { + if (type === 'bool') return val + if (val?.target && typeof val.target === 'object') { + return val.target.value + } + return val +} + const createSkeletonRows = (rowCount, keyPrefix, keyName) => { return Array.from({ length: rowCount }).map((_, index) => { const skeletonKey = `${keyPrefix}-${index}` @@ -51,7 +59,6 @@ const ObjectChildTable = ({ additionalColumns = [], emptyText = 'No items', isEditing = false, - formListName, value = [], rollups = [], onChange, @@ -103,34 +110,44 @@ const ObjectChildTable = ({ return value ?? [] }, [value]) - // When used with antd Form.List, grab the form instance so we can read - // the latest row values and pass them into ObjectProperty as objectData. - // Assumes this component is rendered within a Form context when editing. - const formInstance = Form.useFormInstance() - - const listNamePath = useMemo(() => { - if (!formListName) return null - return Array.isArray(formListName) ? formListName : [formListName] - }, [formListName]) - const tableColumns = useMemo(() => { const propertyColumns = resolvedProperties.map((property) => ({ title: property.label || property.name, dataIndex: property.name, key: property.name, width: property.columnWidth || getDefaultWidth(property.type), - render: (_text, record) => { + render: (_text, record, index) => { if (record?.isSkeleton) { return ( ) } + + const handleCellChange = (newVal) => { + const resolved = resolveChangeValue(newVal, property.type) + const currentItems = Array.isArray(itemsSource) + ? [...itemsSource] + : [] + const updatedItem = { + ...currentItems[index], + [property.name]: resolved + } + currentItems[index] = updatedItem + if (typeof onChange === 'function') { + onChange(currentItems) + } + } + return ( ) } @@ -416,122 +433,6 @@ const ObjectChildTable = ({ ) - // When editing and a Form.List name is provided, bind rows via Form.List - // instead of the manual value/onChange mechanism. - if (isEditing === true && formListName) { - return ( - - {(fields, { add, remove }) => { - const listDataSource = fields.map((field, index) => ({ - _field: field, - _index: index, - key: field.key - })) - const listColumns = resolvedProperties.map((property) => ({ - title: property.label || property.name, - dataIndex: property.name, - key: property.name, - width: property.columnWidth || getDefaultWidth(property.type), - render: (_text, record) => { - const field = record?._field - if (!field) return null - - // Resolve the most up-to-date row data for this index from the form - let rowObjectData = undefined - if (formInstance && listNamePath) { - const namePath = [...listNamePath, field.name] - rowObjectData = formInstance.getFieldValue(namePath) - } - return ( - - ) - } - })) - - const deleteColumn = { - title: '', - key: 'delete', - width: 10, - fixed: 'right', - render: (_text, record) => { - const field = record?._field - const index = record?._index - if (!field || index == null) return null - return ( -