WEB APP: Панель "Графики проектов" - фиксированный заголовок и колонка работ, порядок в стилях

app/panels/prj_graph/layouts.js

@@ -18,6 +18,23 @@ import { formatDateRF } from "../../core/utils"; //Вспомогательны
 //Шаблон имени ячейки месяца
 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 }) => ({
-    cellStyle: { padding: "2px" },
+    cellStyle: STYLES.GROUP_CELL,
     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}
         </Link>
     )
@@ -67,14 +91,14 @@ export const dataCellRender = ({ row, columnDef, pOnlineShowDocument }) => {
         let data = null;
         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);
-            cellStyle = { backgroundColor: row.NSTATE == 0 ? "lightyellow" : row.NSTATE == 1 ? "lightgreen" : "lightblue", cursor: "pointer" };
+            cellStyle = STYLES.MONTH_CELL_FILLED(row.NSTATE);
             cellProps = {
                 title: `${formatDateRF(dF)} - ${formatDateRF(dT)}`,
                 onClick: () => pOnlineShowDocument({ unitCode: "ProjectsStages", document: row.NRN })
             };
         }
         return {
-            cellStyle: { padding: "2px", maxWidth: "30px", overflow: "visible", fontSize: "smaller", whiteSpace: "nowrap", ...cellStyle },
+            cellStyle: { ...STYLES.MONTH_CELL, ...cellStyle },
             cellProps,
             data
         };
@@ -83,15 +107,7 @@ export const dataCellRender = ({ row, columnDef, pOnlineShowDocument }) => {
         case "SJOB":
             return {
                 cellProps: { title: row[columnDef.name] },
-                cellStyle: {
+                cellStyle: STYLES.JOB_CELL
-                    padding: "2px",
-                    paddingLeft: "10px",
-                    maxWidth: "300px",
-                    textOverflow: "ellipsis",
-                    overflow: "hidden",
-                    whiteSpace: "pre",
-                    fontSize: "smaller"
-                }
             };
     }
 };

app/panels/prj_graph/prj_graph.js

@@ -15,6 +15,15 @@ import { ApplicationСtx } from "../../context/application"; //Контекст
 import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
 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: [],
         groups: [],
         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" });
             setdataGrid(pv => ({
                 ...pv,
+                fixedHeader: data.XDATA_GRID.fixedHeader,
+                fixedColumns: data.XDATA_GRID.fixedColumns,
                 columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef,
                 rows: [...(data.XROWS || [])],
                 groups: [...(data.XGROUPS || [])],
@@ -61,7 +74,7 @@ const PrjGraph = () => {
         <div>
             <Grid container spacing={1}>
                 <Grid item xs={12}>
-                    <Box p={5}>
+                    <Box pt={1} display="flex" justifyContent="center" alignItems="center">
                         {dataGrid.dataLoaded ? (
                             <P8PDataGrid
                                 {...P8P_DATA_GRID_CONFIG_PROPS}
@@ -70,9 +83,14 @@ const PrjGraph = () => {
                                 rows={dataGrid.rows}
                                 size={P8P_DATA_GRID_SIZE.LARGE}
                                 reloading={dataGrid.reload}
+                                fixedHeader={dataGrid.fixedHeader}
+                                fixedColumns={dataGrid.fixedColumns}
                                 dataCellRender={prms => dataCellRender({ ...prms, pOnlineShowDocument })}
                                 groupCellRender={prms => groupCellRender({ ...prms, pOnlineShowDocument })}
-                                containerComponentProps={{ elevation: 6, sx: { overflowX: "visible" } }}
+                                containerComponentProps={{
+                                    elevation: 3,
+                                    sx: STYLES.DATA_GRID_CONTAINER
+                                }}
                             />
                         ) : null}
                     </Box>