forked from CITKParus/P8-Panels
138 lines
6.0 KiB
JavaScript
138 lines
6.0 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - Редактор запросов
|
||
Корневой компонент
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import { Box, Grid, Button, Icon } from "@mui/material"; //Интерфейсные компоненты MUI
|
||
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Компоненты рабочего стола
|
||
import { P8PEditorToolBar } from "../../components/editors/p8p_editor_toolbar"; //Панель инструментов редактора
|
||
import { BUTTONS } from "../../../app.text"; //Общие текстовые ресурсы приложения
|
||
import { QueryDiagram } from "./components/query_diagram/query_diagram"; //Диаграмма запроса
|
||
import { QueriesManager } from "./components/queries_manager/queries_manager"; //Менеджер запросов
|
||
import { EntityAddDialog } from "./components/entity_add_dialog/entity_add_dialog"; //Диалог добавления сущности
|
||
import { P8PEditorBox } from "../../components/editors/p8p_editor_box"; //Контейнер параметров редактора
|
||
import { P8PEditorSubHeader } from "../../components/editors/p8p_editor_sub_header"; //Подзаголовок группы параметров редактора
|
||
import { useQueryDesc } from "./hooks"; //Пользовательские хуки
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
CONTAINER: { display: "flex" },
|
||
GRID_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})` },
|
||
GRID_ITEM_INSPECTOR: { backgroundColor: "#e9ecef" }
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Корневой компонент редактора запросов
|
||
const QueryEditor = () => {
|
||
//Текущий запрос
|
||
const [query, setQuery] = useState(null);
|
||
|
||
//Отображения менеджера запросов
|
||
const [openQueriesManager, setOpenQueriesManager] = useState(true);
|
||
|
||
//Отображение диалога добавления сущности
|
||
const [openEntityAddDialog, setOpenEntityAddDialog] = useState(false);
|
||
|
||
//Получение данных запроса
|
||
const [queryDiagram, addEnt, removeEnt, setEntPosition, addRl, removeRl] = useQueryDesc(query);
|
||
|
||
//Обработка изменения положения сущности на диаграмме
|
||
const handleEntityPositionChange = (ent, position) => setEntPosition(ent, position.x, position.y);
|
||
|
||
//Обработка удаления сущности из запроса
|
||
const handleEntityRemove = ent => removeEnt(ent);
|
||
|
||
//Обработка добавления отношения cущностей
|
||
const handleRelationAdd = (source, target) => addRl(source, target);
|
||
|
||
//Обработка удаления отношения cущностей
|
||
const handleRelationRemove = rl => removeRl(rl);
|
||
|
||
//Открытие менеджера запросов
|
||
const handleOpenQueriesManager = () => setOpenQueriesManager(true);
|
||
|
||
//Закрытие менеджера запросов
|
||
const handleCancelQueriesManager = () => setOpenQueriesManager(false);
|
||
|
||
//Закрытие запроса
|
||
const handleQueryClose = () => setQuery(null);
|
||
|
||
//При выборе запроса
|
||
const handleQuerySelect = query => {
|
||
setQuery(query);
|
||
setOpenQueriesManager(false);
|
||
};
|
||
|
||
//При добавлении сущности в запрос
|
||
const handleEntityAdd = () => setOpenEntityAddDialog(true);
|
||
|
||
//Закрытие диалога добавления сущности по "ОК"
|
||
const handleEntityAddDialogOk = async values => {
|
||
await addEnt(values.name, "VIEW");
|
||
setOpenEntityAddDialog(false);
|
||
};
|
||
|
||
//Закрытие диалога добавления сущности по "ОК"
|
||
const handleEntityAddDialogCancel = () => setOpenEntityAddDialog(false);
|
||
|
||
//Панель инструмментов
|
||
const toolBar = (
|
||
<P8PEditorToolBar
|
||
items={[
|
||
{ icon: "file_open", title: "Менеджер запросов", onClick: handleOpenQueriesManager },
|
||
{ icon: "close", title: "Закрыть запрос", onClick: handleQueryClose, disabled: !query }
|
||
]}
|
||
/>
|
||
);
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<Box sx={STYLES.CONTAINER}>
|
||
{openQueriesManager && <QueriesManager current={query} onQuerySelect={handleQuerySelect} onCancel={handleCancelQueriesManager} />}
|
||
{openEntityAddDialog && <EntityAddDialog onOk={handleEntityAddDialogOk} onCancel={handleEntityAddDialogCancel} />}
|
||
<Grid container sx={STYLES.GRID_CONTAINER} columns={25}>
|
||
<Grid item xs={20}>
|
||
{queryDiagram && (
|
||
<QueryDiagram
|
||
{...queryDiagram}
|
||
onEntityPositionChange={handleEntityPositionChange}
|
||
onEntityRemove={handleEntityRemove}
|
||
onRelationAdd={handleRelationAdd}
|
||
onRelationRemove={handleRelationRemove}
|
||
/>
|
||
)}
|
||
</Grid>
|
||
<Grid item xs={5} sx={STYLES.GRID_ITEM_INSPECTOR}>
|
||
{toolBar}
|
||
{query && (
|
||
<P8PEditorBox title={"Параметры запроса"}>
|
||
<P8PEditorSubHeader title={"Сущности"} />
|
||
<Button startIcon={<Icon>add</Icon>} onClick={handleEntityAdd}>
|
||
{BUTTONS.INSERT}
|
||
</Button>
|
||
</P8PEditorBox>
|
||
)}
|
||
</Grid>
|
||
</Grid>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { QueryEditor };
|