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

Jump to bottom

Fix/prevent re-render reports menu #1252

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

Fix/prevent re-render reports menu #1252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f6e1036
Create ReportsLayout
jorgeart81 Jun 28, 2024
d0abec2
Set ReportsLayout in components
jorgeart81 Jun 28, 2024
17ade97
Create reportsPaths
jorgeart81 Jun 29, 2024
8651b8d
Close drawer with breadcrumbs change
jorgeart81 Jun 29, 2024
4a30129
Merge branch 'master' into fix/re-render-reports-menu
jorgeart81 Jun 29, 2024
6d806ad
fix-merge: use itemsCoordinates
jorgeart81 Jun 29, 2024
198e3a6
refactor: reportsPaths
jorgeart81 Jun 29, 2024
395ada3
Split the route into segments
jorgeart81 Jun 29, 2024
498d4c4
refactor: route list
jorgeart81 Jun 30, 2024
9e193e4
feat: Create SettingLayout component
jorgeart81 Jul 1, 2024
4dab79f
Implement SettingsLayout in navigation and settings components
jorgeart81 Jul 1, 2024
4fce3ba
refactor: routes object
jorgeart81 Jul 1, 2024
4b9adbe
refactor: SettingLayout
jorgeart81 Jul 2, 2024
ccbdf35
refactor: SettingsLayout
jorgeart81 Jul 2, 2024
b28e9ba
Merge branch 'master' into fix/re-render-reports-menu
jorgeart81 Jul 2, 2024
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
6 changes: 4 additions & 2 deletions src/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ import LogsPage from './reports/LogsPage';
import SharePage from './settings/SharePage';
import AnnouncementPage from './settings/AnnouncementPage';
import EmulatorPage from './other/EmulatorPage';
import ReportsLayout from './reports/components/ReportsLayout';
import SettingsLayout from './settings/components/SettingsLayout';

