From ab26340ead6eba063734286a374101951d08688b Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sat, 28 May 2022 06:58:47 -0700
Subject: Unify report styles

---
 modern/src/reports/ChartReportPage.js         | 16 +++------
 modern/src/reports/EventReportPage.js         | 19 +++--------
 modern/src/reports/RouteReportPage.js         | 30 ++--------------
 modern/src/reports/StatisticsPage.js          | 14 ++------
 modern/src/reports/StopReportPage.js          | 14 ++------
 modern/src/reports/SummaryReportPage.js       | 19 +++--------
 modern/src/reports/TripReportPage.js          | 14 ++------
 modern/src/reports/common/useReportStyles.js  | 49 +++++++++++++++++++++++++++
 modern/src/reports/components/ColumnSelect.js |  6 ++--
 modern/src/reports/components/ReportFilter.js | 42 ++++++-----------------
 10 files changed, 82 insertions(+), 141 deletions(-)
 create mode 100644 modern/src/reports/common/useReportStyles.js

(limited to 'modern/src')

diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index a26c4111..ce50819b 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -2,11 +2,10 @@ import React, { useState } from 'react';
 import {
   FormControl, InputLabel, Select, MenuItem,
 } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
 import {
   CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis,
 } from 'recharts';
-import ReportFilter, { useFilterStyles } from './components/ReportFilter';
+import ReportFilter from './components/ReportFilter';
 import { formatDate } from '../common/util/formatter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
@@ -15,17 +14,10 @@ import usePositionAttributes from '../common/attributes/usePositionAttributes';
 import { useCatch } from '../reactHelper';
 import { useAttributePreference } from '../common/util/preferences';
 import { distanceFromMeters, speedFromKnots, volumeFromLiters } from '../common/util/converter';
