Tom Butcher
3d1926aba0
Some checks failed
farmcontrol/farmcontrol-ui/pipeline/head There was a failure building this commit
- Added MissingPlaceholder component to ObjectKanban and ObjectTable for improved user feedback when no data is available. - Updated ObjectKanban to display a custom message when no category property is selected. - Modified ObjectTable to show MissingPlaceholder when there is no data and lazy loading is not active. - Introduced height prop to MissingPlaceholder for better layout control.
62 lines
1.3 KiB
JavaScript
62 lines
1.3 KiB
JavaScript
import { Card, Flex, Typography } from 'antd'
|
|
import InfoCircleIcon from '../../Icons/InfoCircleIcon'
|
|
import PropTypes from 'prop-types'
|
|
|
|
const { Text } = Typography
|
|
|
|
const MissingPlaceholder = ({
|
|
message,
|
|
hasBackground = true,
|
|
hasBorder = true,
|
|
mutedBorder = false,
|
|
padding = '16px',
|
|
height = undefined
|
|
}) => {
|
|
var border = undefined
|
|
if (hasBorder == false) {
|
|
border = 'none'
|
|
} else if (mutedBorder == true && hasBorder == true) {
|
|
border = '1px solid var(--color-descriptions-border)'
|
|
}
|
|
return (
|
|
<Card
|
|
size='small'
|
|
style={{
|
|
background: hasBackground == false ? 'transparent' : undefined,
|
|
border: border
|
|
}}
|
|
styles={{
|
|
body: {
|
|
padding: padding,
|
|
height: height
|
|
}
|
|
}}
|
|
>
|
|
<Flex
|
|
justify='center'
|
|
gap={'small'}
|
|
style={{
|
|
height: '100%'
|
|
}}
|
|
align='center'
|
|
>
|
|
<Text type='secondary'>
|
|
<InfoCircleIcon />
|
|
</Text>
|
|
<Text type='secondary'>{message}</Text>
|
|
</Flex>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
MissingPlaceholder.propTypes = {
|
|
message: PropTypes.string.isRequired,
|
|
hasBackground: PropTypes.bool,
|
|
hasBorder: PropTypes.bool,
|
|
mutedBorder: PropTypes.bool,
|
|
padding: PropTypes.string,
|
|
height: PropTypes.string
|
|
}
|
|
|
|
export default MissingPlaceholder
|