Add global context menu onClick event hanlders

frontend/src/FileManager/FileList/FileList.jsx

@@ -6,45 +6,66 @@ import { useSelection } from "../../contexts/SelectionContext";
 import { useLayout } from "../../contexts/LayoutContext";
 import ContextMenu from "../../components/ContextMenu/ContextMenu";
 import { useDetectOutsideClick } from "../../hooks/useDetectOutsideClick";
-import { BsCopy, BsFolderPlus, BsScissors } from "react-icons/bs";
+import { BsCopy, BsFolderPlus, BsGrid, BsScissors } from "react-icons/bs";
 import { MdOutlineDelete, MdOutlineFileDownload, MdOutlineFileUpload } from "react-icons/md";
 import { FiRefreshCw } from "react-icons/fi";
 import "./FileList.scss";
 import { PiFolderOpen } from "react-icons/pi";
 import { FaRegFile, FaRegPaste } from "react-icons/fa6";
-import { BiRename } from "react-icons/bi";
+import { BiRename, BiSelectMultiple } from "react-icons/bi";
 import { useClipBoard } from "../../contexts/ClipboardContext";
+import { validateApiCallback } from "../../utils/validateApiCallback";
+import Checkbox from "../../components/Checkbox/Checkbox";
 
-const FileList = ({ onCreateFolder, onRename, onFileOpen, enableFilePreview, triggerAction }) => {
+const FileList = ({
+  onCreateFolder,
+  onRename,
+  onFileOpen,
+  onRefresh,
+  enableFilePreview,
+  triggerAction,
+}) => {
   const [selectedFileIndexes, setSelectedFileIndexes] = useState([]);
   const [visible, setVisible] = useState(false);
   const [isSelectionCtx, setIsSelectionCtx] = useState(false);
   const [clickPosition, setClickPosition] = useState({ clickX: 0, clickY: 0 });
   const [lastSelectedFile, setLastSelectedFile] = useState(null);
+  const [showSelectAll, setShowSelectAll] = useState(false);
+  const [allFilesSelected, setAllFilesSelected] = useState(false);
 
   const { currentPath, setCurrentPath, currentPathFiles, setCurrentPathFiles } =
     useFileNavigation();
   const filesViewRef = useRef(null);
   const { selectedFiles, setSelectedFiles, handleDownload } = useSelection();
-  const { clipBoard, handleCutCopy, handlePasting } = useClipBoard();
+  const { clipBoard, setClipBoard, handleCutCopy, handlePasting } = useClipBoard();
   const { activeLayout } = useLayout();
   const contextMenuRef = useDetectOutsideClick(() => setVisible(false));
 
   const emptySelecCtxItems = [
+    {
+      title: "View",
+      icon: <BsGrid size={18} />,
+      onClick: () => {},
+    },
     {
       title: "Refresh",
       icon: <FiRefreshCw size={18} />,
-      onClick: () => {},
+      onClick: handleRefresh,
     },
     {
-      title: "New Folder",
+      title: "New folder",
       icon: <BsFolderPlus size={18} />,
-      onClick: () => {},
+      onClick: handleCreateNewFolder,
     },
     {
       title: "Upload",
       icon: <MdOutlineFileUpload size={18} />,
-      onClick: () => {},
+      onClick: handleUpload,
+    },
+    {
+      title: "Select all",
+      icon: <BiSelectMultiple size={18} />,
+      onClick: handleselectAllFiles,
     },
   ];
 
@@ -126,6 +147,27 @@ const FileList = ({ onCreateFolder, onRename, onFileOpen, enableFilePreview, tri
     triggerAction.show("delete");
   }
 
+  function handleRefresh() {
+    setVisible(false);
+    validateApiCallback(onRefresh, "onRefresh");
+    setClipBoard(null);
+  }
+
+  function handleCreateNewFolder() {
+    triggerAction.show("createFolder");
+    setVisible(false);
+  }
+
+  function handleUpload() {
+    setVisible(false);
+    triggerAction.show("uploadFile");
+  }
+
+  function handleselectAllFiles() {
+    setSelectedFiles(currentPathFiles);
+    setVisible(false);
+  }
+
   const handleFolderCreating = () => {
     setCurrentPathFiles((prev) => {
       return [
@@ -153,10 +195,16 @@ const FileList = ({ onCreateFolder, onRename, onFileOpen, enableFilePreview, tri
     setSelectedFiles([]);
   };
 
+  const unselectFiles = () => {
+    setSelectedFileIndexes([]);
+    setSelectedFiles((prev) => (prev.length > 0 ? [] : prev));
+  };
+
   const handleContextMenu = (e, isSelection) => {
     e.preventDefault();
     setClickPosition({ clickX: e.clientX, clickY: e.clientY });
     setIsSelectionCtx(isSelection);
+    !isSelection && unselectFiles();
     setVisible(true);
   };
 
@@ -190,18 +238,37 @@ const FileList = ({ onCreateFolder, onRename, onFileOpen, enableFilePreview, tri
     }
   }, [selectedFiles, currentPathFiles]);
 
+  useEffect(() => {
+    if (allFilesSelected) {
+      setSelectedFiles(currentPathFiles);
+    } else {
+      unselectFiles();
+    }
+  }, [allFilesSelected]);
+
   return (
     <div
       ref={filesViewRef}
       className={`files ${activeLayout}`}
       onContextMenu={(e) => handleContextMenu(e, false)}
-      onClick={() => {
-        setSelectedFileIndexes([]);
-        setSelectedFiles((prev) => (prev.length > 0 ? [] : prev));
-      }}
+      onClick={unselectFiles}
     >
       {activeLayout === "list" && (
-        <div className="files-header">
+        <div
+          className="files-header"
+          {...(!allFilesSelected && {
+            onMouseOver: () => setShowSelectAll(true),
+            onMouseLeave: () => setShowSelectAll(false),
+          })}
+        >
+          <div className="file-select-all">
+            {(showSelectAll || allFilesSelected) && (
+              <Checkbox
+                checked={allFilesSelected}
+                onChange={(e) => setAllFilesSelected(e.target.checked)}
+              />
+            )}
+          </div>
           <div className="file-name">Name</div>
           <div className="file-date">Modified</div>
           <div className="file-size">Size</div>

frontend/src/FileManager/FileList/FileList.scss

@@ -90,7 +90,7 @@
 
     .rename-file-container.list {
       top: 6px;
-      left: 48px;
+      left: 58px;
       text-align: left;
 
       .rename-file {
@@ -101,7 +101,7 @@
         top: 5px;
         white-space: nowrap;
         overflow-x: hidden;
-        max-width: calc(100% - 48px);
+        max-width: calc(100% - 62px);
       }
 
       .folder-name-error.right {
@@ -127,37 +127,6 @@
   .file-moving {
     opacity: 0.5;
   }
-
-  .file-context-menu-list {
-    font-size: 1.1em;
-
-    ul {
-      list-style-type: none;
-      padding-left: 0;
-      margin: 0;
-
-      li {
-        display: flex;
-        gap: 6px;
-        align-items: center;
-        padding: 6px 22px 6px 14px;
-
-        &:hover {
-          cursor: pointer;
-          background-color: rgb(0, 0, 0, 0.04);
-        }
-      }
-
-      li.disable-paste {
-        opacity: 0.5;
-
-        &:hover {
-          cursor: default;
-          background-color: transparent;
-        }
-      }
-    }
-  }
 }
 
 .files.list {
@@ -173,15 +142,20 @@
     display: flex;
     gap: 5px;
     border-bottom: 1px solid #dddddd;
-    padding: 4px 0;
+    padding: 4px 0 4px 5px;
     position: sticky;
     top: 0;
     background-color: #f5f5f5;
     z-index: 1;
 
+    .file-select-all {
+      width: 5%;
+      height: 0.83em;
+    }
+
     .file-name {
-      width: calc(70% - 65px);
-      padding-left: 65px;
+      width: calc(65% - 35px);
+      padding-left: 35px;
     }
 
     .file-date {
@@ -199,6 +173,7 @@
     display: flex;
     width: 100%;
     margin: 0;
+    border-radius: 0;
 
     &:hover {
       background-color: rgb(0, 0, 0, 0.04);

frontend/src/FileManager/FileManager.jsx

@@ -81,6 +81,7 @@ const FileManager = ({
                       onCreateFolder={onCreateFolder}
                       onRename={onRename}
                       onFileOpen={onFileOpen}
+                      onRefresh={onRefresh}
                       enableFilePreview={enableFilePreview}
                       triggerAction={triggerAction}
                     />

frontend/src/FileManager/Toolbar/Toolbar.jsx

@@ -34,7 +34,7 @@ const Toolbar = ({
   const toolbarLeftItems = [
     {
       icon: <BsFolderPlus size={17} strokeWidth={0.3} />,
-      text: "New Folder",
+      text: "New folder",
       permission: allowCreateFolder,
       onClick: () => triggerAction.show("createFolder"),
     },

frontend/src/components/ContextMenu/ContextMenu.scss

@@ -6,6 +6,37 @@
   padding: 5px 0;
   z-index: 1;
   transition: opacity 0.1s linear;
+
+  .file-context-menu-list {
+    font-size: 1.1em;
+
+    ul {
+      list-style-type: none;
+      padding-left: 0;
+      margin: 0;
+
+      li {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 6px 22px 6px 14px;
+
+        &:hover {
+          cursor: pointer;
+          background-color: rgb(0, 0, 0, 0.06);
+        }
+      }
+
+      li.disable-paste {
+        opacity: 0.5;
+
+        &:hover {
+          cursor: default;
+          background-color: transparent;
+        }
+      }
+    }
+  }
 }
 
 .fm-context-menu.hidden {
@@ -18,4 +49,4 @@
   opacity: 1;
   pointer-events: all;
   visibility: visible;
-}
+}