diff options
author | Anton Tananaev <anton@traccar.org> | 2022-05-08 13:16:57 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-05-08 13:16:57 -0700 |
commit | 2cd374bb9fa941d7e2a6fd8aa5079893a158c98f (patch) | |
tree | f4ee48130592fed5de25dce7af4ac0cbeb017680 /modern/src/settings/components/EditCollectionView.js | |
parent | 2352071211b61c10fa5bf5736baaff7809d18bf0 (diff) | |
download | trackermap-web-2cd374bb9fa941d7e2a6fd8aa5079893a158c98f.tar.gz trackermap-web-2cd374bb9fa941d7e2a6fd8aa5079893a158c98f.tar.bz2 trackermap-web-2cd374bb9fa941d7e2a6fd8aa5079893a158c98f.zip |
Reorganize remaining files
Diffstat (limited to 'modern/src/settings/components/EditCollectionView.js')
-rw-r--r-- | modern/src/settings/components/EditCollectionView.js | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/modern/src/settings/components/EditCollectionView.js b/modern/src/settings/components/EditCollectionView.js new file mode 100644 index 00000000..9107b68e --- /dev/null +++ b/modern/src/settings/components/EditCollectionView.js @@ -0,0 +1,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 '../../common/components/RemoveDialog'; +import { useTranslation } from '../../common/components/LocalizationProvider'; +import dimensions from '../../common/theme/dimensions'; +import { useEditable } from '../../common/util/permissions'; + +const useStyles = makeStyles((theme) => ({ + fab: { + position: 'fixed', + bottom: theme.spacing(2), + right: theme.spacing(2), + [theme.breakpoints.down('sm')]: { + 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; |