P8-Panels/app/panels/samples/settings.js

/*
    Парус 8 - Панели мониторинга - Примеры для разработчиков
    Пример: Сообщения
*/

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

import React, { useContext, useState, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Typography, Divider, Button, Box } from "@mui/material"; //Интерфейсные элементы
import { SettingsCtx } from "../../context/settings"; //Контекст параметров
import { P8P_DATA_TYPES } from "../../core/data_types"; //Типы данных
import { formatDateJSONDateOnly } from "../../core/utils"; //Вспомогательные функции
import { ApplicationCtx } from "../../context/application"; //Контекст приложения

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

//Стили
const STYLES = {
    CONTAINER: { textAlign: "center", paddingTop: "20px" },
    TITLE: { paddingBottom: "15px" },
    DIVIDER: { margin: "15px" },
    BOX_SETTINGS_VALUES: { display: "flex", justifyContent: "space-around" },
    SETTING_CARD: {
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "12px 16px",
        borderRadius: 1,
        border: "1px solid",
        borderColor: "divider"
    },
    SETTING_NAME: {
        fontWeight: 500,
        color: "text.primary"
    },
    SETTING_VALUE: {
        fontWeight: 600,
        color: "primary.main",
        marginLeft: 2
    }
};

//Наименование панели
const PANEL_NAME = "Samples";

//Параметры панели
const PANEL_PARAMS = {
    STR_PARAM: {
        name: "Строковый параметр",
        dataType: P8P_DATA_TYPES.STR,
        //value: "Строковое значение",
        desc: "Описание строкового параметра"
    },
    NUM_PARAM: {
        name: "Числовой параметр",
        dataType: P8P_DATA_TYPES.NUMB,
        value: 10,
        desc: "Описание числового параметра"
    },
    DATE_PARAM: {
        name: "Параметр дата",
        dataType: P8P_DATA_TYPES.DATE,
        value: "2026-02-15",
        desc: ""
    },
    AGENT: {
        name: "Привязка к контрагенту",
        dataType: P8P_DATA_TYPES.STR,
        value: "",
        desc: "Мнемокод выбранного контрагента",
        options: {
            unitcode: "AGNLIST",
            showMethod: "main",
            inParameter: "in_AGNABBR",
            outParameter: "out_AGNABBR"
        }
    }
};

//Параметр "Дата последнего обновления"
const LAST_UPDATE_PARAM = {
    LAST_UPDATE: {
        name: "Дата последнего обновления",
        dataType: "DATE",
        value: formatDateJSONDateOnly(new Date()),
        desc: ""
    }
};

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

//Пример: Параметры
const Settings = ({ title }) => {
    //Собственное состояние - параметры
    const [state, setState] = useState({});
    //Собственное состояние - отображение кнопки параметров панели
    const [showPanelSettings, setShowPanelSettings] = useState(true);

    //Подключение к контексту параметров
    const { getSettings, initSettings, putSettings, showSettingsDialog, SETTINGS_KINDS } = useContext(SettingsCtx);
    //Подключение к контексту приложения
    const { setAppBarSettingsShow } = useContext(ApplicationCtx);

    //Инициализация параметров пользователя
    const handleInitSettings = async () => {
        // Инициализация пользовательских параметров
        const settings = await initSettings({
            kind: SETTINGS_KINDS.USER,
            panel: PANEL_NAME,
            settings: PANEL_PARAMS
        });
        //Устанавливаем параметры
        setState({ ...settings });
    };

    //Загрузка параметров пользователя
    const handleLoadSettings = async () => {
        // Считывание параметров панели
        const settings = await getSettings({
            kind: SETTINGS_KINDS.USER,
            panel: PANEL_NAME
        });
        //Устанавливаем параметры
        setState({ ...settings });
    };

    //Добавление/обновление параметров пользователя
    const handlePutSettings = async () => {
        //Добавляем параметр
        await putSettings({
            kind: SETTINGS_KINDS.USER,
            panel: PANEL_NAME,
            settings: LAST_UPDATE_PARAM
        });
        //Перечитываем параметры
        handleLoadSettings();
    };

    //При отображении параметров панели
    const handleSettingsDialog = async () => {
        //Отображаем параметры панели
        showSettingsDialog({
            panel: PANEL_NAME,
            onOk: ({ settings, isChanged }) => {
                console.log("Параметры сохранены:", { settings, isChanged });
            },
            onCancel: () => {
                console.log("Изменения отменены");
            }
        });
    };

    //Отображение/сокрытие кнопки открытия параметров панели
    const handleShowPanelSettingsToggle = () => {
        //Переключаем состояние
        setShowPanelSettings(!showPanelSettings);
        //Скрываем/отображаем кнопку параметров
        setAppBarSettingsShow(!showPanelSettings);
    };

    //При открытии панели
    useEffect(() => {
        //Инициализируем параметры
        handleInitSettings();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    //Генерация содержимого
    return (
        <div style={STYLES.CONTAINER}>
            <Typography sx={STYLES.TITLE} variant={"h6"}>
                {title}
            </Typography>
            <Box sx={STYLES.BOX_BUTTON_GROUP}>
                <Button variant="contained" onClick={handleInitSettings}>
                    Инициализация
                </Button>
            </Box>
            <Divider sx={STYLES.DIVIDER} />
            <Button variant="contained" onClick={handleLoadSettings}>
                Считывание
            </Button>
            <Divider sx={STYLES.DIVIDER} />
            <Button variant="contained" onClick={handlePutSettings}>
                Добавление
            </Button>
            <Divider sx={STYLES.DIVIDER} />
            <Button variant="contained" onClick={handleSettingsDialog}>
                Диалог параметров панели
            </Button>
            <Divider sx={STYLES.DIVIDER} />
            <Button variant="contained" onClick={handleShowPanelSettingsToggle}>
                {`${showPanelSettings ? "Скрыть" : "Отобразить"} кнопку открытия параметров в шапке`}
            </Button>
            {Object.keys(state).length > 0 ? (
                <>
                    <Divider sx={STYLES.DIVIDER} />
                    <Typography pt={2} sx={STYLES.TITLE} variant={"h6"}>
                        Значения параметров
                    </Typography>
                    <Box sx={STYLES.BOX_SETTINGS_VALUES}>
                        {Object.keys(state).map((item, index) => (
                            <Box key={index} sx={STYLES.SETTING_CARD}>
                                <Typography variant="body2" sx={STYLES.SETTING_NAME}>
                                    {`${Object.keys(PANEL_PARAMS).includes(item) ? PANEL_PARAMS[item].name : LAST_UPDATE_PARAM[item].name}:`}
                                </Typography>
                                <Typography variant="body2" sx={STYLES.SETTING_VALUE}>
                                    {state[item]}
                                </Typography>
                            </Box>
                        ))}
                    </Box>
                </>
            ) : null}
        </div>
    );
};

//Контроль свойств - Пример: параметры
Settings.propTypes = {
    title: PropTypes.string.isRequired
};

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

export { Settings };