P8-Panels/app/panels/query_editor/query_editor.js

/*
    Парус 8 - Панели мониторинга - Редактор запросов
    Корневой компонент
*/

//---------------------
//Подключение библиотек
//---------------------

import React, { useState, useContext } from "react"; //Классы React
import { Box, Grid } from "@mui/material"; //Интерфейсные компоненты MUI
import { ApplicationСtx } from "../../context/application"; //Контекст взаимодействия с приложением
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Компоненты рабочего стола
import { P8PEditorToolBar } from "../../components/editors/p8p_editor_toolbar"; //Панель инструментов редактора
import { QueryDiagram } from "./components/query_diagram/query_diagram"; //Диаграмма запроса
import { QueryOptions } from "./components/query_options/query_options"; //Свойства запроса
import { QueriesManager } from "./components/queries_manager/queries_manager"; //Менеджер запросов
import { useQueryDesc } from "./hooks"; //Пользовательские хуки

//---------
//Константы
//---------

//Заголовок панели по умолчанию
const APP_BAR_TITLE_DEFAULT = "Редактор запросов";

//Стили
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 [entity, setEntity] = useState(null);

    //Текущая связь
    const [relation, setRelation] = useState(null);

    //Отображения менеджера запросов
    const [openQueriesManager, setOpenQueriesManager] = useState(true);

    //Получение данных запроса
    const [queryDiagram, addEnt, removeEnt, setEntPosition, addRl, removeRl, doRefresh] = useQueryDesc(query);

    //Подключение к контексту приложения
    const { setAppBarTitle } = useContext(ApplicationСtx);

    //Обработка изменения положения сущности на диаграмме
    const handleEntityPositionChange = (ent, position) => setEntPosition(ent, position.x, position.y);

    //Обработка добавления сущности в запрос
    const handleEntityAdd = async (entName, cb) => {
        await addEnt(entName, "VIEW");
        cb(true);
    };

    //Обработка удаления сущности из запроса
    const handleEntityRemove = async ent => {
        await removeEnt(ent);
        if (entity && entity?.id === ent) setEntity(null);
    };

    //Обработка выделения сущности
    const handleEntityClick = ent => {
        setRelation(null);
        const queryEnt = queryDiagram.entities.find(e => e.id === ent);
        if (queryEnt)
            if (entity?.id == queryEnt.id) setEntity(null);
            else setEntity({ ...queryEnt.data });
    };

    //Обработка выделения связи
    const handleRelationClick = rl => {
        setEntity(null);
        const queryRl = queryDiagram.relations.find(r => r.id === rl);
        if (queryRl)
            if (relation?.id == queryRl.id) setRelation(null);
            else setRelation({ ...queryRl });
    };

    //Обработка добавления отношения cущностей
    const handleRelationAdd = (source, target) => addRl(source, target);

    //Обработка удаления отношения cущностей
    const handleRelationRemove = async rl => {
        await removeRl(rl);
        if (relation && relation?.id === rl) setRelation(null);
    };

    //Открытие менеджера запросов
    const handleOpenQueriesManager = () => setOpenQueriesManager(true);

    //Закрытие менеджера запросов
    const handleCancelQueriesManager = () => setOpenQueriesManager(false);

    //Закрытие запроса
    const handleQueryClose = () => {
        setAppBarTitle(APP_BAR_TITLE_DEFAULT);
        setEntity(null);
        setRelation(null);
        setQuery(null);
    };

    //При выборе запроса
    const handleQuerySelect = ({ rn, name }) => {
        setAppBarTitle(`Запрос [${name}]`);
        setQuery(rn);
        setOpenQueriesManager(false);
    };

    //При изменении свойств запроса
    const handleQueryOptionsChanged = () => doRefresh();

    //Панель инструмментов
    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} />}
            <Grid container sx={STYLES.GRID_CONTAINER} columns={25}>
                <Grid item xs={20}>
                    {queryDiagram && (
                        <QueryDiagram
                            {...queryDiagram}
                            onEntityClick={handleEntityClick}
                            onEntityPositionChange={handleEntityPositionChange}
                            onEntityRemove={handleEntityRemove}
                            onRelactionClick={handleRelationClick}
                            onRelationAdd={handleRelationAdd}
                            onRelationRemove={handleRelationRemove}
                        />
                    )}
                </Grid>
                <Grid item xs={5} sx={STYLES.GRID_ITEM_INSPECTOR}>
                    {toolBar}
                    {query && (
                        <QueryOptions
                            onEntityAdd={handleEntityAdd}
                            onEntityRemove={handleEntityRemove}
                            onRelationRemove={handleRelationRemove}
                            onQueryOptionsChanged={handleQueryOptionsChanged}
                            entity={entity}
                            relation={relation}
                        />
                    )}
                </Grid>
            </Grid>
        </Box>
    );
};

//----------------
//Интерфейс модуля
//----------------

export { QueryEditor };