diff options
Diffstat (limited to 'src/settings/components/EditItemView.jsx')
-rw-r--r-- | src/settings/components/EditItemView.jsx | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/src/settings/components/EditItemView.jsx b/src/settings/components/EditItemView.jsx new file mode 100644 index 00000000..61bc4161 --- /dev/null +++ b/src/settings/components/EditItemView.jsx @@ -0,0 +1,101 @@ +import React from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; +import { + Container, Button, Accordion, AccordionDetails, AccordionSummary, Skeleton, Typography, TextField, +} from '@mui/material'; +import { useCatch, useEffectAsync } from '../../reactHelper'; +import { useTranslation } from '../../common/components/LocalizationProvider'; +import PageLayout from '../../common/components/PageLayout'; +import useSettingsStyles from '../common/useSettingsStyles'; + +const EditItemView = ({ + children, endpoint, item, setItem, defaultItem, validate, onItemSaved, menu, breadcrumbs, +}) => { + const navigate = useNavigate(); + const classes = useSettingsStyles(); + const t = useTranslation(); + + const { id } = useParams(); + + useEffectAsync(async () => { + if (!item) { + if (id) { + const response = await fetch(`/api/${endpoint}/${id}`); + if (response.ok) { + setItem(await response.json()); + } else { + throw Error(await response.text()); + } + } else { + setItem(defaultItem || {}); + } + } + }, [id, item, defaultItem]); + + const handleSave = useCatch(async () => { + let url = `/api/${endpoint}`; + if (id) { + url += `/${id}`; + } + + const response = await fetch(url, { + method: !id ? 'POST' : 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(item), + }); + + if (response.ok) { + if (onItemSaved) { + onItemSaved(await response.json()); + } + navigate(-1); + } else { + throw Error(await response.text()); + } + }); + + return ( + <PageLayout menu={menu} breadcrumbs={breadcrumbs}> + <Container maxWidth="xs" className={classes.container}> + {item ? children : ( + <Accordion defaultExpanded> + <AccordionSummary> + <Typography variant="subtitle1"> + <Skeleton width="10em" /> + </Typography> + </AccordionSummary> + <AccordionDetails> + {[...Array(3)].map((_, i) => ( + <Skeleton key={-i} width="100%"> + <TextField /> + </Skeleton> + ))} + </AccordionDetails> + </Accordion> + )} + <div className={classes.buttons}> + <Button + type="button" + color="primary" + variant="outlined" + onClick={() => navigate(-1)} + disabled={!item} + > + {t('sharedCancel')} + </Button> + <Button + type="button" + color="primary" + variant="contained" + onClick={handleSave} + disabled={!item || !validate()} + > + {t('sharedSave')} + </Button> + </div> + </Container> + </PageLayout> + ); +}; + +export default EditItemView; |