diff options
Diffstat (limited to 'modern/src/reports/components')
| -rw-r--r-- | modern/src/reports/components/ReportFilter.js | 151 |
1 files changed, 62 insertions, 89 deletions
diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js index ccaaf1a6..586ccc37 100644 --- a/modern/src/reports/components/ReportFilter.js +++ b/modern/src/reports/components/ReportFilter.js @@ -1,14 +1,12 @@ import React, { useState } from 'react'; import { - FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography, useMediaQuery, + FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography, } from '@mui/material'; -import OpenInFullIcon from '@mui/icons-material/OpenInFull'; import makeStyles from '@mui/styles/makeStyles'; import { useSelector } from 'react-redux'; import moment from 'moment'; import { useTranslation } from '../../common/components/LocalizationProvider'; import dimensions from '../../common/theme/dimensions'; -import { useTheme } from '@mui/styles'; export const useFilterStyles = makeStyles((theme) => ({ filter: { @@ -34,12 +32,9 @@ export const useFilterStyles = makeStyles((theme) => ({ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, }) => { - const theme = useTheme(); const classes = useFilterStyles(); const t = useTranslation(); - const phone = useMediaQuery(theme.breakpoints.down('sm')); - const devices = useSelector((state) => state.devices.items); const selectedDeviceId = useSelector((state) => state.devices.selectedId); @@ -48,8 +43,6 @@ const ReportFilter = ({ const [from, setFrom] = useState(moment().subtract(1, 'hour')); const [to, setTo] = useState(moment()); - const [collapsed, setCollapsed] = useState(false); - const handleClick = (mail, json) => { let selectedFrom; let selectedTo; @@ -92,67 +85,59 @@ const ReportFilter = ({ mail, { Accept: accept }, ); - - if (phone) { - setCollapsed(true); - } }; return ( <div className={classes.filter}> - {!collapsed && ( - <> - {!ignoreDevice && ( - <div className={classes.item}> - <FormControl fullWidth> - <InputLabel>{t('reportDevice')}</InputLabel> - <Select label={t('reportDevice')} value={deviceId || ''} onChange={(e) => setDeviceId(e.target.value)}> - {Object.values(devices).map((device) => ( - <MenuItem key={device.id} value={device.id}>{device.name}</MenuItem> - ))} - </Select> - </FormControl> - </div> - )} - <div className={classes.item}> - <FormControl fullWidth> - <InputLabel>{t('reportPeriod')}</InputLabel> - <Select label={t('reportPeriod')} 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> - </div> - {period === 'custom' && ( - <> - <div className={classes.item}> - <TextField - 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 - /> - </div> - <div className={classes.item}> - <TextField - 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 - /> - </div> - </> - )} - {children} - </> + {!ignoreDevice && ( + <div className={classes.item}> + <FormControl fullWidth> + <InputLabel>{t('reportDevice')}</InputLabel> + <Select label={t('reportDevice')} value={deviceId || ''} onChange={(e) => setDeviceId(e.target.value)}> + {Object.values(devices).map((device) => ( + <MenuItem key={device.id} value={device.id}>{device.name}</MenuItem> + ))} + </Select> + </FormControl> + </div> + )} + <div className={classes.item}> + <FormControl fullWidth> + <InputLabel>{t('reportPeriod')}</InputLabel> + <Select label={t('reportPeriod')} 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> + </div> + {period === 'custom' && ( + <div className={classes.item}> + <TextField + 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 + /> + </div> + )} + {period === 'custom' && ( + <div className={classes.item}> + <TextField + 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 + /> + </div> )} + {children} <div className={classes.buttons}> <Button onClick={() => handleClick(false, true)} @@ -163,39 +148,27 @@ const ReportFilter = ({ > {t('reportShow')} </Button> - {collapsed && ( + {!showOnly && ( <Button - onClick={() => setCollapsed(false)} + onClick={() => handleClick(false, false)} variant="outlined" color="secondary" className={classes.button} disabled={!ignoreDevice && !deviceId} - startIcon={<OpenInFullIcon />} > - {t('reportConfigure')} + {t('reportExport')} </Button> )} - {!showOnly && !collapsed && ( - <> - <Button - onClick={() => handleClick(false, false)} - variant="outlined" - color="secondary" - className={classes.button} - disabled={!ignoreDevice && !deviceId} - > - {t('reportExport')} - </Button> - <Button - onClick={() => handleClick(true, false)} - variant="outlined" - color="secondary" - className={classes.button} - disabled={!ignoreDevice && !deviceId} - > - <Typography variant="button" noWrap>{t('reportEmail')}</Typography> - </Button> - </> + {!showOnly && ( + <Button + onClick={() => handleClick(true, false)} + variant="outlined" + color="secondary" + className={classes.button} + disabled={!ignoreDevice && !deviceId} + > + <Typography variant="button" noWrap>{t('reportEmail')}</Typography> + </Button> )} </div> </div> |