diff options
| -rw-r--r-- | src/settings/DevicesPage.jsx | 10 | ||||
| -rw-r--r-- | src/settings/components/DeviceUsersValue.jsx | 27 |
2 files changed, 34 insertions, 3 deletions
diff --git a/src/settings/DevicesPage.jsx b/src/settings/DevicesPage.jsx index 831736e4..218a7c51 100644 --- a/src/settings/DevicesPage.jsx +++ b/src/settings/DevicesPage.jsx @@ -14,8 +14,9 @@ import CollectionActions from './components/CollectionActions'; import TableShimmer from '../common/components/TableShimmer'; import SearchHeader, { filterByKeyword } from './components/SearchHeader'; import { formatTime } from '../common/util/formatter'; -import { useDeviceReadonly } from '../common/util/permissions'; +import { useAdministrator, useDeviceReadonly } from '../common/util/permissions'; import useSettingsStyles from './common/useSettingsStyles'; +import DeviceUsersValue from './components/DeviceUsersValue'; const DevicesPage = () => { const classes = useSettingsStyles(); @@ -24,6 +25,7 @@ const DevicesPage = () => { const groups = useSelector((state) => state.groups.items); + const admin = useAdministrator(); const deviceReadonly = useDeviceReadonly(); const [timestamp, setTimestamp] = useState(Date.now()); @@ -69,6 +71,7 @@ const DevicesPage = () => { <TableCell>{t('deviceModel')}</TableCell> <TableCell>{t('deviceContact')}</TableCell> <TableCell>{t('userExpirationTime')}</TableCell> + {admin && <TableCell>{t('settingsUsers')}</TableCell>} <TableCell className={classes.columnAction} /> </TableRow> </TableHead> @@ -82,6 +85,7 @@ const DevicesPage = () => { <TableCell>{item.model}</TableCell> <TableCell>{item.contact}</TableCell> <TableCell>{formatTime(item.expirationTime, 'date')}</TableCell> + {admin && <TableCell><DeviceUsersValue deviceId={item.id} /></TableCell>} <TableCell className={classes.columnAction} padding="none"> <CollectionActions itemId={item.id} @@ -93,11 +97,11 @@ const DevicesPage = () => { /> </TableCell> </TableRow> - )) : (<TableShimmer columns={7} endAction />)} + )) : (<TableShimmer columns={admin ? 8 : 7} endAction />)} </TableBody> <TableFooter> <TableRow> - <TableCell colSpan={8} align="right"> + <TableCell colSpan={admin ? 9 : 8} align="right"> <Button onClick={handleExport} variant="text">{t('reportExport')}</Button> </TableCell> </TableRow> diff --git a/src/settings/components/DeviceUsersValue.jsx b/src/settings/components/DeviceUsersValue.jsx new file mode 100644 index 00000000..9fc87247 --- /dev/null +++ b/src/settings/components/DeviceUsersValue.jsx @@ -0,0 +1,27 @@ +import React, { useState } from 'react'; +import { Link } from '@mui/material'; +import { useCatch } from '../../reactHelper'; +import { useTranslation } from '../../common/components/LocalizationProvider'; + +const DeviceUsersValue = ({ deviceId }) => { + const t = useTranslation(); + + const [users, setUsers] = useState(); + + const loadUsers = useCatch(async () => { + const query = new URLSearchParams({ deviceId }); + const response = await fetch(`/api/users?${query.toString()}`); + if (response.ok) { + setUsers(await response.json()); + } else { + throw Error(await response.text()); + } + }); + + if (users) { + return users.map((user) => user.name).join(', '); + } + return (<Link href="#" onClick={loadUsers}>{t('reportShow')}</Link>); +}; + +export default DeviceUsersValue; |