forked from CITKParus/P8-Panels
132 lines
6.0 KiB
JavaScript
132 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 { CustomInputField } from "./custom_input_field.js"; //Кастомное поле ввода
|
||
import { sortAttrs, sortDest } from "../layouts.js"; //Допустимые значение поля и направления сортировки
|
||
import { hasValue } from "../../../core/utils.js"; //Проверка наличия значения
|
||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
SELECT: { width: "100%" }
|
||
};
|
||
|
||
//---------------
|
||
//Тело компонента
|
||
//---------------
|
||
|
||
//Диалог дополнительных настроек
|
||
const SettingsDialog = ({ initial, onSettingsChange, onClose, ...other }) => {
|
||
//Состояние дополнительных настроек
|
||
const [colorRules, seColorRules] = useState(initial.colorRules);
|
||
|
||
//Состояние статусов
|
||
const [statusesState, setStatusesState] = useState(initial.statusesState);
|
||
|
||
//Изменение поля сортировки
|
||
const handleSortAttrChange = (item, value) => setStatusesState(pv => ({ ...pv, [item]: value }));
|
||
|
||
//Изменение направления сортировки
|
||
const handleSortDestChange = newDirection => setStatusesState(pv => ({ ...pv, direction: newDirection }));
|
||
|
||
//При изменении правила заливки событий
|
||
const handleColorRuleChange = (item, value) => {
|
||
//Определяем новое правило заливки
|
||
let newColorRule = colorRules.rules[value];
|
||
//Обновляем в основных настройках
|
||
seColorRules(pv => ({ ...pv, selectedColorRule: newColorRule ? newColorRule : {} }));
|
||
};
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<div {...other}>
|
||
<Dialog open onClose={onClose} fullWidth maxWidth="sm">
|
||
<DialogTitle>Настройки</DialogTitle>
|
||
<IconButton aria-label="close" onClick={onClose} sx={COMMON_STYLES.DIALOG_CLOSE_BUTTON}>
|
||
<Icon>close</Icon>
|
||
</IconButton>
|
||
<DialogContent sx={COMMON_STYLES.SCROLL}>
|
||
<Box component="section" p={1}>
|
||
<CustomInputField
|
||
elementCode="clrRules"
|
||
elementValue={hasValue(colorRules.selectedColorRule.id) && colorRules.length !== 0 ? colorRules.selectedColorRule.id : -1}
|
||
labelText="Заливка событий"
|
||
items={colorRules.rules.reduce((prev, cur) => [...prev, { id: cur.id, caption: cur.SDP_NAME }], [])}
|
||
emptyItem={{ key: -1, id: -1, caption: "-" }}
|
||
onChange={handleColorRuleChange}
|
||
sx={STYLES.SELECT}
|
||
/>
|
||
</Box>
|
||
<Box component="section" p={1}>
|
||
<Stack direction="row" sx={COMMON_STYLES.STACK_DOCLINKS}>
|
||
<CustomInputField
|
||
elementCode="attr"
|
||
elementValue={statusesState.attr}
|
||
labelText="Поле сортировки"
|
||
items={sortAttrs.reduce((prev, cur) => [...prev, { id: cur.id, caption: cur.descr }], [])}
|
||
onChange={handleSortAttrChange}
|
||
sx={STYLES.SELECT}
|
||
/>
|
||
<IconButton
|
||
title={statusesState.direction === "asc" ? "По возрастанию" : "По убыванию"}
|
||
onClick={() => handleSortDestChange(sortDest[sortDest.indexOf(statusesState.direction) * -1])}
|
||
>
|
||
<Icon>{statusesState.direction === "asc" ? "arrow_upward" : "arrow_downward"}</Icon>
|
||
</IconButton>
|
||
</Stack>
|
||
</Box>
|
||
</DialogContent>
|
||
<DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
|
||
<Button
|
||
variant="text"
|
||
onClick={() => {
|
||
onSettingsChange(colorRules, statusesState);
|
||
onClose();
|
||
}}
|
||
>
|
||
ОК
|
||
</Button>
|
||
<Button
|
||
variant="text"
|
||
onClick={() => {
|
||
seColorRules(pv => ({ ...pv, selectedColorRule: {} }));
|
||
setStatusesState(pv => ({ ...pv, attr: "SEVNSTAT_NAME", direction: "asc" }));
|
||
}}
|
||
>
|
||
Очистить
|
||
</Button>
|
||
<Button variant="text" onClick={onClose}>
|
||
Отмена
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств компонента - Диалог дополнительных настроек
|
||
SettingsDialog.propTypes = {
|
||
initial: PropTypes.object.isRequired,
|
||
onSettingsChange: PropTypes.func.isRequired,
|
||
onClose: PropTypes.func.isRequired
|
||
};
|
||
|
||
//--------------------
|
||
//Интерфейс компонента
|
||
//--------------------
|
||
|
||
export { SettingsDialog };
|