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 { ApplicationCtx } 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(ApplicationCtx);
|
|
|
|
//При нажатии на копку контрагента
|
|
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 };
|