davay-popozhe/P8-Panels
1
0
Fork 0
forked from CITKParus/P8-Panels
Code Issues Pull Requests Projects Releases Wiki Activity

WEB APP: P8PGantt - автоматический расчет высоты диаграммы, возможность задать стиль контейнера

Browse Source
This commit is contained in:
Mikhail Chechnev 2024-09-17 21:36:38 +03:00
parent a3a94aeb00
commit e81cde166c
1 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/components/p8p_gantt.js
View File

@ -78,10 +78,22 @@ const P8P_GANTT_TASK_COLOR_SHAPE = PropTypes.shape({
desc: PropTypes.string.isRequired desc: PropTypes.string.isRequired
}); });
//Высота заголовка
const TITLE_HEIGHT = "44px";
//Высота панели масштабирования
const ZOOM_HEIGHT = "56px";
//Стили //Стили
const STYLES = { const STYLES = {
TASK_EDITOR_CONTENT: { minWidth: 400, overflowX: "auto" }, TASK_EDITOR_CONTENT: { minWidth: 400, overflowX: "auto" },
TASK_EDITOR_LIST: { width: "100%", minWidth: 300, maxWidth: 700, bgcolor: "background.paper" } TASK_EDITOR_LIST: { width: "100%", minWidth: 300, maxWidth: 700, bgcolor: "background.paper" },
GANTT_TITLE: { height: TITLE_HEIGHT },
GANTT_ZOOM: { height: ZOOM_HEIGHT },
GANTT: (noData, title, zoomBar) => ({
height: `calc(100% - ${zoomBar ? ZOOM_HEIGHT : "0px"} - ${title ? TITLE_HEIGHT : "0px"})`,
display: noData ? "none" : ""
})
}; };
//-------------------------------- //--------------------------------
@ -318,7 +330,7 @@ P8PGanttTaskEditor.propTypes = {
//Диаграмма Ганта //Диаграмма Ганта
const P8PGantt = ({ const P8PGantt = ({
height, containerStyle,
title, title,
titleStyle, titleStyle,
onTitleClick, onTitleClick,
@ -408,10 +420,16 @@ const P8PGantt = ({
//Генерация содержимого //Генерация содержимого
return ( return (
<div> <div style={{ ...(containerStyle ? containerStyle : {}) }}>
{state.gantt && state.noData ? <P8PAppInlineError text={noDataFoundText} /> : null} {state.gantt && state.noData ? <P8PAppInlineError text={noDataFoundText} /> : null}
{state.gantt && !state.noData && title ? ( {state.gantt && !state.noData && title ? (
<Typography p={1} sx={{ ...(titleStyle ? titleStyle : {}) }} align="center" color="textSecondary" variant="subtitle1"> <Typography
p={1}
sx={{ ...STYLES.GANTT_TITLE, ...(titleStyle ? titleStyle : {}) }}
align="center"
color="textSecondary"
variant="subtitle1"
>
{onTitleClick ? ( {onTitleClick ? (
<Link component="button" variant="body2" underline="hover" onClick={() => onTitleClick()}> <Link component="button" variant="body2" underline="hover" onClick={() => onTitleClick()}>
{title} {title}
@ -422,7 +440,7 @@ const P8PGantt = ({
</Typography> </Typography>
) : null} ) : null}
{state.gantt && !state.noData && zoomBar ? ( {state.gantt && !state.noData && zoomBar ? (
<Box p={1}> <Box p={1} sx={STYLES.GANTT_ZOOM}>
<IconButton onClick={() => handleZoomChange(-1)} disabled={state.zoom == 0}> <IconButton onClick={() => handleZoomChange(-1)} disabled={state.zoom == 0}>
<Icon>zoom_in</Icon> <Icon>zoom_in</Icon>
</IconButton> </IconButton>
@ -450,7 +468,7 @@ const P8PGantt = ({
cancelBtnCaption={cancelTaskEditorBtnCaption} cancelBtnCaption={cancelTaskEditorBtnCaption}
/> />
) : null} ) : null}
<div style={{ height, display: state.noData ? "none" : "" }}> <div style={STYLES.GANTT(state.noData, title, zoomBar)}>
<svg id="__gantt__" width="100%"></svg> <svg id="__gantt__" width="100%"></svg>
</div> </div>
</div> </div>
@ -459,7 +477,7 @@ const P8PGantt = ({
//Контроль свойств - Диаграмма Ганта //Контроль свойств - Диаграмма Ганта
P8PGantt.propTypes = { P8PGantt.propTypes = {
height: PropTypes.string.isRequired, containerStyle: PropTypes.object,
title: PropTypes.string, title: PropTypes.string,
titleStyle: PropTypes.object, titleStyle: PropTypes.object,
onTitleClick: PropTypes.func, onTitleClick: PropTypes.func,