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

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

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

import React, { useState, useContext, useEffect } from "react"; //Классы React
import { Box, Icon, Fab } from "@mui/material"; //Интерфейсные элементы
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
import { PanelsManager } from "./components/panels_manager/panels_manager"; //Менеджер панелей
import { usePanel } from "./components/components_hooks"; //Вспомогательные хуки
import { NavigationCtx } from "../../context/navigation"; //Контекст навигации
import { PanelEditor } from "./panel_editor"; //Редактор панели

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

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

//Стили
const STYLES = {
    BOX_PLAY_MODE: {
        position: "absolute",
        top: 12,
        right: 15,
        zIndex: 2000,
        display: "flex",
        height: "42px",
        width: "145px",
        justifyContent: "flex-end",
        gap: "10px"
    }
};

//-----------
//Тело модуля
//-----------

//Корневой компонент редактора панелей
const PanelsEditor = () => {
    //Собственное состояние - иниализация панели
    const [init, setInit] = useState(true);
    //Собственное состояние - иниализируемая панель
    const [panel, panelName, editMode, isEditAvaliable, isPanelChanged, loadPanel, selectPanel, closePanel, changeEditMode, setPanelChanged] =
        usePanel();
    //Отображения менеджера панелей
    const [openPanelsManager, setOpenPanelsManager] = useState(false);
    //Отображение параметров панели
    const [openPanelVariables, setOpenPanelVariables] = useState(false);

    //Подключение к контексту навигации
    const { getNavigationSearch } = useContext(NavigationCtx);
    //Подключение к контексту сообщений
    const { showMsgWarn } = useContext(MessagingСtx);
    //Подключение к контексту приложения
    const { setAppBarTitle } = useContext(ApplicationСtx);

    //При выборе панели
    const handlePanelSelect = panel => {
        //Если панель выбрана и есть изменения
        if (panel && isPanelChanged)
            showMsgWarn(
                `Панель содержит несохраненные изменения. Закрыть панель без изменений?`,
                () => {
                    selectPanel(panel.rn, panel.name, panel.modify === 1 ? true : false);
                    setOpenPanelsManager(false);
                },
                () => setOpenPanelsManager(false)
            );
        else {
            selectPanel(panel.rn, panel.name, panel.modify === 1 ? true : false);
            setOpenPanelsManager(false);
        }
    };

    //Закрытие панели
    const handlePanelClose = () => {
        //Если панель выбрана и есть изменения
        if (panel && isPanelChanged)
            showMsgWarn(`Панель содержит несохраненные изменения. Закрыть панель без изменений?`, () => {
                closePanel();
                setOpenPanelsManager(true);
            });
        else {
            closePanel();
            setOpenPanelsManager(true);
        }
    };

    //Открытие менеджера панелей
    const handleOpenPanelsManager = () => setOpenPanelsManager(true);

    //Закрытие менеджера панелей
    const handleCancelPanelsManager = () => setOpenPanelsManager(false);

    //Открытие/закрытие параметров панели
    const handleToggleOpenPanelVariables = () => setOpenPanelVariables(!openPanelVariables);

    //Включение/выключение режима редактирования
    const handleToggleEditMode = () => {
        //Включаем/отключаем панель
        changeEditMode(!editMode);
        //Изначально отключаем отображение параметров панели
        setOpenPanelVariables(false);
    };

    //Дополнительные кнопки режима использования панели
    const runTimeButtons = !editMode && (
        <Box sx={STYLES.BOX_PLAY_MODE}>
            {isEditAvaliable ? (
                <Fab size={"small"} color={"grey.700"} title={"Редактировать"} onClick={handleToggleEditMode} disabled={openPanelsManager}>
                    <Icon>edit</Icon>
                </Fab>
            ) : null}
            <Fab size={"small"} color={"grey.700"} title={"Менеджер панелей"} onClick={handleOpenPanelsManager} disabled={openPanelsManager}>
                <Icon>file_open</Icon>
            </Fab>
            <Fab size={"small"} color={"grey.700"} title={"Переменные панели"} onClick={handleToggleOpenPanelVariables} disabled={openPanelsManager}>
                <Icon>mediation</Icon>
            </Fab>
        </Box>
    );

    //При открытии панели
    useEffect(() => {
        //Считаем параметры открытия панели
        const panelPrms = getNavigationSearch();
        //Если указан рег. номер панели - устанавливаем изначальный рег. номер панели
        if (panelPrms.SCODE) loadPanel(panelPrms.SCODE);
        //Если рег. номера панели нет - открываем менеджер панелей
        else handleOpenPanelsManager();
        //Указываем, что инициализация пройдена
        setInit(false);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    //При изменении мнемокода панели
    useEffect(() => {
        //Устанавливаем заголовок в шапке приложения
        setAppBarTitle(panelName ? `Панель [${panelName}]` : APP_BAR_TITLE_DEFAULT);
    }, [panelName, setAppBarTitle]);

    //Генерация содержимого
    return (
        <>
            {!init ? (
                <>
                    {runTimeButtons}
                    {openPanelsManager && (
                        <PanelsManager current={panel} isEditable={true} onPanelSelect={handlePanelSelect} onCancel={handleCancelPanelsManager} />
                    )}
                    {panel && (
                        <PanelEditor
                            panel={panel}
                            panelName={panelName}
                            editMode={editMode}
                            isPanelChanged={isPanelChanged}
                            isPanelVariablesOpened={openPanelVariables}
                            onPanelChanged={setPanelChanged}
                            onPanelClose={handlePanelClose}
                            onEditModeToggle={handleToggleEditMode}
                            onPanelsManagerOpen={handleOpenPanelsManager}
                            onPanelVariablesClose={handleToggleOpenPanelVariables}
                        />
                    )}
                </>
            ) : null}
        </>
    );
};

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

export { PanelsEditor };