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

2025-02-14 14:09:36 +03:00 · 2025-02-14 14:09:36 +03:00 · 6d10f6258b
commit 6d10f6258b
parent 852abd5482
4 changed files with 24 additions and 34 deletions
--- a/README.md
+++ b/README.md
@ -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: <ОКОНЧАНИЕ_ДИАПАЗОНА_ЗНАЧЕНИЙ_ФИЛЬТРА>}`\
 `groups` - необязательный, массив групп данных, содержит объекты вида `{name: <ИМЯ_ГРУППЫ>, caption: <ЗАГОЛОВОК_ГРУППЫ>, expandable: <ПРИЗНАК_РАЗВОРАЧИВАЕМОСТИ_ГРУППЫ - true|false>, expanded: <ПРИЗНАК_РАЗВЕРНУТОСТИ_ГРУППЫ - true|false>}`\
-`rows` - обязательный, массив, отображаемые таблицой строки данных, содержит объекты вида `{groupName: <ИМЯ_ГРУППЫ_СОДЕРЖАЩЕЙ_СТРОКУ>, <ИМЯ_КОЛОНКИ>: <ЗНАЧЕНИЕ>}`\
+`rows` - необязательный, массив, отображаемые таблицой строки данных, содержит объекты вида `{groupName: <ИМЯ_ГРУППЫ_СОДЕРЖАЩЕЙ_СТРОКУ>, <ИМЯ_КОЛОНКИ>: <ЗНАЧЕНИЕ>}`\
 `size` - необязательный, строка, размер отступов при вёрстке таблицы, `small|medium` (см. константу `P8P_DATA_GRID_SIZE` в исходном коде компонента)\
 `fixedHeader` - необязательный, логический, признак фиксации заголовка таблицы, по умолчанию - `false`\
 `fixedColumns` - необязательный, число, количество фиксированных колонок слева, по умолчанию - 0\
@ -1635,16 +1635,12 @@ const DataGrid = ({ title }) => {
    //Собственное состояние - таблица данных
    const [dataGrid, setDataGrid] = useState({
        dataLoaded: false,
-        columnsDef: [],
        filters: null,
        orders: null,
-        groups: [],
-        rows: [],
-        reloading: true,
        pageNumber: 1,
        morePages: true,
-        fixedHeader: false,
-        fixedColumns: 0
+        expandable: true,
+        reloading: true
    });

    //Подключение к контексту взаимодействия с сервером
@ -1670,13 +1666,13 @@ const DataGrid = ({ title }) => {
            setDataGrid(pv => ({
                ...pv,
                ...data.XDATA_GRID,
-                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 || [])],
+                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 || [])],
                groups: data.XDATA_GRID.groups
                    ? pv.pageNumber == 1
                        ? [...data.XDATA_GRID.groups]
-                        : [...pv.groups, ...data.XDATA_GRID.groups.filter(g => !pv.groups.find(pg => pg.name == g.name))]
-                    : [...pv.groups],
+                        : [...(pv.groups || []), ...data.XDATA_GRID.groups.filter(g => !pv.groups.find(pg => pg.name == g.name))]
+                    : [...(pv.groups || [])],
                dataLoaded: true,
                reloading: false,
                morePages: (data.XDATA_GRID.rows || []).length >= DATA_GRID_PAGE_SIZE
@ -1713,9 +1709,9 @@ const DataGrid = ({ title }) => {
                        {dataGrid.dataLoaded ? (
                            <P8PDataGrid
                                {...P8P_DATA_GRID_CONFIG_PROPS}
-                                containerComponentProps={{ elevation: 6, style: STYLES.DATA_GRID_CONTAINER }}
                                {...dataGrid}
                                size={P8P_DATA_GRID_SIZE.LARGE}
+                                containerComponentProps={{ elevation: 6, style: STYLES.DATA_GRID_CONTAINER }}
                                valueFormatter={valueFormatter}
                                headCellRender={headCellRender}
                                dataCellRender={dataCellRender}
@ -1723,7 +1719,6 @@ const DataGrid = ({ title }) => {
                                onOrderChanged={handleOrderChanged}
                                onFilterChanged={handleFilterChanged}
                                onPagesCountChanged={handlePagesCountChanged}
-                                expandable={true}
                                rowExpandRender={({ row }) => (
                                    <Button onClick={() => handleAgnButtonClicked(row.SAGNABBR)}>Показать в разделе</Button>
                                )}
--- a/app/components/p8p_data_grid.js
+++ b/app/components/p8p_data_grid.js
@ -36,10 +36,10 @@ const P8P_DATA_GRID_FILTERS_HEIGHT = P8P_TABLE_FILTERS_HEIGHT;

 //Таблица данных
 const P8PDataGrid = ({
-    columnsDef,
+    columnsDef = [],
    filtersInitial,
-    groups,
-    rows,
+    groups = [],
+    rows = [],
    size,
    fixedHeader = false,
    fixedColumns = 0,
@ -154,10 +154,10 @@ const P8PDataGrid = ({

 //Контроль свойств - Таблица данных
 P8PDataGrid.propTypes = {
-    columnsDef: PropTypes.array.isRequired,
+    columnsDef: PropTypes.array,
    filtersInitial: PropTypes.arrayOf(P8P_DATA_GRID_FILTER_SHAPE),
    groups: PropTypes.array,
-    rows: PropTypes.array.isRequired,
+    rows: PropTypes.array,
    size: PropTypes.string,
    fixedHeader: PropTypes.bool,
    fixedColumns: PropTypes.number,
--- a/app/components/p8p_table.js
+++ b/app/components/p8p_table.js
@ -488,9 +488,9 @@ P8PTableFiltersChips.propTypes = {

 //Таблица
 const P8PTable = ({
-    columnsDef,
-    groups,
-    rows,
+    columnsDef = [],
+    groups = [],
+    rows = [],
    orders,
    filters,
    size,
--- a/app/panels/samples/data_grid.js
+++ b/app/panels/samples/data_grid.js
@ -89,16 +89,12 @@ const DataGrid = ({ title }) => {
    //Собственное состояние - таблица данных
    const [dataGrid, setDataGrid] = useState({
        dataLoaded: false,
-        columnsDef: [],
        filters: null,
        orders: null,
-        groups: [],
-        rows: [],
-        reloading: true,
        pageNumber: 1,
        morePages: true,
-        fixedHeader: false,
-        fixedColumns: 0
+        expandable: true,
+        reloading: true
    });

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