Add users context menu

2 files changed, 53 insertions, 12 deletions

diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 338e961b..60731967 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -44,6 +44,7 @@ const MainToolbar = () => {
   const classes = useStyles();
   const history = useHistory();
   const adminEnabled = useSelector(state => state.session.user && state.session.user.administrator);
+  const userId = useSelector(state => state.session.user && state.session.user.id);
 
   const openDrawer = () => { setDrawer(true) }
   const closeDrawer = () => { setDrawer(false) }
@@ -94,7 +95,7 @@ const MainToolbar = () => {
                 {t('reportTitle')}
               </ListSubheader>
             }>
-            <ListItem button onClick={() => { history.push('/reports/route') }}>
+            <ListItem button onClick={() => history.push('/reports/route')}>
               <ListItemIcon>
                 <BarChartIcon />
               </ListItemIcon>
@@ -138,7 +139,7 @@ const MainToolbar = () => {
                 {t('settingsTitle')}
               </ListSubheader>
             }>
-            <ListItem button disabled>
+            <ListItem button disabled={!userId} onClick={() => history.push(`/user/${userId}`)}>
               <ListItemIcon>
                 <SettingsIcon />
               </ListItemIcon>
@@ -166,7 +167,7 @@ const MainToolbar = () => {
                     {t('userAdmin')}
                   </ListSubheader>
                 }>
-                <ListItem button onClick={() => { history.push('/admin/users') }}>
+                <ListItem button onClick={() => history.push('/admin/users')}>
                   <ListItemIcon>
                     <PeopleIcon />
                   </ListItemIcon>
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index 15368c75..30268e3e 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/admin/UsersPage.js
@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import MainToobar from '../MainToolbar';
 import { useHistory } from 'react-router-dom';
-import { TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles } from '@material-ui/core';
+import { Fab, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles, IconButton, Menu, MenuItem } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
 import t from '../common/localization';
 import formatter from '../common/formatter';
 import { useEffectAsync } from '../reactHelper';
@@ -9,16 +11,14 @@ import { useEffectAsync } from '../reactHelper';
 const useStyles = makeStyles(theme => ({
   root: {
     height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
   },
-  content: {
-    flex: 1,
-    overflow: 'auto',
-    padding: theme.spacing(2),
+  columnAction: {
+    width: theme.spacing(8),
   },
-  form: {
-    padding: theme.spacing(1, 2, 2),
+  fab: {
+    position: 'absolute',
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
   },
 }));
 
@@ -26,6 +26,8 @@ const UsersPage = () => {
   const history = useHistory();
   const classes = useStyles();
   const [data, setData] = useState([]);
+  const [menuItemId, setMenuItemId] = useState(null);
+  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
 
   useEffectAsync(async () => {
     const response = await fetch('/api/users');
@@ -34,6 +36,31 @@ const UsersPage = () => {
     }
   }, []);
 
+  const handleMenuOpen = (event, itemId) => {
+    setMenuItemId(itemId);
+    setMenuAnchorEl(event.currentTarget);
+  }
+
+  const handleMenuClose = () => {
+    setMenuItemId(null);
+    setMenuAnchorEl(null);
+  }
+
+  const handleMenuEdit = () => {
+    history.push(`/user/${menuItemId}`);
+    handleMenuClose();
+  }
+
+  const handleMenuRemove = () => {
+    //setRemoveDialogOpen(true);
+    handleMenuClose();
+  }
+
+  const handleAdd = () => {
+    history.push('/user');
+    //handleMenuClose();
+  }
+
   return (
     <div className={classes.root}>
       <MainToobar history={history} />
@@ -45,6 +72,7 @@ const UsersPage = () => {
               <TableCell>{t('userEmail')}</TableCell>
               <TableCell>{t('userAdmin')}</TableCell>
               <TableCell>{t('sharedDisabled')}</TableCell>
+              <TableCell className={classes.columnAction}></TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
@@ -54,11 +82,23 @@ const UsersPage = () => {
                 <TableCell>{formatter(item, 'email')}</TableCell>
                 <TableCell>{formatter(item, 'administrator')}</TableCell>
                 <TableCell>{formatter(item, 'disabled')}</TableCell>
+                <TableCell className={classes.columnAction} padding="none">
+                  <IconButton onClick={(event) => handleMenuOpen(event, item.id)}>
+                    <MoreVertIcon />
+                  </IconButton>
+                </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>
     </div>
   );
 }