davay-popozhe/P8-Panels
1
0
Fork 0
forked from CITKParus/P8-Panels
Code Issues Pull Requests Projects Releases Wiki Activity

WEBAPP: P8PDataGrid - необязательность для columnsDef, rows, значение по умолчанию для groups (так можно упрощать state в верхнеуровневых компонентах)

Browse Source
This commit is contained in:
Mikhail Chechnev 2025-02-14 14:09:36 +03:00
parent 852abd5482
commit 6d10f6258b
4 changed files with 24 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@ -1291,10 +1291,10 @@ const MyPanel = () => {
**Свойства** **Свойства**
`columnsDef` - обязательный, массив, описание колонок таблицы, содержит объекты вида `{caption: <ЗАГОЛОВОК_КОЛОНКИ>, dataType: <ТИП_ДАННЫХ - NUMB|STR|DATE>, filter: <ПРИЗНАК_ВОЗМОЖНОСТИ_ОТБОРА - true|false>, hint: <ОПИСАНИЕ_КОЛОНКИ_МОЖЕТ_СОДЕРЖАТЬ_HTML_РАЗМЕТКУ>, name: <НАИМЕНОВАНИЕ_КОЛОНКИ>, order: <ПРИЗНАК_ВОЗМОЖНОСТИ_СОРТИРОВКИ - true|false>, values: <МАССИВ_ПРЕДОПРЕДЕЛЁННЫХ_ЗНАЧЕНИЙ>, visible: <ПРИЗНАК_ВИДИМОСТИ_КОЛОНКИ - true|false>,expandable: <ПРИЗНАК_РАЗВОРАЧИВАЕМОСТИ_ГРУППОВОГО_ЗАГОЛОВКА - true|false>, expanded: <ПРИЗНАК_РАЗВЕРНУТОСТИ_ГРУППОВОГО_ЗАГОЛОВКА - true|false>, parent: <НАИМЕНОВАНИЕ_РОДИТЕЛЬСКОЙ_КОЛОНКИ_В_ГРУППОВОМ_ЗАГОЛОВКЕ>, width: <ШИРИНА_КОЛОНКИ>}`\ `columnsDef` - необязательный, массив, описание колонок таблицы, содержит объекты вида `{caption: <ЗАГОЛОВОК_КОЛОНКИ>, dataType: <ТИП_ДАННЫХ - NUMB|STR|DATE>, filter: <ПРИЗНАК_ВОЗМОЖНОСТИ_ОТБОРА - true|false>, hint: <ОПИСАНИЕ_КОЛОНКИ_МОЖЕТ_СОДЕРЖАТЬ_HTML_РАЗМЕТКУ>, name: <НАИМЕНОВАНИЕ_КОЛОНКИ>, order: <ПРИЗНАК_ВОЗМОЖНОСТИ_СОРТИРОВКИ - true|false>, values: <МАССИВ_ПРЕДОПРЕДЕЛЁННЫХ_ЗНАЧЕНИЙ>, visible: <ПРИЗНАК_ВИДИМОСТИ_КОЛОНКИ - true|false>,expandable: <ПРИЗНАК_РАЗВОРАЧИВАЕМОСТИ_ГРУППОВОГО_ЗАГОЛОВКА - true|false>, expanded: <ПРИЗНАК_РАЗВЕРНУТОСТИ_ГРУППОВОГО_ЗАГОЛОВКА - true|false>, parent: <НАИМЕНОВАНИЕ_РОДИТЕЛЬСКОЙ_КОЛОНКИ_В_ГРУППОВОМ_ЗАГОЛОВКЕ>, width: <ШИРИНА_КОЛОНКИ>}`\
`filtersInitial` - необязательныей, массив, начальное состояние фильтров таблицы, содержит объекты вида `{name: <НАИМЕНОВАНИЕ_КОЛОНКИ>, from: <НАЧАЛО_ДИАПАЗОНА_ЗНАЧЕНИЙ_ФИЛЬТРА>, to: <ОКОНЧАНИЕ_ДИАПАЗОНА_ЗНАЧЕНИЙ_ФИЛЬТРА>}`\ `filtersInitial` - необязательныей, массив, начальное состояние фильтров таблицы, содержит объекты вида `{name: <НАИМЕНОВАНИЕ_КОЛОНКИ>, from: <НАЧАЛО_ДИАПАЗОНА_ЗНАЧЕНИЙ_ФИЛЬТРА>, to: <ОКОНЧАНИЕ_ДИАПАЗОНА_ЗНАЧЕНИЙ_ФИЛЬТРА>}`\
`groups` - необязательный, массив групп данных, содержит объекты вида `{name: <ИМЯ_ГРУППЫ>, caption: <ЗАГОЛОВОК_ГРУППЫ>, expandable: <ПРИЗНАК_РАЗВОРАЧИВАЕМОСТИ_ГРУППЫ - true|false>, expanded: <ПРИЗНАК_РАЗВЕРНУТОСТИ_ГРУППЫ - true|false>}`\ `groups` - необязательный, массив групп данных, содержит объекты вида `{name: <ИМЯ_ГРУППЫ>, caption: <ЗАГОЛОВОК_ГРУППЫ>, expandable: <ПРИЗНАК_РАЗВОРАЧИВАЕМОСТИ_ГРУППЫ - true|false>, expanded: <ПРИЗНАК_РАЗВЕРНУТОСТИ_ГРУППЫ - true|false>}`\
`rows` - обязательный, массив, отображаемые таблицой строки данных, содержит объекты вида `{groupName: <ИМЯ_ГРУППЫ_СОДЕРЖАЩЕЙ_СТРОКУ>, <ИМЯ_КОЛОНКИ>: <ЗНАЧЕНИЕ>}`\ `rows` - необязательный, массив, отображаемые таблицой строки данных, содержит объекты вида `{groupName: <ИМЯ_ГРУППЫ_СОДЕРЖАЩЕЙ_СТРОКУ>, <ИМЯ_КОЛОНКИ>: <ЗНАЧЕНИЕ>}`\
`size` - необязательный, строка, размер отступов при вёрстке таблицы, `small|medium` (см. константу `P8P_DATA_GRID_SIZE` в исходном коде компонента)\ `size` - необязательный, строка, размер отступов при вёрстке таблицы, `small|medium` (см. константу `P8P_DATA_GRID_SIZE` в исходном коде компонента)\
`fixedHeader` - необязательный, логический, признак фиксации заголовка таблицы, по умолчанию - `false`\ `fixedHeader` - необязательный, логический, признак фиксации заголовка таблицы, по умолчанию - `false`\
`fixedColumns` - необязательный, число, количество фиксированных колонок слева, по умолчанию - 0\ `fixedColumns` - необязательный, число, количество фиксированных колонок слева, по умолчанию - 0\
@ -1635,16 +1635,12 @@ const DataGrid = ({ title }) => {
//Собственное состояние - таблица данных //Собственное состояние - таблица данных
const [dataGrid, setDataGrid] = useState({ const [dataGrid, setDataGrid] = useState({
dataLoaded: false, dataLoaded: false,
columnsDef: [],
filters: null, filters: null,
orders: null, orders: null,
groups: [],
rows: [],
reloading: true,
pageNumber: 1, pageNumber: 1,
morePages: true, morePages: true,
fixedHeader: false, expandable: true,
fixedColumns: 0 reloading: true
}); });
//Подключение к контексту взаимодействия с сервером //Подключение к контексту взаимодействия с сервером
@ -1670,13 +1666,13 @@ const DataGrid = ({ title }) => {
setDataGrid(pv => ({ setDataGrid(pv => ({
...pv, ...pv,
...data.XDATA_GRID, ...data.XDATA_GRID,
columnsDef: data.XDATA_GRID.columnsDef ? [...data.XDATA_GRID.columnsDef] : pv.columnsDef, columnsDef: data.XDATA_GRID.columnsDef ? [...data.XDATA_GRID.columnsDef] : pv.columnsDef || [],
rows: pv.pageNumber == 1 ? [...(data.XDATA_GRID.rows || [])] : [...pv.rows, ...(data.XDATA_GRID.rows || [])], rows: pv.pageNumber == 1 ? [...(data.XDATA_GRID.rows || [])] : [...(pv.rows || []), ...(data.XDATA_GRID.rows || [])],
groups: data.XDATA_GRID.groups groups: data.XDATA_GRID.groups
? pv.pageNumber == 1 ? pv.pageNumber == 1
? [...data.XDATA_GRID.groups] ? [...data.XDATA_GRID.groups]
: [...pv.groups, ...data.XDATA_GRID.groups.filter(g => !pv.groups.find(pg => pg.name == g.name))] : [...(pv.groups || []), ...data.XDATA_GRID.groups.filter(g => !pv.groups.find(pg => pg.name == g.name))]
: [...pv.groups], : [...(pv.groups || [])],
dataLoaded: true, dataLoaded: true,
reloading: false, reloading: false,
morePages: (data.XDATA_GRID.rows || []).length >= DATA_GRID_PAGE_SIZE morePages: (data.XDATA_GRID.rows || []).length >= DATA_GRID_PAGE_SIZE
@ -1713,9 +1709,9 @@ const DataGrid = ({ title }) => {
{dataGrid.dataLoaded ? ( {dataGrid.dataLoaded ? (
<P8PDataGrid <P8PDataGrid
{...P8P_DATA_GRID_CONFIG_PROPS} {...P8P_DATA_GRID_CONFIG_PROPS}
containerComponentProps={{ elevation: 6, style: STYLES.DATA_GRID_CONTAINER }}
{...dataGrid} {...dataGrid}
size={P8P_DATA_GRID_SIZE.LARGE} size={P8P_DATA_GRID_SIZE.LARGE}
containerComponentProps={{ elevation: 6, style: STYLES.DATA_GRID_CONTAINER }}
valueFormatter={valueFormatter} valueFormatter={valueFormatter}
headCellRender={headCellRender} headCellRender={headCellRender}
dataCellRender={dataCellRender} dataCellRender={dataCellRender}
@ -1723,7 +1719,6 @@ const DataGrid = ({ title }) => {
onOrderChanged={handleOrderChanged} onOrderChanged={handleOrderChanged}
onFilterChanged={handleFilterChanged} onFilterChanged={handleFilterChanged}
onPagesCountChanged={handlePagesCountChanged} onPagesCountChanged={handlePagesCountChanged}
expandable={true}
rowExpandRender={({ row }) => ( rowExpandRender={({ row }) => (
<Button onClick={() => handleAgnButtonClicked(row.SAGNABBR)}>Показать в разделе</Button> <Button onClick={() => handleAgnButtonClicked(row.SAGNABBR)}>Показать в разделе</Button>
)} )}

10
app/components/p8p_data_grid.js
View File

@ -36,10 +36,10 @@ const P8P_DATA_GRID_FILTERS_HEIGHT = P8P_TABLE_FILTERS_HEIGHT;
//Таблица данных //Таблица данных
const P8PDataGrid = ({ const P8PDataGrid = ({
columnsDef, columnsDef = [],
filtersInitial, filtersInitial,
groups, groups = [],
rows, rows = [],
size, size,
fixedHeader = false, fixedHeader = false,
fixedColumns = 0, fixedColumns = 0,
@ -154,10 +154,10 @@ const P8PDataGrid = ({
//Контроль свойств - Таблица данных //Контроль свойств - Таблица данных
P8PDataGrid.propTypes = { P8PDataGrid.propTypes = {
columnsDef: PropTypes.array.isRequired, columnsDef: PropTypes.array,
filtersInitial: PropTypes.arrayOf(P8P_DATA_GRID_FILTER_SHAPE), filtersInitial: PropTypes.arrayOf(P8P_DATA_GRID_FILTER_SHAPE),
groups: PropTypes.array, groups: PropTypes.array,
rows: PropTypes.array.isRequired, rows: PropTypes.array,
size: PropTypes.string, size: PropTypes.string,
fixedHeader: PropTypes.bool, fixedHeader: PropTypes.bool,
fixedColumns: PropTypes.number, fixedColumns: PropTypes.number,

6
app/components/p8p_table.js
View File

@ -488,9 +488,9 @@ P8PTableFiltersChips.propTypes = {
//Таблица //Таблица
const P8PTable = ({ const P8PTable = ({
columnsDef, columnsDef = [],
groups, groups = [],
rows, rows = [],
orders, orders,
filters, filters,
size, size,

19
app/panels/samples/data_grid.js
View File

@ -89,16 +89,12 @@ const DataGrid = ({ title }) => {
//Собственное состояние - таблица данных //Собственное состояние - таблица данных
const [dataGrid, setDataGrid] = useState({ const [dataGrid, setDataGrid] = useState({
dataLoaded: false, dataLoaded: false,
columnsDef: [],
filters: null, filters: null,
orders: null, orders: null,
groups: [],
rows: [],
reloading: true,
pageNumber: 1, pageNumber: 1,
morePages: true, morePages: true,
fixedHeader: false, expandable: true,
fixedColumns: 0 reloading: true
}); });
//Подключение к контексту взаимодействия с сервером //Подключение к контексту взаимодействия с сервером
@ -124,13 +120,13 @@ const DataGrid = ({ title }) => {
setDataGrid(pv => ({ setDataGrid(pv => ({
...pv, ...pv,
...data.XDATA_GRID, ...data.XDATA_GRID,
columnsDef: data.XDATA_GRID.columnsDef ? [...data.XDATA_GRID.columnsDef] : pv.columnsDef, columnsDef: data.XDATA_GRID.columnsDef ? [...data.XDATA_GRID.columnsDef] : pv.columnsDef || [],
rows: pv.pageNumber == 1 ? [...(data.XDATA_GRID.rows || [])] : [...pv.rows, ...(data.XDATA_GRID.rows || [])], rows: pv.pageNumber == 1 ? [...(data.XDATA_GRID.rows || [])] : [...(pv.rows || []), ...(data.XDATA_GRID.rows || [])],
groups: data.XDATA_GRID.groups groups: data.XDATA_GRID.groups
? pv.pageNumber == 1 ? pv.pageNumber == 1
? [...data.XDATA_GRID.groups] ? [...data.XDATA_GRID.groups]
: [...pv.groups, ...data.XDATA_GRID.groups.filter(g => !pv.groups.find(pg => pg.name == g.name))] : [...(pv.groups || []), ...data.XDATA_GRID.groups.filter(g => !pv.groups.find(pg => pg.name == g.name))]
: [...pv.groups], : [...(pv.groups || [])],
dataLoaded: true, dataLoaded: true,
reloading: false, reloading: false,
morePages: (data.XDATA_GRID.rows || []).length >= DATA_GRID_PAGE_SIZE morePages: (data.XDATA_GRID.rows || []).length >= DATA_GRID_PAGE_SIZE
@ -167,9 +163,9 @@ const DataGrid = ({ title }) => {
{dataGrid.dataLoaded ? ( {dataGrid.dataLoaded ? (
<P8PDataGrid <P8PDataGrid
{...P8P_DATA_GRID_CONFIG_PROPS} {...P8P_DATA_GRID_CONFIG_PROPS}
containerComponentProps={{ elevation: 6, sx: STYLES.DATA_GRID_CONTAINER }}
{...dataGrid} {...dataGrid}
size={P8P_DATA_GRID_SIZE.LARGE} size={P8P_DATA_GRID_SIZE.LARGE}
containerComponentProps={{ elevation: 6, sx: STYLES.DATA_GRID_CONTAINER }}
valueFormatter={valueFormatter} valueFormatter={valueFormatter}
headCellRender={headCellRender} headCellRender={headCellRender}
dataCellRender={dataCellRender} dataCellRender={dataCellRender}
@ -177,7 +173,6 @@ const DataGrid = ({ title }) => {
onOrderChanged={handleOrderChanged} onOrderChanged={handleOrderChanged}
onFilterChanged={handleFilterChanged} onFilterChanged={handleFilterChanged}
onPagesCountChanged={handlePagesCountChanged} onPagesCountChanged={handlePagesCountChanged}
expandable={true}
rowExpandRender={({ row }) => ( rowExpandRender={({ row }) => (
<Button onClick={() => handleAgnButtonClicked(row.SAGNABBR)}>Показать в разделе</Button> <Button onClick={() => handleAgnButtonClicked(row.SAGNABBR)}>Показать в разделе</Button>
)} )}