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

/*
    Парус 8 - Панели мониторинга - УДП - Доски задач
    Компонент: Карточка статуса событий
*/

//---------------------
//Подключение библиотек
//---------------------

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Card, CardHeader, CardContent, Button, IconButton, Icon, Typography, Stack } from "@mui/material"; //Интерфейсные компоненты
import { TaskCard } from "./task_card.js"; //Компонент Карточка события
import { TaskCardSettings } from "./task_card_settings.js"; //Компонент Диалог настройки карточки событий
import { APP_STYLES } from "../../../../app.styles"; //Типовые стили
import { COLORS } from "../layouts.js"; //Цвета статусов

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

//Высота заголовка
const TITLE_HEIGHT = "64px";

//Нижний отступ заголовка
const TITLE_PADDING_BOTTOM = "16px";

//Высота фильтра
const FILTER_HEIGHT = "56px";

//Стили
const STYLES = {
    STATUS_BLOCK: statusColor => {
        return {
            width: "350px",
            height: `calc(100vh - ${TITLE_HEIGHT} - ${TITLE_PADDING_BOTTOM} - ${FILTER_HEIGHT} - 8px)`,
            backgroundColor: statusColor,
            padding: "8px"
        };
    },
    BLOCK_OPACITY: isAvailable => {
        return isAvailable ? { opacity: 1 } : { opacity: 0.5 };
    },
    MARK_INFO: {
        textAlign: "left",
        textOverflow: "ellipsis",
        overflow: "hidden",
        display: "-webkit-box",
        hyphens: "auto",
        WebkitBoxOrient: "vertical",
        WebkitLineClamp: 1,
        maxWidth: "calc(300px)",
        width: "-webkit-fill-available",
        fontSize: "1.2rem",
        cursor: "default"
    },
    PADDING_0: { padding: 0 },
    CARD_CONTENT: {
        padding: 0,
        paddingRight: "5px",
        paddingBottom: "5px !important",
        overflowY: "auto",
        maxHeight: `calc(100vh - ${TITLE_HEIGHT} - ${TITLE_PADDING_BOTTOM} - ${FILTER_HEIGHT} - 85px)`,
        ...APP_STYLES.SCROLL
    }
};

//---------------
//Тело компонента
//---------------

//Карточка статуса события
const StatusCard = ({
    tasks,
    status,
    settings,
    extraData,
    filtersType,
    isCardAvailable,
    onReload,
    onDragItemChange,
    onTaskDialogOpen,
    onNoteDialogOpen,
    placeholder
}) => {
    //Состояние диалога настройки
    const [statusCardSettingsOpen, setStatusCardSettingsOpen] = useState(false);

    //Открыть/закрыть диалог настройки
    const handleStatusCardSettingsOpen = () => setStatusCardSettingsOpen(!statusCardSettingsOpen);

    //Генерация содержимого
    return (
        <div>
            {statusCardSettingsOpen ? (
                <TaskCardSettings statuses={tasks.statuses} availableClrs={COLORS} onDialogOpen={handleStatusCardSettingsOpen} />
            ) : null}
            <Card
                className="category-card"
                sx={{
                    ...STYLES.STATUS_BLOCK(status.color),
                    ...STYLES.BLOCK_OPACITY(isCardAvailable(status.code))
                }}
            >
                <CardHeader
                    action={
                        <IconButton aria-label="settings" onClick={handleStatusCardSettingsOpen}>
                            <Icon>more_vert</Icon>
                        </IconButton>
                    }
                    title={
                        <Typography sx={STYLES.MARK_INFO} title={status[settings.statusesSort.attr] || status.name} variant="h5">
                            {status[settings.statusesSort.attr] || status.name}
                        </Typography>
                    }
                    subheader={
                        <Button
                            onClick={() => {
                                onDragItemChange(filtersType, status.code);
                                onTaskDialogOpen();
                            }}
                        >
                            + Добавить
                        </Button>
                    }
                    sx={STYLES.PADDING_0}
                />
                <CardContent sx={STYLES.CARD_CONTENT}>
                    <Stack spacing={1}>
                        {tasks.rows
                            .filter(item => item.category === status.id)
                            .map((item, index) => (
                                <TaskCard
                                    task={item}
                                    avatar={extraData.accounts.find(a => a.agnAbbr === item.sSender).image}
                                    index={index}
                                    onReload={onReload}
                                    key={item.id}
                                    eventPoints={extraData.evPoints}
                                    colorRule={settings.colorRule}
                                    pointSettings={extraData.evPoints.find(p => p.point === status.code)}
                                    onOpenNoteDialog={onNoteDialogOpen}
                                />
                            ))}
                        {placeholder}
                    </Stack>
                </CardContent>
            </Card>
        </div>
    );
};

//Контроль свойств - Карточка статуса события
StatusCard.propTypes = {
    tasks: PropTypes.object.isRequired,
    status: PropTypes.object.isRequired,
    settings: PropTypes.object.isRequired,
    extraData: PropTypes.object.isRequired,
    filtersType: PropTypes.string.isRequired,
    isCardAvailable: PropTypes.func.isRequired,
    onReload: PropTypes.func.isRequired,
    onDragItemChange: PropTypes.func.isRequired,
    onTaskDialogOpen: PropTypes.func.isRequired,
    onNoteDialogOpen: PropTypes.func.isRequired,
    placeholder: PropTypes.object.isRequired
};

//--------------------
//Интерфейс компонента
//--------------------

export { StatusCard };