2 files changed, 76 insertions, 100 deletions

diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 7baf2205..076979ba 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -3,7 +3,7 @@ import {
   FormControl, InputLabel, Select, MenuItem, TableContainer, Table, TableHead, TableRow, TableCell, TableBody,
 } from '@material-ui/core';
 import { useSelector } from 'react-redux';
-import { formatTime } from '../common/util/formatter';
+import { formatDate } from '../common/util/formatter';
 import ReportFilter, { useFilterStyles } from './components/ReportFilter';
 import { prefixString } from '../common/util/stringUtils';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -74,7 +74,7 @@ const EventReportPage = () => {
   const formatValue = (item, key) => {
     switch (key) {
       case 'eventTime':
-        return formatTime(item[key]);
+        return formatDate(item[key]);
       case 'type':
         return t(prefixString('event', item[key]));
       case 'geofenceId':
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index a0141b68..c9d620e8 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { DataGrid } from '@material-ui/data-grid';
-import { useTheme } from '@material-ui/core/styles';
+import {
+  Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
+} from '@material-ui/core';
 import {
   formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
@@ -9,8 +10,35 @@ import { useAttributePreference } from '../common/util/preferences';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
+import ColumnSelect from './components/ColumnSelect';
+import usePersistedState from '../common/util/usePersistedState';
+
+const columnsArray = [
+  ['startTime', 'reportStartTime'],
+  ['startOdometer', 'reportStartOdometer'],
+  ['startAddress', 'reportStartAddress'],
+  ['endTime', 'reportEndTime'],
+  ['endOdometer', 'reportEndOdometer'],
+  ['endAddress', 'reportEndAddress'],
+  ['distance', 'sharedDistance'],
+  ['averageSpeed', 'reportAverageSpeed'],
+  ['maxSpeed', 'reportMaximumSpeed'],
+  ['duration', 'reportDuration'],
+  ['spentFuel', 'reportSpentFuel'],
+  ['driverName', 'sharedDriver'],
+];
+const columnsMap = new Map(columnsArray);
+
+const TripReportPage = () => {
+  const t = useTranslation();
+
+  const distanceUnit = useAttributePreference('distanceUnit');
+  const speedUnit = useAttributePreference('speedUnit');
+  const volumeUnit = useAttributePreference('volumeUnit');
+
+  const [columns, setColumns] = usePersistedState('tripColumns', ['startTime', 'endTime', 'distance', 'averageSpeed']);
+  const [items, setItems] = useState([]);
 
-const Filter = ({ setItems }) => {
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
       deviceId, from, to, mail,
@@ -28,104 +56,52 @@ const Filter = ({ setItems }) => {
     }
   };
 
-  return <ReportFilter handleSubmit={handleSubmit} />;
-};
-
-const TripReportPage = () => {
-  const theme = useTheme();
-  const t = useTranslation();
-
-  const distanceUnit = useAttributePreference('distanceUnit');
-  const speedUnit = useAttributePreference('speedUnit');
-  const volumeUnit = useAttributePreference('volumeUnit');
-
-  const [items, setItems] = useState([]);
-
-  const columns = [{
-    headerName: t('reportStartTime'),
-    field: 'startTime',
-    type: 'dateTime',
-    width: theme.dimensions.columnWidthDate,
-    valueFormatter: ({ value }) => formatDate(value),
-  }, {
-    headerName: t('reportStartOdometer'),
-    field: 'startOdometer',
-    type: 'number',
-    width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
-  }, {
-    headerName: t('reportStartAddress'),
-    field: 'startAddress',
-    type: 'string',
-    hide: true,
-    width: theme.dimensions.columnWidthString,
-  }, {
-    headerName: t('reportEndTime'),
-    field: 'endTime',
-    type: 'dateTime',
-    width: theme.dimensions.columnWidthDate,
-    valueFormatter: ({ value }) => formatDate(value),
-  }, {
-    headerName: t('reportEndOdometer'),
-    field: 'endOdometer',
-    type: 'number',
-    width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
-  }, {
-    headerName: t('reportEndAddress'),
-    field: 'endAddress',
-    type: 'string',
-    hide: true,
-    width: theme.dimensions.columnWidthString,
-  }, {
-    headerName: t('sharedDistance'),
-    field: 'distance',
-    type: 'number',
-    width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatDistance(value, distanceUnit, t),
-  }, {
-    headerName: t('reportAverageSpeed'),
-    field: 'averageSpeed',
-    type: 'number',
-    width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
-  }, {
-    headerName: t('reportMaximumSpeed'),
-    field: 'maxSpeed',
-    type: 'number',
-    width: theme.dimensions.columnWidthNumber,
-    valueFormatter: ({ value }) => formatSpeed(value, speedUnit, t),
-  }, {
-    headerName: t('reportDuration'),
-    field: 'duration',
-    type: 'string',
-    width: theme.dimensions.columnWidthString,
-    valueFormatter: ({ value }) => formatHours(value),
-  }, {
-    headerName: t('reportSpentFuel'),
-    field: 'spentFuel',
-    type: 'number',
-    width: theme.dimensions.columnWidthNumber,
-    hide: true,
-    valueFormatter: ({ value }) => formatVolume(value, volumeUnit, t),
-  }, {
-    headerName: t('sharedDriver'),
-    field: 'driverName',
-    type: 'string',
-    width: theme.dimensions.columnWidthString,
-    hide: true,
-  }];
+  const formatValue = (item, key) => {
+    switch (key) {
+      case 'startTime':
+      case 'endTime':
+        return formatDate(item[key]);
+      case 'startOdometer':
+      case 'endOdometer':
+      case 'distance':
+        return formatDistance(item[key], distanceUnit, t);
+      case 'averageSpeed':
+      case 'maxSpeed':
+        return formatSpeed(item[key], speedUnit, t);
+      case 'duration':
+        return formatHours(item[key]);
+      case 'spentFuel':
+        return formatVolume(item[key], volumeUnit, t);
+      default:
+        return item[key];
+    }
+  };
 
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportTrips']}>
-      <Filter setItems={setItems} />
-      <DataGrid
-        rows={items}
-        columns={columns}
-        hideFooter
-        autoHeight
-        getRowId={() => Math.random()}
-      />
+      <ReportFilter handleSubmit={handleSubmit}>
+        <ColumnSelect columns={columns} setColumns={setColumns} columnsArray={columnsArray} />
+      </ReportFilter>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              {columns.map((key) => (<TableCell>{t(columnsMap.get(key))}</TableCell>))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {items.map((item) => (
+              <TableRow key={item.id}>
+                {columns.map((key) => (
+                  <TableCell>
+                    {formatValue(item, key)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
     </PageLayout>
   );
 };