Reorganize collections

3 files changed, 83 insertions, 89 deletions

diff --git a/modern/src/settings/components/CollectionActions.js b/modern/src/settings/components/CollectionActions.js
new file mode 100644
index 00000000..6bf9ddb1
--- /dev/null
+++ b/modern/src/settings/components/CollectionActions.js
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { IconButton, Menu, MenuItem } from '@material-ui/core';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { useHistory } from 'react-router-dom';
+import RemoveDialog from '../../common/components/RemoveDialog';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+
+const CollectionActions = ({
+  itemId, editPath, endpoint, setTimestamp,
+}) => {
+  const history = useHistory();
+  const t = useTranslation();
+
+  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+  const [removing, setRemoving] = useState(false);
+
+  const handleEdit = () => {
+    history.push(`${editPath}/${itemId}`);
+    setMenuAnchorEl(null);
+  };
+
+  const handleRemove = () => {
+    setRemoving(true);
+    setMenuAnchorEl(null);
+  };
+
+  const handleRemoveResult = (removed) => {
+    setRemoving(false);
+    if (removed && setTimestamp) {
+      setTimestamp(Date.now());
+    }
+  };
+
+  return (
+    <>
+      <IconButton size="small" onClick={(event) => setMenuAnchorEl(event.currentTarget)}>
+        <MoreVertIcon />
+      </IconButton>
+      <Menu open={!!menuAnchorEl} anchorEl={menuAnchorEl} onClose={() => setMenuAnchorEl(null)}>
+        <MenuItem onClick={handleEdit}>{t('sharedEdit')}</MenuItem>
+        <MenuItem onClick={handleRemove}>{t('sharedRemove')}</MenuItem>
+      </Menu>
+      <RemoveDialog style={{ transform: 'none' }} open={removing} endpoint={endpoint} itemId={itemId} onResult={handleRemoveResult} />
+    </>
+  );
+};
+
+export default CollectionActions;
diff --git a/modern/src/settings/components/CollectionFab.js b/modern/src/settings/components/CollectionFab.js
new file mode 100644
index 00000000..f52bed38
--- /dev/null
+++ b/modern/src/settings/components/CollectionFab.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Fab, makeStyles } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import { useHistory } from 'react-router-dom';
+import { useReadonly } from '../../common/util/permissions';
+import dimensions from '../../common/theme/dimensions';
+
+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 CollectionFab = ({ editPath, disabled }) => {
+  const classes = useStyles();
+  const history = useHistory();
+
+  const readonly = useReadonly();
+
+  if (!readonly && !disabled) {
+    return (
+      <Fab size="medium" color="primary" className={classes.fab} onClick={() => history.push(editPath)}>
+        <AddIcon />
+      </Fab>
+    );
+  }
+  return '';
+};
+
+export default CollectionFab;
diff --git a/modern/src/settings/components/EditCollectionView.js b/modern/src/settings/components/EditCollectionView.js
deleted file mode 100644
index b0bf3ea0..00000000
--- a/modern/src/settings/components/EditCollectionView.js
+++ /dev/null
@@ -1,89 +0,0 @@
-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 { useReadonly } 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 readonly = useReadonly();
-
-  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 = (removed) => {
-    setRemoveDialogShown(false);
-    if (removed) {
-      setUpdateTimestamp(Date.now());
-    }
-  };
-
-  const Content = content;
-
-  return (
-    <>
-      <Content updateTimestamp={updateTimestamp} onMenuClick={menuShow} filter={filter} />
-      {!readonly && !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;