Enhance PropertyChanges component to handle cases where both old and new values are absent, and improve rendering logic for displaying property changes.

This commit is contained in:
Tom Butcher 2025-07-14 23:08:18 +01:00
parent a505e1aaba
commit 5aa7355b0f

View File

@ -8,7 +8,7 @@ import ArrowRightIcon from '../../Icons/ArrowRightIcon'
const { Text } = Typography const { Text } = Typography
const PropertyChanges = ({ type, value }) => { const PropertyChanges = ({ type, value }) => {
if (!value || !value.new) { if (!value || (!value.new && !value.old)) {
return <Text type='secondary'>n/a</Text> return <Text type='secondary'>n/a</Text>
} }
@ -18,7 +18,15 @@ const PropertyChanges = ({ type, value }) => {
if (Object.prototype.hasOwnProperty.call(obj, key)) { if (Object.prototype.hasOwnProperty.call(obj, key)) {
const val = obj[key] const val = obj[key]
const newKey = prefix ? `${prefix}.${key}` : key const newKey = prefix ? `${prefix}.${key}` : key
if (val && typeof val === 'object' && !Array.isArray(val)) {
// Don't flatten keys that are "state" or "netGross"
if (
val &&
typeof val === 'object' &&
!Array.isArray(val) &&
key !== 'state' &&
key !== 'netGross'
) {
flattenObject(val, newKey, res) flattenObject(val, newKey, res)
} else { } else {
res[newKey] = val res[newKey] = val
@ -34,7 +42,6 @@ const PropertyChanges = ({ type, value }) => {
...flatOld, ...flatOld,
...flatNew ...flatNew
} }
console.log('combined', combinedChanges)
return ( return (
<Descriptions size='small' column={1}> <Descriptions size='small' column={1}>
{Object.keys(combinedChanges).map((key) => { {Object.keys(combinedChanges).map((key) => {
@ -46,19 +53,25 @@ const PropertyChanges = ({ type, value }) => {
return ( return (
<Descriptions.Item key={key} label={changeProperty.label}> <Descriptions.Item key={key} label={changeProperty.label}>
<Space> <Space>
{value?.old ? (
<ObjectProperty <ObjectProperty
{...changeProperty} {...changeProperty}
longId={false} longId={false}
objectData={value?.old} objectData={value?.old}
/> />
) : null}
{value?.old && value?.new ? (
<Text type='secondary'> <Text type='secondary'>
<ArrowRightIcon /> <ArrowRightIcon />
</Text> </Text>
) : null}
{value?.new ? (
<ObjectProperty <ObjectProperty
{...changeProperty} {...changeProperty}
longId={false} longId={false}
objectData={value?.new} objectData={value?.new}
/> />
) : null}
</Space> </Space>
</Descriptions.Item> </Descriptions.Item>
) )