Enhance MissingPlaceholder Integration in ObjectKanban and ObjectTable Components
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.
This commit is contained in:
Tom Butcher 2026-09-03 15:22:30 +01:00
parent c75876ab3c
commit 3d1926aba0
3 changed files with 30 additions and 9 deletions

View File

@ -9,7 +9,8 @@ const MissingPlaceholder = ({
hasBackground = true,
hasBorder = true,
mutedBorder = false,
padding = '16px'
padding = '16px',
height = undefined
}) => {
var border = undefined
if (hasBorder == false) {
@ -26,7 +27,8 @@ const MissingPlaceholder = ({
}}
styles={{
body: {
padding: padding
padding: padding,
height: height
}
}}
>
@ -52,7 +54,8 @@ MissingPlaceholder.propTypes = {
hasBackground: PropTypes.bool,
hasBorder: PropTypes.bool,
mutedBorder: PropTypes.bool,
padding: PropTypes.string
padding: PropTypes.string,
height: PropTypes.string
}
export default MissingPlaceholder

View File

@ -9,7 +9,7 @@ import {
useRef,
useState
} from 'react'
import { Empty, Flex } from 'antd'
import { Flex } from 'antd'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { ApiServerContext } from '../context/ApiServerContext'
@ -27,6 +27,7 @@ import {
toKanbanColumnsConfig
} from './viewModeUtils'
import { areValuesEqual } from '../utils/Utils'
import MissingPlaceholder from './MissingPlaceholder'
const KANBAN_COLUMN_WIDTH = KANBAN_DEFAULT_COLUMN_WIDTH
const KANBAN_GAP = 16
@ -917,17 +918,25 @@ const ObjectKanban = forwardRef(
if (!categoryProperty) {
return (
<Flex align='center' justify='center' style={{ height: '100%' }}>
<Empty description='Select a category property for kanban view' />
<Flex align='center' justify='center'>
<MissingPlaceholder
message='Select a category property to continue.'
hasBackground={true}
hasBorder={false}
height='260px'
/>
</Flex>
)
}
if (hasLoaded && categoryValues.length === 0) {
return (
<Flex align='center' justify='center' style={{ height: '100%' }}>
<Empty description='No category values found' />
</Flex>
<MissingPlaceholder
message='No data.'
hasBackground={true}
hasBorder={false}
height='260px'
/>
)
}

View File

@ -61,6 +61,7 @@ import { ObjectTableFilterContext } from './ObjectTableFilterContext'
import ObjectListViewContext from '../context/ObjectListViewContext'
import { isCardsView, isKanbanView, normalizeViewMode } from './viewModeUtils'
import { areValuesEqual } from '../utils/Utils'
import MissingPlaceholder from './MissingPlaceholder'
import LoadingPlaceholder from './LoadingPlaceholder'
const logger = loglevel.getLogger('DasboardTable')
@ -2017,6 +2018,14 @@ const ObjectTable = forwardRef(
)
})}
</Row>
{!lazyLoading && tableData.length <= 0 && (
<MissingPlaceholder
message='No data.'
hasBackground={true}
hasBorder={false}
height='260px'
/>
)}
{lazyLoading && tableData.length <= 0 && (
<LoadingPlaceholder
message='Loading, please wait...'