P8-Panels/app/panels/clnt_task_board/components/settings_dialog.js

/*
    Парус 8 - Панели мониторинга - УДП - Доски задач
    Компонент: Диалог дополнительных настроек
*/

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

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Icon, Button, Box, Stack } from "@mui/material"; //Интерфейсные компоненты
import { RulesSelect } from "./rules_select.js";
import { FilterInputField } from "./filter_input_field.js";
import { APP_STYLES } from "../../../../app.styles"; //Типовые стили

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

//Стили
const STYLES = {
    FILTERS_SCROLL: { overflowY: "auto", ...APP_STYLES.SCROLL },
    DIALOG_ACTIONS: { justifyContent: "end", paddingRight: "24px", paddingLeft: "24px" },
    CLOSE_BUTTON: {
        position: "absolute",
        right: 8,
        top: 8,
        color: theme => theme.palette.grey[500]
    },
    DOCLINK_STACK: { alignItems: "baseline" },
    SELECT: { width: "100%" },
    BOX_WITH_LEGEND: { border: "1px solid #939393" },
    LEGEND: { textAlign: "left" },
    SELECT_MENU: w => {
        return { overflowY: "auto", ...APP_STYLES.SCROLL, width: w ? w : null };
    }
};

//---------------
//Тело компонента
//---------------

//Диалог дополнительных настроек
const SettingsDialog = ({ initial, onOk, onCancel, ...other }) => {
    //Состояние дополнительных настроек
    const [settings, setSettings] = useState(
        initial.statusesSort.attr ? { ...initial } : { ...initial, statusesSort: { sorted: true, attr: "name", dest: "asc" } }
    );

    //Допустимые значение поля сортировки
    const sortAttrs = [
        { id: "code", descr: "Мнемокод" },
        { id: "name", descr: "Наименование" },
        { id: "pointDescr", descr: "Описание точки маршрута" }
    ];

    //Допустимые значения направления сортировки
    const sortDest = [];
    sortDest[-1] = "desc";
    sortDest[1] = "asc";

    //Изменение заливки событий
    const handleColorRuleChange = cr => setSettings(pv => ({ ...pv, colorRule: cr }));

    //Изменение поля сортировки
    const handleSortAttrChange = (item, value) => setSettings(pv => ({ ...pv, statusesSort: { ...pv.statusesSort, [item]: value } }));

    //Изменение направления сортировки
    const handleSortDestChange = d => setSettings(pv => ({ ...pv, statusesSort: { ...pv.statusesSort, dest: d } }));

    //Генерация содержимого
    return (
        <div {...other}>
            <Dialog open onClose={onCancel} fullWidth maxWidth="sm">
                <DialogTitle>Настройки</DialogTitle>
                <IconButton aria-label="close" onClick={onCancel} sx={STYLES.CLOSE_BUTTON}>
                    <Icon>close</Icon>
                </IconButton>
                <DialogContent sx={STYLES.FILTERS_SCROLL}>
                    <Box component="section" p={1}>
                        <RulesSelect
                            initRule={settings.colorRule.id !== undefined ? settings.colorRule.id : -1}
                            handleChange={handleColorRuleChange}
                            sx={STYLES.SELECT}
                        />
                    </Box>
                    <Box component="section" p={1}>
                        <Stack direction="row" sx={STYLES.DOCLINK_STACK}>
                            <FilterInputField
                                elementCode="attr"
                                elementValue={settings.statusesSort.attr}
                                labelText="Поле сортировки"
                                items={sortAttrs}
                                onChange={handleSortAttrChange}
                                MenuProps={{
                                    slotProps: { paper: { sx: STYLES.SELECT_MENU(document.getElementById("attr")?.parentElement.clientWidth) } }
                                }}
                                sx={STYLES.SELECT}
                            />
                            <IconButton
                                title={settings.statusesSort.dest === "asc" ? "По возрастанию" : "По убыванию"}
                                onClick={() => handleSortDestChange(sortDest[sortDest.indexOf(settings.statusesSort.dest) * -1])}
                            >
                                <Icon>{settings.statusesSort.dest === "asc" ? "arrow_upward" : "arrow_downward"}</Icon>
                            </IconButton>
                        </Stack>
                    </Box>
                </DialogContent>
                <DialogActions sx={STYLES.DIALOG_ACTIONS}>
                    <Button variant="text" onClick={() => onOk(settings)}>
                        ОК
                    </Button>
                    <Button
                        variant="text"
                        onClick={() => setSettings(pv => ({ ...pv, statusesSort: { ...pv.statusesSort, attr: "name", dest: "asc" }, colorRule: {} }))}
                    >
                        Очистить
                    </Button>
                    <Button variant="text" onClick={onCancel}>
                        Отмена
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
};

//Контроль свойств компонента - Диалог дополнительных настроек
SettingsDialog.propTypes = {
    initial: PropTypes.object.isRequired,
    onOk: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired
};

//--------------------
//Интерфейс компонента
//--------------------

export { SettingsDialog };