Added AlertsDisplay component to ControlPrinter and updated state management to include objectData.

This commit is contained in:
Tom Butcher 2025-09-05 23:14:32 +01:00
parent c82954db2a
commit 5a656d43f1
2 changed files with 56 additions and 3 deletions

View File

@ -10,7 +10,6 @@ import ViewButton from '../../common/ViewButton.jsx'
import NoteIcon from '../../../Icons/NoteIcon.jsx'
import ObjectForm from '../../common/ObjectForm.jsx'
import EditButtons from '../../common/EditButtons.jsx'
import LockIndicator from '../../common/LockIndicator.jsx'
import ActionHandler from '../../common/ActionHandler.jsx'
import ObjectActions from '../../common/ObjectActions.jsx'
@ -26,6 +25,7 @@ import SubJobIcon from '../../../Icons/SubJobIcon.jsx'
import FilamentStockIcon from '../../../Icons/FilamentStockIcon.jsx'
import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
import { useMediaQuery } from 'react-responsive'
import AlertsDisplay from '../../common/AlertsDisplay.jsx'
const log = loglevel.getLogger('ControlPrinter')
log.setLevel(config.logLevel)
@ -68,7 +68,8 @@ const ControlPrinter = () => {
editLoading: false,
formValid: false,
locked: false,
loading: false
loading: false,
objectData: {}
})
const actions = {
@ -164,8 +165,8 @@ const ControlPrinter = () => {
visibleState={collapseState}
updateVisibleState={updateCollapseState}
/>
<AlertsDisplay alerts={objectFormState.objectData?.alerts} />
</Space>
<LockIndicator lock={objectFormState.lock} />
</Space>
<Space>
<EditButtons

View File

@ -0,0 +1,52 @@
import PropTypes from 'prop-types'
import { Flex, Alert } from 'antd'
import ExclamationOctagonIcon from '../../Icons/ExclamationOctagonIcon'
import InfoCircleIcon from '../../Icons/InfoCircleIcon'
const AlertsDisplay = ({ alerts = [] }) => {
const getAlertType = (type, priority) => {
if (type === 'error' || priority === '9') return 'error'
if (type === 'warning' || priority === '8') return 'warning'
return 'info'
}
const getAlertIcon = (type, priority) => {
if (type === 'error' || priority === '9') return <ExclamationOctagonIcon />
if (type === 'warning' || priority === '8')
return <ExclamationOctagonIcon />
return <InfoCircleIcon />
}
if (alerts.length == 0) {
return null
}
return (
<Flex gap='small'>
{alerts.map((alert, index) => (
<Alert
key={`${alert.createdAt}-${index}`}
message={alert.message}
style={{ padding: '4px 10px 4px 8px' }}
type={getAlertType(alert.type, alert.priority)}
icon={getAlertIcon(alert.type, alert.priority)}
showIcon
/>
))}
</Flex>
)
}
AlertsDisplay.propTypes = {
alerts: PropTypes.arrayOf(
PropTypes.shape({
priority: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
createdAt: PropTypes.string.isRequired,
updatedAt: PropTypes.string.isRequired,
message: PropTypes.string.isRequired
})
).isRequired
}
export default AlertsDisplay