aboutsummaryrefslogtreecommitdiff
path: root/modern/src/reports
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/reports')
-rw-r--r--modern/src/reports/ReportFilter.js8
-rw-r--r--modern/src/reports/ReportLayoutPage.js87
2 files changed, 27 insertions, 68 deletions
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 1d67691..0e5ab69 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,8 +1,8 @@
import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid } from '@material-ui/core';
-import t from '../common/localization';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography } from '@material-ui/core';
import { useSelector } from 'react-redux';
import moment from 'moment';
+import t from '../common/localization';
const ReportFilter = ({ children, handleSubmit, showOnly }) => {
@@ -101,7 +101,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
fullWidth />
</Grid>}
{children}
- <Grid item xs={4} sm={!showOnly ? 2 : 4}>
+ <Grid item xs={!showOnly ? 4 : 12} sm={!showOnly ? 2 : 6}>
<Button
onClick={() => handleClick(false, true)}
variant='outlined'
@@ -127,7 +127,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
variant='outlined'
color='secondary'
fullWidth>
- {t('reportEmail')}
+ <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
</Button>}
</Grid>
</Grid>
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index 4ffc881..fbb8a30 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -10,6 +10,9 @@ import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
import TrendingUpIcon from '@material-ui/icons/TrendingUp';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ReportSidebar from '../components/reports/ReportSidebar'
+import ReportNavbar from '../components/reports/ReportNavbar'
+
import { Link, useHistory, useLocation } from 'react-router-dom';
import t from '../common/localization';
@@ -20,10 +23,10 @@ const useStyles = makeStyles(theme => ({
height: '100%',
},
drawerContainer: {
- width: theme.dimensions.drawerWidth,
+ width: theme.dimensions.desktopDrawerWidth,
},
drawer: {
- width: theme.dimensions.drawerWidth,
+ width: theme.dimensions.desktopDrawerWidth,
[theme.breakpoints.down("md")]: {
width: theme.dimensions.tabletDrawerWidth,
}
@@ -62,89 +65,45 @@ const routes = [
const ReportLayoutPage = ({ children, filter }) => {
const classes = useStyles();
const history = useHistory();
- const theme = useTheme();
const [openDrawer, setOpenDrawer] = useState(false);
- const location = useLocation();
-
- const navigationList = (
- <List disablePadding>
- {routes.map((route, index) => (
- <ListItem
- disableRipple
- component={Link}
- key={`${route}${index}`}
- button
- to={route.href}
- selected={route.href === location.pathname}>
- <ListItemIcon>
- {route.icon}
- </ListItemIcon>
- <ListItemText primary={route.name} />
- </ListItem>
- ))}
- </List>
- );
-
- const drawerHeader = (
- <>
- <div className={classes.drawerHeader}>
- <IconButton
- className={classes.backArrowIconContainer}
- disableRipple>
- <ArrowBackIcon />
- </IconButton>
- <Typography variant="h6" color="inherit" noWrap>
- {t('reportTitle')}
- </Typography>
- </div>
- <Divider />
- </>
- );
-
- const appBar = (
- <AppBar position="fixed" color="inherit">
- <Toolbar>
- <IconButton
- color="inherit"
- aria-label="open drawer"
- edge="start"
- onClick={() => setOpenDrawer(!openDrawer)}
- className={classes.menuButton}>
- <MenuIcon />
- </IconButton>
- <Typography variant="h6" noWrap>
- {t('reportTitle')}
- </Typography>
- </Toolbar>
- </AppBar>
- );
return (
<div className={classes.root}>
- <Hidden mdUp>
- {appBar}
+ <Hidden only={['lg', 'xl']}>
+ <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} />
<Drawer
variant="temporary"
open={openDrawer}
onClose={() => setOpenDrawer(!openDrawer)}
classes={{paper: classes.drawer}}>
- {drawerHeader}
- {navigationList}
+ <ReportSidebar routes={routes} />
</Drawer>
</Hidden>
- <Hidden mdDown>
+ <Hidden only={['xs', 'sm', 'md']}>
<div className={classes.drawerContainer}>
<Drawer
variant="permanent"
classes={{paper: classes.drawer}}>
- {drawerHeader}
- {navigationList}
+ <div className={classes.drawerHeader}>
+ <IconButton
+ onClick={() => history.push('/')}
+ className={classes.backArrowIconContainer}
+ disableRipple>
+ <ArrowBackIcon />
+ </IconButton>
+ <Typography variant="h6" color="inherit" noWrap>
+ {t('reportTitle')}
+ </Typography>
+ </div>
+ <Divider />
+ <ReportSidebar routes={routes} />
</Drawer>
</div>
</Hidden>
<div className={classes.content}>
<div className={classes.toolbar} />
{filter}
+ {children}
</div>
</div>
);