Merge pull request #207 from MetaCell/feature/SDSV-22

Feature/sdsv 22

src/components/NodeDetailView/settings/Settings.js

@@ -3,36 +3,23 @@ import SettingsGroup from "./SettingsGroup";
 import FolderIcon from "@material-ui/icons/Folder";
 import { useSelector, useDispatch } from 'react-redux'
 import { toggleSettingsPanelVisibility } from '../../../redux/actions';
+import React, {useEffect, useState} from "react";
+import {DragDropContext, Droppable} from "react-beautiful-dnd";
+import SettingsListItems from "./SettingsListItems";
 
 
 const Settings = props => {
   const dispatch = useDispatch();
   const showSettingsContent = useSelector(state => state.sdsState.settings_panel_visible);
-
+  const metaDataPropertiesModel = useSelector(state => state.sdsState.metadata_model);
   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 />
+        {
+            Object.keys(metaDataPropertiesModel).map(group => <SettingsGroup title={group} group={metaDataPropertiesModel[group]} />)
+        }
       <Box
         style={{
           background:

src/components/NodeDetailView/settings/SettingsGroup.js

@@ -1,15 +1,12 @@
-import React, { useState } from "react";
+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 }
-  ]);
+import { useDispatch } from "react-redux";
+import { updateMetaDataItemsOrder } from "../../../redux/actions";
+const SettingsGroup = ({ title, group }) => {
+  const [items, setItems] = useState(group);
+  const dispatch = useDispatch();
 
   const handleDragEnd = result => {
     if (!result.destination) return;
@@ -19,42 +16,23 @@ const SettingsGroup = props => {
     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);
+    dispatch(updateMetaDataItemsOrder({ groupTitle: title, newItemsOrder: itemsCopy }));
   };
 
   return (
-    <Box>
-      <DragDropContext onDragEnd={handleDragEnd}>
-        <Droppable droppableId="droppable">
-          {provided => (
-            <SettingsListItems
-              provided={provided}
-              items={items}
-              toggleItemDisabled={toggleItemDisabled}
-            />
-          )}
-        </Droppable>
-      </DragDropContext>
-    </Box>
+      <Box>
+        <DragDropContext onDragEnd={handleDragEnd}>
+          <Droppable droppableId="droppable">
+            {provided => (
+                <SettingsListItems
+                    title={title}
+                    provided={provided}
+                    items={items}
+                />
+            )}
+          </Droppable>
+        </DragDropContext>
+      </Box>
   );
 };
 

src/components/NodeDetailView/settings/SettingsItem.js

@@ -1,4 +1,7 @@
-import React from "react";
+import React, {useEffect} from "react";
+import { useDispatch } from 'react-redux';
+import { toggleMetadataItemVisibility } from '../../../redux/actions';
+
 import {
   Typography,
   ListItemText,
@@ -11,7 +14,9 @@ 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;
+  const { groupTitle, item } = props;
+    const dispatch = useDispatch();
+    const toggleItemDisabled = () => dispatch(toggleMetadataItemVisibility(groupTitle, item.key))
 
   return (
     <ListItem
@@ -49,18 +54,19 @@ const SettingsItem = props => {
               fontSize: ".75rem"
             }}
           >
-            {item.primary}
+            {item.label}
           </Typography>
         }
       />
 
       <ListItemSecondaryAction style={{ right: "2rem" }}>
         <IconButton
           edge="end"
-          aria-label={item.disabled ? "add" : "delete"}
-          onClick={() => toggleItemDisabled(item.id)}
+          aria-label={!item.visible ? "add" : "delete"}
+          onClick={toggleItemDisabled}
+          disableRipple
         >
