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 ( + (onOk ? onOk() : null)}> + {columnDef.caption} + +
+
+ + + +
+ ); +}; + +//Контроль свойств - Диалог подсказки +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 ? ( + + ) : null} {filterColumn ? ( - {customRender.data ? customRender.data : columnDef.caption} + {customRender.data ? ( + customRender.data + ) : columnDef.hint ? ( + handleColumnShowHintClick(columnDef.name)} + > + {columnDef.caption} + + ) : ( + columnDef.caption + )}