360 lines
14 KiB
JavaScript
360 lines
14 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
|
||
Компонент панели: Раздел настройки
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import {
|
||
Box,
|
||
IconButton,
|
||
Icon,
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
Button,
|
||
Typography,
|
||
List,
|
||
ListItem,
|
||
Select,
|
||
FormControl,
|
||
InputLabel,
|
||
MenuItem,
|
||
DialogActions
|
||
} from "@mui/material"; //Интерфейсные элементы
|
||
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../../components/p8p_data_grid"; //Таблица данных
|
||
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||
import { SectionTabPanel } from "./section_tab_panel"; //Компонент вкладки раздела
|
||
import { confSctnMrkCellRender, confSctnMrkHeadCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
GRID_SIZES: (height, pxOuterMenuH, pxPanelHeaderH, pxTabsH) => ({
|
||
padding: 0,
|
||
minWidth: "98vw",
|
||
minHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.93,
|
||
maxWidth: "98vw",
|
||
maxHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.93
|
||
}),
|
||
TABLE_CONTAINER: {
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
paddingTop: 1,
|
||
paddingBottom: 1
|
||
},
|
||
SECTION_ACTIONS: { display: "flex", justifyContent: "space-between", padding: "0px 5px" },
|
||
TABLE_SCROLL: {
|
||
"&::-webkit-scrollbar": {
|
||
width: "12px",
|
||
height: "12px"
|
||
},
|
||
"&::-webkit-scrollbar-track": {
|
||
borderRadius: "88px",
|
||
backgroundColor: "#EBEBEB"
|
||
},
|
||
"&::-webkit-scrollbar-thumb": {
|
||
borderRadius: "88px",
|
||
backgroundColor: "#b4b4b4",
|
||
backgroundClip: "padding-box",
|
||
border: "3px solid #EBEBEB"
|
||
},
|
||
"&::-webkit-scrollbar-thumb:hover": {
|
||
backgroundColor: "#808080"
|
||
}
|
||
},
|
||
HELP_LIST_ITEM: {
|
||
padding: "0px 0px 0px 5px",
|
||
whiteSpace: "pre",
|
||
fontSize: "0.95rem"
|
||
},
|
||
HELP_LIST_ITEM_NAME: {
|
||
fontWeight: "bold",
|
||
fontSize: "inherit",
|
||
minWidth: "45px"
|
||
},
|
||
HELP_LIST_ITEM_DESC: {
|
||
fontSize: "inherit"
|
||
},
|
||
DIALOG_ACTIONS: { justifyContent: "end", paddingRight: "24px", paddingLeft: "24px" }
|
||
};
|
||
|
||
//------------------------------------
|
||
//Вспомогательные функции и компоненты
|
||
//------------------------------------
|
||
|
||
//Элемент списка расшифровки состава
|
||
const HelpListItem = ({ name, desc }) => {
|
||
return (
|
||
<ListItem sx={STYLES.HELP_LIST_ITEM}>
|
||
<Typography sx={STYLES.HELP_LIST_ITEM_NAME}>{name}</Typography>
|
||
<Typography sx={STYLES.HELP_LIST_ITEM_DESC}>{` - ${desc}`}</Typography>
|
||
</ListItem>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Элемент списка расшифровки состава
|
||
HelpListItem.propTypes = {
|
||
name: PropTypes.string.isRequired,
|
||
desc: PropTypes.string.isRequired
|
||
};
|
||
|
||
//Диалог дополнительной информации
|
||
const HelpDialog = ({ handleOpenHelpChange }) => {
|
||
//Генерация содержимого
|
||
return (
|
||
<Dialog open onClose={handleOpenHelpChange}>
|
||
<DialogTitle>
|
||
<Box display="flex" alignItems="center">
|
||
<Box flexGrow={1} textAlign="center">
|
||
Информация
|
||
</Box>
|
||
<Box>
|
||
<IconButton aria-label="close" onClick={handleOpenHelpChange}>
|
||
<Icon>close</Icon>
|
||
</IconButton>
|
||
</Box>
|
||
</Box>
|
||
</DialogTitle>
|
||
<DialogContent>
|
||
<Typography>Карточки показателей содержат сокращенную информацию о типе состава показателя.</Typography>
|
||
<Typography>Список сокращений:</Typography>
|
||
<List disablePadding={true}>
|
||
<HelpListItem name="fx" desc="формула" />
|
||
<HelpListItem name="СЗ" desc="статическое значение" />
|
||
<HelpListItem name="ХП" desc="хранимая процедура" />
|
||
<HelpListItem name="РП" desc="расчетный показатель" />
|
||
<HelpListItem name="ХО" desc="хозяйственные операции" />
|
||
<HelpListItem name="РСДК" desc="расчёты с дебиторами/кредиторами" />
|
||
<HelpListItem name="ОС" desc="остатки средств по счетам" />
|
||
<HelpListItem name="ТМЦ" desc="остатки товарно-материальных ценностей" />
|
||
<HelpListItem name="ДКЗ" desc="дебиторская/кредиторская задолженность" />
|
||
<HelpListItem name="ИК" desc="инвентарная картотека" />
|
||
<HelpListItem name="МБП" desc="картотека МБП" />
|
||
<HelpListItem name="КОБП" desc="картотека операций будущих периодов" />
|
||
<HelpListItem name="ДПНП" desc="декларация по налогу на прибыль" />
|
||
<HelpListItem name="РО" desc="регламентированный отчет" />
|
||
</List>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Диалог дополнительной информации
|
||
HelpDialog.propTypes = {
|
||
handleOpenHelpChange: PropTypes.func.isRequired
|
||
};
|
||
|
||
//Диалог сортировки
|
||
const SortDialog = ({ init, handleOpenSortChange, onOrderChange }) => {
|
||
//Собственное состояние сортировки
|
||
const [order, setOrder] = useState({ row: init.rowOrder ? init.rowOrder : 0, column: init.columnOrder ? init.columnOrder : 0 });
|
||
|
||
//Изменеие сортировки
|
||
const handleOrderChange = e => setOrder(pv => ({ ...pv, [e.target.name]: e.target.value }));
|
||
|
||
//Нажатие на кнопку Ok
|
||
const handleOk = () => {
|
||
onOrderChange({ rowOrder: order.row, columnOrder: order.column });
|
||
handleOpenSortChange();
|
||
};
|
||
|
||
//Кнопка "Очистить", значения по умолчанию
|
||
const handleClear = () => {
|
||
setOrder({ row: 0, column: 0 });
|
||
};
|
||
|
||
//Кнопка "Отмена"
|
||
const handleCancel = () => {
|
||
handleOpenSortChange();
|
||
};
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<Dialog open onClose={handleOpenSortChange}>
|
||
<DialogTitle>
|
||
<Box display="flex" alignItems="center">
|
||
<Box flexGrow={1} textAlign="center">
|
||
Сортировка
|
||
</Box>
|
||
<Box>
|
||
<IconButton aria-label="close" onClick={handleCancel}>
|
||
<Icon>close</Icon>
|
||
</IconButton>
|
||
</Box>
|
||
</Box>
|
||
</DialogTitle>
|
||
<DialogContent>
|
||
<Box component="section" p={1}>
|
||
<FormControl variant="standard" fullWidth>
|
||
<InputLabel id="row-label">Строки</InputLabel>
|
||
<Select labelId="row-label" id="row" name="row" value={order.row} label="Строки" onChange={handleOrderChange}>
|
||
<MenuItem value={0}>Номер</MenuItem>
|
||
<MenuItem value={1}>Код</MenuItem>
|
||
<MenuItem value={2}>Мнемокод</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
<Box component="section" p={1}>
|
||
<FormControl variant="standard" fullWidth>
|
||
<InputLabel id="column-label">Графы</InputLabel>
|
||
<Select labelId="column-label" id="column" name="column" value={order.column} label="Графы" onChange={handleOrderChange}>
|
||
<MenuItem value={0}>Номер</MenuItem>
|
||
<MenuItem value={1}>Код</MenuItem>
|
||
<MenuItem value={2}>Мнемокод</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
</DialogContent>
|
||
<DialogActions sx={STYLES.DIALOG_ACTIONS}>
|
||
<Button variant="text" onClick={handleOk}>
|
||
ОК
|
||
</Button>
|
||
<Button variant="text" onClick={handleClear}>
|
||
Очистить
|
||
</Button>
|
||
<Button variant="text" onClick={handleCancel}>
|
||
Отмена
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Диалог сортировки
|
||
SortDialog.propTypes = {
|
||
init: PropTypes.object.isRequired,
|
||
handleOpenSortChange: PropTypes.func.isRequired,
|
||
onOrderChange: PropTypes.func.isRequired
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Раздел настройки
|
||
const SectionTab = ({
|
||
section,
|
||
tabValue,
|
||
index,
|
||
order,
|
||
onOrderChange,
|
||
containerProps,
|
||
handleMarkAdd,
|
||
handleReload,
|
||
handleMarkOpen,
|
||
handleMarkCnOpen,
|
||
handleMarkCnInsert,
|
||
menuItems
|
||
}) => {
|
||
//Состояние - диалог информации
|
||
const [openHelp, setOpenHelp] = useState(false);
|
||
|
||
//Изменение состояния диалога информации
|
||
const handleOpenHelpChange = () => {
|
||
setOpenHelp(!openHelp);
|
||
};
|
||
|
||
//Состояние - диалог сортировки
|
||
const [openSort, setOpenSort] = useState(false);
|
||
|
||
//Изменение состояния диалога сортировки
|
||
const handleOpenSortChange = () => {
|
||
setOpenSort(!openSort);
|
||
};
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<>
|
||
<SectionTabPanel key={section.rn} value={tabValue} index={index}>
|
||
<Box sx={STYLES.SECTION_ACTIONS}>
|
||
<Box>
|
||
<IconButton onClick={() => handleMarkAdd(section.rn)}>
|
||
<Icon>add</Icon>
|
||
</IconButton>
|
||
<IconButton onClick={() => handleReload()}>
|
||
<Icon>refresh</Icon>
|
||
</IconButton>
|
||
</Box>
|
||
<Box>
|
||
<IconButton onClick={() => handleOpenSortChange()}>
|
||
<Icon>sort</Icon>
|
||
</IconButton>
|
||
<IconButton onClick={() => handleOpenHelpChange()}>
|
||
<Icon>help</Icon>
|
||
</IconButton>
|
||
</Box>
|
||
</Box>
|
||
{section.dataLoaded && section.columnsDef.length > 3 ? (
|
||
<Box sx={STYLES.TABLE_CONTAINER}>
|
||
<P8PDataGrid
|
||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||
containerComponentProps={{
|
||
elevation: 6,
|
||
sx: { ...STYLES.TABLE_SCROLL },
|
||
style: STYLES.GRID_SIZES(
|
||
containerProps.height,
|
||
containerProps.pxOuterMenuH,
|
||
containerProps.pxPanelHeaderH,
|
||
containerProps.pxTabsH
|
||
)
|
||
}}
|
||
columnsDef={section.columnsDef}
|
||
groups={section.groups}
|
||
rows={section.rows}
|
||
fixedHeader={section.fixedHeader}
|
||
fixedColumns={section.fixedColumns}
|
||
size={P8P_DATA_GRID_SIZE.LARGE}
|
||
reloading={section.reload}
|
||
dataCellRender={prms =>
|
||
confSctnMrkCellRender({
|
||
...prms,
|
||
sectionRn: section.rn,
|
||
handleMarkAdd: handleMarkAdd,
|
||
handleMarkOpen: handleMarkOpen,
|
||
handleMarkCnOpen: handleMarkCnOpen,
|
||
handleMarkCnInsert: handleMarkCnInsert,
|
||
menuItems: menuItems
|
||
})
|
||
}
|
||
headCellRender={confSctnMrkHeadCellRender}
|
||
/>
|
||
</Box>
|
||
) : null}
|
||
</SectionTabPanel>
|
||
{openSort ? <SortDialog init={order} handleOpenSortChange={handleOpenSortChange} onOrderChange={onOrderChange} /> : null}
|
||
{openHelp ? <HelpDialog handleOpenHelpChange={handleOpenHelpChange} /> : null}
|
||
</>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Раздел настройки
|
||
SectionTab.propTypes = {
|
||
section: PropTypes.object.isRequired,
|
||
tabValue: PropTypes.number,
|
||
index: PropTypes.number,
|
||
order: PropTypes.object.isRequired,
|
||
onOrderChange: PropTypes.func.isRequired,
|
||
containerProps: PropTypes.object,
|
||
handleMarkAdd: PropTypes.func,
|
||
handleReload: PropTypes.func,
|
||
handleMarkOpen: PropTypes.func,
|
||
handleMarkCnOpen: PropTypes.func,
|
||
handleMarkCnInsert: PropTypes.func,
|
||
menuItems: PropTypes.array
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { SectionTab };
|