WEB APP: Панель с примерами для разработчиков (P8PDataGrid, P8PChart)
This commit is contained in:
Mikhail Chechnev
parent
968859bb7b
commit
57db0540a3
93
app/panels/samples/chart.js
Normal file
93
app/panels/samples/chart.js
Normal file
@ -0,0 +1,93 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - Примеры для разработчиков
|
||||
Пример: Графики "P8PChart"
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Typography, Grid, Paper } from "@mui/material"; //Интерфейсные элементы
|
||||
import { P8PChart } from "../../components/p8p_chart"; //График
|
||||
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
||||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||||
TITLE: { paddingBottom: "15px" },
|
||||
CHART: { maxHeight: "500px", display: "flex", justifyContent: "center" },
|
||||
CHART_PAPER: { height: "100%", padding: "5px" }
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Пример: Графики "P8PChart"
|
||||
const Chart = ({ title }) => {
|
||||
//Собственное состояние - график
|
||||
const [chart, setChart] = useState({ loaded: false, labels: [], datasets: [] });
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
//Подключение к контексту приложения
|
||||
const { pOnlineShowUnit } = useContext(ApplicationСtx);
|
||||
|
||||
//Загрузка данных графика с сервера
|
||||
const loadChart = useCallback(async () => {
|
||||
const chart = await executeStored({ stored: "PKG_P8PANELS_SAMPLES.CHART", respArg: "COUT" });
|
||||
setChart(pv => ({ ...pv, loaded: true, ...chart.XCHART }));
|
||||
}, [executeStored]);
|
||||
|
||||
//Отработка нажатия на график
|
||||
const handleChartClick = ({ item }) => {
|
||||
console.log(item);
|
||||
pOnlineShowUnit({
|
||||
unitCode: "Contracts",
|
||||
inputParameters: [{ name: item.SCOND, value: item.SCOND_VALUE }]
|
||||
});
|
||||
};
|
||||
|
||||
//При подключении к странице
|
||||
useEffect(() => {
|
||||
loadChart();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div style={STYLES.CONTAINER}>
|
||||
<Typography sx={STYLES.TITLE} variant={"h6"}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Grid container spacing={1} pt={5}>
|
||||
<Grid item xs={1}></Grid>
|
||||
<Grid item xs={10}>
|
||||
<Paper elevation={3} sx={STYLES.CHART_PAPER}>
|
||||
{chart.loaded ? <P8PChart {...chart} onClick={handleChartClick} style={STYLES.CHART} /> : null}
|
||||
</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={1}></Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Пример: Графики "P8PChart"
|
||||
Chart.propTypes = {
|
||||
title: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { Chart };
|
||||
179
app/panels/samples/data_grid.js
Normal file
179
app/panels/samples/data_grid.js
Normal file
@ -0,0 +1,179 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - Примеры для разработчиков
|
||||
Пример: Таблица данных "P8PDataGrid"
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Typography, Grid, Stack, Icon, Box } from "@mui/material"; //Интерфейсные элементы
|
||||
import { object2Base64XML } from "../../core/utils"; //Вспомогательные процедуры и функции
|
||||
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
|
||||
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||||
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Размер страницы данных
|
||||
const DATA_GRID_PAGE_SIZE = 5;
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||||
TITLE: { paddingBottom: "15px" }
|
||||
};
|
||||
|
||||
//---------------------------------------------
|
||||
//Вспомогательные функции форматирования данных
|
||||
//---------------------------------------------
|
||||
|
||||
//Формирование значения для колонки "Тип контрагента"
|
||||
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" }
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Пример: Таблица данных "P8PDataGrid"
|
||||
const DataGrid = ({ title }) => {
|
||||
//Собственное состояние - таблица данных
|
||||
const [dataGrid, setdataGrid] = useState({
|
||||
dataLoaded: false,
|
||||
columnsDef: [],
|
||||
filters: null,
|
||||
orders: null,
|
||||
rows: [],
|
||||
reload: true,
|
||||
pageNumber: 1,
|
||||
morePages: true
|
||||
});
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored, SERV_DATA_TYPE_CLOB } = useContext(BackEndСtx);
|
||||
|
||||
//Загрузка данных таблицы с сервера
|
||||
const loadData = useCallback(async () => {
|
||||
if (dataGrid.reload) {
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_SAMPLES.DATA_GRID",
|
||||
args: {
|
||||
CFILTERS: { VALUE: object2Base64XML(dataGrid.filters, { arrayNodeName: "filters" }), SDATA_TYPE: SERV_DATA_TYPE_CLOB },
|
||||
CORDERS: { VALUE: object2Base64XML(dataGrid.orders, { arrayNodeName: "orders" }), SDATA_TYPE: SERV_DATA_TYPE_CLOB },
|
||||
NPAGE_NUMBER: dataGrid.pageNumber,
|
||||
NPAGE_SIZE: DATA_GRID_PAGE_SIZE,
|
||||
NINCLUDE_DEF: dataGrid.dataLoaded ? 0 : 1
|
||||
},
|
||||
respArg: "COUT"
|
||||
});
|
||||
setdataGrid(pv => ({
|
||||
...pv,
|
||||
columnsDef: data.XCOLUMNS_DEF ? [...data.XCOLUMNS_DEF] : pv.columnsDef,
|
||||
rows: pv.pageNumber == 1 ? [...(data.XROWS || [])] : [...pv.rows, ...(data.XROWS || [])],
|
||||
dataLoaded: true,
|
||||
reload: false,
|
||||
morePages: (data.XROWS || []).length >= DATA_GRID_PAGE_SIZE
|
||||
}));
|
||||
}
|
||||
}, [dataGrid.reload, dataGrid.filters, dataGrid.orders, dataGrid.dataLoaded, dataGrid.pageNumber, executeStored, SERV_DATA_TYPE_CLOB]);
|
||||
|
||||
//При изменении состояния фильтра
|
||||
const handleFilterChanged = ({ filters }) => setdataGrid(pv => ({ ...pv, filters: [...filters], pageNumber: 1, reload: true }));
|
||||
|
||||
//При изменении состояния сортировки
|
||||
const handleOrderChanged = ({ orders }) => setdataGrid(pv => ({ ...pv, orders: [...orders], pageNumber: 1, reload: true }));
|
||||
|
||||
//При изменении количества отображаемых страниц
|
||||
const handlePagesCountChanged = () => setdataGrid(pv => ({ ...pv, pageNumber: pv.pageNumber + 1, reload: true }));
|
||||
|
||||
//При необходимости обновить данные таблицы
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [dataGrid.reload, loadData]);
|
||||
|
||||
//Генерация содержимого
|
||||
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}>
|
||||
{dataGrid.dataLoaded ? (
|
||||
<P8PDataGrid
|
||||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||||
columnsDef={dataGrid.columnsDef}
|
||||
rows={dataGrid.rows}
|
||||
size={P8P_DATA_GRID_SIZE.LARGE}
|
||||
filtersInitial={dataGrid.filters}
|
||||
morePages={dataGrid.morePages}
|
||||
reloading={dataGrid.reload}
|
||||
valueFormatter={valueFormatter}
|
||||
headCellRender={headCellRender}
|
||||
dataCellRender={dataCellRender}
|
||||
onOrderChanged={handleOrderChanged}
|
||||
onFilterChanged={handleFilterChanged}
|
||||
onPagesCountChanged={handlePagesCountChanged}
|
||||
/>
|
||||
) : null}
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Пример: Таблица данных "P8PDataGrid"
|
||||
DataGrid.propTypes = {
|
||||
title: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { DataGrid };
|
||||
@ -14,6 +14,8 @@ import { P8Online } from "./p8online"; //Пример: API для взаимод
|
||||
import { Mui } from "./mui"; //Пример: Компоненты MUI
|
||||
import { Messages } from "./messages"; //Пример: Сообщения
|
||||
import { Loader } from "./loader"; //Пример: Индикатор процесса
|
||||
import { DataGrid } from "./data_grid"; //Пример: Таблица данных "P8PDataGrid"
|
||||
import { Chart } from "./chart"; //Пример: Графики "P8PChart"
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
@ -24,7 +26,9 @@ const MODES = {
|
||||
P8ONLINE: { name: "P8ONLINE", caption: 'API для взаимодействия с "ПАРУС 8 Онлайн"', component: P8Online },
|
||||
MUI: { name: "MUI", caption: "Компоненты MUI", component: Mui },
|
||||
MESSAGES: { name: "MESSAGES", caption: "Сообщения", component: Messages },
|
||||
LOADER: { name: "LOADER", caption: "Индикатор процесса", component: Loader }
|
||||
LOADER: { name: "LOADER", caption: "Индикатор процесса", component: Loader },
|
||||
DATAGRID: { name: "DATAGRID", caption: 'Таблица данных "P8PDataGrid"', component: DataGrid },
|
||||
CHART: { name: "CHART", caption: 'Графики "P8PChart"', component: Chart }
|
||||
};
|
||||
|
||||
//Стили
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user