119 lines
2.9 KiB
JavaScript
119 lines
2.9 KiB
JavaScript
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
|
|
import { Button, Menu, MenuItem, Stack } from '@mui/material';
|
|
import { memo, useEffect, useState } from 'react';
|
|
|
|
const warningColors = {
|
|
bg: '#fff7e6',
|
|
text: '#b54708',
|
|
border: '#FCD99C',
|
|
hover: '#fff1d6',
|
|
};
|
|
|
|
const ValidationErrorsAlert = ({ errors = [], onNavigateToColumn }) => {
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
const isOpen = Boolean(anchorEl);
|
|
|
|
useEffect(() => {
|
|
if (errors.length === 0) {
|
|
setAnchorEl(null);
|
|
}
|
|
}, [errors.length]);
|
|
|
|
if (errors.length === 0) return null;
|
|
|
|
const handleNavigate = (columnId) => {
|
|
onNavigateToColumn?.(columnId);
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
variant='outlined'
|
|
onClick={(e) => setAnchorEl(e.currentTarget)}
|
|
sx={{
|
|
ml: 2,
|
|
maxWidth: 360,
|
|
height: '2.5rem',
|
|
borderRadius: '0.5rem',
|
|
bgcolor: warningColors.bg,
|
|
color: warningColors.text,
|
|
borderColor: warningColors.border,
|
|
textTransform: 'none',
|
|
justifyContent: 'space-between',
|
|
px: 1.5,
|
|
gap: 1,
|
|
'&:hover': {
|
|
bgcolor: warningColors.hover,
|
|
borderColor: warningColors.border,
|
|
},
|
|
}}>
|
|
<Stack direction='row' sx={{ alignItems: 'center', gap: 1, minWidth: 0, flex: 1 }}>
|
|
<WarningAmberRoundedIcon sx={{ fontSize: '1.1rem', flexShrink: 0 }} />
|
|
<span
|
|
style={{
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'left',
|
|
}}>
|
|
Контроль ошибок
|
|
</span>
|
|
</Stack>
|
|
|
|
<Stack direction='row' sx={{ alignItems: 'center', gap: 0.25, flexShrink: 0 }}>
|
|
<span>Подробнее</span>
|
|
<KeyboardArrowDownIcon
|
|
sx={{
|
|
fontSize: '1.25rem',
|
|
transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
|
|
transition: 'transform 0.2s ease',
|
|
}}
|
|
/>
|
|
</Stack>
|
|
</Button>
|
|
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
open={isOpen}
|
|
onClose={() => setAnchorEl(null)}
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
|
transformOrigin={{ vertical: 'top', horizontal: 'left' }}
|
|
slotProps={{
|
|
paper: {
|
|
'data-validation-errors-menu': true,
|
|
sx: {
|
|
mt: 0.5,
|
|
bgcolor: warningColors.bg,
|
|
color: warningColors.text,
|
|
border: `1px solid ${warningColors.border}`,
|
|
borderRadius: '0.5rem',
|
|
boxShadow: 'none',
|
|
minWidth: anchorEl?.offsetWidth,
|
|
maxWidth: 420,
|
|
},
|
|
},
|
|
}}>
|
|
{errors.map((error) => (
|
|
<MenuItem
|
|
key={error.id}
|
|
onClick={() => handleNavigate(error.columnId)}
|
|
sx={{
|
|
whiteSpace: 'normal',
|
|
color: warningColors.text,
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
bgcolor: warningColors.hover,
|
|
},
|
|
}}>
|
|
{error.message}
|
|
</MenuItem>
|
|
))}
|
|
</Menu>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default memo(ValidationErrorsAlert);
|