Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RouteReportPage.js added table pagination #1133

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

RouteReportPage.js added table pagination #1133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5ff21a5
RouteReportPage.js added table pagination
Jun 13, 2023
803a63b
Add Show / Hide Functionality to RouteReportPage.js
Jun 13, 2023
dbef170
Merge branch 'traccar:master' into master
kriistiina Jun 13, 2023
837046a
[fix] Pagination active after 1k records;
Jun 14, 2023
6df31a9
Merge remote-tracking branch 'origin/master' into master
Jun 14, 2023
45d52b1
[fix] show all items when less than 1000;
Jun 20, 2023
16d15e3
[fix] Route report using react-virtuoso with Table component;
Jun 21, 2023
549a3f7
[fix] Route report using react-window FizedSizeGrid component;
Jul 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 98 additions & 39 deletions modern/src/reports/RouteReportPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@ import React, { Fragment, useCallback, useState } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import {
IconButton, Table, TableBody, TableCell, TableHead, TableRow,
IconButton, Skeleton,
} from '@mui/material';
import GpsFixedIcon from '@mui/icons-material/GpsFixed';
import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeGrid } from 'react-window';
import ReportFilter from './components/ReportFilter';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
Expand All @@ -19,7 +23,6 @@ import MapRoutePath from '../map/MapRoutePath';
import MapRoutePoints from '../map/MapRoutePoints';
import MapPositions from '../map/MapPositions';
import useReportStyles from './common/useReportStyles';
import TableShimmer from '../common/components/TableShimmer';
import MapCamera from '../map/MapCamera';
import MapGeofence from '../map/MapGeofence';
import scheduleReport from './common/scheduleReport';
Expand All @@ -28,6 +31,10 @@ const RouteReportPage = () => {
const navigate = useNavigate();
const classes = useReportStyles();
const t = useTranslation();
const theme = useTheme();

const phone = useMediaQuery(theme.breakpoints.down('md'));
const desktop = useMediaQuery(theme.breakpoints.up('lg'));

const positionAttributes = usePositionAttributes(t);

Expand Down Expand Up @@ -116,7 +123,7 @@ const RouteReportPage = () => {
<MapCamera positions={items} />
</div>
)}
<div className={classes.containerMain}>
<div className={classes.containerMain} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<div className={classes.header}>
<ReportFilter handleSubmit={handleSubmit} handleSchedule={handleSchedule} multiDevice>
<ColumnSelect
Expand All @@ -128,42 +135,94 @@ const RouteReportPage = () => {
/>
</ReportFilter>
</div>
<Table>
<TableHead>
<TableRow>
<TableCell className={classes.columnAction} />
<TableCell>{t('sharedDevice')}</TableCell>
{columns.map((key) => (<TableCell key={key}>{positionAttributes[key]?.name || key}</TableCell>))}
</TableRow>
</TableHead>
<TableBody>
{!loading ? items.slice(0, 4000).map((item) => (
<TableRow key={item.id}>
<TableCell className={classes.columnAction} padding="none">
{selectedItem === item ? (
<IconButton size="small" onClick={() => setSelectedItem(null)}>
<GpsFixedIcon fontSize="small" />
</IconButton>
) : (
<IconButton size="small" onClick={() => setSelectedItem(item)}>
<LocationSearchingIcon fontSize="small" />
</IconButton>
)}
</TableCell>
<TableCell>{devices[item.deviceId].name}</TableCell>
{columns.map((key) => (
<TableCell key={key}>
<PositionValue
position={item}
property={item.hasOwnProperty(key) ? key : null}
attribute={item.hasOwnProperty(key) ? null : key}
/>
</TableCell>
))}
</TableRow>
)) : (<TableShimmer columns={columns.length + 2} startAction />)}
</TableBody>
</Table>
<div style={{ flex: 1 }}>
<AutoSizer>
{({ height, width }) => (
<FixedSizeGrid
height={height}
width={width}
columnCount={columns.length + 2}
columnWidth={(columns.length + 2) * (width * (phone ? 0.26 : desktop ? 0.1 : 0.18)) >= width ?
width * (phone ? 0.26 : desktop ? 0.1 : 0.18) : width / (columns.length + 2)}
rowCount={items.length > 0 ? items.length : 5}
rowHeight={52}
Comment on lines +144 to +148
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not look right at all. Why are there a million hardcoded numbers and some crazy calculations?

overscanRowCount={20}
>
{({ columnIndex, rowIndex, style }) => {
const item = items[rowIndex];
const columnKey = columns[columnIndex - 2];
return (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The content also doesn't look good. Very hard to understand what's going on.

rowIndex === 0 ?
columnIndex === 0 ?
(
<div className={classes.cellStyle} style={style} />
)
:
columnIndex === 1 ?
(
<div className={classes.cellStyle} style={style}>
<b>{t('sharedDevice')}</b>
</div>
) :
columnIndex < columns.length + 2 ?
(
<div className={classes.cellStyle} style={style}>
<b>{positionAttributes[columnKey]?.name || columnKey}</b>
</div>
)
:
null
:
!loading ?
item ?
columnIndex === 0 ?
(
<div className={`${classes.cellStyle} ${classes.columnAction}`} style={style}>
{selectedItem === item ?
(
<IconButton size="small" onClick={() => setSelectedItem(null)}>
<GpsFixedIcon fontSize="small" />
</IconButton>
)
:
(
<IconButton size="small" onClick={() => setSelectedItem(item)}>
<LocationSearchingIcon fontSize="small" />
</IconButton>
)}
</div>
)
:
columnIndex === 1 ?
(
<div className={classes.cellStyle} style={style}>
{devices[item.deviceId].name}
</div>
)
:
(
<div className={classes.cellStyle} style={style}>
<PositionValue
position={item}
property={item.hasOwnProperty(columnKey) ? columnKey : null}
attribute={item.hasOwnProperty(columnKey) ? null : columnKey}
/>
</div>
)
:
null
:
(
<div className={classes.cellStyle} style={style}>
<Skeleton variant="text" width={width / (columns.length * 1.5)} />
</div>
)
);
}}
</FixedSizeGrid>
)}
</AutoSizer>
</div>
</div>
</div>
</PageLayout>
Expand Down
6 changes: 6 additions & 0 deletions modern/src/reports/common/useReportStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,10 @@ export default makeStyles((theme) => ({
flexGrow: 1,
overflow: 'hidden',
},
cellStyle: {
display: 'flex',
alignItems: 'center',
padding: '5px',
borderBottom: '1px solid lightgrey',
},
}));