diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-09-20 18:22:36 -0700 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-09-20 18:22:36 -0700 |
commit | b124908d9f9f2a24963871cac982cc5b5e172ba5 (patch) | |
tree | 87ccaa2cbb104af3547dab06703821fe48c4bc00 /modern/src/admin | |
parent | b2cd88bbbad82654057cec8aec7415a8caca667e (diff) | |
download | trackermap-web-b124908d9f9f2a24963871cac982cc5b5e172ba5.tar.gz trackermap-web-b124908d9f9f2a24963871cac982cc5b5e172ba5.tar.bz2 trackermap-web-b124908d9f9f2a24963871cac982cc5b5e172ba5.zip |
Implement simple users screen
Diffstat (limited to 'modern/src/admin')
-rw-r--r-- | modern/src/admin/UsersPage.js | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js new file mode 100644 index 00000000..15368c75 --- /dev/null +++ b/modern/src/admin/UsersPage.js @@ -0,0 +1,66 @@ +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 t from '../common/localization'; +import formatter from '../common/formatter'; +import { useEffectAsync } from '../reactHelper'; + +const useStyles = makeStyles(theme => ({ + root: { + height: '100%', + display: 'flex', + flexDirection: 'column', + }, + content: { + flex: 1, + overflow: 'auto', + padding: theme.spacing(2), + }, + form: { + padding: theme.spacing(1, 2, 2), + }, +})); + +const UsersPage = () => { + const history = useHistory(); + const classes = useStyles(); + const [data, setData] = useState([]); + + useEffectAsync(async () => { + const response = await fetch('/api/users'); + if (response.ok) { + setData(await response.json()); + } + }, []); + + return ( + <div className={classes.root}> + <MainToobar history={history} /> + <TableContainer> + <Table> + <TableHead> + <TableRow> + <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>{formatter(item, 'name')}</TableCell> + <TableCell>{formatter(item, 'email')}</TableCell> + <TableCell>{formatter(item, 'administrator')}</TableCell> + <TableCell>{formatter(item, 'disabled')}</TableCell> + </TableRow> + ))} + </TableBody> + </Table> + </TableContainer> + </div> + ); +} + +export default UsersPage; |