diff options
Diffstat (limited to 'src/settings/GroupsPage.jsx')
-rw-r--r-- | src/settings/GroupsPage.jsx | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/src/settings/GroupsPage.jsx b/src/settings/GroupsPage.jsx new file mode 100644 index 00000000..baba7f72 --- /dev/null +++ b/src/settings/GroupsPage.jsx @@ -0,0 +1,91 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { + Table, TableRow, TableCell, TableHead, TableBody, +} from '@mui/material'; +import LinkIcon from '@mui/icons-material/Link'; +import PublishIcon from '@mui/icons-material/Publish'; +import { useEffectAsync } from '../reactHelper'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import PageLayout from '../common/components/PageLayout'; +import SettingsMenu from './components/SettingsMenu'; +import CollectionFab from './components/CollectionFab'; +import CollectionActions from './components/CollectionActions'; +import TableShimmer from '../common/components/TableShimmer'; +import SearchHeader, { filterByKeyword } from './components/SearchHeader'; +import { useRestriction } from '../common/util/permissions'; +import useSettingsStyles from './common/useSettingsStyles'; + +const GroupsPage = () => { + const classes = useSettingsStyles(); + const navigate = useNavigate(); + const t = useTranslation(); + + const limitCommands = useRestriction('limitCommands'); + + const [timestamp, setTimestamp] = useState(Date.now()); + const [items, setItems] = useState([]); + const [searchKeyword, setSearchKeyword] = useState(''); + const [loading, setLoading] = useState(false); + + useEffectAsync(async () => { + setLoading(true); + try { + const response = await fetch('/api/groups'); + if (response.ok) { + setItems(await response.json()); + } else { + throw Error(await response.text()); + } + } finally { + setLoading(false); + } + }, [timestamp]); + + const actionCommand = { + key: 'command', + title: t('deviceCommand'), + icon: <PublishIcon fontSize="small" />, + handler: (groupId) => navigate(`/settings/group/${groupId}/command`), + }; + + const actionConnections = { + key: 'connections', + title: t('sharedConnections'), + icon: <LinkIcon fontSize="small" />, + handler: (groupId) => navigate(`/settings/group/${groupId}/connections`), + }; + + return ( + <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'settingsGroups']}> + <SearchHeader keyword={searchKeyword} setKeyword={setSearchKeyword} /> + <Table className={classes.table}> + <TableHead> + <TableRow> + <TableCell>{t('sharedName')}</TableCell> + <TableCell className={classes.columnAction} /> + </TableRow> + </TableHead> + <TableBody> + {!loading ? items.filter(filterByKeyword(searchKeyword)).map((item) => ( + <TableRow key={item.id}> + <TableCell>{item.name}</TableCell> + <TableCell className={classes.columnAction} padding="none"> + <CollectionActions + itemId={item.id} + editPath="/settings/group" + endpoint="groups" + setTimestamp={setTimestamp} + customActions={limitCommands ? [actionConnections] : [actionConnections, actionCommand]} + /> + </TableCell> + </TableRow> + )) : (<TableShimmer columns={2} endAction />)} + </TableBody> + </Table> + <CollectionFab editPath="/settings/group" /> + </PageLayout> + ); +}; + +export default GroupsPage; |