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

WEB APP: P8PTable - исправлена ошибка вёрстки сообщения об отсутствии данных

Browse Source
This commit is contained in:
Mikhail Chechnev 2024-05-23 16:16:13 +03:00
parent a494706be5
commit 3883e485dd
1 changed files with 76 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
app/components/p8p_table.js
View File

@ -798,87 +798,85 @@ const P8PTable = ({
))} ))}
</TableHead> </TableHead>
<TableBody> <TableBody>
{rows.length > 0 {rows.length > 0 ? (
? (Array.isArray(groups) && groups.length > 0 ? groups : [{}]).map((group, g) => { (Array.isArray(groups) && groups.length > 0 ? groups : [{}]).map((group, g) => {
const rowsView = rows.map((row, i) => const rowsView = rows.map((row, i) =>
!group?.name || group?.name == row.groupName ? ( !group?.name || group?.name == row.groupName ? (
<React.Fragment key={`data-${i}`}> <React.Fragment key={`data-${i}`}>
<TableRow key={`data-row-${i}`} sx={STYLES.TABLE_ROW}> <TableRow key={`data-row-${i}`} sx={STYLES.TABLE_ROW}>
{expandable && rowExpandRender ? ( {expandable && rowExpandRender ? (
<TableCell <TableCell
key={`data-cell-expand-control-${i}`} key={`data-cell-expand-control-${i}`}
align="center" align="center"
sx={{ sx={{
...STYLES.TABLE_CELL_EXPAND_CONTROL, ...STYLES.TABLE_CELL_EXPAND_CONTROL,
...(fixedColumns ? STYLES.TABLE_CELL_STICKY(theme, 0) : {}) ...(fixedColumns ? STYLES.TABLE_CELL_STICKY(theme, 0) : {})
}} }}
> >
<IconButton onClick={() => handleExpandClick(i)}> <IconButton onClick={() => handleExpandClick(i)}>
<Icon>{expanded[i] === true ? "keyboard_arrow_down" : "keyboard_arrow_right"}</Icon> <Icon>{expanded[i] === true ? "keyboard_arrow_down" : "keyboard_arrow_right"}</Icon>
</IconButton> </IconButton>
</TableCell> </TableCell>
) : null} ) : null}
{header.displayDataColumns.map((columnDef, j) => { {header.displayDataColumns.map((columnDef, j) => {
let customRender = {}; let customRender = {};
if (dataCellRender) customRender = dataCellRender({ row, columnDef }) || {}; if (dataCellRender) customRender = dataCellRender({ row, columnDef }) || {};
return ( return (
<TableCell <TableCell
key={`data-cell-${j}`} key={`data-cell-${j}`}
align={getAlignByDataType(columnDef)} align={getAlignByDataType(columnDef)}
sx={{ sx={{
...(columnDef.width ...(columnDef.width ? { minWidth: columnDef.width, maxWidth: columnDef.width } : {}),
? { minWidth: columnDef.width, maxWidth: columnDef.width } ...(columnDef.fixed ? STYLES.TABLE_CELL_STICKY(theme, columnDef.fixedLeft) : {}),
: {}), ...customRender.cellStyle
...(columnDef.fixed ? STYLES.TABLE_CELL_STICKY(theme, columnDef.fixedLeft) : {}), }}
...customRender.cellStyle {...customRender.cellProps}
}} >
{...customRender.cellProps} {customRender.data
> ? customRender.data
{customRender.data : valueFormatter
? customRender.data ? valueFormatter({ value: row[columnDef.name], columnDef })
: valueFormatter : row[columnDef.name]}
? valueFormatter({ value: row[columnDef.name], columnDef }) </TableCell>
: row[columnDef.name]} );
</TableCell> })}
); </TableRow>
})} {expandable && rowExpandRender && expanded[i] === true ? (
</TableRow> <TableRow key={`data-row-expand-${i}`}>
{expandable && rowExpandRender && expanded[i] === true ? ( <TableCell
<TableRow key={`data-row-expand-${i}`}> sx={{
<TableCell ...STYLES.TABLE_CELL_EXPAND_CONTAINER,
sx={{ ...(fixedColumns ? STYLES.TABLE_CELL_STICKY(theme, 0) : {})
...STYLES.TABLE_CELL_EXPAND_CONTAINER, }}
...(fixedColumns ? STYLES.TABLE_CELL_STICKY(theme, 0) : {}) colSpan={fixedColumns ? header.displayFixedColumnsCount + 1 : header.displayDataColumnsCount}
}} >
colSpan={ {rowExpandRender({ columnsDef, row })}
fixedColumns ? header.displayFixedColumnsCount + 1 : header.displayDataColumnsCount </TableCell>
} </TableRow>
> ) : null}
{rowExpandRender({ columnsDef, row })} </React.Fragment>
</TableCell> ) : null
</TableRow> );
) : null} return !group?.name ? (
</React.Fragment> rowsView
) : null ) : (
); <React.Fragment key={`group-${g}`}>
return !group?.name ? ( <TableRow key={`group-header-${g}`}>{renderGroupCell(group)}</TableRow>
rowsView {!group.expandable || expandedGroups[group.name] === true ? rowsView : null}
) : ( </React.Fragment>
<React.Fragment key={`group-${g}`}> );
<TableRow key={`group-header-${g}`}>{renderGroupCell(group)}</TableRow> })
{!group.expandable || expandedGroups[group.name] === true ? rowsView : null} ) : noDataFoundText && !reloading ? (
</React.Fragment> <TableRow>
); <TableCell colSpan={header.displayDataColumnsCount}>
}) <P8PAppInlineError text={noDataFoundText} />
: null} </TableCell>
</TableRow>
) : null}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
{rows.length == 0 ? ( {morePages ? (
noDataFoundText && !reloading ? (
<P8PAppInlineError text={noDataFoundText} />
) : null
) : morePages ? (
<Container style={STYLES.MORE_BUTTON_CONTAINER}> <Container style={STYLES.MORE_BUTTON_CONTAINER}>
<Button fullWidth onClick={handleMorePagesBtnClick}> <Button fullWidth onClick={handleMorePagesBtnClick}>
{morePagesBtnCaption} {morePagesBtnCaption}