ЦИТК-979 - Отображение текста сформированного SQL-запроса и предупреждений формирования (клиент)
This commit is contained in:
parent
fbb0db8179
commit
c66216e47b
@ -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
|
||||
};
|
||||
|
||||
|
||||
@ -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];
|
||||
};
|
||||
|
||||
//----------------
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user