Migrate reports to page layout

3 files changed, 97 insertions, 126 deletions

diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index bc9c5af6..739d5e47 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -1,12 +1,19 @@
 import React, { useState } from 'react';
 import {
-  FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography,
+  FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography, makeStyles,
 } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 
+const useStyles = makeStyles((theme) => ({
+  filter: {
+    padding: theme.spacing(2),
+  },
+}));
+
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
+  const classes = useStyles();
   const t = useTranslation();
 
   const devices = useSelector((state) => state.devices.items);
@@ -60,7 +67,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   };
 
   return (
-    <Grid container spacing={2} justifyContent="flex-end">
+    <Grid container className={classes.filter} spacing={2} justifyContent="flex-end">
       <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
         <FormControl variant="filled" fullWidth>
           <InputLabel>{t('reportDevice')}</InputLabel>
diff --git a/modern/src/reports/components/ReportLayout.js b/modern/src/reports/components/ReportLayout.js
deleted file mode 100644
index c028530b..00000000
--- a/modern/src/reports/components/ReportLayout.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import {
-  Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden,
-} from '@material-ui/core';
-import TimelineIcon from '@material-ui/icons/Timeline';
-import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
-import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
-import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
-import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
-import TrendingUpIcon from '@material-ui/icons/TrendingUp';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-
-import SideNav from '../../common/components/SideNav';
-import NavBar from '../../common/components/NavBar';
-import { useTranslation } from '../../common/components/LocalizationProvider';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    [theme.breakpoints.down('sm')]: {
-      flexDirection: 'column',
-    },
-    height: '100%',
-  },
-  drawerContainer: {
-    width: theme.dimensions.drawerWidthDesktop,
-  },
-  drawer: {
-    width: theme.dimensions.drawerWidthDesktop,
-    [theme.breakpoints.down('sm')]: {
-      width: theme.dimensions.drawerWidthTablet,
-    },
-  },
-  content: {
-    flex: 1,
-    padding: theme.spacing(3, 3, 3, 3),
-  },
-  drawerHeader: {
-    ...theme.mixins.toolbar,
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(0, 1),
-  },
-  backArrowIconContainer: {
-    '&:hover': {
-      backgroundColor: 'transparent',
-    },
-  },
-}));
-
-const ReportLayout = ({ children, filter }) => {
-  const classes = useStyles();
-  const history = useHistory();
-  const location = useLocation();
-  const t = useTranslation();
-
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [reportTitle, setReportTitle] = useState();
-
-  const routes = useMemo(() => [
-    { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
-    { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
-    { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
-    { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
-    { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
-    { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
-  ], [t]);
-
-  useEffect(() => {
-    routes.forEach((route) => {
-      switch (location.pathname) {
-        case `${route.href}`:
-          setReportTitle(route.name);
-          break;
-        default:
-          break;
-      }
-    });
-  }, [routes, location]);
-
-  const pageTitle = `${t('reportTitle')} / ${reportTitle}`;
-
-  return (
-    <div className={classes.root}>
-      <Hidden mdUp>
-        <NavBar setOpenDrawer={setOpenDrawer} title={pageTitle} />
-        <Drawer
-          variant="temporary"
-          open={openDrawer}
-          onClose={() => setOpenDrawer(!openDrawer)}
-          classes={{ paper: classes.drawer }}
-        >
-          <SideNav routes={routes} />
-        </Drawer>
-      </Hidden>
-      <Hidden smDown>
-        <Drawer
-          variant="permanent"
-          classes={{ root: classes.drawerContainer, paper: classes.drawer }}
-        >
-          <div className={classes.drawerHeader}>
-            <IconButton onClick={() => history.push('/')}>
-              <ArrowBackIcon />
-            </IconButton>
-            <Typography variant="h6" color="inherit" noWrap>
-              {t('reportTitle')}
-            </Typography>
-          </div>
-          <Divider />
-          <SideNav routes={routes} />
-        </Drawer>
-      </Hidden>
-      <div className={classes.content}>
-        <Grid container direction="column" spacing={2}>
-          <Grid item>{filter}</Grid>
-          <Grid item>{children}</Grid>
-        </Grid>
-      </div>
-    </div>
-  );
-};
-
-export default ReportLayout;
diff --git a/modern/src/reports/components/ReportsMenu.js b/modern/src/reports/components/ReportsMenu.js
new file mode 100644
index 00000000..8e973562
--- /dev/null
+++ b/modern/src/reports/components/ReportsMenu.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  Divider, List, ListItem, ListItemIcon, ListItemText,
+} from '@material-ui/core';
+import TimelineIcon from '@material-ui/icons/Timeline';
+import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
+import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
+import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
+import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import BarChartIcon from '@material-ui/icons/BarChart';
+import { Link, useLocation } from 'react-router-dom';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+import { useAdministrator } from '../../common/util/permissions';
+
+const MenuItem = ({
+  title, link, icon, selected,
+}) => (
+  <ListItem button key={link} component={Link} to={link} selected={selected}>
+    <ListItemIcon>{icon}</ListItemIcon>
+    <ListItemText primary={title} />
+  </ListItem>
+);
+
+const ReportsMenu = () => {
+  const t = useTranslation();
+  const location = useLocation();
+
+  const admin = useAdministrator();
+
+  return (
+    <>
+      <List>
+        <MenuItem
+          title={t('reportRoute')}
+          link="/reports/route"
+          icon={<TimelineIcon />}
+          selected={location.pathname === '/reports/route'}
+        />
+        <MenuItem
+          title={t('reportEvents')}
+          link="/reports/event"
+          icon={<NotificationsActiveIcon />}
+          selected={location.pathname === '/reports/event'}
+        />
+        <MenuItem
+          title={t('reportTrips')}
+          link="/reports/trip"
+          icon={<PlayCircleFilledIcon />}
+          selected={location.pathname === '/reports/trip'}
+        />
+        <MenuItem
+          title={t('reportStops')}
+          link="/reports/stop"
+          icon={<PauseCircleFilledIcon />}
+          selected={location.pathname === '/reports/stop'}
+        />
+        <MenuItem
+          title={t('reportSummary')}
+          link="/reports/summary"
+          icon={<FormatListBulletedIcon />}
+          selected={location.pathname === '/reports/summary'}
+        />
+        <MenuItem
+          title={t('reportChart')}
+          link="/reports/chart"
+          icon={<TrendingUpIcon />}
+          selected={location.pathname === '/reports/chart'}
+        />
+      </List>
+      {admin && (
+        <>
+          <Divider />
+          <List>
+            <MenuItem
+              title={t('statisticsTitle')}
+              link="/reports/statistics"
+              icon={<BarChartIcon />}
+              selected={location.pathname === '/reports/statistics'}
+            />
+          </List>
+        </>
+      )}
+    </>
+  );
+};
+
+export default ReportsMenu;