forked from CITKParus/P8-Panels
125 lines
4.6 KiB
JavaScript
125 lines
4.6 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - УДП - Доски задач
|
|
Компонент панели: Карточка задачи
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { Draggable } from "react-beautiful-dnd";
|
|
import { Card, CardHeader, Typography, IconButton, Icon, Box, Menu, MenuItem } from "@mui/material"; //Интерфейсные компоненты
|
|
import { useTaskCard } from "../hooks"; //Вспомогательные хуки
|
|
import { TaskFormDialog } from "./task_form"; //Форма события
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Стили
|
|
const STYLES = {
|
|
CONTAINER: { margin: "5px 0px", textAlign: "center" },
|
|
DATA_GRID_CELL_DEFAULT: { cursor: "pointer", backgroundColor: "#ADD8E6" }
|
|
};
|
|
|
|
//------------------------------------
|
|
//Вспомогательные функции и компоненты
|
|
//------------------------------------
|
|
|
|
//Действия карты показателя
|
|
const DataCellCardActions = ({ taskRn, menuItems, cardActions, handleMethodsMenuButtonClick, handleMethodsMenuClose }) => {
|
|
return (
|
|
<Box sx={STYLES.BOX_ROW}>
|
|
<IconButton id={`${taskRn}_menu_button`} aria-haspopup="true" onClick={handleMethodsMenuButtonClick}>
|
|
<Icon>more_vert</Icon>
|
|
</IconButton>
|
|
<Menu id={`${taskRn}_menu`} anchorEl={cardActions.anchorMenuMethods} open={cardActions.openMethods} onClose={handleMethodsMenuClose}>
|
|
{menuItems.map(el => {
|
|
return (
|
|
<MenuItem
|
|
key={`${taskRn}_${el.method}`}
|
|
onClick={() => {
|
|
el.func(taskRn);
|
|
handleMethodsMenuClose();
|
|
}}
|
|
>
|
|
<Icon>{el.icon}</Icon>
|
|
{el.name}
|
|
</MenuItem>
|
|
);
|
|
})}
|
|
</Menu>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств - Действия карты показателя
|
|
DataCellCardActions.propTypes = {
|
|
taskRn: PropTypes.number.isRequired,
|
|
menuItems: PropTypes.array.isRequired,
|
|
cardActions: PropTypes.object.isRequired,
|
|
handleMethodsMenuButtonClick: PropTypes.func.isRequired,
|
|
handleMethodsMenuClose: PropTypes.func.isRequired
|
|
};
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Карточка задачи
|
|
const TaskCard = ({ task, index }) => {
|
|
//Собственное состояние
|
|
const [taskCard, setTaskCard, cardActions, handleMethodsMenuButtonClick, handleMethodsMenuClose, menuItems] = useTaskCard();
|
|
|
|
//Генерация содержимого
|
|
return (
|
|
<Box>
|
|
<Draggable draggableId={task.id.toString()} key={task.id} index={index}>
|
|
{provided => (
|
|
<Card ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
|
|
<CardHeader
|
|
title={
|
|
<Typography className="task-info" sx={{ padding: "2px" }}>
|
|
{task.id} {task.name}
|
|
</Typography>
|
|
}
|
|
sx={{ padding: 0 }}
|
|
action={
|
|
<DataCellCardActions
|
|
taskRn={task.nrn}
|
|
menuItems={menuItems}
|
|
cardActions={cardActions}
|
|
handleMethodsMenuButtonClick={handleMethodsMenuButtonClick}
|
|
handleMethodsMenuClose={handleMethodsMenuClose}
|
|
/>
|
|
}
|
|
/>
|
|
</Card>
|
|
)}
|
|
</Draggable>
|
|
{taskCard.openEdit ? (
|
|
<TaskFormDialog
|
|
taskRn={task.nrn}
|
|
onClose={() => {
|
|
setTaskCard(pv => ({ ...pv, openEdit: false }));
|
|
}}
|
|
/>
|
|
) : null}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств - Карточка задачи
|
|
TaskCard.propTypes = {
|
|
task: PropTypes.object.isRequired,
|
|
index: PropTypes.number.isRequired
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { TaskCard };
|