Merge pull request 'main' (#6) from CITKParus/P8-Panels:main into EqsPrfrm

Reviewed-on: #6
2024-10-16 16:24:51 +03:00 · 2024-10-16 16:24:51 +03:00 · 3a02384346
commit 3a02384346
parent 0c8222ea7e 321b0ceb79
6 changed files with 79 additions and 37 deletions
--- a/app/components/p8p_gantt.js
+++ b/app/components/p8p_gantt.js
@ -7,7 +7,7 @@
 //Подключение библиотек
 //---------------------

-import React, { useEffect, useState, useCallback } from "react"; //Классы React
+import React, { useEffect, useState, useCallback, useRef } from "react"; //Классы React
 import PropTypes from "prop-types"; //Контроль свойств компонента
 import {
    Box,
@ -364,6 +364,9 @@ const P8PGantt = ({
        editTask: null
    });

+    //Ссылки на DOM
+    const svgContainerRef = useRef(null);
+
    //Отображение диаграммы
    const showGantt = useCallback(() => {
        if (!state.gantt) {
@ -418,6 +421,11 @@ const P8PGantt = ({
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [tasks]);

+    //При подключении компонента к старице
+    useEffect(() => {
+        svgContainerRef.current.children[0].classList.add("scroll");
+    }, []);
+
    //Генерация содержимого
    return (
        <div style={{ ...(containerStyle ? containerStyle : {}) }}>
@ -468,7 +476,7 @@ const P8PGantt = ({
                    cancelBtnCaption={cancelTaskEditorBtnCaption}
                />
            ) : null}
-            <div style={STYLES.GANTT(state.noData, title, zoomBar)}>
+            <div style={STYLES.GANTT(state.noData, title, zoomBar)} ref={svgContainerRef}>
                <svg id="__gantt__" width="100%"></svg>
            </div>
        </div>
--- a/app/panels/prj_graph/prj_graph.js
+++ b/app/panels/prj_graph/prj_graph.js
@ -9,6 +9,8 @@

 import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
 import { Grid, Box } from "@mui/material"; //Интерфейсные элементы
+import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
+import { APP_STYLES } from "../../../app.styles"; //Типовые стили
 import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
 import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
 import { ApplicationСtx } from "../../context/application"; //Контекст приложения
@ -21,7 +23,7 @@ import { dataCellRender, groupCellRender } from "./layouts"; //Дополнит

 //Стили
 const STYLES = {
-    DATA_GRID_CONTAINER: { minWidth: "95vw", maxWidth: "95vw", minHeight: "87vh", maxHeight: "87vh" }
+    DATA_GRID_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})`, width: "100vw", ...APP_STYLES.SCROLL }
 };

 //-----------
@ -71,32 +73,30 @@ const PrjGraph = () => {

    //Генерация содержимого
    return (
-        <div>
-            <Grid container spacing={1}>
-                <Grid item xs={12}>
-                    <Box pt={1} display="flex" justifyContent="center" alignItems="center">
-                        {dataGrid.dataLoaded ? (
-                            <P8PDataGrid
-                                {...P8P_DATA_GRID_CONFIG_PROPS}
-                                columnsDef={dataGrid.columnsDef}
-                                groups={dataGrid.groups}
-                                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: 3,
-                                    sx: STYLES.DATA_GRID_CONTAINER
-                                }}
-                            />
-                        ) : null}
-                    </Box>
-                </Grid>
+        <Grid container>
+            <Grid item xs={12}>
+                <Box display="flex" justifyContent="center" alignItems="center">
+                    {dataGrid.dataLoaded ? (
+                        <P8PDataGrid
+                            {...P8P_DATA_GRID_CONFIG_PROPS}
+                            columnsDef={dataGrid.columnsDef}
+                            groups={dataGrid.groups}
+                            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: 0,
+                                sx: STYLES.DATA_GRID_CONTAINER
+                            }}
+                        />
+                    ) : null}
+                </Box>
            </Grid>
-        </div>
+        </Grid>
    );
 };

--- a/app/panels/prj_jobs/prj_jobs.js
+++ b/app/panels/prj_jobs/prj_jobs.js
@ -34,6 +34,7 @@ import { MessagingСtx } from "../../context/messaging"; //Контекст со
 import { ApplicationСtx } from "../../context/application"; //Контекст приложения
 import { formatDateJSONDateOnly } from "../../core/utils"; //Вспомогательные функции
 import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
+import { APP_STYLES } from "../../../app.styles"; //Типовые стили
 import { P8P_GANTT_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
 import { P8PGantt } from "../../components/p8p_gantt"; //Диаграмма Ганта
 import { formatDateRF } from "../../core/utils"; //Вспомогательные функции
@ -54,11 +55,11 @@ const STYLES = {
    PROJECTS_LIST_ITEM_SECONDARY_NOEDIT: { color: "gray" },
    PROJECTS_LIST_ITEM_SECONDARY_CHANGED: { color: "green" },
    PROJECTS_BUTTON: { position: "absolute", top: `calc(${APP_BAR_HEIGHT} + 16px)`, left: "16px" },
-    PROJECTS_DRAWER: { width: "250px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "250px", boxSizing: "border-box" } },
+    PROJECTS_DRAWER: { width: "250px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "250px", boxSizing: "border-box", ...APP_STYLES.SCROLL } },
    GANTT_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})`, width: "100vw", paddingTop: "24px" },
    GANTT_TITLE: { paddingLeft: "150px", paddingRight: "150px" },
    PERIODS_BUTTON: { position: "absolute", top: `calc(${APP_BAR_HEIGHT} + 16px)`, right: "16px" },
-    PERIODS_DRAWER: { width: "1200px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "1200px", boxSizing: "border-box" } }
+    PERIODS_DRAWER: { width: "1200px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "1200px", boxSizing: "border-box", ...APP_STYLES.SCROLL } }
 };

 //------------------------------------
--- a/app/panels/prj_jobs/res_mon.js
+++ b/app/panels/prj_jobs/res_mon.js
@ -9,16 +9,26 @@

 import React, { useContext, useState, useCallback, useEffect } from "react"; //Классы React
 import PropTypes from "prop-types"; //Контроль свойств компонента
+import { APP_STYLES } from "../../../app.styles"; //Типовые стили
 import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
 import { ApplicationСtx } from "../../context/application"; //Контекст приложения
 import { object2Base64XML } from "../../core/utils"; //Вспомогательные функции
 import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
-import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
+import { P8PDataGrid, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_MORE_HEIGHT } from "../../components/p8p_data_grid"; //Таблица данных
 import { LabPlanFOTDtl } from "./lab_plan_fot_dtl"; //Детализация плановой трудоёмкости по ФОТ
 import { LabFactRptDtl } from "./lab_fact_rpt_dtl"; //Детализация фактической трудоёмкости по "Планам и отчетам подразделений"
 import { LabPlanJobsDtl } from "./lab_plan_jobs_dtl"; //Детализация плановой трудоёмкости по графику
 import { periodsDataCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов

+//---------
+//Константы
+//---------
+
+//Стили
+const STYLES = {
+    DATA_GRID_CONTAINER: morePages => ({ height: `calc(100vh - ${morePages ? P8P_DATA_GRID_MORE_HEIGHT : "0px"})`, ...APP_STYLES.SCROLL })
+};
+
 //-----------
 //Тело модуля
 //-----------
@ -134,11 +144,16 @@ const ResMon = ({ ident, onPlanJobsDtlProjectClick }) => {
            {peridos.dataLoaded ? (
                <P8PDataGrid
                    {...P8P_DATA_GRID_CONFIG_PROPS}
+                    containerComponentProps={{
+                        elevation: 0,
+                        sx: STYLES.DATA_GRID_CONTAINER(peridos.morePages)
+                    }}
                    columnsDef={peridos.columnsDef}
                    rows={peridos.rows}
                    size={P8P_DATA_GRID_SIZE.SMALL}
                    morePages={peridos.morePages}
                    reloading={peridos.reload}
+                    fixedHeader={true}
                    onOrderChanged={handlePeriodsOrderChanged}
                    onPagesCountChanged={handlePeriodsPagesCountChanged}
                    dataCellRender={prms =>
--- a/css/p8-panels.css
+++ b/css/p8-panels.css
@ -0,0 +1,18 @@
+.scroll::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+}
+
+.scroll::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: #ebebeb;
+}
+
+.scroll::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #b4b4b4;
+}
+
+.scroll::-webkit-scrollbar-thumb:hover {
+    background-color: #808080;
+}
--- a/dist/p8-panels.js
+++ b/dist/p8-panels.js