Implement users editing

5 files changed, 51 insertions, 81 deletions

diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 7c963b02..48c6afde 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -12,8 +12,8 @@ const DevicePage = () => {
 
   const getItem = () => {
     const updatedItem = item;
-    updatedItem.name = name;
-    updatedItem.uniqueId = uniqueId;
+    updatedItem.name = name || item.name;
+    updatedItem.uniqueId = uniqueId || item.uniqueId;
     return updatedItem;
   };
 
diff --git a/modern/src/DeviceList.js b/modern/src/DevicesList.js
index c9abce3c..28ead786 100644
--- a/modern/src/DeviceList.js
+++ b/modern/src/DevicesList.js
@@ -60,10 +60,10 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
   );
 }
 
-const DeviceList = () => {
+const DevicesList = () => {
   return (
     <EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" />
   );
 }
 
-export default DeviceList;
+export default DevicesList;
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index b13a263e..3032f93e 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -4,7 +4,7 @@ import { isWidthUp, makeStyles, withWidth } from '@material-ui/core';
 import Drawer from '@material-ui/core/Drawer';
 import ContainerDimensions from 'react-container-dimensions';
 import LinearProgress from '@material-ui/core/LinearProgress';
-import DeviceList from './DeviceList';
+import DevicesList from './DevicesList';
 import MainMap from './MainMap';
 import MainToobar from './MainToolbar';
 
@@ -49,7 +49,7 @@ const MainPage = ({ width }) => {
           anchor={isWidthUp('sm', width) ? 'left' : 'bottom'}
           variant='permanent'
           classes={{ paper: classes.drawerPaper }}>
-          <DeviceList />
+          <DevicesList />
         </Drawer>
         <div className={classes.mapContainer}>
           <ContainerDimensions>
diff --git a/modern/src/UserPage.js b/modern/src/UserPage.js
index 4b58ba81..a05cacef 100644
--- a/modern/src/UserPage.js
+++ b/modern/src/UserPage.js
@@ -13,9 +13,9 @@ const UserPage = () => {
 
   const getItem = () => {
     const updatedItem = item;
-    updatedItem.name = name;
-    updatedItem.email = email;
-    updatedItem.password = password;
+    updatedItem.name = name || item.name;
+    updatedItem.email = email || item.email;
+    updatedItem.password = password || item.password;
     return updatedItem;
   };
 
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index 85ee2488..529cdc64 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/admin/UsersPage.js
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import MainToobar from '../MainToolbar';
 import { useHistory } from 'react-router-dom';
-import { Fab, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton, Menu, MenuItem } from '@material-ui/core';
-import AddIcon from '@material-ui/icons/Add';
+import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import t from '../common/localization';
 import formatter from '../common/formatter';
 import { useEffectAsync } from '../reactHelper';
+import EditCollectionView from '../EditCollectionView';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -16,90 +16,60 @@ const useStyles = makeStyles(theme => ({
     width: theme.spacing(1),
     padding: theme.spacing(0, 1),
   },
-  fab: {
-    position: 'absolute',
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
 }));
 
-const UsersPage = () => {
-  const history = useHistory();
+const UsersView = ({ updateTimestamp, onMenuClick }) => {
   const classes = useStyles();
-  const [data, setData] = useState([]);
-  const [menuItemId, setMenuItemId] = useState(null);
-  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+
+  const [items, setItems] = useState([]);
 
   useEffectAsync(async () => {
     const response = await fetch('/api/users');
     if (response.ok) {
-      setData(await response.json());
+      setItems(await response.json());
     }
-  }, []);
-
-  const handleMenuOpen = (event, itemId) => {
-    setMenuItemId(itemId);
-    setMenuAnchorEl(event.currentTarget);
-  }
-
-  const handleMenuClose = () => {
-    setMenuItemId(null);
-    setMenuAnchorEl(null);
-  }
-
-  const handleMenuEdit = () => {
-    history.push(`/user/${menuItemId}`);
-    handleMenuClose();
-  }
+  }, [updateTimestamp]);
 
-  const handleMenuRemove = () => {
-    //setRemoveDialogOpen(true);
-    handleMenuClose();
-  }
+  return (
+    <TableContainer>
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell className={classes.columnAction} />
+          <TableCell>{t('sharedName')}</TableCell>
+          <TableCell>{t('userEmail')}</TableCell>
+          <TableCell>{t('userAdmin')}</TableCell>
+          <TableCell>{t('sharedDisabled')}</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {items.map((item) => (
+          <TableRow key={item.id}>
+            <TableCell className={classes.columnAction} padding="none">
+              <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
+                <MoreVertIcon />
+              </IconButton>
+            </TableCell>
+            <TableCell>{formatter(item, 'name')}</TableCell>
+            <TableCell>{formatter(item, 'email')}</TableCell>
+            <TableCell>{formatter(item, 'administrator')}</TableCell>
+            <TableCell>{formatter(item, 'disabled')}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+    </TableContainer>
+  );
+}
 
-  const handleAdd = () => {
-    history.push('/user');
-    //handleMenuClose();
-  }
+const UsersPage = () => {
+  const history = useHistory();
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
       <MainToobar history={history} />
-      <TableContainer>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell className={classes.columnAction} />
-              <TableCell>{t('sharedName')}</TableCell>
-              <TableCell>{t('userEmail')}</TableCell>
-              <TableCell>{t('userAdmin')}</TableCell>
-              <TableCell>{t('sharedDisabled')}</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {data.map((item) => (
-              <TableRow key={item.id}>
-                <TableCell className={classes.columnAction} padding="none">
-                  <IconButton onClick={(event) => handleMenuOpen(event, item.id)}>
-                    <MoreVertIcon />
-                  </IconButton>
-                </TableCell>
-                <TableCell>{formatter(item, 'name')}</TableCell>
-                <TableCell>{formatter(item, 'email')}</TableCell>
-                <TableCell>{formatter(item, 'administrator')}</TableCell>
-                <TableCell>{formatter(item, 'disabled')}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <Fab size="medium" color="primary" className={classes.fab} onClick={handleAdd}>
-        <AddIcon />
-      </Fab>
-      <Menu id="context-menu" anchorEl={menuAnchorEl} keepMounted open={Boolean(menuAnchorEl)} onClose={handleMenuClose}>
-        <MenuItem onClick={handleMenuEdit}>{t('sharedEdit')}</MenuItem>
-        <MenuItem onClick={handleMenuRemove}>{t('sharedRemove')}</MenuItem>
-      </Menu>
+      <EditCollectionView content={UsersView} editPath="/user" endpoint="users" />
     </div>
   );
 }