diff options
| -rw-r--r-- | modern/src/reports/components/ReportFilter.js | 43 | ||||
| -rw-r--r-- | modern/src/store/index.js | 3 | ||||
| -rw-r--r-- | modern/src/store/reports.js | 37 |
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 }; |