From fa83492234ba77ae3599ce67217c25122d19f361 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Thu, 26 May 2022 17:35:55 -0700
Subject: Revert "Collapse filter on mobile"

This reverts commit aab97ae5551995f940abb302d33f882b1a13a3fc.
---
 modern/src/common/components/PageLayout.js    |   1 -
 modern/src/reports/components/ReportFilter.js | 151 +++++++++++---------------
 2 files changed, 62 insertions(+), 90 deletions(-)

diff --git a/modern/src/common/components/PageLayout.js b/modern/src/common/components/PageLayout.js
index 10ee8a11..43fd68ea 100644
--- a/modern/src/common/components/PageLayout.js
+++ b/modern/src/common/components/PageLayout.js
@@ -42,7 +42,6 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'stretch',
     display: 'flex',
     flexDirection: 'column',
-    overflow: 'auto',
   },
 }));
 
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>
-- 
cgit v1.2.3