wip: Added folder/file deletion

fairdataihub · Jan 10, 2025 · eddd324 · eddd324
1 parent 1233ae5
commit eddd324
Show file tree

Hide file tree

Showing 6 changed files with 266 additions and 259 deletions.
diff --git a/src/renderer/src/components/shared/DataImporter/index.jsx b/src/renderer/src/components/shared/DataImporter/index.jsx
@@ -2,25 +2,25 @@ import { Group, Text, rem } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import { IconUpload, IconFile, IconX } from "@tabler/icons-react";
 import FullWidthContainer from "../../containers/FullWidthContainer";
-import useGlobalStore from "../../../stores/globalStore";
 import DatasetTreeViewRenderer from "../DatasetTreeViewRenderer";
 
 const DataImporter = () => {
-  const allowDrop = (event) => {
-    event.preventDefault();
-  };
+  // Handles preventing default drop action
+  const allowDrop = (event) => event.preventDefault();
 
+  // Handles the file drop logic
   const handleDrop = async (files) => {
-    // Create a synthetic drop event with the dropped files (digestable by the window.drop function)
-    const syntheticDropEvent = {
-      preventDefault: () => {},
-      dataTransfer: { files }, // Pass dropped files directly
-    };
-
-    // Call your existing window.drop function with the constructed event
+    const syntheticDropEvent = createSyntheticDropEvent(files);
     await window.drop(syntheticDropEvent);
   };
 
+  // Creates a synthetic drop event for window.drop
+  const createSyntheticDropEvent = (files) => ({
+    preventDefault: () => {},
+    dataTransfer: { files },
+  });
+
+  // Opens the dataset dialog on click
   const handleClick = async (event) => {
     event.preventDefault();
     window.electron.ipcRenderer.send("open-folders-organize-datasets-dialog");
@@ -36,22 +36,13 @@ const DataImporter = () => {
       >
         <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: "none" }}>
           <Dropzone.Accept>
-            <IconUpload
-              style={{ width: rem(52), height: rem(52), color: "var(--mantine-color-blue-6)" }}
-              stroke={1.5}
-            />
+            <IconUpload style={iconStyle("blue")} stroke={1.5} />
           </Dropzone.Accept>
           <Dropzone.Reject>
-            <IconX
-              style={{ width: rem(52), height: rem(52), color: "var(--mantine-color-red-6)" }}
-              stroke={1.5}
-            />
+            <IconX style={iconStyle("red")} stroke={1.5} />
           </Dropzone.Reject>
           <Dropzone.Idle>
-            <IconFile
-              style={{ width: rem(52), height: rem(52), color: "var(--mantine-color-dimmed)" }}
-              stroke={1.5}
-            />
+            <IconFile style={iconStyle("dimmed")} stroke={1.5} />
           </Dropzone.Idle>
 
           <Text size="xl" inline>
@@ -64,4 +55,11 @@ const DataImporter = () => {
   );
 };
 
+// Helper function to generate consistent icon styles
+const iconStyle = (color) => ({
+  width: rem(52),
+  height: rem(52),
+  color: `var(--mantine-color-${color}-6)`,
+});
+
 export default DataImporter;
diff --git a/src/renderer/src/components/shared/DatasetTreeViewRenderer/ContextMenu.jsx b/src/renderer/src/components/shared/DatasetTreeViewRenderer/ContextMenu.jsx
@@ -1,14 +1,16 @@
 import { Menu } from "@mantine/core";
 import { useEffect, useCallback } from "react";
 import useGlobalStore from "../../../stores/globalStore";
