diff --git a/app/panels/query_editor/components/inspector/inspector.js b/app/panels/query_editor/components/inspector/inspector.js index e29b329..9f1a6ec 100644 --- a/app/panels/query_editor/components/inspector/inspector.js +++ b/app/panels/query_editor/components/inspector/inspector.js @@ -7,8 +7,10 @@ //Подключение библиотек //--------------------- -import React from "react"; //Классы React +import React, { useState } 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"; //Описание сущности @@ -19,15 +21,37 @@ import { InspectorQueryConditions } from "../inspector_query_cond/inspector_quer 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 + } +}; + //----------- //Тело модуля //----------- //Инспектор свойств -const Inspector = ({ query, entity, relation, entities = [], args = [], cond = null, onOptionsChanged = null }) => { +const Inspector = ({ query, entity, relation, entities = [], args = [], cond = null, qry = null, qryMsg = null, onOptionsChanged = null }) => { + //Собственное состояние - отображение области SQL запроса + const [displaySQL, setDisplaySQL] = useState(false); + //При изменении настроек запроса const handleOptionsChanged = () => onOptionsChanged && onOptionsChanged(); + //При нажатии на кнопку отображения SQL запроса + const handleShowSQLClick = () => setDisplaySQL(true); + + //При нажатии на кнопку сокрытия SQL запроса + const handleCloseSQLClick = () => setDisplaySQL(false); + //Генерация содержимого return ( @@ -43,6 +67,16 @@ const Inspector = ({ query, entity, relation, entities = [], args = [], cond = n )} + + join_left + + {displaySQL && ( + + + + {qryMsg && } + + )} ); }; @@ -55,6 +89,8 @@ Inspector.propTypes = { entities: PropTypes.arrayOf(ENTITY_SHAPE), args: PropTypes.arrayOf(ARGUMENT_SHAPE), cond: PropTypes.string, + qry: PropTypes.string, + qryMsg: PropTypes.string, onOptionsChanged: PropTypes.func }; diff --git a/app/panels/query_editor/hooks.js b/app/panels/query_editor/hooks.js index c3882a7..f6d3a06 100644 --- a/app/panels/query_editor/hooks.js +++ b/app/panels/query_editor/hooks.js @@ -115,6 +115,9 @@ const useQuery = query => { //Собственное состояние - данные настроек const [queryOption, setQueryOption] = useState(null); + //Собственное состояние - данные SQL-запроса + const [querySQL, setQuerySQL] = useState(null); + //Подключение к контексту взаимодействия с сервером const { executeStored } = useContext(BackEndСtx); @@ -136,6 +139,7 @@ const useQuery = query => { }); setQueryDiagram(serverQueryData2QueryDiagram(data?.XENTS?.XENT || [], data?.XRLS?.XRL || [])); setQueryOption({ args: data?.XOPT?.XARGS?.XARG || [], cond: data?.XOPT?.XCOND || null }); + setQuerySQL({ qry: data?.XQRY, qryMsg: data?.XQRY_MSG }); setInit(true); } finally { setRefresh(false); @@ -151,6 +155,7 @@ const useQuery = query => { else { setQueryDiagram(null); setQueryOption(null); + setQuerySQL(null); } }, [refresh, query, executeStored]); @@ -158,7 +163,7 @@ const useQuery = query => { useEffect(() => setRefresh(true), [query]); //Возвращаем интерфейс хука - return [queryDiagram, queryOption, doRefresh, isLoading, isInit]; + return [queryDiagram, queryOption, querySQL, doRefresh, isLoading, isInit]; }; //---------------- diff --git a/app/panels/query_editor/query_editor.js b/app/panels/query_editor/query_editor.js index c95a83e..ebf8114 100644 --- a/app/panels/query_editor/query_editor.js +++ b/app/panels/query_editor/query_editor.js @@ -52,7 +52,7 @@ const QueryEditor = () => { const [openQueriesManager, setOpenQueriesManager] = useState(true); //Получение метаданных с описанием запроса - const [queryDiagram, queryOption, doRefresh] = useQuery(query); + const [queryDiagram, queryOption, querySQL, doRefresh] = useQuery(query); //Работа с сущностями на сервере const { removeEnt, setEntPosition } = useQueryEntities(query); @@ -182,6 +182,7 @@ const QueryEditor = () => { {query && (