-
-const useStyles = makeStyles(() => ({
-  chart: {
-    flexGrow: 1,
-    overflow: 'hidden',
-  },
-}));
+import useReportStyles from './common/useReportStyles';
 
 const ChartReportPage = () => {
-  const classes = useStyles();
-  const filterClasses = useFilterStyles();
+  const classes = useReportStyles();
   const t = useTranslation();
 
   const positionAttributes = usePositionAttributes(t);
@@ -84,7 +76,7 @@ const ChartReportPage = () => {
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportChart']}>
       <ReportFilter handleSubmit={handleSubmit} showOnly>
-        <div className={filterClasses.item}>
+        <div className={classes.filterItem}>
           <FormControl fullWidth>
             <InputLabel>{t('reportChartType')}</InputLabel>
             <Select label={t('reportChartType')} value={type} onChange={(e) => setType(e.target.value)}>
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 504534a2..447adaef 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -3,9 +3,8 @@ import {
   FormControl, InputLabel, Select, MenuItem, Table, TableHead, TableRow, TableCell, TableBody,
 } from '@mui/material';
 import { useSelector } from 'react-redux';
-import { makeStyles } from '@mui/styles';
 import { formatDate } from '../common/util/formatter';
-import ReportFilter, { useFilterStyles } from './components/ReportFilter';
+import ReportFilter from './components/ReportFilter';
 import { prefixString } from '../common/util/stringUtils';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
@@ -13,6 +12,7 @@ import ReportsMenu from './components/ReportsMenu';
 import usePersistedState from '../common/util/usePersistedState';
 import ColumnSelect from './components/ColumnSelect';
 import { useCatch } from '../reactHelper';
+import useReportStyles from './common/useReportStyles';
 
 const typesArray = [
   ['allEvents', 'eventAll'],
@@ -44,19 +44,8 @@ const columnsArray = [
 ];
 const columnsMap = new Map(columnsArray);
 
-const useStyles = makeStyles(() => ({
-  header: {
-    position: 'sticky',
-    left: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'stretch',
-  },
-}));
-
 const EventReportPage = () => {
-  const classes = useStyles();
-  const filterClasses = useFilterStyles();
+  const classes = useReportStyles();
   const t = useTranslation();
 
   const geofences = useSelector((state) => state.geofences.items);
@@ -110,7 +99,7 @@ const EventReportPage = () => {
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportEvents']}>
       <div className={classes.header}>
         <ReportFilter handleSubmit={handleSubmit}>
-          <div className={filterClasses.item}>
+          <div className={classes.filterItem}>
             <FormControl fullWidth>
               <InputLabel>{t('reportEventTypes')}</InputLabel>
               <Select
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 152d0ead..b29fb269 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import {
   IconButton, Table, TableBody, TableCell, TableHead, TableRow,
 } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
 import ReportFilter from './components/ReportFilter';
@@ -17,35 +16,10 @@ import { useCatch } from '../reactHelper';
 import Map from '../map/core/Map';
 import MapRoutePath from '../map/MapRoutePath';
 import MapPositions from '../map/MapPositions';
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  containerMap: {
-    flexBasis: '40%',
-    flexShrink: 0,
-  },
-  containerMain: {
-    overflow: 'auto',
-  },
-  header: {
-    position: 'sticky',
-    left: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'stretch',
-  },
-  columnAction: {
-    width: '1%',
-    paddingLeft: theme.spacing(1),
-  },
-}));
+import useReportStyles from './common/useReportStyles';
 
 const RouteReportPage = () => {
-  const classes = useStyles();
+  const classes = useReportStyles();
   const t = useTranslation();
 
   const positionAttributes = usePositionAttributes(t);
diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index bb9926f7..5da5b44e 100644
--- a/modern/src/reports/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import {
   Table, TableRow, TableCell, TableHead, TableBody,
 } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import { formatDate } from '../common/util/formatter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
@@ -11,6 +10,7 @@ import ReportFilter from './components/ReportFilter';
 import usePersistedState from '../common/util/usePersistedState';
 import ColumnSelect from './components/ColumnSelect';
 import { useCatch } from '../reactHelper';
+import useReportStyles from './common/useReportStyles';
 
 const columnsArray = [
   ['captureTime', 'statisticsCaptureTime'],
@@ -26,18 +26,8 @@ const columnsArray = [
 ];
 const columnsMap = new Map(columnsArray);
 
-const useStyles = makeStyles(() => ({
-  header: {
-    position: 'sticky',
-    left: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'stretch',
-  },
-}));
-
 const StatisticsPage = () => {
-  const classes = useStyles();
+  const classes = useReportStyles();
   const t = useTranslation();
 
   const [columns, setColumns] = usePersistedState('statisticsColumns', ['captureTime', 'activeUsers', 'activeDevices', 'messagesStored']);
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 6cf8be07..d2823b06 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import {
   Table, TableBody, TableCell, TableHead, TableRow,
 } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import {
   formatDistance, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
@@ -14,6 +13,7 @@ import ReportsMenu from './components/ReportsMenu';
 import ColumnSelect from './components/ColumnSelect';
 import usePersistedState from '../common/util/usePersistedState';
 import { useCatch } from '../reactHelper';
+import useReportStyles from './common/useReportStyles';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -26,18 +26,8 @@ const columnsArray = [
 ];
 const columnsMap = new Map(columnsArray);
 
-const useStyles = makeStyles(() => ({
-  header: {
-    position: 'sticky',
-    left: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'stretch',
-  },
-}));
-
 const StopReportPage = () => {
-  const classes = useStyles();
+  const classes = useReportStyles();
   const t = useTranslation();
 
   const distanceUnit = useAttributePreference('distanceUnit');
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index e2f5e009..a66d1c61 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -2,11 +2,10 @@ import React, { useState } from 'react';
 import {
   FormControl, InputLabel, Select, MenuItem, Table, TableHead, TableRow, TableBody, TableCell,
 } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import {
   formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
 } from '../common/util/formatter';
-import ReportFilter, { useFilterStyles } from './components/ReportFilter';
+import ReportFilter from './components/ReportFilter';
 import { useAttributePreference } from '../common/util/preferences';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
@@ -14,6 +13,7 @@ import ReportsMenu from './components/ReportsMenu';
 import usePersistedState from '../common/util/usePersistedState';
 import ColumnSelect from './components/ColumnSelect';
 import { useCatch } from '../reactHelper';
+import useReportStyles from './common/useReportStyles';
 
 const columnsArray = [
   ['startTime', 'reportStartDate'],
@@ -27,19 +27,8 @@ const columnsArray = [
 ];
 const columnsMap = new Map(columnsArray);
 
-const useStyles = makeStyles(() => ({
-  header: {
-    position: 'sticky',
-    left: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'stretch',
-  },
-}));
-
 const SummaryReportPage = () => {
-  const classes = useStyles();
-  const filterClasses = useFilterStyles();
+  const classes = useReportStyles();
   const t = useTranslation();
 
   const distanceUnit = useAttributePreference('distanceUnit');
@@ -93,7 +82,7 @@ const SummaryReportPage = () => {
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportSummary']}>
       <div className={classes.header}>
         <ReportFilter handleSubmit={handleSubmit}>
-          <div className={filterClasses.item}>
+          <div className={classes.filterItem}>
             <FormControl fullWidth>
               <InputLabel>{t('sharedType')}</InputLabel>
               <Select label={t('sharedType')} value={daily} onChange={(e) => setDaily(e.target.value)}>
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 4d627b67..798f28d3 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import {
   Table, TableBody, TableCell, TableHead, TableRow,
 } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import {
   formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
@@ -14,6 +13,7 @@ import ReportsMenu from './components/ReportsMenu';
 import ColumnSelect from './components/ColumnSelect';
 import usePersistedState from '../common/util/usePersistedState';
 import { useCatch } from '../reactHelper';
+import useReportStyles from './common/useReportStyles';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -31,18 +31,8 @@ const columnsArray = [
 ];
 const columnsMap = new Map(columnsArray);
 
-const useStyles = makeStyles(() => ({
-  header: {
-    position: 'sticky',
-    left: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'stretch',
-  },
-}));
-
 const TripReportPage = () => {
-  const classes = useStyles();
+  const classes = useReportStyles();
   const t = useTranslation();
 
   const distanceUnit = useAttributePreference('distanceUnit');
diff --git a/modern/src/reports/common/useReportStyles.js b/modern/src/reports/common/useReportStyles.js
new file mode 100644
index 00000000..e09c8695
--- /dev/null
+++ b/modern/src/reports/common/useReportStyles.js
@@ -0,0 +1,49 @@
+import { makeStyles } from '@mui/styles';
+
+export default makeStyles((theme) => ({
+  container: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  containerMap: {
+    flexBasis: '40%',
+    flexShrink: 0,
+  },
+  containerMain: {
+    overflow: 'auto',
+  },
+  header: {
+    position: 'sticky',
+    left: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+  },
+  columnAction: {
+    width: '1%',
+    paddingLeft: theme.spacing(1),
+  },
+  filter: {
+    display: 'inline-flex',
+    flexWrap: 'wrap',
+    gap: theme.spacing(2),
+    padding: theme.spacing(3, 2, 2),
+  },
+  filterItem: {
+    minWidth: 0,
+    flex: `1 1 ${theme.dimensions.filterFormWidth}`,
+  },
+  filterButtons: {
+    display: 'flex',
+    gap: theme.spacing(1),
+    flex: `1 1 ${theme.dimensions.filterFormWidth}`,
+  },
+  filterButton: {
+    flexGrow: 1,
+  },
+  chart: {
+    flexGrow: 1,
+    overflow: 'hidden',
+  },
+}));
diff --git a/modern/src/reports/components/ColumnSelect.js b/modern/src/reports/components/ColumnSelect.js
index d708c3d7..09932ee3 100644
--- a/modern/src/reports/components/ColumnSelect.js
+++ b/modern/src/reports/components/ColumnSelect.js
@@ -3,16 +3,16 @@ import {
   FormControl, InputLabel, MenuItem, Select,
 } from '@mui/material';
 import { useTranslation } from '../../common/components/LocalizationProvider';
-import { useFilterStyles } from './ReportFilter';
+import useReportStyles from '../common/useReportStyles';
 
 const ColumnSelect = ({
   columns, setColumns, columnsArray, columnsObject,
 }) => {
-  const classes = useFilterStyles();
+  const classes = useReportStyles();
   const t = useTranslation();
 
   return (
-    <div className={classes.item}>
+    <div className={classes.filterItem}>
       <FormControl fullWidth>
         <InputLabel>{t('sharedColumns')}</InputLabel>
         <Select
diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index 586ccc37..29d53dd0 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -2,37 +2,15 @@ import React, { useState } from 'react';
 import {
   FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography,
 } from '@mui/material';
-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';
-
-export const useFilterStyles = makeStyles((theme) => ({
-  filter: {
-    display: 'inline-flex',
-    flexWrap: 'wrap',
-    gap: theme.spacing(2),
-    padding: theme.spacing(3, 2, 2),
-  },
-  item: {
-    minWidth: 0,
-    flex: `1 1 ${dimensions.filterFormWidth}`,
-  },
-  buttons: {
-    display: 'flex',
-    gap: theme.spacing(1),
-    flex: `1 1 ${dimensions.filterFormWidth}`,
-  },
-  button: {
-    flexGrow: 1,
-  },
-}));
+import useReportStyles from '../common/useReportStyles';
 
 const ReportFilter = ({
   children, handleSubmit, showOnly, ignoreDevice,
 }) => {
-  const classes = useFilterStyles();
+  const classes = useReportStyles();
   const t = useTranslation();
 
   const devices = useSelector((state) => state.devices.items);
@@ -90,7 +68,7 @@ const ReportFilter = ({
   return (
     <div className={classes.filter}>
       {!ignoreDevice && (
-        <div className={classes.item}>
+        <div className={classes.filterItem}>
           <FormControl fullWidth>
             <InputLabel>{t('reportDevice')}</InputLabel>
             <Select label={t('reportDevice')} value={deviceId || ''} onChange={(e) => setDeviceId(e.target.value)}>
@@ -101,7 +79,7 @@ const ReportFilter = ({
           </FormControl>
         </div>
       )}
-      <div className={classes.item}>
+      <div className={classes.filterItem}>
         <FormControl fullWidth>
           <InputLabel>{t('reportPeriod')}</InputLabel>
           <Select label={t('reportPeriod')} value={period} onChange={(e) => setPeriod(e.target.value)}>
@@ -116,7 +94,7 @@ const ReportFilter = ({
         </FormControl>
       </div>
       {period === 'custom' && (
-        <div className={classes.item}>
+        <div className={classes.filterItem}>
           <TextField
             label={t('reportFrom')}
             type="datetime-local"
@@ -127,7 +105,7 @@ const ReportFilter = ({
         </div>
       )}
       {period === 'custom' && (
-        <div className={classes.item}>
+        <div className={classes.filterItem}>
           <TextField
             label={t('reportTo')}
             type="datetime-local"
@@ -138,12 +116,12 @@ const ReportFilter = ({
         </div>
       )}
       {children}
-      <div className={classes.buttons}>
+      <div className={classes.filterButtons}>
         <Button
           onClick={() => handleClick(false, true)}
           variant="outlined"
           color="secondary"
-          className={classes.button}
+          className={classes.filterButton}
           disabled={!ignoreDevice && !deviceId}
         >
           {t('reportShow')}
@@ -153,7 +131,7 @@ const ReportFilter = ({
             onClick={() => handleClick(false, false)}
             variant="outlined"
             color="secondary"
-            className={classes.button}
+            className={classes.filterButton}
             disabled={!ignoreDevice && !deviceId}
           >
             {t('reportExport')}
@@ -164,7 +142,7 @@ const ReportFilter = ({
             onClick={() => handleClick(true, false)}
             variant="outlined"
             color="secondary"
-            className={classes.button}
+            className={classes.filterButton}
             disabled={!ignoreDevice && !deviceId}
           >
             <Typography variant="button" noWrap>{t('reportEmail')}</Typography>
-- 
cgit v1.2.3