diff options
Diffstat (limited to 'src/settings/GroupPage.jsx')
-rw-r--r-- | src/settings/GroupPage.jsx | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/src/settings/GroupPage.jsx b/src/settings/GroupPage.jsx new file mode 100644 index 00000000..ba1cbc76 --- /dev/null +++ b/src/settings/GroupPage.jsx @@ -0,0 +1,93 @@ +import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import TextField from '@mui/material/TextField'; + +import { + Accordion, AccordionSummary, AccordionDetails, Typography, +} from '@mui/material'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import EditItemView from './components/EditItemView'; +import EditAttributesAccordion from './components/EditAttributesAccordion'; +import SelectField from '../common/components/SelectField'; +import { useTranslation } from '../common/components/LocalizationProvider'; +import SettingsMenu from './components/SettingsMenu'; +import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes'; +import useGroupAttributes from '../common/attributes/useGroupAttributes'; +import { useCatch } from '../reactHelper'; +import { groupsActions } from '../store'; +import useSettingsStyles from './common/useSettingsStyles'; + +const GroupPage = () => { + const classes = useSettingsStyles(); + const dispatch = useDispatch(); + const t = useTranslation(); + + const commonDeviceAttributes = useCommonDeviceAttributes(t); + const groupAttributes = useGroupAttributes(t); + + const [item, setItem] = useState(); + + const onItemSaved = useCatch(async () => { + const response = await fetch('/api/groups'); + if (response.ok) { + dispatch(groupsActions.refresh(await response.json())); + } else { + throw Error(await response.text()); + } + }); + + const validate = () => item && item.name; + + return ( + <EditItemView + endpoint="groups" + item={item} + setItem={setItem} + validate={validate} + onItemSaved={onItemSaved} + menu={<SettingsMenu />} + breadcrumbs={['settingsTitle', 'groupDialog']} + > + {item && ( + <> + <Accordion defaultExpanded> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedRequired')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + value={item.name || ''} + onChange={(event) => setItem({ ...item, name: event.target.value })} + label={t('sharedName')} + /> + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('sharedExtra')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <SelectField + value={item.groupId} + onChange={(event) => setItem({ ...item, groupId: Number(event.target.value) })} + endpoint="/api/groups" + label={t('groupParent')} + /> + </AccordionDetails> + </Accordion> + <EditAttributesAccordion + attributes={item.attributes} + setAttributes={(attributes) => setItem({ ...item, attributes })} + definitions={{ ...commonDeviceAttributes, ...groupAttributes }} + /> + </> + )} + </EditItemView> + ); +}; + +export default GroupPage; |