diff --git a/app/panels/query_editor/components/inspector/inspector.js b/app/panels/query_editor/components/inspector/inspector.js index 9f1a6ec..34d5124 100644 --- a/app/panels/query_editor/components/inspector/inspector.js +++ b/app/panels/query_editor/components/inspector/inspector.js @@ -7,10 +7,8 @@ //Подключение библиотек //--------------------- -import React, { useState } from "react"; //Классы React +import React from "react"; //Классы React import PropTypes from "prop-types"; //Контроль свойств компонента -import { Fab, Icon, Drawer, Button, TextField } from "@mui/material"; //Компоненты MUI -import { BUTTONS } from "../../../../../app.text"; //Общие текстовые ресурсы приложения import { P8PEditorBox } from "../../../../components/editors/p8p_editor_box"; //Контейнер параметров редактора import { P8PEditorSubHeader } from "../../../../components/editors/p8p_editor_sub_header"; //Подзаголовок группы параметров редактора import { ENTITY_SHAPE } from "../entity/entity"; //Описание сущности @@ -20,38 +18,17 @@ import { InspectorQueryArguments } from "../inspector_query_args/inspector_query import { InspectorQueryConditions } from "../inspector_query_cond/inspector_query_cond"; //Управление условиями отбора запроса import { InspectorQueryEntities } from "../inspector_query_ents/inspector_query_ents"; //Управление сущностями запроса import { InspectorQueryRelations } from "../inspector_query_rls/inspector_query_rls"; //Управление связями запроса - -//--------- -//Константы -//--------- - -//Стили -const STYLES = { - SQL_FAB: { - position: "absolute", - bottom: 16, - right: 16 - } -}; +import { QueryArea } from "./query_area"; //Область запроса //----------- //Тело модуля //----------- //Инспектор свойств -const Inspector = ({ query, entity, relation, entities = [], args = [], cond = null, qry = null, qryMsg = null, onOptionsChanged = null }) => { - //Собственное состояние - отображение области SQL запроса - const [displaySQL, setDisplaySQL] = useState(false); - +const Inspector = ({ query, entity, relation, entities = [], args = [], cond = null, qry = "", qryMsg = "", onOptionsChanged = null }) => { //При изменении настроек запроса const handleOptionsChanged = () => onOptionsChanged && onOptionsChanged(); - //При нажатии на кнопку отображения SQL запроса - const handleShowSQLClick = () => setDisplaySQL(true); - - //При нажатии на кнопку сокрытия SQL запроса - const handleCloseSQLClick = () => setDisplaySQL(false); - //Генерация содержимого return ( @@ -67,16 +44,7 @@ const Inspector = ({ query, entity, relation, entities = [], args = [], cond = n )} - - join_left - - {displaySQL && ( - - - - {qryMsg && } - - )} + ); }; diff --git a/app/panels/query_editor/components/inspector/query_area.js b/app/panels/query_editor/components/inspector/query_area.js new file mode 100644 index 0000000..eb2081c --- /dev/null +++ b/app/panels/query_editor/components/inspector/query_area.js @@ -0,0 +1,152 @@ +/* + Парус 8 - Панели мониторинга - Редактор запросов + Область запроса +*/ + +//--------------------- +//Подключение библиотек +//--------------------- + +import React, { useState } from "react"; //Классы React +import PropTypes from "prop-types"; //Контроль свойств компонента +import { Fab, Icon, Drawer, IconButton, TextField, Stack, Box, Snackbar, Alert } from "@mui/material"; //Компоненты MUI +import { BUTTONS } from "../../../../../app.text"; //Общие текстовые ресурсы приложения +import { APP_STYLES } from "../../../../../app.styles"; //Общие стили приложения + +//--------- +//Константы +//--------- + +//Стили +const STYLES = { + SQL_FAB: { + position: "absolute", + bottom: 16, + right: 16 + }, + SQL_TEXT_FIELD: { + fontSize: "0.9rem", + ...APP_STYLES.SCROLL + }, + SNACKBAR_ALERT: { width: "100%" } +}; + +//Начальное состояние всплывающего сообщения +const SNACK_BAR_MESSAGE_INIT = { text: null, type: null }; + +//----------- +//Тело модуля +//----------- + +//Область запроса +const QueryArea = ({ qry = "", qryMsg = "" }) => { + //Собственное состояние - текст всплывающего сообщения + const [snackBarMessage, setSnackBarMessage] = useState(SNACK_BAR_MESSAGE_INIT); + + //Собственное состояние - отображение области SQL запроса + const [displaySQL, setDisplaySQL] = useState(true); + + //Собственное состояние - развёрнутость + const [expanded, setExpanded] = useState(false); + + //При нажатии на кнопку копирования текста запроса + const handleCopyClick = async () => { + try { + await navigator.clipboard.writeText(qry); + setSnackBarMessage({ text: `Текст запроса скопирован в буфер обмена` }); + } catch (e) { + setSnackBarMessage({ text: `Ошибка копирования текста запроса в буфер обмена: ${e.message}`, type: "error" }); + } + }; + + //При нажатии на кнопку развёртывания + const handleExpandClick = () => setExpanded(!expanded); + + //При нажатии на кнопку отображения SQL запроса + const handleShowSQLClick = () => setDisplaySQL(true); + + //При нажатии на кнопку сокрытия SQL запроса + const handleCloseSQLClick = () => setDisplaySQL(false); + + //При закрытии всплывающего сообщения + const handleSnackBarClose = () => setSnackBarMessage(SNACK_BAR_MESSAGE_INIT); + + //Расчет размеров тектовых полей + const [qryRows, qryMsgRows] = expanded ? [15, 6] : [5, 3]; + + //Генерация содержимого + return ( + <> + {(qry || qryMsg) && ( + + join_left + + )} + {displaySQL && ( + + + + {qry && ( + + content_copy + + )} + + {expanded ? "expand_more" : "expand_less"} + + + close + + + + {qry && ( + + )} + {qryMsg && ( + + )} + + + + )} + + + {snackBarMessage.text} + + + + ); +}; + +//Контроль свойств компонента - Область запроса +QueryArea.propTypes = { + qry: PropTypes.string, + qryMsg: PropTypes.string +}; + +//---------------- +//Интерфейс модуля +//---------------- + +export { QueryArea };