From 6ffd82e8649cc1a7cbf13480887504347fbd3030 Mon Sep 17 00:00:00 2001
From: Mikhail Chechnev <mim_@mail.ru>
Date: Sat, 4 May 2024 15:23:27 +0300
Subject: [PATCH] =?UTF-8?q?WEB=20APP:=20=D0=9F=D1=80=D0=B8=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=80=D1=8B=20=D0=B4=D0=BB=D1=8F=20=D1=80=D0=B0=D0=B7=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B1=D0=BE=D1=82=D1=87=D0=B8=D0=BA=D0=BE=D0=B2=20-=20?=
 =?UTF-8?q?=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80=20=D1=82=D0=B0=D0=B1=D0=BB?=
 =?UTF-8?q?=D0=B8=D1=86=D1=8B=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20?=
 =?UTF-8?q?=D0=B4=D0=BE=D0=BF=D0=BE=D0=BB=D0=BD=D0=B5=D0=BD=20=D1=84=D0=B8?=
 =?UTF-8?q?=D0=BA=D1=81=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=BC=D0=B8=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BA=D0=B0=D0=BC?=
 =?UTF-8?q?=D0=B8=20=D0=B8=20=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC,=20=D1=80=D0=B0=D0=B7=D0=B2=D0=BE=D1=80?=
 =?UTF-8?q?=D0=B0=D1=87=D0=B8=D0=B2=D0=B0=D1=8E=D1=89=D0=B5=D0=B9=D1=81?=
 =?UTF-8?q?=D1=8F=20=D0=BE=D0=B1=D0=BB=D0=B0=D1=81=D1=82=D1=8C=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/panels/samples/data_grid.js | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/panels/samples/data_grid.js b/app/panels/samples/data_grid.js
index 8041cb7..c5b9bc3 100644
--- a/app/panels/samples/data_grid.js
+++ b/app/panels/samples/data_grid.js
@@ -9,11 +9,12 @@
 
 import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
 import PropTypes from "prop-types"; //Контроль свойств компонента
-import { Typography, Grid, Stack, Icon, Box } from "@mui/material"; //Интерфейсные элементы
+import { Typography, Grid, Stack, Icon, Box, Button } from "@mui/material"; //Интерфейсные элементы
 import { object2Base64XML } from "../../core/utils"; //Вспомогательные процедуры и функции
 import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
 import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
 import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
+import { ApplicationСtx } from "../../context/application"; //Контекст приложения
 
 //---------
 //Константы
@@ -25,7 +26,8 @@ const DATA_GRID_PAGE_SIZE = 5;
 //Стили
 const STYLES = {
     CONTAINER: { textAlign: "center", paddingTop: "20px" },
-    TITLE: { paddingBottom: "15px" }
+    TITLE: { paddingBottom: "15px" },
+    DATA_GRID_CONTAINER: { maxWidth: 700, maxHeight: 500, minHeight: 500 }
 };
 
 //---------------------------------------------
@@ -93,12 +95,17 @@ const DataGrid = ({ title }) => {
         rows: [],
         reload: true,
         pageNumber: 1,
-        morePages: true
+        morePages: true,
+        fixedHeader: false,
+        fixedColumns: 0
     });
 
     //Подключение к контексту взаимодействия с сервером
     const { executeStored, SERV_DATA_TYPE_CLOB } = useContext(BackEndСtx);
 
+    //Подключение к контексту приложения
+    const { pOnlineShowDocument } = useContext(ApplicationСtx);
+
     //Загрузка данных таблицы с сервера
     const loadData = useCallback(async () => {
         if (dataGrid.reload) {
@@ -115,6 +122,8 @@ const DataGrid = ({ title }) => {
             });
             setdataGrid(pv => ({
                 ...pv,
+                fixedHeader: data.XDATA_GRID.fixedHeader,
+                fixedColumns: data.XDATA_GRID.fixedColumns,
                 columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef,
                 rows: pv.pageNumber == 1 ? [...(data.XROWS || [])] : [...pv.rows, ...(data.XROWS || [])],
                 groups: data.XGROUPS
@@ -138,6 +147,9 @@ const DataGrid = ({ title }) => {
     //При изменении количества отображаемых страниц
     const handlePagesCountChanged = () => setdataGrid(pv => ({ ...pv, pageNumber: pv.pageNumber + 1, reload: true }));
 
+    //При нажатии на копку контрагента
+    const handleAgnButtonClicked = agnCode => pOnlineShowDocument({ unitCode: "AGNLIST", document: agnCode, inRnParameter: "in_AGNABBR" });
+
     //При необходимости обновить данные таблицы
     useEffect(() => {
         loadData();
@@ -151,14 +163,17 @@ const DataGrid = ({ title }) => {
             </Typography>
             <Grid container spacing={1} pt={5}>
                 <Grid item xs={12}>
-                    <Box p={5}>
+                    <Box p={5} display="flex" justifyContent="center" alignItems="center">
                         {dataGrid.dataLoaded ? (
                             <P8PDataGrid
                                 {...P8P_DATA_GRID_CONFIG_PROPS}
+                                containerComponentProps={{ elevation: 6, style: STYLES.DATA_GRID_CONTAINER }}
                                 columnsDef={dataGrid.columnsDef}
                                 groups={dataGrid.groups}
                                 rows={dataGrid.rows}
                                 size={P8P_DATA_GRID_SIZE.LARGE}
+                                fixedHeader={dataGrid.fixedHeader}
+                                fixedColumns={dataGrid.fixedColumns}
                                 filtersInitial={dataGrid.filters}
                                 morePages={dataGrid.morePages}
                                 reloading={dataGrid.reload}
@@ -169,6 +184,10 @@ const DataGrid = ({ title }) => {
                                 onOrderChanged={handleOrderChanged}
                                 onFilterChanged={handleFilterChanged}
                                 onPagesCountChanged={handlePagesCountChanged}
+                                expandable={true}
+                                rowExpandRender={({ row }) => (
+                                    <Button onClick={() => handleAgnButtonClicked(row.SAGNABBR)}>Показать в разделе</Button>
+                                )}
                             />
                         ) : null}
                     </Box>