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 { Mui } from "./mui"; //Пример: Компоненты MUI
|
||||||
import { Messages } from "./messages"; //Пример: Сообщения
|
import { Messages } from "./messages"; //Пример: Сообщения
|
||||||
import { Loader } from "./loader"; //Пример: Индикатор процесса
|
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 },
|
P8ONLINE: { name: "P8ONLINE", caption: 'API для взаимодействия с "ПАРУС 8 Онлайн"', component: P8Online },
|
||||||
MUI: { name: "MUI", caption: "Компоненты MUI", component: Mui },
|
MUI: { name: "MUI", caption: "Компоненты MUI", component: Mui },
|
||||||
MESSAGES: { name: "MESSAGES", caption: "Сообщения", component: Messages },
|
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