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

feat: add pagination for runs

Browse Source
This commit is contained in:
Rohit
2025-01-29 22:54:22 +05:30
parent 47a82fd30e
commit b8d43216e7
1 changed files with 102 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,6 +86,8 @@ export const RunsTable: React.FC<RunsTableProps> = ({
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const [accordionPage, setAccordionPage] = useState(0);
const [accordionsPerPage, setAccordionsPerPage] = useState(10);
const [accordionSortConfigs, setAccordionSortConfigs] = useState<AccordionSortConfig>({}); const [accordionSortConfigs, setAccordionSortConfigs] = useState<AccordionSortConfig>({});
const handleSort = useCallback((columnId: keyof Data, robotMetaId: string) => { const handleSort = useCallback((columnId: keyof Data, robotMetaId: string) => {
@@ -114,8 +116,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
[t] [t]
); );
// const [page, setPage] = useState(0);
// const [rowsPerPage, setRowsPerPage] = useState(10);
const [rows, setRows] = useState<Data[]>([]); const [rows, setRows] = useState<Data[]>([]);
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@@ -128,6 +128,15 @@ export const RunsTable: React.FC<RunsTableProps> = ({
navigate(isExpanded ? `/runs/${robotMetaId}` : '/runs'); navigate(isExpanded ? `/runs/${robotMetaId}` : '/runs');
}, [navigate]); }, [navigate]);
const handleAccordionPageChange = useCallback((event: unknown, newPage: number) => {
setAccordionPage(newPage);
}, []);
const handleAccordionsPerPageChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
setAccordionsPerPage(+event.target.value);
setAccordionPage(0);
}, []);
const handleChangePage = useCallback((robotMetaId: string, newPage: number) => { const handleChangePage = useCallback((robotMetaId: string, newPage: number) => {
setPaginationStates(prev => ({ setPaginationStates(prev => ({
...prev, ...prev,
@@ -174,6 +183,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => { const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
const debouncedSetSearch = debouncedSearch((value: string) => { const debouncedSetSearch = debouncedSearch((value: string) => {
setSearchTerm(value); setSearchTerm(value);
setAccordionPage(0);
setPaginationStates(prev => { setPaginationStates(prev => {
const reset = Object.keys(prev).reduce((acc, robotId) => ({ const reset = Object.keys(prev).reduce((acc, robotId) => ({
...acc, ...acc,
@@ -347,86 +357,101 @@ export const RunsTable: React.FC<RunsTableProps> = ({
</Box> </Box>
<TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}> <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
{Object.entries(groupedRows).map(([robotMetaId, data]) => ( {Object.entries(groupedRows)
<Accordion .slice(
key={robotMetaId} accordionPage * accordionsPerPage,
onChange={(event, isExpanded) => handleAccordionChange(robotMetaId, isExpanded)} accordionPage * accordionsPerPage + accordionsPerPage
TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering )
> .map(([robotMetaId, data]) => (
<AccordionSummary expandIcon={<ExpandMoreIcon />}> <Accordion
<Typography variant="h6">{data[data.length - 1].name}</Typography> key={robotMetaId}
</AccordionSummary> onChange={(event, isExpanded) => handleAccordionChange(robotMetaId, isExpanded)}
<AccordionDetails> TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering
<Table stickyHeader aria-label="sticky table"> >
<TableHead> <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<TableRow> <Typography variant="h6">{data[data.length - 1].name}</Typography>
<TableCell /> </AccordionSummary>
{translatedColumns.map((column) => ( <AccordionDetails>
<TableCell <Table stickyHeader aria-label="sticky table">
key={column.id} <TableHead>
align={column.align} <TableRow>
style={{ <TableCell />
minWidth: column.minWidth, {translatedColumns.map((column) => (
cursor: column.id === 'startedAt' || column.id === 'finishedAt' ? 'pointer' : 'default' <TableCell
}} key={column.id}
onClick={() => { align={column.align}
if (column.id === 'startedAt' || column.id === 'finishedAt') { style={{
handleSort(column.id, robotMetaId); minWidth: column.minWidth,
} cursor: column.id === 'startedAt' || column.id === 'finishedAt' ? 'pointer' : 'default'
}} }}
> onClick={() => {
<Tooltip if (column.id === 'startedAt' || column.id === 'finishedAt') {
title={ handleSort(column.id, robotMetaId);
(column.id === 'startedAt' || column.id === 'finishedAt')
? t('runstable.sort_tooltip')
: ''
}
>
<Box sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
'&:hover': {
'& .sort-icon': {
opacity: 1
}
} }
}}> }}
{column.label} >
<Box className="sort-icon" sx={{ <Tooltip
display: 'flex', title={
alignItems: 'center', (column.id === 'startedAt' || column.id === 'finishedAt')
opacity: accordionSortConfigs[robotMetaId]?.field === column.id ? 1 : 0.3, ? t('runstable.sort_tooltip')
transition: 'opacity 0.2s' : ''
}
>
<Box sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
'&:hover': {
'& .sort-icon': {
opacity: 1
}
}
}}> }}>
{renderSortIcon(column, robotMetaId)} {column.label}
<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> </Box>
</Box> </Tooltip>
</Tooltip> </TableCell>
</TableCell> ))}
))} </TableRow>
</TableRow> </TableHead>
</TableHead> <TableBody>
<TableBody> {renderTableRows(data, robotMetaId)}
{renderTableRows(data, robotMetaId)} </TableBody>
</TableBody> </Table>
</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
component="div"
count={Object.keys(groupedRows).length}
page={accordionPage}
rowsPerPage={accordionsPerPage}
onPageChange={handleAccordionPageChange}
onRowsPerPageChange={handleAccordionsPerPageChange}
rowsPerPageOptions={[10, 25, 50, 100]}
/>
</React.Fragment> </React.Fragment>
); );
}; };