P8-Panels/app/panels/rrp_conf_editor/components/marks.js

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

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

import React, { useState, useContext } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Icon, Button } from "@mui/material"; //Интерфейсные элементы
import { MessagingСtx } from "../../../context/messaging"; //Контекст сообщений
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../../components/p8p_data_grid"; //Таблица данных
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { APP_STYLES } from "../../../../app.styles"; //Типовые стили
import { confSctnMrkCellRender, confSctnMrkHeadCellRender } from "../layouts"; //Дополнительная разметка и вёрстка клиентских элементов
import { ActionMessage } from "./action_message"; //Сообщение с действиями
import { DialogMarkIU } from "./dialog_mark_iu"; //Диалог добавления/исправления показателя
import { DialogHelp } from "./dialog_help"; //Диалог помощи
import { DialogOrder } from "./dialog_order"; //Диалог сортировки
import { useDictionary } from "../hooks"; //Кастомные хуки

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

//Стили
const STYLES = {
    MARKS_DG_CONTAINER: {
        position: "absolute",
        top: 0,
        bottom: 0,
        width: "100%",
        height: "100%",
        overflow: "auto",
        border: "unset",
        ...APP_STYLES.SCROLL
    },
    MARKS_DG_TABLE: { tableLayout: "fixed", width: "auto" }
};

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

//Показатели раздела
const Marks = ({ marks, order, marksLoading, marksInit, onRefresh, onMarkInsert, onMarkUpdate, onMarkDelete, onOrderChange }) => {
    //Состояние - диалог сортировки
    const [dialogOrder, setDialogOrder] = useState(false);

    //Состояние - диалог помощи
    const [dialogHelp, setDialogHelp] = useState(false);

    //Состояние - Редактируемый показатель
    const [modMark, setModMark] = useState(null);

    //Подключение к контексту сообщений
    const { showMsgWarn } = useContext(MessagingСtx);

    //Подключение к словарям
    const { showMark, showMarkCn, showMarkCnAdd } = useDictionary();

    //Изменение состояния диалога информации
    const toggleHelpDialog = () => setDialogHelp(pv => !pv);

    //Изменение состояния диалога сортировки
    const toggleOrderDialog = () => setDialogOrder(pv => !pv);

    //При необходимости обновления
    const handleRefresh = () => onRefresh && onRefresh();

    //При вызове сортировки
    const handleOrder = () => toggleOrderDialog();

    //При вызове помощи
    const handleHelp = () => toggleHelpDialog();

    //Изменение состояния сортировки строк и граф
    const handleOrderChange = order => {
        onOrderChange && onOrderChange(order);
        toggleOrderDialog();
    };

    //При добавлении показателя
    const handleMarkAdd = () => setModMark(true);

    //При добавлении показателя по указанным строке/графе
    const handleMarkAddByRowCol = (row, column) => onMarkInsert({ row, column });

    //При исправлении показателя
    const handleMarkUpdate = markDesc => setModMark({ ...markDesc });

    //При удалении показателя
    const handleMarkDelete = mark => showMsgWarn("Удалить показатель?", () => onMarkDelete && onMarkDelete(mark));

    //При переходе к показателю
    const handleMarkOpen = mark => showMark(mark, res => res.success && handleRefresh());

    //При добавлении состава показателя
    const handleMarkCnAdd = mark => showMarkCnAdd(mark, res => res.success && handleRefresh());

    //При переходе к составу показателя
    const handleMarkCnOpen = (mark, constitution) => showMarkCn(mark, constitution, res => res.success && handleRefresh());

    //При закрытии формы добавления/исправления по "ОК"
    const handleIUFormOk = values => {
        if (modMark === true) onMarkInsert && onMarkInsert(values, res => res && setModMark(null));
        else onMarkUpdate && onMarkUpdate({ ...modMark, ...values }, res => res && setModMark(null));
    };

    //При закрытии формы добавления/исправления по "Отмена"
    const handleIUFormCancel = () => setModMark(null);

    //Формирование представления
    return (
        <>
            {dialogOrder && <DialogOrder {...order} onOk={handleOrderChange} onCancel={toggleOrderDialog} />}
            {dialogHelp && <DialogHelp onClose={toggleHelpDialog} />}
            {modMark && (
                <DialogMarkIU {...(modMark === true ? {} : modMark)} insert={modMark === true} onOk={handleIUFormOk} onCancel={handleIUFormCancel} />
            )}
            {marksInit &&
                (marks ? (
                    <P8PDataGrid
                        {...P8P_DATA_GRID_CONFIG_PROPS}
                        {...marks}
                        tableStyle={STYLES.MARKS_DG_TABLE}
                        containerComponentProps={{ elevation: 0, square: true, variant: "outlined", sx: STYLES.MARKS_DG_CONTAINER }}
                        size={P8P_DATA_GRID_SIZE.SMALL}
                        dataCellRender={prms =>
                            confSctnMrkCellRender({
                                ...prms,
                                onMarkAdd: handleMarkAddByRowCol,
                                onMarkUpdate: handleMarkUpdate,
                                onMarkDelete: handleMarkDelete,
                                onMarkOpen: handleMarkOpen,
                                onMarkCnOpen: handleMarkCnOpen,
                                onMarkCnAdd: handleMarkCnAdd
                            })
                        }
                        headCellRender={prms =>
                            confSctnMrkHeadCellRender({
                                ...prms,
                                onAdd: handleMarkAdd,
                                onRefresh: handleRefresh,
                                onOrder: handleOrder,
                                onHelp: handleHelp
                            })
                        }
                    />
                ) : (
                    !marksLoading && (
                        <ActionMessage icon={"info"} title={"В разделе нет показателей"} desc={"Добавьте новый"}>
                            <Button startIcon={<Icon>add</Icon>} onClick={handleMarkAdd}>
                                Показатель
                            </Button>
                        </ActionMessage>
                    )
                ))}
        </>
    );
};

//Контроль свойств - Показатели раздела
Marks.propTypes = {
    marks: PropTypes.object,
    order: PropTypes.object.isRequired,
    marksLoading: PropTypes.bool.isRequired,
    marksInit: PropTypes.bool.isRequired,
    onRefresh: PropTypes.func,
    onMarkInsert: PropTypes.func,
    onMarkUpdate: PropTypes.func,
    onMarkDelete: PropTypes.func,
    onOrderChange: PropTypes.func
};

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

export { Marks };