123 lines
4.8 KiB
JavaScript
123 lines
4.8 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
|
||
Компонент панели: Карточка показателя
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Box, Card, CardContent, Typography, Link, Divider } from "@mui/material"; //Интерфейсные компоненты
|
||
import { APP_STYLES } from "../../../../app.styles"; //Общие стили приложения
|
||
import { MarkCnList } from "./mark_cn_list"; //Состав показателя
|
||
import { MarkCardToolbar } from "./mark_card_toolbar"; //Панель инструментов карточки
|
||
import { STYLES as COMMON_STYLES } from "../common"; //Общие стили и константы
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
CARD: hovered => ({
|
||
padding: "0px 0px 0px 0px",
|
||
border: "1px solid lightgrey",
|
||
position: "relative",
|
||
...(hovered ? COMMON_STYLES.BG_MARK_CARD : null)
|
||
}),
|
||
CARD_CONTENT_MARK_TITLE: { padding: "0px 0px 0px 0px" },
|
||
CARD_CONTENT_MARK_CONSTITUTION: constitutionExists => ({
|
||
padding: "8px",
|
||
height: "105px",
|
||
"&:last-child": { paddingBottom: "10px" },
|
||
...COMMON_STYLES.FONT_MARK_CARD_BODY,
|
||
...(!constitutionExists ? { display: "flex", justifyContent: "center", alignItems: "center" } : null)
|
||
}),
|
||
BOX_MARK_CONSTITUTION: {
|
||
height: "100%",
|
||
width: "100%",
|
||
overflowY: "auto",
|
||
...APP_STYLES.SCROLL
|
||
}
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Карточка показателя
|
||
const MarkCard = ({ mark, code, name, constitution = [], onMarkAdd, onMarkUpdate, onMarkDelete, onMarkOpen, onMarkCnOpen, onMarkCnAdd }) => {
|
||
//Флаг нахождения указателя мыши в карточке
|
||
const [hovered, setHovered] = useState(false);
|
||
|
||
//При попадании мыши на закладку раздела
|
||
const handleCardMouseIn = () => setHovered(true);
|
||
|
||
//При выходе мыши из закладки раздела
|
||
const handleCardMouseOut = () => setHovered(false);
|
||
|
||
//Флаг наличия данных в составе показателя
|
||
const constitutionExists = constitution?.length > 0;
|
||
|
||
//Формирование представления
|
||
return mark ? (
|
||
<Card variant={"plain"} sx={STYLES.CARD(hovered)} onMouseEnter={handleCardMouseIn} onMouseLeave={handleCardMouseOut}>
|
||
<CardContent sx={STYLES.CARD_CONTENT_MARK_TITLE}>
|
||
<MarkCardToolbar
|
||
title={code}
|
||
desc={name}
|
||
onOpen={onMarkOpen}
|
||
onEdit={onMarkUpdate}
|
||
onDelete={onMarkDelete}
|
||
onCnAdd={onMarkCnAdd}
|
||
showButtons={hovered}
|
||
/>
|
||
</CardContent>
|
||
<Divider />
|
||
<CardContent sx={STYLES.CARD_CONTENT_MARK_CONSTITUTION(constitutionExists)}>
|
||
{constitutionExists ? (
|
||
<Box sx={STYLES.BOX_MARK_CONSTITUTION}>
|
||
<MarkCnList constitution={constitution} onMarkCnOpen={constitutionRn => onMarkCnOpen && onMarkCnOpen(constitutionRn)} />
|
||
</Box>
|
||
) : (
|
||
<Box>
|
||
<Typography sx={COMMON_STYLES.FONT_MARK_CARD_BODY}>Показатель не имеет состава</Typography>
|
||
<Link sx={COMMON_STYLES.LINK} onClick={onMarkCnAdd}>
|
||
Добавить
|
||
</Link>
|
||
</Box>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
) : (
|
||
<Box>
|
||
<Typography sx={COMMON_STYLES.FONT_MARK_CARD_BODY}>Показатель отсутствует</Typography>
|
||
<Link sx={COMMON_STYLES.LINK} onClick={onMarkAdd}>
|
||
Добавить
|
||
</Link>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Карточка показателя
|
||
MarkCard.propTypes = {
|
||
mark: PropTypes.number,
|
||
code: PropTypes.string,
|
||
name: PropTypes.string,
|
||
constitution: PropTypes.arrayOf(PropTypes.object),
|
||
onMarkAdd: PropTypes.func.isRequired,
|
||
onMarkUpdate: PropTypes.func.isRequired,
|
||
onMarkDelete: PropTypes.func.isRequired,
|
||
onMarkOpen: PropTypes.func.isRequired,
|
||
onMarkCnOpen: PropTypes.func.isRequired,
|
||
onMarkCnAdd: PropTypes.func.isRequired
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { MarkCard };
|