Report Filter Design

4 files changed, 163 insertions, 108 deletions

diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index a14fc930..daa4ab8b 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -30,7 +30,7 @@ const Filter = ({ setItems }) => {
 
   return (
     <ReportFilter handleSubmit={handleSubmit}>
-      <FormControl variant="filled" margin="normal" fullWidth>
+      <FormControl variant="filled" fullWidth>
         <InputLabel>{t('reportEventTypes')}</InputLabel>
         <Select value={eventTypes} onChange={e => setEventTypes(e.target.value)} multiple>
           <MenuItem value="allEvents">{t('eventAll')}</MenuItem>
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 164dbf9b..e6164e25 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup } from '@material-ui/core';
+import { FormControl, InputLabel, Select, MenuItem, Button, TextField, ButtonGroup, Grid } from '@material-ui/core';
 import t from '../common/localization';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
@@ -57,54 +57,86 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
 
   return (
     <>
-      <FormControl variant="filled" margin="normal" fullWidth>
-        <InputLabel>{t('reportDevice')}</InputLabel>
-        <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
-          {devices.map((device) => (
-            <MenuItem value={device.id}>{device.name}</MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-      <FormControl variant="filled" margin="normal" fullWidth>
-        <InputLabel>{t('reportPeriod')}</InputLabel>
-        <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
-          <MenuItem value="today">{t('reportToday')}</MenuItem>
-          <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
-          <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
-          <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
-          <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
-          <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
-          <MenuItem value="custom">{t('reportCustom')}</MenuItem>
-        </Select>
-      </FormControl>
-      {period === 'custom' && (
-        <TextField
-          margin="normal"
-          variant="filled"
-          label={t('reportFrom')}
-          type="datetime-local"
-          value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-          onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
-          fullWidth />
-      )}
-      {period === 'custom' && (
-        <TextField
-          margin="normal"
-          variant="filled"
-          label={t('reportTo')}
-          type="datetime-local"
-          value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
-          onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
-          fullWidth />
-      )}
-      {children}
-      <FormControl margin="normal" fullWidth>
-        <ButtonGroup color="primary" orientation="vertical" disabled={!deviceId}>
-          <Button onClick={() => handleClick(false, true)}>{t('reportShow')}</Button>
-          {!showOnly && <Button onClick={() => handleClick(false, false)}>{t('reportExport')}</Button>}
-          {!showOnly && <Button onClick={() => handleClick(true, false)}>{t('reportEmail')}</Button>}
-        </ButtonGroup>
-      </FormControl>
+      <Grid container spacing={3} direction='column'>
+        <Grid item container spacing={2}>
+          <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+            <FormControl variant="filled" fullWidth>
+              <InputLabel>{t('reportDevice')}</InputLabel>
+              <Select value={deviceId} onChange={(e) => setDeviceId(e.target.value)}>
+                {devices.map((device) => (
+                  <MenuItem value={device.id}>{device.name}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
+            <FormControl variant="filled" fullWidth>
+              <InputLabel>{t('reportPeriod')}</InputLabel>
+              <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
+                <MenuItem value="today">{t('reportToday')}</MenuItem>
+                <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
+                <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
+                <MenuItem value="previousWeek">{t('reportPreviousWeek')}</MenuItem>
+                <MenuItem value="thisMonth">{t('reportThisMonth')}</MenuItem>
+                <MenuItem value="previousMonth">{t('reportPreviousMonth')}</MenuItem>
+                <MenuItem value="custom">{t('reportCustom')}</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+          {period === 'custom' && <Grid item xs={12} sm={3}>
+            <TextField
+              variant="filled"
+              label={t('reportFrom')}
+              type="datetime-local"
+              value={from.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+              onChange={e => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+              fullWidth />
+          </Grid>}
+          {period === 'custom' && <Grid item xs={12} sm={3}>
+            <TextField
+              variant="filled"
+              label={t('reportTo')}
+              type="datetime-local"
+              value={to.format(moment.HTML5_FMT.DATETIME_LOCAL)}
+              onChange={e => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+              fullWidth />
+          </Grid>}
+        </Grid>
+        <Grid item container spacing={2}>
+          {children && <Grid item xs={12} sm={6}>
+            {children}
+          </Grid>}
+          <Grid item xs={4} sm={!showOnly ? 2 : 4}>
+            <Button 
+              onClick={() => handleClick(false, true)}
+              variant='outlined'
+              color='secondary'
+              fullWidth>
+                {t('reportShow')}
+            </Button>
+          </Grid>
+          <Grid item xs={4} sm={2}>
+            {!showOnly && 
+              <Button 
+                onClick={() => handleClick(false, false)}
+                variant='outlined'
+                color='secondary'
+                fullWidth>
+                  {t('reportExport')}
+              </Button>}
+          </Grid>
+          <Grid item xs={4} sm={2}>
+            {!showOnly && 
+              <Button 
+                onClick={() => handleClick(true, false)}
+                variant='outlined'
+                color='secondary'
+                fullWidth>
+                  {t('reportEmail')}
+              </Button>}
+          </Grid>
+        </Grid>
+      </Grid>
     </>
   );
 }
diff --git a/modern/src/reports/ReportHeader.js b/modern/src/reports/ReportHeader.js
deleted file mode 100644
index e69de29b..00000000
--- a/modern/src/reports/ReportHeader.js
+++ /dev/null
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index cdce2b3c..ae7b3daf 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -19,12 +19,17 @@ const useStyles = makeStyles(theme => ({
     height: '100%',
     display: 'flex',
   },
+  drawer: {
+    width: 360,
+    [theme.breakpoints.down("md")]: {
+      width: 0,
+    }
+  },  
   content: {
     flex: 1,
-    overflow: 'auto',
-    padding: theme.spacing(2),
+    padding: theme.spacing(3),
   },
-  drawer: {
+  drawerPaper: {
     width: 360,
     [theme.breakpoints.down("md")]: {
       width: 320,
@@ -36,6 +41,11 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'center',
     padding: theme.spacing(0, 1),
   },
+  toolbar: {
+    [theme.breakpoints.down("md")]: {
+      ...theme.mixins.toolbar,
+    }
+  },
   form: {
     padding: theme.spacing(1, 2, 2),
   },
@@ -47,7 +57,6 @@ const ReportLayoutPage = ({ children, filter }) => {
   const theme = useTheme();
   const matchesMD = useMediaQuery(theme.breakpoints.down("md"));
   const [openDrawer, setOpenDrawer] = useState(false);
-  const [value, setValue] = useState(0);
 
   const routes = [
     { name: t('reportRoute'), link: '/reports/route', icon: <TimelineIcon />, activeIndex: 0 },
@@ -58,64 +67,78 @@ const ReportLayoutPage = ({ children, filter }) => {
     { name: t('reportChart'), link: '/reports/chart', icon: <TrendingUpIcon />, activeIndex: 5 },
   ];
 
-  const handleClick = (route) => {
+  const navigationList = (
+    <List disablePadding>
+      {routes.map(route => (
+        <ListItem
+          key={`${route}${route.activeIndex}`}
+          button
+          onClick={() => handleListItemClick(route)}
+        >
+          <ListItemIcon>
+            {route.icon}
+          </ListItemIcon>
+          <ListItemText primary={route.name} />
+        </ListItem>
+      ))}
+    </List>
+  );
+
+  const drawerHeader = (
+    <> 
+      <div className={classes.drawerHeader}>
+        <IconButton>
+          <ArrowBackIcon />
+        </IconButton>
+        <Typography variant="h6" color='primary' noWrap>
+          Reports
+        </Typography> 
+      </div>
+      <Divider />
+    </>
+  );
+
+  const appBar = (
+    <AppBar position="fixed">
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          edge="start"
+          onClick={() => setOpenDrawer(!openDrawer)}
+          className={classes.menuButton}
+        >
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" noWrap>
+          Reports
+        </Typography>        
+      </Toolbar>
+    </AppBar>   
+  );
+
+  const handleListItemClick = (route) => {
     history.push(route.link);
   }
-  console.log('rendering Layout, ', value);
+
   return (
     <div className={classes.root}>
-      {matchesMD && <AppBar position="fixed">
-          <Toolbar>
-            <IconButton
-              color="inherit"
-              aria-label="open drawer"
-              edge="start"
-              onClick={() => setOpenDrawer(!openDrawer)}
-              className={classes.menuButton}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography variant="h6" noWrap>
-              Reports
-            </Typography>          
-          </Toolbar>
-        </AppBar>
-      }
-      <Drawer
-        variant={matchesMD ? "temporary": "permanent"}
-        open={openDrawer}
-        onClose={() => setOpenDrawer(!openDrawer)}
-        classes={{ paper: classes.drawer }}
-      >
-        { !matchesMD && 
-          <> 
-            <div className={classes.drawerHeader}>
-              <IconButton>
-                <ArrowBackIcon />
-              </IconButton>
-              <Typography variant="h6" color='primary' noWrap>
-                  Reports
-                </Typography> 
-            </div>
-            <Divider />
-          </> 
-        }
-        <List disablePadding>
-          {routes.map(route => (
-            <ListItem
-              key={`${route}${route.activeIndex}`}
-              button
-              selected={value === route.activeIndex}
-              onClick={() => { setValue(route.activeIndex); handleClick(route)}}
-            >
-              <ListItemIcon>
-                {route.icon}
-              </ListItemIcon>
-              <ListItemText primary={route.name} />
-            </ListItem>
-          ))}
-        </List>
-      </Drawer>
+      { matchesMD && appBar }
+      <nav className={classes.drawer}>
+        <Drawer
+          variant={matchesMD ? "temporary": "permanent"}
+          open={openDrawer}
+          onClose={() => setOpenDrawer(!openDrawer)}
+          classes={{ paper: classes.drawerPaper }}
+        >
+          { !matchesMD && drawerHeader }
+          { navigationList }
+        </Drawer>
+      </nav>
+      <div className={classes.content}>
+        <div className={classes.toolbar} />
+        {filter}
+      </div>      
     </div>
   );
 }