forked from CITKParus/P8-Panels
WEB APP: Панель "Графики проектов" - фиксированный заголовок и колонка работ, порядок в стилях
This commit is contained in:
parent
bea65e4a8a
commit
3a87e4125d
@ -18,6 +18,23 @@ import { formatDateRF } from "../../core/utils"; //Вспомогательны
|
|||||||
//Шаблон имени ячейки месяца
|
//Шаблон имени ячейки месяца
|
||||||
const MONTH_COLUMN_REG_EXP = /[0-9]{4}_[0-9]{1,2}/;
|
const MONTH_COLUMN_REG_EXP = /[0-9]{4}_[0-9]{1,2}/;
|
||||||
|
|
||||||
|
//Стили
|
||||||
|
const STYLES = {
|
||||||
|
GROUP_CELL: { padding: "2px" },
|
||||||
|
GROUP_CELL_LINK: { textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "pre", minWidth: "800px", maxWidth: "800px" },
|
||||||
|
MONTH_CELL: { padding: "2px", maxWidth: "30px", overflow: "visible", fontSize: "smaller", whiteSpace: "nowrap" },
|
||||||
|
MONTH_CELL_FILLED: state => ({ backgroundColor: state == 0 ? "lightyellow" : state == 1 ? "lightgreen" : "lightblue", cursor: "pointer" }),
|
||||||
|
JOB_CELL: {
|
||||||
|
padding: "2px",
|
||||||
|
paddingLeft: "10px",
|
||||||
|
maxWidth: "300px",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "pre",
|
||||||
|
fontSize: "smaller"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
//-----------
|
//-----------
|
||||||
//Тело модуля
|
//Тело модуля
|
||||||
//-----------
|
//-----------
|
||||||
@ -46,9 +63,16 @@ const formatStageItemValue = (state, text) => {
|
|||||||
|
|
||||||
//Генерация представления ячейки заголовка группы
|
//Генерация представления ячейки заголовка группы
|
||||||
export const groupCellRender = ({ group, pOnlineShowDocument }) => ({
|
export const groupCellRender = ({ group, pOnlineShowDocument }) => ({
|
||||||
cellStyle: { padding: "2px" },
|
cellStyle: STYLES.GROUP_CELL,
|
||||||
data: (
|
data: (
|
||||||
<Link component="button" variant="body2" align="left" onClick={() => pOnlineShowDocument({ unitCode: "Projects", document: group.name })}>
|
<Link
|
||||||
|
component="button"
|
||||||
|
variant="body2"
|
||||||
|
align="left"
|
||||||
|
sx={STYLES.GROUP_CELL_LINK}
|
||||||
|
title={group.caption}
|
||||||
|
onClick={() => pOnlineShowDocument({ unitCode: "Projects", document: group.name })}
|
||||||
|
>
|
||||||
{group.caption}
|
{group.caption}
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
@ -67,14 +91,14 @@ export const dataCellRender = ({ row, columnDef, pOnlineShowDocument }) => {
|
|||||||
let data = null;
|
let data = null;
|
||||||
if ((dF <= mF && dT >= mT) || (dF >= mF && dF <= mT) || (dT >= mF && dT <= mT)) {
|
if ((dF <= mF && dT >= mT) || (dF >= mF && dF <= mT) || (dT >= mF && dT <= mT)) {
|
||||||
if (year == dF.getFullYear() && month == dF.getMonth() + 1) data = formatStageItemValue(row.NSTATE, row.SRESP);
|
if (year == dF.getFullYear() && month == dF.getMonth() + 1) data = formatStageItemValue(row.NSTATE, row.SRESP);
|
||||||
cellStyle = { backgroundColor: row.NSTATE == 0 ? "lightyellow" : row.NSTATE == 1 ? "lightgreen" : "lightblue", cursor: "pointer" };
|
cellStyle = STYLES.MONTH_CELL_FILLED(row.NSTATE);
|
||||||
cellProps = {
|
cellProps = {
|
||||||
title: `${formatDateRF(dF)} - ${formatDateRF(dT)}`,
|
title: `${formatDateRF(dF)} - ${formatDateRF(dT)}`,
|
||||||
onClick: () => pOnlineShowDocument({ unitCode: "ProjectsStages", document: row.NRN })
|
onClick: () => pOnlineShowDocument({ unitCode: "ProjectsStages", document: row.NRN })
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
cellStyle: { padding: "2px", maxWidth: "30px", overflow: "visible", fontSize: "smaller", whiteSpace: "nowrap", ...cellStyle },
|
cellStyle: { ...STYLES.MONTH_CELL, ...cellStyle },
|
||||||
cellProps,
|
cellProps,
|
||||||
data
|
data
|
||||||
};
|
};
|
||||||
@ -83,15 +107,7 @@ export const dataCellRender = ({ row, columnDef, pOnlineShowDocument }) => {
|
|||||||
case "SJOB":
|
case "SJOB":
|
||||||
return {
|
return {
|
||||||
cellProps: { title: row[columnDef.name] },
|
cellProps: { title: row[columnDef.name] },
|
||||||
cellStyle: {
|
cellStyle: STYLES.JOB_CELL
|
||||||
padding: "2px",
|
|
||||||
paddingLeft: "10px",
|
|
||||||
maxWidth: "300px",
|
|
||||||
textOverflow: "ellipsis",
|
|
||||||
overflow: "hidden",
|
|
||||||
whiteSpace: "pre",
|
|
||||||
fontSize: "smaller"
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -15,6 +15,15 @@ import { ApplicationСtx } from "../../context/application"; //Контекст
|
|||||||
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
||||||
import { dataCellRender, groupCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
|
import { dataCellRender, groupCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
|
||||||
|
|
||||||
|
//---------
|
||||||
|
//Константы
|
||||||
|
//---------
|
||||||
|
|
||||||
|
//Стили
|
||||||
|
const STYLES = {
|
||||||
|
DATA_GRID_CONTAINER: { minWidth: "95vw", maxWidth: "95vw", minHeight: "87vh", maxHeight: "87vh" }
|
||||||
|
};
|
||||||
|
|
||||||
//-----------
|
//-----------
|
||||||
//Тело модуля
|
//Тело модуля
|
||||||
//-----------
|
//-----------
|
||||||
@ -27,7 +36,9 @@ const PrjGraph = () => {
|
|||||||
columnsDef: [],
|
columnsDef: [],
|
||||||
groups: [],
|
groups: [],
|
||||||
rows: [],
|
rows: [],
|
||||||
reload: true
|
reload: true,
|
||||||
|
fixedHeader: false,
|
||||||
|
fixedColumns: 0
|
||||||
});
|
});
|
||||||
|
|
||||||
//Подключение к контексту приложения
|
//Подключение к контексту приложения
|
||||||
@ -42,6 +53,8 @@ const PrjGraph = () => {
|
|||||||
const data = await executeStored({ stored: "PKG_P8PANELS_PROJECTS.GRAPH", args: {}, respArg: "COUT" });
|
const data = await executeStored({ stored: "PKG_P8PANELS_PROJECTS.GRAPH", args: {}, respArg: "COUT" });
|
||||||
setdataGrid(pv => ({
|
setdataGrid(pv => ({
|
||||||
...pv,
|
...pv,
|
||||||
|
fixedHeader: data.XDATA_GRID.fixedHeader,
|
||||||
|
fixedColumns: data.XDATA_GRID.fixedColumns,
|
||||||
columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef,
|
columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef,
|
||||||
rows: [...(data.XROWS || [])],
|
rows: [...(data.XROWS || [])],
|
||||||
groups: [...(data.XGROUPS || [])],
|
groups: [...(data.XGROUPS || [])],
|
||||||
@ -61,7 +74,7 @@ const PrjGraph = () => {
|
|||||||
<div>
|
<div>
|
||||||
<Grid container spacing={1}>
|
<Grid container spacing={1}>
|
||||||
<Grid item xs={12}>
|
<Grid item xs={12}>
|
||||||
<Box p={5}>
|
<Box pt={1} display="flex" justifyContent="center" alignItems="center">
|
||||||
{dataGrid.dataLoaded ? (
|
{dataGrid.dataLoaded ? (
|
||||||
<P8PDataGrid
|
<P8PDataGrid
|
||||||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||||||
@ -70,9 +83,14 @@ const PrjGraph = () => {
|
|||||||
rows={dataGrid.rows}
|
rows={dataGrid.rows}
|
||||||
size={P8P_DATA_GRID_SIZE.LARGE}
|
size={P8P_DATA_GRID_SIZE.LARGE}
|
||||||
reloading={dataGrid.reload}
|
reloading={dataGrid.reload}
|
||||||
|
fixedHeader={dataGrid.fixedHeader}
|
||||||
|
fixedColumns={dataGrid.fixedColumns}
|
||||||
dataCellRender={prms => dataCellRender({ ...prms, pOnlineShowDocument })}
|
dataCellRender={prms => dataCellRender({ ...prms, pOnlineShowDocument })}
|
||||||
groupCellRender={prms => groupCellRender({ ...prms, pOnlineShowDocument })}
|
groupCellRender={prms => groupCellRender({ ...prms, pOnlineShowDocument })}
|
||||||
containerComponentProps={{ elevation: 6, sx: { overflowX: "visible" } }}
|
containerComponentProps={{
|
||||||
|
elevation: 3,
|
||||||
|
sx: STYLES.DATA_GRID_CONTAINER
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
</Box>
|
</Box>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user