forked from CITKParus/P8-Panels
143 lines
5.7 KiB
JavaScript
143 lines
5.7 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - Примеры для разработчиков
|
||
Пример: Таблица данных "P8PDataGrid"
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useContext } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Typography, Grid, Stack, Icon, Box, Button } from "@mui/material"; //Интерфейсные элементы
|
||
import { P8PDataGrid, P8P_DATA_GRID_SIZE, useP8PDataGrid } from "../../components/p8p_data_grid"; //Таблица данных
|
||
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Размер страницы данных
|
||
const DATA_GRID_PAGE_SIZE = 5;
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||
TITLE: { paddingBottom: "15px" },
|
||
DATA_GRID_CONTAINER: { maxWidth: 700, maxHeight: 500, minHeight: 500, ...APP_STYLES.SCROLL }
|
||
};
|
||
|
||
//---------------------------------------------
|
||
//Вспомогательные функции форматирования данных
|
||
//---------------------------------------------
|
||
|
||
//Формирование значения для колонки "Тип контрагента"
|
||
const formatAgentTypeValue = (value, addText = false) => {
|
||
const [text, icon] = value == 0 ? ["Юридическое лицо", "business"] : ["Физическое лицо", "person"];
|
||
return (
|
||
<Stack direction="row" gap={0.5} alignItems="center" justifyContent="center">
|
||
<Icon title={text}>{icon}</Icon>
|
||
{addText == true ? text : null}
|
||
</Stack>
|
||
);
|
||
};
|
||
|
||
//Форматирование значений колонок
|
||
const valueFormatter = ({ value, columnDef }) => {
|
||
switch (columnDef.name) {
|
||
case "NAGNTYPE":
|
||
return formatAgentTypeValue(value, true);
|
||
}
|
||
return value;
|
||
};
|
||
|
||
//Генерация представления ячейки c данными
|
||
const dataCellRender = ({ row, columnDef }) => {
|
||
switch (columnDef.name) {
|
||
case "NAGNTYPE":
|
||
return {
|
||
cellProps: { align: "center" },
|
||
data: formatAgentTypeValue(row[columnDef.name], false)
|
||
};
|
||
}
|
||
};
|
||
|
||
//Генерация представления ячейки заголовка
|
||
const headCellRender = ({ columnDef }) => {
|
||
switch (columnDef.name) {
|
||
case "NAGNTYPE":
|
||
return {
|
||
stackProps: { justifyContent: "center" },
|
||
cellProps: { align: "center" }
|
||
};
|
||
}
|
||
};
|
||
|
||
//Генерация представления ячейки заголовка группы
|
||
export const groupCellRender = () => ({ cellStyle: { padding: "2px" } });
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Пример: Таблица данных "P8PDataGrid"
|
||
const DataGrid = ({ title }) => {
|
||
//Собственное состояние - таблица данных
|
||
const { dataGrid, isDataLoaded, handleFilterChanged, handleOrderChanged, handlePageChange } = useP8PDataGrid({
|
||
stored: "PKG_P8PANELS_SAMPLES.DATA_GRID",
|
||
pageSize: DATA_GRID_PAGE_SIZE
|
||
});
|
||
|
||
//Подключение к контексту приложения
|
||
const { pOnlineShowDocument } = useContext(ApplicationСtx);
|
||
|
||
//При нажатии на копку контрагента
|
||
const handleAgnButtonClicked = agnCode => pOnlineShowDocument({ unitCode: "AGNLIST", document: agnCode, inRnParameter: "in_AGNABBR" });
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<div style={STYLES.CONTAINER}>
|
||
<Typography sx={STYLES.TITLE} variant={"h6"}>
|
||
{title}
|
||
</Typography>
|
||
<Grid container spacing={1} pt={5}>
|
||
<Grid item xs={12}>
|
||
<Box p={5} display="flex" justifyContent="center" alignItems="center">
|
||
{isDataLoaded ? (
|
||
<P8PDataGrid
|
||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||
{...dataGrid}
|
||
size={P8P_DATA_GRID_SIZE.LARGE}
|
||
containerComponentProps={{ elevation: 6, sx: STYLES.DATA_GRID_CONTAINER }}
|
||
valueFormatter={valueFormatter}
|
||
headCellRender={headCellRender}
|
||
dataCellRender={dataCellRender}
|
||
groupCellRender={groupCellRender}
|
||
onOrderChanged={handleOrderChanged}
|
||
onFilterChanged={handleFilterChanged}
|
||
rowExpandRender={({ row }) => (
|
||
<Button onClick={() => handleAgnButtonClicked(row.SAGNABBR)}>Показать в разделе</Button>
|
||
)}
|
||
onPageChanged={handlePageChange}
|
||
/>
|
||
) : null}
|
||
</Box>
|
||
</Grid>
|
||
</Grid>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Пример: Таблица данных "P8PDataGrid"
|
||
DataGrid.propTypes = {
|
||
title: PropTypes.string.isRequired
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { DataGrid };
|