-          {item.disabled ? (
+          {!item.visible ? (
             <AddCircleOutlineIcon
               style={{ color: "#3779E1", fontSize: "1rem" }}
             />

src/components/NodeDetailView/settings/SettingsListItems.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import {
   Box,
   Typography,
@@ -22,8 +22,7 @@ import VisibilityOffRoundedIcon from "@material-ui/icons/VisibilityOffRounded";
 import { SPARC_DATASETS } from "../../../constants";
 import SettingsItem from "./SettingsItem";
 const SettingsListItems = props => {
-  const { provided, items, toggleItemDisabled } = props;
-
+  const { provided, items, title } = props;
   return (
     <List
       {...provided.droppableProps}
@@ -37,18 +36,18 @@ const SettingsListItems = props => {
             }}
           >
             <Typography variant="h6" style={{ color: "#2E3A59" }}>
-              Title
+              {title.charAt(0).toUpperCase() + title.slice(1)}
             </Typography>
           </Box>
         </ListSubheader>
       }
     >
       {items.map((item, index) => (
         <Draggable
-          key={item.id}
-          draggableId={item.id}
+          key={item.key}
+          draggableId={`${index}`}
           index={index}
-          isDragDisabled={item.disabled}
+          isDragDisabled={!item.visible}
         >
           {provided => (
             <Box
@@ -58,7 +57,7 @@ const SettingsListItems = props => {
             >
               <SettingsItem
                 item={item}
-                toggleItemDisabled={toggleItemDisabled}
+                groupTitle={title}
               />
             </Box>
           )}

src/redux/actions.js

@@ -5,6 +5,8 @@ export const SELECT_INSTANCE = 'SELECT_INSTANCE'
 export const TRIGGER_ERROR = 'TRIGGER_ERROR'
 export const SELECT_GROUP = 'SELECT_GROUP'
 export const TOGGLE_METADATA_SETTINGS = 'TOGGLE_METADATA_SETTINGS'
+export const TOGGLE_METADATA_ITEM_VISIBILITY = 'TOGGLE_METADATA_ITEM_VISIBILITY'
+export const UPDATE_METADATA_ITEMS_ORDER = 'UPDATE_METADATA_ITEMS_ORDER'
 
 export const addDataset = dataset => ({
     type: ADD_DATASET,
@@ -49,4 +51,20 @@ export const triggerError = message => ({
 export const toggleSettingsPanelVisibility = visible => ({
     type: TOGGLE_METADATA_SETTINGS,
     data: { visible: visible },
-});
+});
+
+
+export const toggleMetadataItemVisibility = (groupTitle, itemId) => ({
+    type: TOGGLE_METADATA_ITEM_VISIBILITY,
+    data: {
+        groupTitle,
+        itemId,
+    },
+});
+
+export const updateMetaDataItemsOrder = ({ groupTitle, newItemsOrder }) => {
+    return {
+        type: UPDATE_METADATA_ITEMS_ORDER,
+        payload: { title: groupTitle, newItemsOrder },
+    };
+};

src/redux/initialState.js

@@ -1,6 +1,7 @@
 import * as Actions from './actions';
 import * as LayoutActions from '@metacell/geppetto-meta-client/common/layout/actions';
 import { rdfTypes } from "../utils/graphModel";
+import {TOGGLE_METADATA_ITEM_VISIBILITY, UPDATE_METADATA_ITEMS_ORDER} from "./actions";
 
 export const sdsInitialState = {
     "sdsState": {
@@ -114,6 +115,40 @@ export default function sdsClientReducer(state = {}, action) {
                 };
             }
             break;
+        case TOGGLE_METADATA_ITEM_VISIBILITY:
+            const { groupTitle, itemId } = action.data;
+            const updatedMetadataModel = { ...state.metadata_model };
+            const groupIndex = updatedMetadataModel[groupTitle].findIndex(item => item.key === itemId);
+
+            if (groupIndex !== -1) {
+                const itemToToggle = updatedMetadataModel[groupTitle][groupIndex];
+                itemToToggle.visible = !itemToToggle.visible;
+
+                // Toggle visibility first, then reorder items
+                updatedMetadataModel[groupTitle].sort((a, b) => {
+                    if (a.visible === b.visible) {
+                        // Preserve the original order for items with the same visibility
+                        return updatedMetadataModel[groupTitle].indexOf(a) - updatedMetadataModel[groupTitle].indexOf(b);
+                    } else {
+                        // Move visible items to the top
+                        return a.visible ? -1 : 1;
+                    }
+                });
+            }
+            return {
+                ...state,
+                metadata_model: { ...updatedMetadataModel }
+            };
+        case UPDATE_METADATA_ITEMS_ORDER:
+            const {  title, newItemsOrder } = action.payload;
+
+            return {
+                ...state,
+                metadata_model: {
+                    ...state.metadata_model,
+                    [title]: newItemsOrder,
+                },
+            };
         case LayoutActions.layoutActions.SET_LAYOUT:
             return { ...state, layout : action.data.layout};
         case Actions.TOGGLE_METADATA_SETTINGS: