Merge pull request #200 from MetaCell/feature/SDSV-8

#8 add settings ui

package.json

@@ -31,6 +31,7 @@
     "n3": "^1.13.0",
     "puppeteer": "13.5.1",
     "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^17.0.2",
     "react-hot-loader": "^4.13.0",
     "react-redux": "^7.2.4",

src/components/NodeDetailView/NodeDetailView.js

@@ -1,14 +1,20 @@
 import { Box } from "@material-ui/core";
 import NodeFooter from "./Footers/Footer";
 import DetailsFactory from './factory';
-import { useSelector } from 'react-redux'
 import Breadcrumbs from "./Details/Views/Breadcrumbs";
+import { IconButton } from '@material-ui/core';
 import { subject_key, protocols_key, contributors_key } from '../../constants';
+import {TuneRounded} from "@material-ui/icons";
+import { useSelector, useDispatch } from 'react-redux'
+import { toggleSettingsPanelVisibility } from '../../redux/actions';
 
 const NodeDetailView = (props) => {
+  const dispatch = useDispatch();
+
   var otherDetails = undefined;
   const factory = new DetailsFactory();
   const nodeSelected = useSelector(state => state.sdsState.instance_selected);
+  const showSettingsContent = useSelector(state => state.sdsState.settings_panel_visible);
   const nodeDetails = factory.createDetails(nodeSelected);
   let links = {
     pages: [],
@@ -50,16 +56,22 @@ const NodeDetailView = (props) => {
     id: nodeSelected.graph_node.id,
     text: nodeSelected.graph_node.name
   };
+  const toggleContent = () => {
+    dispatch(toggleSettingsPanelVisibility(!showSettingsContent));
+  };
 
   return (
     <Box className={"secondary-sidebar" + (props.open ? " in" : "")}>
       <Box className="secondary-sidebar_breadcrumb" sx={{mt : "1rem"}}>
         <Breadcrumbs close={false} links={links} />
       </Box>
-      {/**{ nodeDetails.getHeader() }*/}
       { otherDetails }
-      { nodeDetails.getDetail() }
+      { showSettingsContent && nodeDetails.getSettings ? nodeDetails.getSettings() : nodeDetails.getDetail() }
+
       <NodeFooter />
+      { !showSettingsContent && <Box className='overlay-button-container'>
+        <IconButton className="overlay-button" onClick={toggleContent}><TuneRounded /></IconButton>
+      </Box> }
     </Box>
   );
 };

src/components/NodeDetailView/factory.js

@@ -12,9 +12,8 @@ import SampleDetails from './Details/SampleDetails';
 import DatasetDetails from './Details/DatasetDetails';
 import SubjectDetails from './Details/SubjectDetails';
 import ProtocolDetails from './Details/ProtocolDetails';
-import CollectionDetails from './Details/CollectionDetails';
 import GroupDetails from './Details/GroupDetails';
-
+import Settings from "./settings/Settings"
 var DetailsFactory = function () {
     this.createDetails = function (node) {
         let details = null;
@@ -85,6 +84,14 @@ const Collection = function (node) {
             </>
         )
     }
+
+    nodeDetail.getSettings = () => {
+        return (
+            <>
+                <Settings node={node} />
+            </>
+        )
+    }
     return nodeDetail;
 };
 
@@ -116,6 +123,14 @@ const Group = function (node) {
             </>
         )
     }
+
+    nodeDetail.getSettings = () => {
+        return (
+            <>
+                <Settings node={node} />
+            </>
+        )
+    }
     return nodeDetail;
 };
 
@@ -147,6 +162,14 @@ const Dataset = function (node) {
             </>
         )
     }
+
+    nodeDetail.getSettings = () => {
+        return (
+            <>
+                <Settings node={node} />
+            </>
+        )
+    }
     return nodeDetail;
 };
 
@@ -209,6 +232,14 @@ const Sample = function (node) {
             </>
         )
     }
+
+    nodeDetail.getSettings = () => {
+        return (
+            <>
+                <Settings node={node} />
+            </>
+        )
+    }
     return nodeDetail;
 };
 
@@ -240,6 +271,14 @@ const Subject = function (node) {
             </>
         )
     }
+
+    nodeDetail.getSettings = () => {
+        return (
+            <>
+                <Settings node={node} />
+            </>
+        )
+    }
     return nodeDetail;
 };
 
@@ -271,6 +310,14 @@ const File = function (node) {
             </>
         )
     }
+
+    nodeDetail.getSettings = () => {
+        return (
+            <>
+                <Settings node={node} />
+            </>
+        )
+    }
     return nodeDetail;
 };
 

src/components/NodeDetailView/settings/Settings.js

