diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-05-15 18:47:16 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-05-15 18:47:16 +0530 |
commit | 219019a3bd8a744a2cbf9dd16285a9ebfa5709cd (patch) | |
tree | 93bc9f2f4c2748a2ec123c6e4c2aea9288fa443e /modern/src/reports/ReportFilter.js | |
parent | 15db54a9e1ade16758eb0f716e7eb72c9847109a (diff) | |
download | trackermap-web-219019a3bd8a744a2cbf9dd16285a9ebfa5709cd.tar.gz trackermap-web-219019a3bd8a744a2cbf9dd16285a9ebfa5709cd.tar.bz2 trackermap-web-219019a3bd8a744a2cbf9dd16285a9ebfa5709cd.zip |
Report Filter Design
Diffstat (limited to 'modern/src/reports/ReportFilter.js')
-rw-r--r-- | modern/src/reports/ReportFilter.js | 130 |
1 files changed, 81 insertions, 49 deletions
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> </> ); } |