const Navigation = () => {
const navigate = useNavigate();
Expand Down Expand Up @@ -112,7 +114,7 @@ const Navigation = () => {
<Route path="geofences" element={<GeofencesPage />} />
<Route path="emulator" element={<EmulatorPage />} />

<Route path="settings">
<Route path="settings" element={<SettingsLayout />}>
<Route path="accumulators/:deviceId" element={<AccumulatorsPage />} />
<Route path="announcement" element={<AnnouncementPage />} />
<Route path="calendars" element={<CalendarsPage />} />
Expand Down Expand Up @@ -154,7 +156,7 @@ const Navigation = () => {
<Route path="user" element={<UserPage />} />
</Route>

<Route path="reports">
<Route path="reports" element={<ReportsLayout />}>
Copy link
Member

Choose a reason for hiding this comment

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

Should we do the same thing for settings?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It seems to me that yes, in the components that have the same design.
It would be necessary to analyze it because I do not see that the state update generated by the socket is rendering the settings menu.

I apologize for any translation errors, my language is Spanish and I am using a translator.

Copy link
Member

Choose a reason for hiding this comment

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

Can you please update settings as well, so we have consistent codebase.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Of course, let me see what I can do.

<Route path="combined" element={<CombinedReportPage />} />
<Route path="chart" element={<ChartReportPage />} />
<Route path="event" element={<EventReportPage />} />
Expand Down
6 changes: 5 additions & 1 deletion src/common/components/PageLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import {
AppBar,
Breadcrumbs,
Expand Down Expand Up @@ -74,6 +74,10 @@ const PageLayout = ({ menu, breadcrumbs, children }) => {

const [openDrawer, setOpenDrawer] = useState(false);

useEffect(() => {
setOpenDrawer(false);
}, [breadcrumbs]);

return desktop ? (
<div className={classes.desktopRoot}>
<Drawer
Expand Down
6 changes: 2 additions & 4 deletions src/reports/ChartReportPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import {
import ReportFilter from './components/ReportFilter';
import { formatTime } from '../common/util/formatter';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
import ReportsMenu from './components/ReportsMenu';
import usePositionAttributes from '../common/attributes/usePositionAttributes';
import { useCatch } from '../reactHelper';
import { useAttributePreference } from '../common/util/preferences';
Expand Down Expand Up @@ -98,7 +96,7 @@ const ChartReportPage = () => {
});

return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportChart']}>
<>
<ReportFilter handleSubmit={handleSubmit} showOnly>
<div className={classes.filterItem}>
<FormControl fullWidth>
Expand Down Expand Up @@ -162,7 +160,7 @@ const ChartReportPage = () => {
</ResponsiveContainer>
</div>
)}
</PageLayout>
</>
);
};

Expand Down
84 changes: 40 additions & 44 deletions src/reports/CombinedReportPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import {
} from '@mui/material';
import ReportFilter from './components/ReportFilter';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
import ReportsMenu from './components/ReportsMenu';
import { useCatch } from '../reactHelper';
import MapView from '../map/core/MapView';
import useReportStyles from './common/useReportStyles';
Expand Down Expand Up @@ -55,50 +53,48 @@ const CombinedReportPage = () => {
});

return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportCombined']}>
<div className={classes.container}>
{Boolean(items.length) && (
<div className={classes.containerMap}>
<MapView>
<MapGeofence />
{items.map((item) => (
<MapRouteCoordinates
key={item.deviceId}
name={devices[item.deviceId].name}
coordinates={item.route}
deviceId={item.deviceId}
/>
))}
<MapMarkers markers={createMarkers()} />
</MapView>
<MapCamera coordinates={itemsCoordinates} />
</div>
)}
<div className={classes.containerMain}>
<div className={classes.header}>
<ReportFilter handleSubmit={handleSubmit} showOnly multiDevice includeGroups loading={loading} />
</div>
<Table>
<TableHead>
<TableRow>
<TableCell>{t('sharedDevice')}</TableCell>
<TableCell>{t('positionFixTime')}</TableCell>
<TableCell>{t('sharedType')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{!loading ? items.flatMap((item) => item.events.map((event, index) => (
<TableRow key={event.id}>
<TableCell>{index ? '' : devices[item.deviceId].name}</TableCell>
<TableCell>{formatTime(event.eventTime, 'seconds')}</TableCell>
<TableCell>{t(prefixString('event', event.type))}</TableCell>
</TableRow>
))) : (<TableShimmer columns={3} />)}
</TableBody>
</Table>
<div className={classes.container}>
{Boolean(items.length) && (
<div className={classes.containerMap}>
<MapView>
<MapGeofence />
{items.map((item) => (
<MapRouteCoordinates
key={item.deviceId}
name={devices[item.deviceId].name}
coordinates={item.route}
deviceId={item.deviceId}
/>
))}
<MapMarkers markers={createMarkers()} />
</MapView>
<MapCamera coordinates={itemsCoordinates} />
</div>
)}
<div className={classes.containerMain}>
<div className={classes.header}>
<ReportFilter handleSubmit={handleSubmit} showOnly multiDevice includeGroups loading={loading} />
</div>
<Table>
<TableHead>
<TableRow>
<TableCell>{t('sharedDevice')}</TableCell>
<TableCell>{t('positionFixTime')}</TableCell>
<TableCell>{t('sharedType')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{!loading ? items.flatMap((item) => item.events.map((event, index) => (
<TableRow key={event.id}>
<TableCell>{index ? '' : devices[item.deviceId].name}</TableCell>
<TableCell>{formatTime(event.eventTime, 'seconds')}</TableCell>
<TableCell>{t(prefixString('event', event.type))}</TableCell>
</TableRow>
))) : (<TableShimmer columns={3} />)}
</TableBody>
</Table>
</div>
</PageLayout>
</div>
);
};

Expand Down
138 changes: 67 additions & 71 deletions src/reports/EventReportPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ import { formatSpeed, formatTime } from '../common/util/formatter';
import ReportFilter from './components/ReportFilter';
import { prefixString } from '../common/util/stringUtils';
import { useTranslation } from '../common/components/LocalizationProvider';
import PageLayout from '../common/components/PageLayout';
import ReportsMenu from './components/ReportsMenu';
import usePersistedState from '../common/util/usePersistedState';
import ColumnSelect from './components/ColumnSelect';
import { useCatch, useEffectAsync } from '../reactHelper';
Expand Down Expand Up @@ -154,78 +152,76 @@ const EventReportPage = () => {
};

return (
<PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportEvents']}>
<div className={classes.container}>
{selectedItem && (
<div className={classes.containerMap}>
<MapView>
<MapGeofence />
{position && <MapPositions positions={[position]} titleField="fixTime" />}
</MapView>
{position && <MapCamera latitude={position.latitude} longitude={position.longitude} />}
</div>
)}
<div className={classes.containerMain}>
<div className={classes.header}>
<ReportFilter handleSubmit={handleSubmit} handleSchedule={handleSchedule} loading={loading}>
<div className={classes.filterItem}>
<FormControl fullWidth>
<InputLabel>{t('reportEventTypes')}</InputLabel>
<Select
label={t('reportEventTypes')}
value={eventTypes}
onChange={(event, child) => {
let values = event.target.value;
const clicked = child.props.value;
if (values.includes('allEvents') && values.length > 1) {
values = [clicked];
}
setEventTypes(values);
}}
multiple
>
{allEventTypes.map(([key, string]) => (
<MenuItem key={key} value={key}>{t(string)}</MenuItem>
))}
</Select>
</FormControl>
</div>
<ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
</ReportFilter>
</div>
<Table>
<TableHead>
<TableRow>
<TableCell className={classes.columnAction} />
{columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
</TableRow>
</TableHead>
<TableBody>
{!loading ? items.map((item) => (
<TableRow key={item.id}>
<TableCell className={classes.columnAction} padding="none">
{(item.positionId && (selectedItem === item ? (
<IconButton size="small" onClick={() => setSelectedItem(null)}>
<GpsFixedIcon fontSize="small" />
</IconButton>
) : (
<IconButton size="small" onClick={() => setSelectedItem(item)}>
<LocationSearchingIcon fontSize="small" />
</IconButton>
))) || ''}
</TableCell>
{columns.map((key) => (
<TableCell key={key}>
{formatValue(item, key)}
</TableCell>
<div className={classes.container}>
{selectedItem && (
<div className={classes.containerMap}>
<MapView>
<MapGeofence />
{position && <MapPositions positions={[position]} titleField="fixTime" />}
</MapView>
{position && <MapCamera latitude={position.latitude} longitude={position.longitude} />}
</div>
)}
<div className={classes.containerMain}>
<div className={classes.header}>
<ReportFilter handleSubmit={handleSubmit} handleSchedule={handleSchedule} loading={loading}>
<div className={classes.filterItem}>
<FormControl fullWidth>
<InputLabel>{t('reportEventTypes')}</InputLabel>
<Select
label={t('reportEventTypes')}
value={eventTypes}
onChange={(event, child) => {
let values = event.target.value;
const clicked = child.props.value;
if (values.includes('allEvents') && values.length > 1) {
values = [clicked];
}
setEventTypes(values);
}}
multiple
>
{allEventTypes.map(([key, string]) => (
<MenuItem key={key} value={key}>{t(string)}</MenuItem>
))}
</TableRow>
)) : (<TableShimmer columns={columns.length + 1} />)}
</TableBody>
</Table>
</Select>
</FormControl>
</div>
<ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
</ReportFilter>
</div>
<Table>
<TableHead>
<TableRow>
<TableCell className={classes.columnAction} />
{columns.map((key) => (<TableCell key={key}>{t(columnsMap.get(key))}</TableCell>))}
</TableRow>
</TableHead>
<TableBody>
{!loading ? items.map((item) => (
<TableRow key={item.id}>
<TableCell className={classes.columnAction} padding="none">
{(item.positionId && (selectedItem === item ? (
<IconButton size="small" onClick={() => setSelectedItem(null)}>
<GpsFixedIcon fontSize="small" />
</IconButton>
) : (
<IconButton size="small" onClick={() => setSelectedItem(item)}>
<LocationSearchingIcon fontSize="small" />
</IconButton>
))) || ''}
</TableCell>
{columns.map((key) => (
<TableCell key={key}>
{formatValue(item, key)}
</TableCell>
))}
</TableRow>
)) : (<TableShimmer columns={columns.length + 1} />)}
</TableBody>
</Table>
</div>
</PageLayout>
</div>
);
};

Expand Down
Loading