aboutsummaryrefslogtreecommitdiff
path: root/modern/src/admin
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/admin')
-rw-r--r--modern/src/admin/UsersPage.js58
1 files changed, 49 insertions, 9 deletions
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index 15368c7..30268e3 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>
);
}