aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/settings/components/EditItemView.js28
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>