@@ -0,0 +1,56 @@
+import { Box, Button, Typography } from "@material-ui/core";
+import SettingsGroup from "./SettingsGroup";
+import FolderIcon from "@material-ui/icons/Folder";
+import { useSelector, useDispatch } from 'react-redux'
+import { toggleSettingsPanelVisibility } from '../../../redux/actions';
+
+
+const Settings = props => {
+  const dispatch = useDispatch();
+  const showSettingsContent = useSelector(state => state.sdsState.settings_panel_visible);
+
+  const save = () => {
+    dispatch(toggleSettingsPanelVisibility(!showSettingsContent));
+  };
+
+  return (
+    <Box style={{ position: "relative", maxHeight: "84vh", overflow: "auto" }}>
+      <Box
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          flexDirection: "column",
+          padding: "0rem 1.5rem 2.25rem 1.5rem",
+          boxShadow: "0px 2px 0px 0px #E5E5E5",
+          gap: ".75rem"
+        }}
+      >
+        <FolderIcon style={{ color: "#3779E1" }} />
+        <Typography variant="h3" style={{ color: "#3779E1" }}>
+          First List Title
+        </Typography>
+      </Box>
+      <SettingsGroup />
+      <SettingsGroup />
+      <Box
+        style={{
+          background:
+            "linear-gradient(rgb(255 255 255 / 81%) 0%, rgb(255, 255, 255) 100%)",
+          padding: ".75rem",
+          position: "sticky",
+          bottom: 0,
+          zIndex: 1000,
+          display: "flex",
+          justifyContent: "center"
+        }}
+      >
+        <Button variant="contained" disableElevation color="primary" onClick={save} fullWidth>
+          Save
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default Settings;

src/components/NodeDetailView/settings/SettingsGroup.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { Box } from "@material-ui/core";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+import SettingsListItems from "./SettingsListItems";
+const SettingsGroup = props => {
+  const [items, setItems] = useState([
+    { id: "1", primary: "Created on", disabled: false, visible: true },
+    { id: "2", primary: "Remote ID", disabled: false, visible: true },
+    { id: "3", primary: "Mimetype", disabled: false, visible: true },
+    { id: "4", primary: "Dataset", disabled: false, visible: true },
+    { id: "5", primary: "Dataset Path", disabled: false, visible: true }
+  ]);
+
+  const handleDragEnd = result => {
+    if (!result.destination) return;
+
+    const itemsCopy = [...items];
+    const [reorderedItem] = itemsCopy.splice(result.source.index, 1);
+    itemsCopy.splice(result.destination.index, 0, reorderedItem);
+
+    setItems(itemsCopy);
+  };
+
+  const toggleItemDisabled = itemId => {
+    const itemIndex = items.findIndex(item => item.id === itemId);
+
+    if (itemIndex === -1) return;
+
+    const updatedItems = [...items];
+    const [toggledItem] = updatedItems.splice(itemIndex, 1); // Remove the item from its current position
+
+    // If the item is currently disabled
+    if (toggledItem.disabled) {
+      // Move the item to the top of the list by unshifting it
+      updatedItems.unshift({ ...toggledItem, disabled: false, visible: true });
+    } else {
+      // Toggle the disabled and visible properties
+      updatedItems.push({ ...toggledItem, disabled: true, visible: false });
+    }
+
+    setItems(updatedItems);
+  };
+
+  return (
+    <Box>
+      <DragDropContext onDragEnd={handleDragEnd}>
+        <Droppable droppableId="droppable">
+          {provided => (
+            <SettingsListItems
+              provided={provided}
+              items={items}
+              toggleItemDisabled={toggleItemDisabled}
+            />
+          )}
+        </Droppable>
+      </DragDropContext>
+    </Box>
+  );
+};
+
+export default SettingsGroup;

src/components/NodeDetailView/settings/SettingsItem.js

@@ -0,0 +1,78 @@
+import React from "react";
+import {
+  Typography,
+  ListItemText,
+  ListItem,
+  ListItemSecondaryAction,
+  IconButton
+} from "@material-ui/core";
+import ReorderIcon from "@material-ui/icons/Reorder";
+import RemoveCircleOutlineIcon from "@material-ui/icons/RemoveCircleOutline";
+import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
+import VisibilityOffRoundedIcon from "@material-ui/icons/VisibilityOffRounded";
+const SettingsItem = props => {
+  const { item, toggleItemDisabled } = props;
+
+  return (
+    <ListItem
+      disableGutters
+      style={{
+        display: "flex",
+        padding: "1rem",
+        boxShadow: "0px 1px 0px 0px #E5E5E5"
+      }}
+    >
+      {item.visible ? (
+        <ReorderIcon
+          style={{
+            color: "rgba(46, 58, 89, 0.40)",
+            marginRight: "16px",
+            fontSize: "1rem"
+          }}
+        />
+      ) : (
+        <VisibilityOffRoundedIcon
+          style={{
+            color: "rgba(46, 58, 89, 0.40)",
+            marginRight: "16px",
+            fontSize: "1rem"
+          }}
+        />
+      )}
+      <ListItemText
+        primary={
+          <Typography
+            variant="body2"
+            style={{
+              color: "rgba(46, 58, 89, 0.80)",
+              fontWeight: "600",
+              fontSize: ".75rem"
+            }}
+          >
+            {item.primary}
+          </Typography>
+        }
+      />
+
+      <ListItemSecondaryAction style={{ right: "2rem" }}>
+        <IconButton
+          edge="end"
+          aria-label={item.disabled ? "add" : "delete"}
+          onClick={() => toggleItemDisabled(item.id)}
+        >
+          {item.disabled ? (
+            <AddCircleOutlineIcon
+              style={{ color: "#3779E1", fontSize: "1rem" }}
+            />
+          ) : (
+            <RemoveCircleOutlineIcon
+              style={{ color: "#ED745D", fontSize: "1rem" }}
+            />
+          )}
+        </IconButton>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+};
+
+export default SettingsItem;