diff --git a/src/settings/DevicesPage.jsx b/src/settings/DevicesPage.jsx index 831736e42e..218a7c5190 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 = () => { {t('deviceModel')} {t('deviceContact')} {t('userExpirationTime')} + {admin && {t('settingsUsers')}} @@ -82,6 +85,7 @@ const DevicesPage = () => { {item.model} {item.contact} {formatTime(item.expirationTime, 'date')} + {admin && } { /> - )) : ()} + )) : ()} - + diff --git a/src/settings/components/DeviceUsersValue.jsx b/src/settings/components/DeviceUsersValue.jsx new file mode 100644 index 0000000000..9fc87247d4 --- /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 ({t('reportShow')}); +}; + +export default DeviceUsersValue;