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

This commit is contained in:
Mikhail Chechnev 2025-09-11 18:35:02 +03:00
parent fbb0db8179
commit c66216e47b
3 changed files with 46 additions and 4 deletions

View File

@ -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
};

View File

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

View File

@ -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}