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

/*
    Парус 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, CardContent, Avatar, Stack } from "@mui/material"; //Интерфейсные компоненты
import { useTaskCard } from "../hooks"; //Вспомогательные хуки
import { TaskFormDialog } from "./task_form"; //Форма события

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

//Стили
const STYLES = {
    CONTAINER: { margin: "5px 0px", textAlign: "center" },
    MENU_ITEM_DELIMITER: { borderBottom: "1px solid lightgrey" },
    CARD_HEADER_TITLE: {
        padding: "4px",
        width: "252px",
        display: "-webkit-box",
        hyphens: "auto",
        WebkitBoxOrient: "vertical",
        WebkitLineClamp: 2,
        overflow: "hidden"
    },
    CARD_HEADER_DESC: { padding: 0, cursor: "pointer" },
    CARD_CONTENT: { padding: "4px !important" },
    CARD_CONTENT_BOX: { display: "flex", alignItems: "center" },
    ACCOUNT_STACK: { alignItems: "center", marginLeft: "auto" },
    SECONDARY_TEXT: {
        color: "text.secondary",
        fontSize: 14
    },
    ICON_COLOR: { color: theme => theme.palette.grey[500] }
};

//------------------------------------
//Вспомогательные функции и компоненты
//------------------------------------

//Действия карточки события
const DataCellCardActions = ({
    taskRn,
    menuItems,
    cardActions,
    handleMethodsMenuButtonClick,
    handleMethodsMenuClose,
    handleReload,
    extraHandle = null
}) => {
    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(action => {
                    if (action.visible)
                        return (
                            <MenuItem
                                sx={action.delimiter ? STYLES.MENU_ITEM_DELIMITER : {}}
                                key={`${taskRn}_${action.method}`}
                                onClick={async () => {
                                    //one().then(two).then(three)
                                    action.method === "TASK_STATE_CHANGE" && extraHandle ? extraHandle() : null;
                                    //Выполняем действие
                                    action.func(taskRn, action.needReload ? handleReload : null);
                                    //Закрываем меню
                                    handleMethodsMenuClose();
                                }}
                            >
                                <Icon>{action.icon}</Icon>
                                <Typography pl={1}>{action.name}</Typography>
                            </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,
    handleReload: PropTypes.func,
    extraHandle: PropTypes.func
};

//-----------
//Тело модуля
//-----------

//Карточка события
const TaskCard = ({ task, account, index, handleReload, extraHandle = null }) => {
    //Собственное состояние
    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={STYLES.CARD_HEADER_TITLE}
                                    lang="ru"
                                    onClick={() => {
                                        menuItems.find(a => (a.method === "EDIT" ? a.func(task.nrn, a.needReload ? handleReload : null) : null));
                                    }}
                                >
                                    {task.sdescription}
                                </Typography>
                            }
                            sx={STYLES.CARD_HEADER_DESC}
                            action={
                                <DataCellCardActions
                                    taskRn={task.nrn}
                                    menuItems={menuItems}
                                    cardActions={cardActions}
                                    handleMethodsMenuButtonClick={handleMethodsMenuButtonClick}
                                    handleMethodsMenuClose={handleMethodsMenuClose}
                                    handleReload={handleReload}
                                    extraHandle={extraHandle}
                                />
                            }
                        />
                        <CardContent sx={STYLES.CARD_CONTENT}>
                            <Box sx={STYLES.CARD_CONTENT_BOX}>
                                <Icon sx={STYLES.ICON_COLOR}>assignment</Icon>
                                <Typography sx={STYLES.SECONDARY_TEXT}>{task.name}</Typography>
                                {account ? (
                                    <Stack /*title={task.sto_clnperson}*/ direction="row" spacing={0.5} sx={STYLES.ACCOUNT_STACK}>
                                        <Typography sx={STYLES.SECONDARY_TEXT}>{account.authId ? account.authId : account.agnAbbr}</Typography>
                                        <Avatar src={account.image ? `data:image/png;base64,${account.image}` : null} />
                                    </Stack>
                                ) : null}
                            </Box>
                        </CardContent>
                    </Card>
                )}
            </Draggable>
            {taskCard.openEdit ? (
                <TaskFormDialog
                    taskRn={task.nrn}
                    onClose={() => {
                        setTaskCard(pv => ({ ...pv, openEdit: false }));
                    }}
                />
            ) : null}
        </Box>
    );
};

//Контроль свойств - Карточка события
TaskCard.propTypes = {
    task: PropTypes.object.isRequired,
    account: PropTypes.object,
    index: PropTypes.number.isRequired,
    handleReload: PropTypes.func,
    extraHandle: PropTypes.func
};

//----------------
//Интерфейс модуля
//----------------

export { TaskCard };