112 lines
2.8 KiB
JavaScript
112 lines
2.8 KiB
JavaScript
import { Descriptions, Card, Flex, Divider } from 'antd'
|
|
import PropTypes from 'prop-types'
|
|
import ObjectProperty from './ObjectProperty'
|
|
import { createElement } from 'react'
|
|
|
|
const ObjectCard = ({
|
|
model,
|
|
modelProperties,
|
|
visibleColumns = {},
|
|
record,
|
|
isEditing = false,
|
|
rowActions = [],
|
|
renderActions,
|
|
cardStyle = 'borderless'
|
|
}) => {
|
|
const descriptionItems = []
|
|
const modelIcon = createElement(model.icon, { style: { fontSize: 24 } })
|
|
|
|
model.columns.forEach((colName) => {
|
|
const prop = modelProperties.find((p) => p.name === colName)
|
|
if (prop) {
|
|
if (
|
|
(Object.keys(visibleColumns).length > 0 &&
|
|
visibleColumns[prop.name] === false) ||
|
|
prop.name == 'name' ||
|
|
(prop.name == 'state' && visibleColumns?.name == true)
|
|
) {
|
|
return
|
|
}
|
|
|
|
descriptionItems.push(
|
|
<Descriptions.Item label={prop.label} key={prop.name} colspan={2}>
|
|
<ObjectProperty
|
|
{...prop}
|
|
longId={false}
|
|
objectData={record}
|
|
isEditing={isEditing}
|
|
name={prop.name}
|
|
/>
|
|
</Descriptions.Item>
|
|
)
|
|
}
|
|
})
|
|
|
|
var actions = undefined
|
|
|
|
if (rowActions.length > 0) {
|
|
actions = renderActions(record)
|
|
}
|
|
|
|
return (
|
|
<Card
|
|
styles={{ body: { padding: 18 } }}
|
|
style={{ width: '100%' }}
|
|
variant={cardStyle}
|
|
>
|
|
<Flex vertical gap={8}>
|
|
{visibleColumns?.name == true && (
|
|
<Flex align='center' gap={12}>
|
|
{modelIcon}
|
|
<ObjectProperty
|
|
{...model.properties.find((p) => p.name === 'name')}
|
|
objectData={record}
|
|
isEditing={isEditing}
|
|
style={{
|
|
fontSize: 20,
|
|
fontWeight: '600',
|
|
lineHeight: 1.2
|
|
}}
|
|
/>
|
|
{visibleColumns?.state == true && (
|
|
<ObjectProperty
|
|
{...model.properties.find((p) => p.name === 'state')}
|
|
objectData={record}
|
|
/>
|
|
)}
|
|
</Flex>
|
|
)}
|
|
<Descriptions
|
|
column={1}
|
|
size='small'
|
|
style={{ width: '100%', tableLayout: 'fixed' }}
|
|
className='objectTableDescritions'
|
|
>
|
|
{descriptionItems}
|
|
</Descriptions>
|
|
{actions && (
|
|
<>
|
|
<Divider style={{ margin: '2px 0 0 0' }} />
|
|
<Flex align='flex-end' gap={10}>
|
|
{actions}
|
|
</Flex>
|
|
</>
|
|
)}
|
|
</Flex>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
ObjectCard.propTypes = {
|
|
model: PropTypes.object.isRequired,
|
|
modelProperties: PropTypes.array.isRequired,
|
|
visibleColumns: PropTypes.object,
|
|
record: PropTypes.object.isRequired,
|
|
isEditing: PropTypes.bool,
|
|
rowActions: PropTypes.array,
|
|
renderActions: PropTypes.func.isRequired,
|
|
cardStyle: PropTypes.string
|
|
}
|
|
|
|
export default ObjectCard
|