106 lines
3.6 KiB
JavaScript
106 lines
3.6 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - ТОиР - Гаражка
|
||
Компонент: Фильтр отбора
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Chip, Stack, Icon, IconButton, Box } from "@mui/material"; //Интерфейсные компоненты
|
||
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
|
||
import { formatDateRF, formatDateTimeRF } from "../../core/utils"; //Вспомогательные функции
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
FILTERS_STACK: {
|
||
paddingBottom: "5px",
|
||
...APP_STYLES.SCROLL,
|
||
overflowY: "auto",
|
||
alignItems: "flex-end"
|
||
},
|
||
STACK_FILTER: { maxWidth: "99vw", alignItems: "flex-end" }
|
||
};
|
||
|
||
//--------------------------
|
||
//Вспомогательные компоненты
|
||
//--------------------------
|
||
|
||
//Элемент фильтра
|
||
const FilterItem = ({ caption, value, onClick }) => {
|
||
//При нажатии на элемент
|
||
const handleClick = () => (onClick ? onClick() : null);
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<Chip
|
||
label={
|
||
<Stack direction={"row"} alignItems={"center"}>
|
||
<strong>{caption}</strong>
|
||
{value ? `:\u00A0${value}` : null}
|
||
</Stack>
|
||
}
|
||
variant="outlined"
|
||
onClick={handleClick}
|
||
/>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств компонента - Элемент фильтра
|
||
FilterItem.propTypes = {
|
||
caption: PropTypes.string.isRequired,
|
||
value: PropTypes.any,
|
||
onClick: PropTypes.func
|
||
};
|
||
|
||
//---------------
|
||
//Тело компонента
|
||
//---------------
|
||
|
||
//Фильтр отбора
|
||
const Filter = ({ filter, onFilterOpen }) => {
|
||
//При нажатии на элемент фильтра
|
||
const handleClick = () => onFilterOpen && onFilterOpen();
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<div>
|
||
<Box>
|
||
<Stack direction="row" spacing={1} p={1} alignItems={"center"} sx={STYLES.STACK_FILTER}>
|
||
<IconButton onClick={handleClick}>
|
||
<Icon>filter_alt</Icon>
|
||
</IconButton>
|
||
<Stack direction="row" spacing={1} alignItems={"center"} sx={STYLES.FILTERS_STACK}>
|
||
{filter.dDate ? <FilterItem caption={"На дату"} value={formatDateRF(filter.dDate)} onClick={handleClick} /> : null}
|
||
{filter.sCustomerDept ? (
|
||
<FilterItem caption={"Транспортный участок"} value={filter.sCustomerDept} onClick={handleClick} />
|
||
) : null}
|
||
{filter.dDateKOAFrom ? (
|
||
<FilterItem caption="КОА с" value={formatDateTimeRF(filter.dDateKOAFrom)} onClick={handleClick} />
|
||
) : null}
|
||
{filter.dDateKOATo ? <FilterItem caption="КОА по" value={formatDateTimeRF(filter.dDateKOATo)} onClick={handleClick} /> : null}
|
||
</Stack>
|
||
</Stack>
|
||
</Box>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств компонента - Фильтр отбора
|
||
Filter.propTypes = {
|
||
filter: PropTypes.object.isRequired,
|
||
onFilterOpen: PropTypes.func.isRequired
|
||
};
|
||
|
||
//--------------------
|
||
//Интерфейс компонента
|
||
//--------------------
|
||
|
||
export { Filter };
|