ЦИТК-979 - Отображение текста сформированного SQL-запроса и предупреждений формирования (клиент)

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 (
         <P8PEditorBox title={"Настройки запроса"}>
@@ -43,6 +67,16 @@ const Inspector = ({ query, entity, relation, entities = [], args = [], cond = n
                     <InspectorQueryRelations query={query} relation={relation} onOptionsChanged={handleOptionsChanged} />
                 </>
             )}
+            <Fab sx={STYLES.SQL_FAB} title={"Показать текст SQL запроса"} onClick={handleShowSQLClick}>
+                <Icon>join_left</Icon>
+            </Fab>
+            {displaySQL && (
+                <Drawer open variant={"persistent"} anchor={"bottom"}>
+                    <Button onClick={handleCloseSQLClick}>{BUTTONS.HIDE}</Button>
+                    <TextField multiline fullWidth value={qry} disabled />
+                    {qryMsg && <TextField multiline fullWidth value={qryMsg} disabled />}
+                </Drawer>
+            )}
         </P8PEditorBox>
     );
 };
@@ -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
 };
 

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];
 };
 
 //----------------

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 && (
                         <Inspector
                             {...queryOption}
+                            {...querySQL}
                             query={query}
                             entity={entity}
                             relation={relation}