Migrate events report

1 files changed, 81 insertions, 77 deletions

diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 6dd287d9..7baf2205 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
-import { DataGrid } from '@material-ui/data-grid';
 import {
-  FormControl, InputLabel, Select, MenuItem,
+  FormControl, InputLabel, Select, MenuItem, TableContainer, Table, TableHead, TableRow, TableCell, TableBody,
 } from '@material-ui/core';
-import { useTheme } from '@material-ui/core/styles';
 import { useSelector } from 'react-redux';
-import { formatDate } from '../common/util/formatter';
+import { formatTime } from '../common/util/formatter';
 import ReportFilter, { useFilterStyles } from './components/ReportFilter';
 import { prefixString } from '../common/util/stringUtils';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
+import usePersistedState from '../common/util/usePersistedState';
+import ColumnSelect from './components/ColumnSelect';
 
 const typesArray = [
   ['allEvents', 'eventAll'],
@@ -34,11 +34,24 @@ const typesArray = [
 ];
 const typesMap = new Map(typesArray);
 
-const Filter = ({ setItems }) => {
+const columnsArray = [
+  ['eventTime', 'positionFixTime'],
+  ['type', 'sharedType'],
+  ['geofenceId', 'sharedGeofence'],
+  ['maintenanceId', 'sharedMaintenance'],
+  ['alarm', 'positionAlarm'],
+];
+const columnsMap = new Map(columnsArray);
+
+const EventReportPage = () => {
   const classes = useFilterStyles();
   const t = useTranslation();
 
+  const geofences = useSelector((state) => state.geofences.items);
+
+  const [columns, setColumns] = usePersistedState('eventColumns', ['eventTime', 'type', 'alarm']);
   const [eventTypes, setEventTypes] = useState(['allEvents']);
+  const [items, setItems] = useState([]);
 
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
     const query = new URLSearchParams({
@@ -58,83 +71,74 @@ const Filter = ({ setItems }) => {
     }
   };
 
-  return (
-    <ReportFilter handleSubmit={handleSubmit}>
-      <div className={classes.item}>
-        <FormControl variant="filled" fullWidth>
-          <InputLabel>{t('reportEventTypes')}</InputLabel>
-          <Select
-            value={eventTypes}
-            onChange={(event, child) => {
-              let values = event.target.value;
-              const clicked = child.props.value;
-              if (values.includes('allEvents') && values.length > 1) {
-                values = [clicked];
-              }
-              setEventTypes(values);
-            }}
-            renderValue={(it) => (it.length > 1 ? it.length : it.length > 0 ? t(typesMap.get(it[0])) : it)}
-            multiple
-          >
-            {typesArray.map(([key, string]) => (
-              <MenuItem value={key}>{t(string)}</MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </div>
-    </ReportFilter>
-  );
-};
-
-const EventReportPage = () => {
-  const theme = useTheme();
-  const t = useTranslation();
-
-  const geofences = useSelector((state) => state.geofences.items);
-
-  const [items, setItems] = useState([]);
-
-  const formatGeofence = (value) => {
-    if (value > 0) {
-      const geofence = geofences[value];
-      return geofence ? geofence.name : '';
+  const formatValue = (item, key) => {
+    switch (key) {
+      case 'eventTime':
+        return formatTime(item[key]);
+      case 'type':
+        return t(prefixString('event', item[key]));
+      case 'geofenceId':
+        if (item[key] > 0) {
+          const geofence = geofences[item[key]];
+          return geofence && geofence.name;
+        }
+        return null;
+      case 'maintenanceId':
+        return item[key] > 0 ? item[key] > 0 : null;
+      case 'alarm':
+        return item.attributes[key] ? t(prefixString('alarm', item.attributes[key])) : null;
+      default:
+        return item[key];
     }
-    return null;
   };
 
-  const columns = [{
-    headerName: t('positionFixTime'),
-    field: 'serverTime',
-    type: 'dateTime',
-    width: theme.dimensions.columnWidthDate,
-    valueFormatter: ({ value }) => formatDate(value),
-  }, {
-    headerName: t('sharedType'),
-    field: 'type',
-    type: 'string',
-    width: theme.dimensions.columnWidthString,
-    valueFormatter: ({ value }) => t(prefixString('event', value)),
-  }, {
-    headerName: t('sharedGeofence'),
-    field: 'geofenceId',
-    width: theme.dimensions.columnWidthString,
-    valueFormatter: ({ value }) => formatGeofence(value),
-  }, {
-    headerName: t('sharedMaintenance'),
-    field: 'maintenanceId',
-    type: 'number',
-    width: theme.dimensions.columnWidthString,
-  }];
-
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportEvents']}>
-      <Filter setItems={setItems} />
-      <DataGrid
-        rows={items}
-        columns={columns}
-        hideFooter
-        autoHeight
-      />
+      <ReportFilter handleSubmit={handleSubmit}>
+        <div className={classes.item}>
+          <FormControl variant="filled" fullWidth>
+            <InputLabel>{t('reportEventTypes')}</InputLabel>
+            <Select
+              value={eventTypes}
+              onChange={(event, child) => {
+                let values = event.target.value;
+                const clicked = child.props.value;
+                if (values.includes('allEvents') && values.length > 1) {
+                  values = [clicked];
+                }
+                setEventTypes(values);
+              }}
+              renderValue={(it) => (it.length > 1 ? it.length : it.length > 0 ? t(typesMap.get(it[0])) : it)}
+              multiple
+            >
+              {typesArray.map(([key, string]) => (
+                <MenuItem value={key}>{t(string)}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </div>
+        <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>
   );
 };