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,
|
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
|
||||||
|
|||||||
@ -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'
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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...'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user