diff options
| -rw-r--r-- | modern/src/settings/components/EditItemView.js | 28 |
1 files changed, 23 insertions, 5 deletions
diff --git a/modern/src/settings/components/EditItemView.js b/modern/src/settings/components/EditItemView.js index 8dca1e66..4d354a8f 100644 --- a/modern/src/settings/components/EditItemView.js +++ b/modern/src/settings/components/EditItemView.js @@ -1,9 +1,7 @@ import React from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import makeStyles from '@mui/styles/makeStyles'; -import Container from '@mui/material/Container'; -import Button from '@mui/material/Button'; - +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'; @@ -21,6 +19,10 @@ const useStyles = makeStyles((theme) => ({ flexBasis: '33%', }, }, + details: { + display: 'flex', + flexDirection: 'column', + }, })); const EditItemView = ({ @@ -70,13 +72,29 @@ const EditItemView = ({ return ( <PageLayout menu={menu} breadcrumbs={breadcrumbs}> <Container maxWidth="xs" className={classes.container}> - {children} + {item ? children : ( + <Accordion defaultExpanded> + <AccordionSummary> + <Typography variant="subtitle1"> + <Skeleton width="10em" /> + </Typography> + </AccordionSummary> + <AccordionDetails> + {[...Array(3)].map(() => ( + <Skeleton 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> @@ -85,7 +103,7 @@ const EditItemView = ({ color="primary" variant="contained" onClick={handleSave} - disabled={!validate()} + disabled={!item || !validate()} > {t('sharedSave')} </Button> |