1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { useHistory } from 'react-router-dom';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import RemoveDialog from './RemoveDialog';
import { useTranslation } from './LocalizationProvider';
import dimensions from './theme/dimensions';
import { useEditable } from './common/permissions';
const useStyles = makeStyles((theme) => ({
fab: {
position: 'fixed',
bottom: theme.spacing(2),
right: theme.spacing(2),
[theme.breakpoints.down('md')]: {
bottom: dimensions.bottomBarHeight + theme.spacing(2),
},
},
}));
const EditCollectionView = ({
content, editPath, endpoint, disableAdd, filter,
}) => {
const classes = useStyles();
const history = useHistory();
const t = useTranslation();
const editable = useEditable();
const [selectedId, setSelectedId] = useState(null);
const [selectedAnchorEl, setSelectedAnchorEl] = useState(null);
const [removeDialogShown, setRemoveDialogShown] = useState(false);
const [updateTimestamp, setUpdateTimestamp] = useState(Date.now());
const menuShow = (anchorId, itemId) => {
setSelectedAnchorEl(anchorId);
setSelectedId(itemId);
};
const menuHide = () => {
setSelectedAnchorEl(null);
};
const handleAdd = () => {
history.push(editPath);
menuHide();
};
const handleEdit = () => {
history.push(`${editPath}/${selectedId}`);
menuHide();
};
const handleRemove = () => {
setRemoveDialogShown(true);
menuHide();
};
const handleRemoveResult = () => {
setRemoveDialogShown(false);
setUpdateTimestamp(Date.now());
};
const Content = content;
return (
<>
<Content updateTimestamp={updateTimestamp} onMenuClick={menuShow} filter={filter} />
{editable && !disableAdd && (
<Fab size="medium" color="primary" className={classes.fab} onClick={handleAdd}>
<AddIcon />
</Fab>
)}
<Menu open={!!selectedAnchorEl} anchorEl={selectedAnchorEl} onClose={menuHide}>
<MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem>
<MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem>
</Menu>
<RemoveDialog open={removeDialogShown} endpoint={endpoint} itemId={selectedId} onResult={handleRemoveResult} />
</>
);
};
export default EditCollectionView;
|
