136 lines
6.0 KiB
JavaScript
136 lines
6.0 KiB
JavaScript
/*
|
||
Парус 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"; //Типовые стили
|
||
import { sortAttrs, sortDest } from "../layouts.js"; //Допустимые значение поля и направления сортировки
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
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, onSettingsChange, onOpen, ...other }) => {
|
||
//Состояние дополнительных настроек
|
||
const [settings, setSettings] = useState(
|
||
initial.statusesSort.attr ? { ...initial } : { ...initial, statusesSort: { sorted: true, attr: "name", dest: "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={onOpen} fullWidth maxWidth="sm">
|
||
<DialogTitle>Настройки</DialogTitle>
|
||
<IconButton aria-label="close" onClick={onOpen} 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={() => {
|
||
onSettingsChange(settings);
|
||
onOpen();
|
||
}}
|
||
>
|
||
ОК
|
||
</Button>
|
||
<Button
|
||
variant="text"
|
||
onClick={() => setSettings(pv => ({ ...pv, statusesSort: { ...pv.statusesSort, attr: "name", dest: "asc" }, colorRule: {} }))}
|
||
>
|
||
Очистить
|
||
</Button>
|
||
<Button variant="text" onClick={onOpen}>
|
||
Отмена
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств компонента - Диалог дополнительных настроек
|
||
SettingsDialog.propTypes = {
|
||
initial: PropTypes.object.isRequired,
|
||
onSettingsChange: PropTypes.func.isRequired,
|
||
onOpen: PropTypes.func.isRequired
|
||
};
|
||
|
||
//--------------------
|
||
//Интерфейс компонента
|
||
//--------------------
|
||
|
||
export { SettingsDialog };
|