forked from CITKParus/P8-Panels
127 lines
4.5 KiB
JavaScript
127 lines
4.5 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||
Компонент: Диалог настройки карточки событий
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import {
|
||
Dialog,
|
||
DialogTitle,
|
||
IconButton,
|
||
Icon,
|
||
DialogContent,
|
||
DialogActions,
|
||
Button,
|
||
Box,
|
||
FormControl,
|
||
InputLabel,
|
||
Select,
|
||
MenuItem
|
||
} from "@mui/material"; //Интерфейсные компоненты
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
DIALOG_ACTIONS: { justifyContent: "end", paddingRight: "24px", paddingLeft: "24px" },
|
||
CLOSE_BUTTON: {
|
||
position: "absolute",
|
||
right: 8,
|
||
top: 8,
|
||
color: theme => theme.palette.grey[500]
|
||
},
|
||
BCKG_COLOR: backgroundColor => ({ backgroundColor: backgroundColor })
|
||
};
|
||
|
||
//---------------
|
||
//Тело компонента
|
||
//---------------
|
||
|
||
//Диалог настройки карточки событий
|
||
const TaskCardSettings = ({ statuses, availableClrs, onDialogOpen }) => {
|
||
//Собственное состояние
|
||
const [settings, setSettings] = useState({});
|
||
|
||
//Применение настройки статуса
|
||
const handleOk = settings => {
|
||
//Считываем статусы
|
||
let cloneS = statuses.slice();
|
||
//Изменяем статус у выбранного
|
||
cloneS[statuses.findIndex(x => x.id === settings.id)] = { ...settings };
|
||
setSettings(cloneS);
|
||
onDialogOpen();
|
||
};
|
||
|
||
//При изменении значения элемента
|
||
const handleSettingsItemChange = e => {
|
||
setSettings(pv => ({ ...pv, color: e.target.value }));
|
||
};
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<div>
|
||
<Dialog open onClose={onDialogOpen} fullWidth maxWidth="sm">
|
||
<DialogTitle>Настройки</DialogTitle>
|
||
<IconButton aria-label="close" onClick={onDialogOpen} sx={STYLES.CLOSE_BUTTON}>
|
||
<Icon>close</Icon>
|
||
</IconButton>
|
||
<DialogContent>
|
||
<Box component="section" p={1}>
|
||
<FormControl fullWidth>
|
||
<InputLabel id="color-label">Цвет</InputLabel>
|
||
<Select
|
||
defaultValue={settings.color}
|
||
labelId="color-label"
|
||
id="color"
|
||
label="Цвет"
|
||
variant="standard"
|
||
sx={STYLES.BCKG_COLOR(settings.color)}
|
||
onChange={handleSettingsItemChange}
|
||
>
|
||
<MenuItem key={0} value={settings.color} sx={STYLES.BCKG_COLOR(settings.color)}>
|
||
{settings.color}
|
||
</MenuItem>
|
||
{availableClrs.map((clr, i) => {
|
||
return (
|
||
<MenuItem key={i + 1} value={clr} sx={STYLES.BCKG_COLOR(clr)}>
|
||
{clr}
|
||
</MenuItem>
|
||
);
|
||
})}
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
</DialogContent>
|
||
<DialogActions sx={STYLES.DIALOG_ACTIONS}>
|
||
<Button variant="text" onClick={handleOk}>
|
||
Применить
|
||
</Button>
|
||
<Button variant="text" onClick={onDialogOpen}>
|
||
Отмена
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Диалог настройки карточки событий
|
||
TaskCardSettings.propTypes = {
|
||
statuses: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||
availableClrs: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||
onDialogOpen: PropTypes.func.isRequired
|
||
};
|
||
|
||
//--------------------
|
||
//Интерфейс компонента
|
||
//--------------------
|
||
|
||
export { TaskCardSettings };
|