Enhance MissingPlaceholder Integration in ObjectKanban and ObjectTable Components
Some checks failed
farmcontrol/farmcontrol-ui/pipeline/head There was a failure building this commit
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:
parent
c75876ab3c
commit
3d1926aba0
@ -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
|
||||
|
||||
@ -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'
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -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...'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user