Persist report form (fix #1019)

3 files changed, 65 insertions, 18 deletions

diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index 75c9d43d..804d0d4b 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -1,28 +1,35 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography,
 } from '@mui/material';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import useReportStyles from '../common/useReportStyles';
+import { reportsActions } from '../../store';
 
 const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDevice, includeGroups }) => {
   const classes = useReportStyles();
+  const dispatch = useDispatch();
   const t = useTranslation();
 
   const devices = useSelector((state) => state.devices.items);
   const groups = useSelector((state) => state.groups.items);
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
 
-  const [deviceId, setDeviceId] = useState(selectedDeviceId);
-  const [deviceIds, setDeviceIds] = useState(selectedDeviceId ? [selectedDeviceId] : []);
-  const [groupIds, setGroupIds] = useState([]);
-  const [period, setPeriod] = useState('today');
-  const [from, setFrom] = useState(moment().subtract(1, 'hour'));
-  const [to, setTo] = useState(moment());
+  const deviceId = useSelector((state) => state.reports.deviceId || selectedDeviceId);
+  const deviceIds = useSelector((state) => (
+    state.reports.deviceIds.length
+      ? state.reports.deviceIds : state.reports.deviceId
+        ? [state.reports.deviceId] : selectedDeviceId
+          ? [selectedDeviceId] : []
+  ));
+  const groupIds = useSelector((state) => state.reports.groupIds);
+  const period = useSelector((state) => state.reports.period);
+  const from = useSelector((state) => state.reports.from);
+  const to = useSelector((state) => state.reports.to);
 
-  const disabled = !ignoreDevice && !deviceId && !deviceIds.length && !groupIds.length;
+  const disabled = !ignoreDevice && !selectedDeviceId && !deviceId && !deviceIds.length && !groupIds.length;
 
   const handleClick = (type) => {
     let selectedFrom;
@@ -53,8 +60,8 @@ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDev
         selectedTo = moment().subtract(1, 'month').endOf('month');
         break;
       default:
-        selectedFrom = from;
-        selectedTo = to;
+        selectedFrom = moment(from, moment.HTML5_FMT.DATETIME_LOCAL);
+        selectedTo = moment(to, moment.HTML5_FMT.DATETIME_LOCAL);
         break;
     }
 
@@ -77,7 +84,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDev
             <Select
               label={t(multiDevice ? 'deviceTitle' : 'reportDevice')}
               value={multiDevice ? deviceIds : deviceId || ''}
-              onChange={(e) => (multiDevice ? setDeviceIds(e.target.value) : setDeviceId(e.target.value))}
+              onChange={(e) => dispatch(multiDevice ? reportsActions.updateDeviceIds(e.target.value) : reportsActions.updateDeviceId(e.target.value))}
               multiple={multiDevice}
             >
               {Object.values(devices).sort((a, b) => a.name.localeCompare(b.name)).map((device) => (
@@ -94,7 +101,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDev
             <Select
               label={t('settingsGroups')}
               value={groupIds}
-              onChange={(e) => setGroupIds(e.target.value)}
+              onChange={(e) => dispatch(reportsActions.updateGroupIds(e.target.value))}
               multiple
             >
               {Object.values(groups).sort((a, b) => a.name.localeCompare(b.name)).map((group) => (
@@ -107,7 +114,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDev
       <div className={classes.filterItem}>
         <FormControl fullWidth>
           <InputLabel>{t('reportPeriod')}</InputLabel>
-          <Select label={t('reportPeriod')} value={period} onChange={(e) => setPeriod(e.target.value)}>
+          <Select label={t('reportPeriod')} value={period} onChange={(e) => dispatch(reportsActions.updatePeriod(e.target.value))}>
             <MenuItem value="today">{t('reportToday')}</MenuItem>
             <MenuItem value="yesterday">{t('reportYesterday')}</MenuItem>
             <MenuItem value="thisWeek">{t('reportThisWeek')}</MenuItem>
@@ -123,8 +130,8 @@ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDev
           <TextField
             label={t('reportFrom')}
             type="datetime-local"
-            value={from.locale('en').format(moment.HTML5_FMT.DATETIME_LOCAL)}
-            onChange={(e) => setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+            value={from}
+            onChange={(e) => dispatch(reportsActions.updateFrom(e.target.value))}
             fullWidth
           />
         </div>
@@ -134,8 +141,8 @@ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDev
           <TextField
             label={t('reportTo')}
             type="datetime-local"
-            value={to.locale('en').format(moment.HTML5_FMT.DATETIME_LOCAL)}
-            onChange={(e) => setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))}
+            value={to}
+            onChange={(e) => dispatch(reportsActions.updateTo(e.target.value))}
             fullWidth
           />
         </div>
diff --git a/modern/src/store/index.js b/modern/src/store/index.js
index 9fce43cf..71c0b2b8 100644
--- a/modern/src/store/index.js
+++ b/modern/src/store/index.js
@@ -9,6 +9,7 @@ import { geofencesReducer as geofences } from './geofences';
 import { groupsReducer as groups } from './groups';
 import { driversReducer as drivers } from './drivers';
 import { maintenancesReducer as maintenances } from './maintenances';
+import { reportsReducer as reports } from './reports';
 import throttleMiddleware from './throttleMiddleware';
 
 const reducer = combineReducers({
@@ -21,6 +22,7 @@ const reducer = combineReducers({
   groups,
   drivers,
   maintenances,
+  reports,
 });
 
 export { errorsActions } from './errors';
@@ -32,6 +34,7 @@ export { geofencesActions } from './geofences';
 export { groupsActions } from './groups';
 export { driversActions } from './drivers';
 export { maintenancesActions } from './maintenances';
+export { reportsActions } from './reports';
 
 export default configureStore({
   reducer,
diff --git a/modern/src/store/reports.js b/modern/src/store/reports.js
new file mode 100644
index 00000000..0c336f7a
--- /dev/null
+++ b/modern/src/store/reports.js
@@ -0,0 +1,37 @@
+import { createSlice } from '@reduxjs/toolkit';
+import moment from 'moment';
+
+const { reducer, actions } = createSlice({
+  name: 'reports',
+  initialState: {
+    deviceId: null,
+    deviceIds: [],
+    groupIds: [],
+    period: 'today',
+    from: moment().subtract(1, 'hour').locale('en').format(moment.HTML5_FMT.DATETIME_LOCAL),
+    to: moment().locale('en').format(moment.HTML5_FMT.DATETIME_LOCAL),
+  },
+  reducers: {
+    updateDeviceId(state, action) {
+      state.deviceId = action.payload;
+    },
+    updateDeviceIds(state, action) {
+      state.deviceIds = action.payload;
+    },
+    updateGroupIds(state, action) {
+      state.groupIds = action.payload;
+    },
+    updatePeriod(state, action) {
+      state.period = action.payload;
+    },
+    updateFrom(state, action) {
+      state.from = action.payload;
+    },
+    updateTo(state, action) {
+      state.to = action.payload;
+    },
+  },
+});
+
+export { actions as reportsActions };
+export { reducer as reportsReducer };