Merge branch 'master' of github.com:traccar/traccar-web into fix-key-issue

1 files changed, 36 insertions, 40 deletions

diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index ea00e7e1..d4a06fd2 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -1,17 +1,17 @@
 import React, { useState } from 'react';
 import {
-  TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton,
-} from '@material-ui/core';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+  TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { useEffectAsync } from '../reactHelper';
-import EditCollectionView from './components/EditCollectionView';
-
 import usePositionAttributes from '../common/attributes/usePositionAttributes';
 import { formatDistance, formatSpeed } from '../common/util/formatter';
 import { useAttributePreference } from '../common/util/preferences';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import SettingsMenu from './components/SettingsMenu';
+import CollectionFab from './components/CollectionFab';
+import CollectionActions from './components/CollectionActions';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
@@ -20,12 +20,13 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
+const MaintenacesPage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
   const positionAttributes = usePositionAttributes(t);
 
+  const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
   const speedUnit = useAttributePreference('speedUnit');
   const distanceUnit = useAttributePreference('distanceUnit');
@@ -37,7 +38,7 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
     } else {
       throw Error(await response.text());
     }
-  }, [updateTimestamp]);
+  }, [timestamp]);
 
   const convertAttribute = (key, value) => {
     const attribute = positionAttributes[key];
@@ -56,41 +57,36 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
   };
 
   return (
-    <TableContainer>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell className={classes.columnAction} />
-            <TableCell>{t('sharedName')}</TableCell>
-            <TableCell>{t('sharedType')}</TableCell>
-            <TableCell>{t('maintenanceStart')}</TableCell>
-            <TableCell>{t('maintenancePeriod')}</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {items.map((item) => (
-            <TableRow key={item.id}>
-              <TableCell className={classes.columnAction} padding="none">
-                <IconButton size="small" onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
-                  <MoreVertIcon />
-                </IconButton>
-              </TableCell>
-              <TableCell>{item.name}</TableCell>
-              <TableCell>{item.type}</TableCell>
-              <TableCell>{convertAttribute(item.type, item.start)}</TableCell>
-              <TableCell>{convertAttribute(item.type, item.period)}</TableCell>
+    <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedMaintenance']}>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell className={classes.columnAction} />
+              <TableCell>{t('sharedName')}</TableCell>
+              <TableCell>{t('sharedType')}</TableCell>
+              <TableCell>{t('maintenanceStart')}</TableCell>
+              <TableCell>{t('maintenancePeriod')}</TableCell>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+          </TableHead>
+          <TableBody>
+            {items.map((item) => (
+              <TableRow key={item.id}>
+                <TableCell className={classes.columnAction} padding="none">
+                  <CollectionActions itemId={item.id} editPath="/settings/maintenance" endpoint="maintenance" setTimestamp={setTimestamp} />
+                </TableCell>
+                <TableCell>{item.name}</TableCell>
+                <TableCell>{item.type}</TableCell>
+                <TableCell>{convertAttribute(item.type, item.start)}</TableCell>
+                <TableCell>{convertAttribute(item.type, item.period)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <CollectionFab editPath="/settings/maintenance" />
+    </PageLayout>
   );
 };
 
-const MaintenacesPage = () => (
-  <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedMaintenance']}>
-    <EditCollectionView content={MaintenancesView} editPath="/settings/maintenance" endpoint="maintenance" />
-  </PageLayout>
-);
-
 export default MaintenacesPage;