WEBAPP: Панель "Экономика проектов" - фиксированные заголовки таблиц и общесистемные стили скролов

2025-01-16 16:04:00 +03:00 · 2025-01-16 16:04:00 +03:00 · b2cc839cba
commit b2cc839cba
parent b06ae0d242
5 changed files with 120 additions and 21 deletions
--- a/app/panels/prj_fin/layouts.js
+++ b/app/panels/prj_fin/layouts.js
@ -23,6 +23,13 @@ export const PANEL_UNITS = {
    PROJECT_STAGE_ARTS: "PROJECT_STAGE_ARTS"
 };

+//Общие стили
+export const COMMON_PROJECTS_STYLES = {
+    FULL_SCREEN_DIALOG_CONTENT: {
+        padding: 0
+    }
+};
+
 //-----------
 //Тело модуля
 //-----------
@ -275,42 +282,43 @@ export const rowExpandRender = ({
    const linkButtons = () =>
        panelUnit === PANEL_UNITS.PROJECTS ? (
            <>
-                <Button fullWidth variant="contained" onClick={() => showStages({ sender: row })}>
+                <Button variant="outlined" onClick={() => showStages({ sender: row })}>
                    Этапы
                </Button>
-                <Button fullWidth variant="contained" onClick={() => pOnlineShowDocument({ unitCode: "Projects", document: row.NRN })}>
-                    В раздел
+                <Button variant="outlined" onClick={() => pOnlineShowDocument({ unitCode: "Projects", document: row.NRN })}>
+                    К проекту
                </Button>
            </>
        ) : panelUnit === PANEL_UNITS.PROJECT_STAGES ? (
            <>
-                <Button fullWidth variant="contained" onClick={() => showStageArts({ sender: row })}>
+                <Button variant="outlined" onClick={() => showStageArts({ sender: row })}>
                    Статьи
                </Button>
-                <Button fullWidth variant="contained" onClick={() => showContracts({ sender: row })}>
+                <Button variant="outlined" onClick={() => showContracts({ sender: row })}>
                    Сисполнители
                </Button>
-                <Button fullWidth variant="contained" onClick={() => pOnlineShowDocument({ unitCode: "ProjectsStages", document: row.NRN })}>
-                    В раздел
+                <Button variant="outlined" onClick={() => pOnlineShowDocument({ unitCode: "ProjectsStages", document: row.NRN })}>
+                    К этапу
                </Button>
            </>
        ) : panelUnit === PANEL_UNITS.PROJECT_STAGE_CONTRACTS ? (
            <Button
-                fullWidth
-                variant="contained"
+                variant="outlined"
                onClick={() => pOnlineShowDocument({ unitCode: row.SLNK_UNIT_SDOC_PREF, document: row.NLNK_DOCUMENT_SDOC_PREF })}
            >
-                В раздел
+                К договору
            </Button>
        ) : null;
    //Сборка содержимого
    return (
        <Box p={2}>
            <Grid container spacing={2}>
-                <Grid item xs={12} md={1}>
-                    <Stack spacing={2}>{linkButtons()}</Stack>
+                <Grid item xs={12} md={12}>
+                    <Stack spacing={2} direction="row">
+                        {linkButtons()}
+                    </Stack>
                </Grid>
-                <Grid item xs={12} md={11}>
+                <Grid item xs={12} md={12}>
                    <Paper elevation={5}>
                        <Table sx={{ width: "100%" }} size="small">
                            <TableBody>
--- a/app/panels/prj_fin/projects.js
+++ b/app/panels/prj_fin/projects.js
@ -11,23 +11,34 @@ import React, { useState, useCallback, useEffect, useContext } from "react"; //
 import { Box, Grid, Paper, Fab, Icon } from "@mui/material"; //Интерфейсные компоненты
 import { object2Base64XML } from "../../core/utils"; //Вспомогательные процедуры и функции
 import { TEXTS } from "../../../app.text"; //Тектовые ресурсы и константы
-import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
+import { APP_STYLES } from "../../../app.styles"; //Типовые стили
+import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
+import { P8PDataGrid, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_MORE_HEIGHT, P8P_DATA_GRID_FILTERS_HEIGHT } from "../../components/p8p_data_grid"; //Таблица данных
 import { P8PFullScreenDialog } from "../../components/p8p_fullscreen_dialog"; //Полноэкранный диалог
 import { P8PChart } from "../../components/p8p_chart"; //График
 import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
 import { ApplicationСtx } from "../../context/application"; //Контекст приложения
 import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
 import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
-import { PANEL_UNITS, headCellRender, dataCellRender, valueFormatter, rowExpandRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
+import { COMMON_PROJECTS_STYLES, PANEL_UNITS, headCellRender, dataCellRender, valueFormatter, rowExpandRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
 import { Stages } from "./stages"; //Список этапов проекта

 //---------
 //Константы
 //---------

+//Высота графиков
+const CHART_HEIGHT = "300px";
+
 //Стили
 const STYLES = {
-    CHART: { maxHeight: "300px", display: "flex", justifyContent: "center" },
+    TABLE_PROJECTS: (showCharts, morePages, filters) => ({
+        height: `calc(100vh - ${APP_BAR_HEIGHT} - ${showCharts ? CHART_HEIGHT : "0px"} - ${morePages ? P8P_DATA_GRID_MORE_HEIGHT : "0px"} - ${
+            filters ? P8P_DATA_GRID_FILTERS_HEIGHT : "0px"
+        } - 25px)`,
+        ...APP_STYLES.SCROLL
+    }),
+    CHART: { maxHeight: CHART_HEIGHT, display: "flex", justifyContent: "center" },
    CHART_PAPER: { height: "100%" },
    CHART_FAB: { position: "absolute", top: 80, left: 16 }
 };
@ -220,12 +231,16 @@ const Projects = () => {
                    {projectsDataGrid.dataLoaded ? (
                        <P8PDataGrid
                            {...P8P_DATA_GRID_CONFIG_PROPS}
+                            containerComponentProps={{
+                                sx: STYLES.TABLE_PROJECTS(showCharts, projectsDataGrid.morePages, (projectsDataGrid.filters || []).length > 0)
+                            }}
                            columnsDef={projectsDataGrid.columnsDef}
                            rows={projectsDataGrid.rows}
                            size={P8P_DATA_GRID_SIZE.SMALL}
                            filtersInitial={projectsDataGrid.filters}
                            morePages={projectsDataGrid.morePages}
                            reloading={projectsDataGrid.reload}
+                            fixedHeader={true}
                            expandable={true}
                            headCellRender={headCellRender}
                            dataCellRender={prms => dataCellRender({ ...prms, panelUnit: PANEL_UNITS.PROJECTS, showStages })}
@ -245,7 +260,11 @@ const Projects = () => {
                        />
                    ) : null}
                    {projectsDataGrid.selectedProject ? (
-                        <P8PFullScreenDialog title={`Этапы проекта "${projectsDataGrid.selectedProject.SNAME_USL}"`} onClose={handleStagesClose}>
+                        <P8PFullScreenDialog
+                            title={`Этапы проекта "${projectsDataGrid.selectedProject.SNAME_USL}"`}
+                            onClose={handleStagesClose}
+                            contentProps={{ sx: COMMON_PROJECTS_STYLES.FULL_SCREEN_DIALOG_CONTENT }}
+                        >
                            <Stages
                                project={projectsDataGrid.selectedProject.NRN}
                                projectName={projectsDataGrid.selectedProject.SNAME_USL}
--- a/app/panels/prj_fin/stage_arts.js
+++ b/app/panels/prj_fin/stage_arts.js
@ -12,13 +12,27 @@ import PropTypes from "prop-types"; //Контроль свойств компо
 import { Box } from "@mui/material"; //Интерфейсные компоненты
 import { object2Base64XML } from "../../core/utils"; //Вспомогательные процедуры и функции
 import { TEXTS } from "../../../app.text"; //Тектовые ресурсы и константы
-import { P8PDataGrid, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_FILTER_SHAPE } from "../../components/p8p_data_grid"; //Таблица данных
+import { APP_STYLES } from "../../../app.styles"; //Типовые стили
+import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
+import { P8PDataGrid, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_FILTER_SHAPE, P8P_DATA_GRID_FILTERS_HEIGHT } from "../../components/p8p_data_grid"; //Таблица данных
 import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
 import { ApplicationСtx } from "../../context/application"; //Контекст приложения
 import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
 import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
 import { PANEL_UNITS, dataCellRender, valueFormatter } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов

+//---------
+//Константы
+//---------
+
+//Стили
+const STYLES = {
+    TABLE_ARTS: filters => ({
+        height: `calc(100vh - ${APP_BAR_HEIGHT} - ${filters ? P8P_DATA_GRID_FILTERS_HEIGHT : "0px"} - 16px)`,
+        ...APP_STYLES.SCROLL
+    })
+};
+
 //-----------
 //Тело модуля
 //-----------
@ -100,10 +114,12 @@ const StageArts = ({ stage, filters }) => {
            {stageArtsDataGrid.dataLoaded ? (
                <P8PDataGrid
                    {...P8P_DATA_GRID_CONFIG_PROPS}
+                    containerComponentProps={{ sx: STYLES.TABLE_ARTS((stageArtsDataGrid.filters || []).length > 0), elevation: 0 }}
                    columnsDef={stageArtsDataGrid.columnsDef}
                    filtersInitial={filters}
                    rows={stageArtsDataGrid.rows}
                    size={P8P_DATA_GRID_SIZE.SMALL}
+                    fixedHeader={true}
                    morePages={false}
                    reloading={stageArtsDataGrid.reload}
                    dataCellRender={prms => dataCellRender({ ...prms, panelUnit: PANEL_UNITS.PROJECT_STAGE_ARTS, showCostNotes, showContracts })}
--- a/app/panels/prj_fin/stage_contracts.js
+++ b/app/panels/prj_fin/stage_contracts.js
@ -12,13 +12,35 @@ import PropTypes from "prop-types"; //Контроль свойств компо
 import { Box } from "@mui/material"; //Интерфейсные компоненты
 import { object2Base64XML } from "../../core/utils"; //Вспомогательные процедуры и функции
 import { TEXTS } from "../../../app.text"; //Тектовые ресурсы и константы
-import { P8PDataGrid, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_FILTER_SHAPE } from "../../components/p8p_data_grid"; //Таблица данных
+import { APP_STYLES } from "../../../app.styles"; //Типовые стили
+import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
+import {
+    P8PDataGrid,
+    P8P_DATA_GRID_SIZE,
+    P8P_DATA_GRID_FILTER_SHAPE,
+    P8P_DATA_GRID_MORE_HEIGHT,
+    P8P_DATA_GRID_FILTERS_HEIGHT
+} from "../../components/p8p_data_grid"; //Таблица данных
 import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
 import { ApplicationСtx } from "../../context/application"; //Контекст приложения
 import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
 import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
 import { PANEL_UNITS, dataCellRender, valueFormatter, rowExpandRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов

+//---------
+//Константы
+//---------
+
+//Стили
+const STYLES = {
+    TABLE_CONTRACTS: (morePages, filters) => ({
+        height: `calc(100vh - ${APP_BAR_HEIGHT} - ${morePages ? P8P_DATA_GRID_MORE_HEIGHT : "0px"} - ${
+            filters ? P8P_DATA_GRID_FILTERS_HEIGHT : "0px"
+        } - 16px)`,
+        ...APP_STYLES.SCROLL
+    })
+};
+
 //-----------
 //Тело модуля
 //-----------
@ -137,12 +159,17 @@ const StageContracts = ({ stage, filters }) => {
            {stageContractsDataGrid.dataLoaded ? (
                <P8PDataGrid
                    {...P8P_DATA_GRID_CONFIG_PROPS}
+                    containerComponentProps={{
+                        sx: STYLES.TABLE_CONTRACTS(stageContractsDataGrid.morePages, (stageContractsDataGrid.filters || []).length > 0),
+                        elevation: 0
+                    }}
                    columnsDef={stageContractsDataGrid.columnsDef}
                    filtersInitial={filters}
                    rows={stageContractsDataGrid.rows}
                    size={P8P_DATA_GRID_SIZE.SMALL}
                    morePages={stageContractsDataGrid.morePages}
                    reloading={stageContractsDataGrid.reload}
+                    fixedHeader={true}
                    expandable={true}
                    dataCellRender={prms => dataCellRender({ ...prms, panelUnit: PANEL_UNITS.PROJECT_STAGE_CONTRACTS, pOnlineShowDocument })}
                    rowExpandRender={prms =>
--- a/app/panels/prj_fin/stages.js
+++ b/app/panels/prj_fin/stages.js
@ -12,7 +12,15 @@ import PropTypes from "prop-types"; //Контроль свойств компо
 import { Box } from "@mui/material"; //Интерфейсные компоненты
 import { object2Base64XML } from "../../core/utils"; //Вспомогательные процедуры и функции
 import { TEXTS } from "../../../app.text"; //Тектовые ресурсы и константы
-import { P8PDataGrid, P8P_DATA_GRID_SIZE, P8P_DATA_GRID_FILTER_SHAPE } from "../../components/p8p_data_grid"; //Таблица данных
+import { APP_STYLES } from "../../../app.styles"; //Типовые стили
+import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
+import {
+    P8PDataGrid,
+    P8P_DATA_GRID_SIZE,
+    P8P_DATA_GRID_FILTER_SHAPE,
+    P8P_DATA_GRID_MORE_HEIGHT,
+    P8P_DATA_GRID_FILTERS_HEIGHT
+} from "../../components/p8p_data_grid"; //Таблица данных
 import { P8PFullScreenDialog } from "../../components/p8p_fullscreen_dialog"; //Полноэкранный диалог
 import { StageArts } from "./stage_arts"; //Калькуляция этапа проекта
 import { StageContracts } from "./stage_contracts"; //Договоры с соисполнителями этапа проекта
@ -20,7 +28,21 @@ import { BackEndСtx } from "../../context/backend"; //Контекст взаи
 import { ApplicationСtx } from "../../context/application"; //Контекст приложения
 import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
 import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
-import { PANEL_UNITS, headCellRender, dataCellRender, valueFormatter, rowExpandRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
+import { COMMON_PROJECTS_STYLES, PANEL_UNITS, headCellRender, dataCellRender, valueFormatter, rowExpandRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
+
+//---------
+//Константы
+//---------
+
+//Стили
+const STYLES = {
+    TABLE_STAGES: (morePages, filters) => ({
+        height: `calc(100vh - ${APP_BAR_HEIGHT} - ${morePages ? P8P_DATA_GRID_MORE_HEIGHT : "0px"} - ${
+            filters ? P8P_DATA_GRID_FILTERS_HEIGHT : "0px"
+        } - 16px)`,
+        ...APP_STYLES.SCROLL
+    })
+};

 //-----------
 //Тело модуля
@ -155,12 +177,17 @@ const Stages = ({ project, projectName, filters }) => {
            {stagesDataGrid.dataLoaded ? (
                <P8PDataGrid
                    {...P8P_DATA_GRID_CONFIG_PROPS}
+                    containerComponentProps={{
+                        sx: STYLES.TABLE_STAGES(stagesDataGrid.morePages, (stagesDataGrid.filters || []).length > 0),
+                        elevation: 0
+                    }}
                    columnsDef={stagesDataGrid.columnsDef}
                    filtersInitial={filters}
                    rows={stagesDataGrid.rows}
                    size={P8P_DATA_GRID_SIZE.SMALL}
                    morePages={stagesDataGrid.morePages}
                    reloading={stagesDataGrid.reload}
+                    fixedHeader={true}
                    expandable={true}
                    headCellRender={headCellRender}
                    dataCellRender={prms => dataCellRender({ ...prms, panelUnit: PANEL_UNITS.PROJECT_STAGES, showStageArts, showContracts })}
@ -186,6 +213,7 @@ const Stages = ({ project, projectName, filters }) => {
                <P8PFullScreenDialog
                    title={`Договоры этапа "${stagesDataGrid.selectedStageNumb}" проекта "${projectName}"`}
                    onClose={handleStageContractsClose}
+                    contentProps={{ sx: COMMON_PROJECTS_STYLES.FULL_SCREEN_DIALOG_CONTENT }}
                >
                    <StageContracts stage={stagesDataGrid.showStageContracts} filters={stagesDataGrid.stageContractsFilters} />
                </P8PFullScreenDialog>
@ -194,6 +222,7 @@ const Stages = ({ project, projectName, filters }) => {
                <P8PFullScreenDialog
                    title={`Калькуляция этапа "${stagesDataGrid.selectedStageNumb}" проекта "${projectName}"`}
                    onClose={handleStageArtsClose}
+                    contentProps={{ sx: COMMON_PROJECTS_STYLES.FULL_SCREEN_DIALOG_CONTENT }}
                >
                    <StageArts stage={stagesDataGrid.showStageArts} filters={stagesDataGrid.stageArtsFilters} />
                </P8PFullScreenDialog>