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

View File

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

View File

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