-import {
-  closeContextMenu,
-  deleteFilesByRelativePath,
-  setFolderMoveMode,
-} from "../../../stores/slices/datasetTreeViewSlice";
+import { closeContextMenu, setFolderMoveMode } from "../../../stores/slices/datasetTreeViewSlice";
 
 const ContextMenu = () => {
-  const { contextMenuIsOpened, contextMenuPosition } = useGlobalStore();
+  const {
+    contextMenuIsOpened,
+    contextMenuPosition,
+    contextMenuItemName,
+    contextMenuItemType,
+    contextMenuItemData,
+  } = useGlobalStore();
 
   const handleClickOutside = useCallback((event) => {
     const menuElement = document.getElementById("context-menu");
@@ -55,6 +57,7 @@ const ContextMenu = () => {
     <div id="context-menu" style={menuStyles}>
       <Menu opened position="top" offset={5} styles={{ dropdown: menuStyles }}>
         <Menu.Dropdown>
+          asdf
           <Menu.Item
             onClick={() => {
               setFolderMoveMode(true);
@@ -65,12 +68,23 @@ const ContextMenu = () => {
           </Menu.Item>
           <Menu.Item
             onClick={() => {
-              console.log("foo");
+              if (contextMenuItemType === "file") {
+                window.deleteFilesByRelativePath([contextMenuItemData.relativePath]);
+              }
+              if (contextMenuItemType === "folder") {
+                window.deleteFoldersByRelativePath([contextMenuItemData.relativePath]);
+              }
+              closeContextMenu();
             }}
           >
             Delete
           </Menu.Item>
-          <Menu.Item onClick={() => console.log("Delete")}>qwer</Menu.Item>
+          <Menu.Item>qwer</Menu.Item>
+          {contextMenuItemType === "folder" && (
+            <Menu.Item onClick={() => console.log("Delete")}>
+              Import data into {contextMenuItemName}
+            </Menu.Item>
+          )}
         </Menu.Dropdown>
       </Menu>
     </div>

diff --git a/src/renderer/src/components/shared/DatasetTreeViewRenderer/index.jsx b/src/renderer/src/components/shared/DatasetTreeViewRenderer/index.jsx
@@ -106,22 +106,27 @@ const FolderItem = ({
     openContextMenu({ x: e.clientX, y: e.clientY }, "folder", name, structuredClone(content));
   };
 
+  const folderIsEmpty =
+    !content ||
+    (Object.keys(content.folders).length === 0 && Object.keys(content.files).length === 0);
+
   return (
     <Stack gap={1} ml="xs">
       <Group ref={ref} gap={3} justify="flex-start" onContextMenu={handleFileContextMenuOpen}>
-        {isOpen ? (
-          <IconFolderOpen
+        {folderIsEmpty || !isOpen ? (
+          <IconFolder
             size={ICON_SETTINGS.folderSize}
             color={ICON_SETTINGS.folderColor}
             onClick={toggleFolder}
           />
         ) : (
-          <IconFolder
+          <IconFolderOpen
             size={ICON_SETTINGS.folderSize}
             color={ICON_SETTINGS.folderColor}
             onClick={toggleFolder}
           />
         )}
+
         {onFolderClick && !folderMoveModeIsActive && (
           <Tooltip label="Select this folder" zIndex={2999}>
             <Checkbox
@@ -151,23 +156,14 @@ const FolderItem = ({
             cursor: "pointer",
             transition: "background-color 0.2s ease-in-out",
           }}
+          c={folderIsEmpty ? "gray" : "black"}
         >
           {name}
         </Text>
       </Group>
       <Collapse in={isOpen}>
         {isOpen && (
           <>
-            {naturalSort(Object.keys(content?.files || {})).map((fileName) => (
-              <FileItem
-                key={fileName}
-                name={fileName}
-                content={content.files[fileName]}
-                onFileClick={onFileClick}
-                isFileSelected={isFileSelected}
-                allowStructureEditing={allowStructureEditing}
-              />
-            ))}
             {naturalSort(Object.keys(content?.folders || {})).map((folderName) => (
               <FolderItem
                 key={folderName}
@@ -181,6 +177,16 @@ const FolderItem = ({
                 allowStructureEditing={allowStructureEditing}
               />
             ))}
+            {naturalSort(Object.keys(content?.files || {})).map((fileName) => (
+              <FileItem
+                key={fileName}
+                name={fileName}
+                content={content.files[fileName]}
+                onFileClick={onFileClick}
+                isFileSelected={isFileSelected}
+                allowStructureEditing={allowStructureEditing}
+              />
+            ))}
           </>
         )}
       </Collapse>
@@ -216,6 +222,12 @@ const DatasetTreeViewRenderer = ({ folderActions, fileActions, allowStructureEdi
     );
   };
 
+  const handleDeleteAllItemsClick = () => {
+    console.log(
+      'Deleting all items containing "' + datasetStructureSearchFilter + '" in their name'
+    );
+  };
+
   const renderObjIsEmpty =
     !renderDatasetStructureJSONObj ||
     (Object.keys(renderDatasetStructureJSONObj?.folders).length === 0 &&
@@ -244,7 +256,7 @@ const DatasetTreeViewRenderer = ({ folderActions, fileActions, allowStructureEdi
             </Button>
           )}
           {allowStructureEditing && (
-            <Button size="xs" color="red" variant="outline" onClick={handleMenuClose}>
+            <Button size="xs" color="red" variant="outline" onClick={handleDeleteAllItemsClick}>
               Delete all files and folders containing {datasetStructureSearchFilter} in their name
             </Button>
           )}

diff --git a/src/renderer/src/scripts/organize-dataset/organizeDS.js b/src/renderer/src/scripts/organize-dataset/organizeDS.js
@@ -583,11 +583,9 @@ window.renameFolder = (
 };
 
 window.getGlobalPath = (path) => {
-  let currentPath = path.value.trim();
+  let currentPath = (typeof path === "string" ? path : path.value || "").trim();
   let jsonPathArray = currentPath.split("/");
-  return jsonPathArray.filter((el) => {
-    return el != "";
-  });
+  return jsonPathArray.filter((el) => el !== "");
 };
 
 window.getGlobalPathFromString = (pathString) => {