diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-03-30 12:09:16 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-03-30 12:09:16 +0530 |
commit | cee6b4ed848f5178881f5d48a4092fb2bec2bd6b (patch) | |
tree | 8bea1cf8ced8e6faab9eacb97e59eb7d99140cda /modern | |
parent | 323aaaebc3fd62cdcb6ab5580153af8afeac30e4 (diff) | |
download | trackermap-web-cee6b4ed848f5178881f5d48a4092fb2bec2bd6b.tar.gz trackermap-web-cee6b4ed848f5178881f5d48a4092fb2bec2bd6b.tar.bz2 trackermap-web-cee6b4ed848f5178881f5d48a4092fb2bec2bd6b.zip |
event report data-grid implementation
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/reports/EventReportPage.js | 54 |
1 files changed, 30 insertions, 24 deletions
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js index 459383e9..cbe2ced5 100644 --- a/modern/src/reports/EventReportPage.js +++ b/modern/src/reports/EventReportPage.js @@ -1,8 +1,8 @@ import React, { useState } from 'react'; -import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper } from '@material-ui/core'; +import { DataGrid } from '@material-ui/data-grid'; import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core'; import t from '../common/localization'; -import { formatPosition } from '../common/formatter'; +import { formatDate } from '../common/formatter'; import ReportFilter from './ReportFilter'; import ReportLayoutPage from './ReportLayoutPage'; @@ -59,30 +59,36 @@ const EventReportPage = () => { const [items, setItems] = useState([]); + const columns = [{ + headerName: t('positionFixTime'), + field: 'serverTime', + type: 'dateTime', + flex: 1, + valueFormatter: ({ value }) => formatDate(value), + }, { + headerName: t('sharedType'), + field: 'type', + type: 'string', + flex:1, + }, { + headerName: t('sharedGeofence'), + field: 'geofenceId', + type: 'number', + flex: 1, + }, { + headerName: t('sharedMaintenance'), + field: 'maintenanceId', + type: 'number', + flex: 1 + }]; + return ( <ReportLayoutPage filter={<Filter setItems={setItems} />}> - <TableContainer component={Paper}> - <Table> - <TableHead> - <TableRow> - <TableCell>{t('positionFixTime')}</TableCell> - <TableCell>{t('sharedType')}</TableCell> - <TableCell>{t('sharedGeofence')}</TableCell> - <TableCell>{t('sharedMaintenance')}</TableCell> - </TableRow> - </TableHead> - <TableBody> - {items.map(item => ( - <TableRow key={item.id}> - <TableCell>{formatPosition(item, 'eventTime')}</TableCell> - <TableCell>{item.type}</TableCell> - <TableCell>{}</TableCell> - <TableCell>{}</TableCell> - </TableRow> - ))} - </TableBody> - </Table> - </TableContainer> + <DataGrid + rows={items} + columns={columns} + hideFooter + autoHeight /> </ReportLayoutPage> ); } |