Enhance ObjectTable component to support Electron context; adjust scroll height based on Electron environment and improve action button handling with dynamic disabled state.

This commit is contained in:
Tom Butcher 2025-09-05 23:17:20 +01:00
parent f0cb4b3b83
commit 5300874b80

View File

@ -39,7 +39,8 @@ import CheckIcon from '../../Icons/CheckIcon'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import QuestionCircleIcon from '../../Icons/QuestionCircleIcon' import QuestionCircleIcon from '../../Icons/QuestionCircleIcon'
import { AuthContext } from '../context/AuthContext' import { AuthContext } from '../context/AuthContext'
import unionBy from 'lodash/unionBy' import { ElectronContext } from '../context/ElectronContext'
const logger = loglevel.getLogger('DasboardTable') const logger = loglevel.getLogger('DasboardTable')
logger.setLevel(config.logLevel) logger.setLevel(config.logLevel)
@ -58,6 +59,7 @@ const ObjectTable = forwardRef(
ref ref
) => { ) => {
const { token } = useContext(AuthContext) const { token } = useContext(AuthContext)
const { isElectron } = useContext(ElectronContext)
const { const {
fetchObjects, fetchObjects,
connected, connected,
@ -73,6 +75,15 @@ const ObjectTable = forwardRef(
if (cards) { if (cards) {
adjustedScrollHeight = 'calc(var(--unit-100vh) - 280px)' adjustedScrollHeight = 'calc(var(--unit-100vh) - 280px)'
} }
if (isElectron) {
adjustedScrollHeight = 'calc(var(--unit-100vh) - 244px)'
}
if (isMobile && isElectron) {
adjustedScrollHeight = 'calc(var(--unit-100vh) - 282px)'
}
if (cards && isElectron) {
adjustedScrollHeight = 'calc(var(--unit-100vh) - 260px)'
}
const [, contextHolder] = message.useMessage() const [, contextHolder] = message.useMessage()
const tableRef = useRef(null) const tableRef = useRef(null)
const model = getModelByName(type) const model = getModelByName(type)
@ -108,26 +119,37 @@ const ObjectTable = forwardRef(
const renderActions = (objectData) => { const renderActions = (objectData) => {
return ( return (
<Flex gap='small' align='center' justify='center'> <Flex gap='small' align='center' justify='center'>
{rowActions.map((action, index) => ( {rowActions.map((action, index) => {
<Tooltip key={index} title={action.label} arrow={false}> var disabled = false
<Button if (action.disabled) {
icon={ if (typeof action.disabled === 'function') {
action.icon ? ( disabled = action.disabled(objectData)
createElement(action.icon) } else {
) : ( disabled = action.disabled
<QuestionCircleIcon /> }
) }
} return (
type={'text'} <Tooltip key={index} title={action.label} arrow={false}>
size={'small'} <Button
onClick={() => { icon={
if (action.url) { action.icon ? (
navigate(action.url(objectData._id)) createElement(action.icon)
) : (
<QuestionCircleIcon />
)
} }
}} disabled={disabled}
/> type={'text'}
</Tooltip> size={'small'}
))} onClick={() => {
if (action.url) {
navigate(action.url(objectData._id))
}
}}
/>
</Tooltip>
)
})}
</Flex> </Flex>
) )
} }
@ -289,11 +311,12 @@ const ObjectTable = forwardRef(
const updateEventHandler = useCallback((id, updatedData) => { const updateEventHandler = useCallback((id, updatedData) => {
setPages((prevPages) => setPages((prevPages) =>
prevPages.map((page) => { prevPages.map((page) => {
const updatedItems = unionBy( const updatedItems = page.items.map((item) => {
[{ ...updatedData, _id: id }], if (item._id === id) {
page.items, return { ...item, ...updatedData }
'_id' }
) return item
})
return { return {
...page, ...page,
items: updatedItems items: updatedItems
@ -748,6 +771,7 @@ const ObjectTable = forwardRef(
onChange={handleTableChange} onChange={handleTableChange}
showSorterTooltip={false} showSorterTooltip={false}
style={{ height: '100%' }} style={{ height: '100%' }}
size={isElectron ? 'small' : 'middle'}
/> />
{cards ? ( {cards ? (
<Spin indicator={<LoadingOutlined />} spinning={loading}> <Spin indicator={<LoadingOutlined />} spinning={loading}>