diff options
| -rw-r--r-- | modern/src/DevicePage.js | 4 | ||||
| -rw-r--r-- | modern/src/DevicesList.js (renamed from modern/src/DeviceList.js) | 4 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 4 | ||||
| -rw-r--r-- | modern/src/UserPage.js | 6 | ||||
| -rw-r--r-- | modern/src/admin/UsersPage.js | 114 |
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> ); } |