From 4d32c51d4a16ecaa778a9c97d77e1d5fc138ebf1 Mon Sep 17 00:00:00 2001
From: Mikhail Chechnev <mim_@mail.ru>
Date: Fri, 20 Oct 2023 22:29:21 +0300
Subject: [PATCH] =?UTF-8?q?WEB=20APP:=20"P8PTable"=20-=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=B4=D0=B4=D0=B5=D1=80=D0=B6=D0=BA=D0=B0=20=D0=BF=D0=BE=D0=B4?=
 =?UTF-8?q?=D1=81=D0=BA=D0=B0=D0=B7=D0=BE=D0=BA=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BE=D0=BA=20=D1=82=D0=B0=D0=B1?=
 =?UTF-8?q?=D0=BB=D0=B8=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/p8p_table.js | 56 +++++++++++++++++++++++++++++++++++--
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/app/components/p8p_table.js b/app/components/p8p_table.js
index d52bbd3..6553780 100644
--- a/app/components/p8p_table.js
+++ b/app/components/p8p_table.js
@@ -30,7 +30,8 @@ import {
     Button,
     TextField,
     Chip,
-    Container
+    Container,
+    Link
 } from "@mui/material"; //Интерфейсные компоненты
 import { P8PAppInlineError } from "./p8p_app_message"; //Встраиваемое сообщение об ошибке
 
@@ -231,6 +232,28 @@ P8PTableColumnMenu.propTypes = {
     onItemClick: PropTypes.func
 };
 
+//Диалог подсказки
+const P8PTableColumnHintDialog = ({ columnDef, okBtnCaption, onOk }) => {
+    return (
+        <Dialog open={true} aria-labelledby="filter-dialog-title" aria-describedby="filter-dialog-description" onClose={() => (onOk ? onOk() : null)}>
+            <DialogTitle id="filter-dialog-title">{columnDef.caption}</DialogTitle>
+            <DialogContent>
+                <div dangerouslySetInnerHTML={{ __html: columnDef.hint }}></div>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => (onOk ? onOk() : null)}>{okBtnCaption}</Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+//Контроль свойств - Диалог подсказки
+P8PTableColumnHintDialog.propTypes = {
+    columnDef: PropTypes.object.isRequired,
+    okBtnCaption: PropTypes.string.isRequired,
+    onOk: PropTypes.func
+};
+
 //Диалог фильтра
 const P8PTableColumnFilterDialog = ({
     columnDef,
@@ -440,9 +463,15 @@ const P8PTable = ({
     //Собственное состояние - развёрнутые строки
     const [expanded, setExpanded] = useState({});
 
+    //Собственное состояние - колонка с отображаемой подсказкой
+    const [displayHintColumn, setDisplayHintColumn] = useState(null);
+
     //Описание фильтруемой колонки
     const filterColumnDef = filterColumn ? columnsDef.find(columnDef => columnDef.name == filterColumn) || null : null;
 
+    //Описание колонки с отображаемой подсказкой
+    const displayHintColumnDef = displayHintColumn ? columnsDef.find(columnDef => columnDef.name == displayHintColumn) || null : null;
+
     //Значения фильтра фильтруемой колонки
     const [filterColumnFrom, filterColumnTo] = filterColumn
         ? (() => {
@@ -528,6 +557,12 @@ const P8PTable = ({
         if (onPagesCountChanged) onPagesCountChanged();
     };
 
+    //Отработка нажатия на элемент отображения подсказки по колонке
+    const handleColumnShowHintClick = columnName => setDisplayHintColumn(columnName);
+
+    //Отработка сокрытия подсказки по колонке
+    const handleHintOk = () => setDisplayHintColumn(null);
+
     //Отработка нажатия на кнопку раскрытия элемента
     const handleExpandClick = rowIndex => {
         if (expanded[rowIndex] === true)
@@ -547,6 +582,9 @@ const P8PTable = ({
     //Генерация содержимого
     return (
         <>
+            {displayHintColumn ? (
+                <P8PTableColumnHintDialog columnDef={displayHintColumnDef} okBtnCaption={okFilterBtnCaption} onOk={handleHintOk} />
+            ) : null}
             {filterColumn ? (
                 <P8PTableColumnFilterDialog
                     columnDef={filterColumnDef}
@@ -596,7 +634,21 @@ const P8PTable = ({
                                             sx={{ ...STYLES.TABLE_COLUMN_STACK, ...customRender.stackStyle }}
                                             {...customRender.stackProps}
                                         >
-                                            {customRender.data ? customRender.data : columnDef.caption}
+                                            {customRender.data ? (
+                                                customRender.data
+                                            ) : columnDef.hint ? (
+                                                <Link
+                                                    component="button"
+                                                    variant="body2"
+                                                    align="left"
+                                                    underline="always"
+                                                    onClick={() => handleColumnShowHintClick(columnDef.name)}
+                                                >
+                                                    {columnDef.caption}
+                                                </Link>
+                                            ) : (
+                                                columnDef.caption
+                                            )}
                                             <P8PTableColumnToolBar
                                                 columnDef={columnDef}
                                                 orders={orders}