vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add runs table ui message

Browse Source
This commit is contained in:
Rohit Rajan
2025-08-29 19:28:01 +05:30
parent 4b68efb05b
commit 8ad576967e
1 changed files with 119 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
src/components/run/RunsTable.tsx
View File

@@ -378,102 +378,128 @@ export const RunsTable: React.FC<RunsTableProps> = ({
/> />
</Box> </Box>
<TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}> {Object.keys(groupedRows).length === 0 ? (
{Object.entries(groupedRows) <Box
.slice( display="flex"
accordionPage * accordionsPerPage, flexDirection="column"
accordionPage * accordionsPerPage + accordionsPerPage alignItems="center"
) justifyContent="center"
.map(([robotMetaId, data]) => ( sx={{
<Accordion minHeight: 300,
key={robotMetaId} textAlign: 'center',
onChange={(event, isExpanded) => handleAccordionChange(robotMetaId, isExpanded)} color: 'text.secondary'
TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering }}
> >
<AccordionSummary expandIcon={<ExpandMoreIcon />}> <Typography variant="h6" gutterBottom>
<Typography variant="h6">{data[0].name}</Typography> {searchTerm ? t('runstable.placeholder.search') : t('runstable.placeholder.title')}
</AccordionSummary> </Typography>
<AccordionDetails> <Typography variant="body2" color="text.secondary">
<Table stickyHeader aria-label="sticky table"> {searchTerm
<TableHead> ? t('recordingtable.search_criteria')
<TableRow> : t('runstable.placeholder.body')
<TableCell /> }
{translatedColumns.map((column) => ( </Typography>
<TableCell </Box>
key={column.id} ) : (
align={column.align} <>
style={{ <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
minWidth: column.minWidth, {Object.entries(groupedRows)
cursor: column.id === 'startedAt' || column.id === 'finishedAt' ? 'pointer' : 'default' .slice(
}} accordionPage * accordionsPerPage,
onClick={() => { accordionPage * accordionsPerPage + accordionsPerPage
if (column.id === 'startedAt' || column.id === 'finishedAt') { )
handleSort(column.id, robotMetaId); .map(([robotMetaId, data]) => (
} <Accordion
}} key={robotMetaId}
> onChange={(event, isExpanded) => handleAccordionChange(robotMetaId, isExpanded)}
<Tooltip TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering
title={ >
(column.id === 'startedAt' || column.id === 'finishedAt') <AccordionSummary expandIcon={<ExpandMoreIcon />}>
? t('runstable.sort_tooltip') <Typography variant="h6">{data[0].name}</Typography>
: '' </AccordionSummary>
} <AccordionDetails>
> <Table stickyHeader aria-label="sticky table">
<Box sx={{ <TableHead>
display: 'flex', <TableRow>
alignItems: 'center', <TableCell />
gap: 1, {translatedColumns.map((column) => (
'&:hover': { <TableCell
'& .sort-icon': { key={column.id}
opacity: 1 align={column.align}
style={{
minWidth: column.minWidth,
cursor: column.id === 'startedAt' || column.id === 'finishedAt' ? 'pointer' : 'default'
}}
onClick={() => {
if (column.id === 'startedAt' || column.id === 'finishedAt') {
handleSort(column.id, robotMetaId);
} }
} }}
}}> >
{column.label} <Tooltip
<Box className="sort-icon" sx={{ title={
display: 'flex', (column.id === 'startedAt' || column.id === 'finishedAt')
alignItems: 'center', ? t('runstable.sort_tooltip')
opacity: accordionSortConfigs[robotMetaId]?.field === column.id ? 1 : 0.3, : ''
transition: 'opacity 0.2s' }
}}> >
{renderSortIcon(column, robotMetaId)} <Box sx={{
</Box> display: 'flex',
</Box> alignItems: 'center',
</Tooltip> gap: 1,
</TableCell> '&:hover': {
))} '& .sort-icon': {
</TableRow> opacity: 1
</TableHead> }
<TableBody> }
{renderTableRows(data, robotMetaId)} }}>
</TableBody> {column.label}
</Table> <Box className="sort-icon" sx={{
display: 'flex',
alignItems: 'center',
opacity: accordionSortConfigs[robotMetaId]?.field === column.id ? 1 : 0.3,
transition: 'opacity 0.2s'
}}>
{renderSortIcon(column, robotMetaId)}
</Box>
</Box>
</Tooltip>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{renderTableRows(data, robotMetaId)}
</TableBody>
</Table>
<TablePagination <TablePagination
component="div" component="div"
count={data.length} count={data.length}
rowsPerPage={getPaginationState(robotMetaId).rowsPerPage} rowsPerPage={getPaginationState(robotMetaId).rowsPerPage}
page={getPaginationState(robotMetaId).page} page={getPaginationState(robotMetaId).page}
onPageChange={(_, newPage) => handleChangePage(robotMetaId, newPage)} onPageChange={(_, newPage) => handleChangePage(robotMetaId, newPage)}
onRowsPerPageChange={(event) => onRowsPerPageChange={(event) =>
handleChangeRowsPerPage(robotMetaId, +event.target.value) handleChangeRowsPerPage(robotMetaId, +event.target.value)
} }
rowsPerPageOptions={[10, 25, 50, 100]} rowsPerPageOptions={[10, 25, 50, 100]}
/> />
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
))} ))}
</TableContainer> </TableContainer>
<TablePagination <TablePagination
component="div" component="div"
count={Object.keys(groupedRows).length} count={Object.keys(groupedRows).length}
page={accordionPage} page={accordionPage}
rowsPerPage={accordionsPerPage} rowsPerPage={accordionsPerPage}
onPageChange={handleAccordionPageChange} onPageChange={handleAccordionPageChange}
onRowsPerPageChange={handleAccordionsPerPageChange} onRowsPerPageChange={handleAccordionsPerPageChange}
rowsPerPageOptions={[10, 25, 50, 100]} rowsPerPageOptions={[10, 25, 50, 100]}
/> />
</>
)}
</React.Fragment> </React.Fragment>
); );
}; };