1 files changed, 36 insertions, 39 deletions
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index de3e762f..ae463dd3 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -1,15 +1,16 @@
 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 { prefixString } from '../common/util/stringUtils';
 import { formatBoolean } from '../common/util/formatter';
 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: {
@@ -18,10 +19,11 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const NotificationsView = ({ updateTimestamp, onMenuClick }) => {
+const NotificationsPage = () => {
   const classes = useStyles();
   const t = useTranslation();
 
+  const [timestamp, setTimestamp] = useState(Date.now());
   const [items, setItems] = useState([]);
 
   useEffectAsync(async () => {
@@ -31,7 +33,7 @@ const NotificationsView = ({ updateTimestamp, onMenuClick }) => {
     } else {
       throw Error(await response.text());
     }
-  }, [updateTimestamp]);
+  }, [timestamp]);
 
   const formatList = (prefix, value) => {
     if (value) {
@@ -45,41 +47,36 @@ const NotificationsView = ({ updateTimestamp, onMenuClick }) => {
   };
 
   return (
-    <TableContainer>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell className={classes.columnAction} />
-            <TableCell>{t('notificationType')}</TableCell>
-            <TableCell>{t('notificationAlways')}</TableCell>
-            <TableCell>{t('sharedAlarms')}</TableCell>
-            <TableCell>{t('notificationNotificators')}</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>{t(prefixString('event', item.type))}</TableCell>
-              <TableCell>{formatBoolean(item.always, t)}</TableCell>
-              <TableCell>{formatList('alarm', item.attributes.alarms)}</TableCell>
-              <TableCell>{formatList('notificator', item.notificators)}</TableCell>
+    <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedNotifications']}>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell className={classes.columnAction} />
+              <TableCell>{t('notificationType')}</TableCell>
+              <TableCell>{t('notificationAlways')}</TableCell>
+              <TableCell>{t('sharedAlarms')}</TableCell>
+              <TableCell>{t('notificationNotificators')}</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/notification" endpoint="notifications" setTimestamp={setTimestamp} />
+                </TableCell>
+                <TableCell>{t(prefixString('event', item.type))}</TableCell>
+                <TableCell>{formatBoolean(item.always, t)}</TableCell>
+                <TableCell>{formatList('alarm', item.attributes.alarms)}</TableCell>
+                <TableCell>{formatList('notificator', item.notificators)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <CollectionFab editPath="/settings/notification" />
+    </PageLayout>
   );
 };
 
-const NotificationsPage = () => (
-  <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedNotifications']}>
-    <EditCollectionView content={NotificationsView} editPath="/settings/notification" endpoint="notifications" />
-  </PageLayout>
-);
-
 export default NotificationsPage;