[WIP] fix bug in drag and drop treeview

typescript/Frontend/src/components/Context/GroupContextProvider.tsx

@@ -12,6 +12,8 @@ interface GroupContextProviderProps {
   getError: boolean;
   tree: NodeModel<I_Folder | I_Installation>[];
   setTree: (value: NodeModel<I_Folder | I_Installation>[]) => void;
+  currentType: string;
+  setCurrentType: (value: string) => void;
 }
 
 export const GroupContext = createContext<GroupContextProviderProps>({
@@ -23,6 +25,8 @@ export const GroupContext = createContext<GroupContextProviderProps>({
   getError: false,
   tree: [],
   setTree: () => {},
+  currentType: "",
+  setCurrentType: () => {},
 });
 
 const getTreeData = (
@@ -45,9 +49,9 @@ const GroupContextProvider = ({ children }: { children: ReactNode }) => {
   const [loading, setLoading] = useState(false);
   const [getError, setGetError] = useState(false);
   const [tree, setTree] = useState<NodeModel<I_Folder | I_Installation>[]>([]);
+  const [currentType, setCurrentType] = useState("");
 
   const fetchData = useCallback(async () => {
-    console.log("fetchData");
     setLoading(true);
     return axiosConfig
       .get("/GetAllFoldersAndInstallations")
@@ -73,6 +77,8 @@ const GroupContextProvider = ({ children }: { children: ReactNode }) => {
         getError,
         tree,
         setTree,
+        currentType,
+        setCurrentType,
       }}
     >
       {children}

typescript/Frontend/src/components/Groups/FolderForm.tsx

@@ -1,10 +1,9 @@
-import { NodeModel } from "@minoru/react-dnd-treeview";
 import { Button, CircularProgress, Grid } from "@mui/material";
 import { useFormik } from "formik";
 import { useContext, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import axiosConfig from "../../config/axiosConfig";
-import { I_Folder, I_Installation } from "../../util/types";
+import { I_Folder } from "../../util/types";
 import { GroupContext } from "../Context/GroupContextProvider";
 import InnovenergySnackbar from "../InnovenergySnackbar";
 import InnovenergyTextfield from "../Layout/InnovenergyTextfield";

typescript/Frontend/src/components/Groups/GroupTabs.tsx

@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import routes from "../../routes.json";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
+import { GroupContext } from "../Context/GroupContextProvider";
 
 const GroupTabs = () => {
   const routeMatch = useRouteMatch([
@@ -16,6 +17,7 @@ const GroupTabs = () => {
 
   const id = routeMatch?.params?.id;
   const intl = useIntl();
+  const { currentType } = React.useContext(GroupContext);
 
   if (id) {
     return (
@@ -25,7 +27,7 @@ const GroupTabs = () => {
             value={routeMatch?.pattern?.path}
             aria-label="basic tabs example"
           >
-            {routeMatch?.pathname.includes("folder") ? (
+            {currentType === "Folder" ? (
               <Tab
                 label={intl.formatMessage({
                   id: "folder",

typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState, useContext } from "react";
+import { useEffect, useState, useContext, useRef } from "react";
 import axiosConfig from "../../../config/axiosConfig";
 import { I_Folder, I_Installation } from "../../../util/types";
-import { Alert, CircularProgress, Grid } from "@mui/material";
+import { Alert, Button, CircularProgress, Grid } from "@mui/material";
 import { DndProvider } from "react-dnd";
 import {
   MultiBackend,
@@ -22,6 +22,7 @@ const GroupTree = () => {
     useContext(GroupContext);
   const [putError, setPutError] = useState(false);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [openNodes, setOpenNodes] = useState<(string | number)[]>([]);
 
   const ScrollingComponent = withScrolling("div");
 
@@ -66,7 +67,7 @@ const GroupTree = () => {
         <ScrollingComponent className={styles.treeContainer}>
           <Tree<I_Installation | I_Folder>
             tree={tree}
-            rootId={0}
+            rootId={-1}
             dragPreviewRender={(monitorProps) => (
               <DragPreview monitorProps={monitorProps} />
             )}
@@ -93,6 +94,10 @@ const GroupTree = () => {
               tree: NodeModel<I_Folder | I_Installation>[],
               options: DropOptions<I_Folder | I_Installation>
             ) => handleDrop(tree, options)}
+            onChangeOpen={(nodes) => {
+              console.log(nodes);
+              setOpenNodes(nodes);
+            }}
           />
         </ScrollingComponent>
         <InnovenergySnackbar

typescript/Frontend/src/components/Groups/Tree/TreeNode.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import Typography from "@mui/material/Typography";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import { NodeModel } from "@minoru/react-dnd-treeview";
@@ -9,6 +9,7 @@ import { I_Folder, I_Installation } from "../../../util/types";
 import TypeIcon from "../TypeIcon";
 import DragHandleIcon from "@mui/icons-material/DragHandle";
 import useRouteMatch from "../../../hooks/useRouteMatch";
+import { GroupContext } from "../../Context/GroupContextProvider";
 
 interface TreeNodeProps {
   node: NodeModel<I_Installation | I_Folder>;
@@ -23,23 +24,30 @@ const TreeNode = (props: TreeNodeProps) => {
   const { node, isOpen, hasChild, onToggle, depth, handleRef } = props;
   const indent = depth * 24;
 
+  const { setCurrentType } = useContext(GroupContext);
   const routeMatch = useRouteMatch([
     routes.groups + routes.installation + ":id",
     routes.groups + routes.folder + ":id",
     routes.groups + routes.users + ":id",
   ]);
 
+  const isSelected = routeMatch?.params.id === node.data?.id.toString();
+
   const handleToggle = (e: React.MouseEvent) => {
     e.stopPropagation();
     onToggle(node.id);
   };
 
+  useEffect(() => {
+    if (node.data && isSelected) {
+      setCurrentType(node.data?.type);
+    }
+  }, [isSelected, node.data, setCurrentType]);
+
   return (
     <div
       className={`tree-node ${styles.root} ${
-        routeMatch?.params.id === node.data?.id.toString()
+        isSelected ? styles.selected : ""
-          ? styles.selected
-          : ""
       }`}
       style={{ paddingInlineStart: indent }}
     >