diff --git a/backend/controllers/folder.ts b/backend/controllers/folder.ts index fb0270f..ba7851e 100644 --- a/backend/controllers/folder.ts +++ b/backend/controllers/folder.ts @@ -265,6 +265,7 @@ class FolderController { const parent = (req.query.parent as string) || undefined; const search = (req.query.search as string) || undefined; const folderID = (req.query.folderID as string) || undefined; + const currentParent = (req.query.currentParent as string) || undefined; console.log("folderID", folderID); @@ -272,7 +273,8 @@ class FolderController { userID, parent, search, - folderID + folderID, + currentParent ); res.send(folderList); diff --git a/backend/db/utils/folderUtils/index.ts b/backend/db/utils/folderUtils/index.ts index 475996e..4b80c7e 100644 --- a/backend/db/utils/folderUtils/index.ts +++ b/backend/db/utils/folderUtils/index.ts @@ -187,17 +187,22 @@ class DbUtil { userID: string, parent = "/", search?: string, - folderID?: string + folderID?: string, + currentParent?: string ) => { let query: any = { owner: userID, }; + const idQuery = [currentParent]; + if (folderID) { query.parentList = { $ne: folderID }; - query._id = { $ne: folderID }; + idQuery.push(folderID); } + query._id = { $nin: idQuery }; + if (!search || search === "") { query.parent = parent; } diff --git a/backend/services/FolderService/index.ts b/backend/services/FolderService/index.ts index f4b5e48..ff165bb 100644 --- a/backend/services/FolderService/index.ts +++ b/backend/services/FolderService/index.ts @@ -233,13 +233,15 @@ class FolderService { userID: string, parent?: string, search?: string, - folderID?: string + folderID?: string, + currentParent?: string ) => { const folderList = await utilsFolder.getMoveFolderList( userID, parent, search, - folderID + folderID, + currentParent ); return folderList; diff --git a/src/api/foldersAPI.ts b/src/api/foldersAPI.ts index 952cf5e..d422e8c 100644 --- a/src/api/foldersAPI.ts +++ b/src/api/foldersAPI.ts @@ -39,14 +39,18 @@ export const getFolderInfoAPI = async ({ export const getMoveFolderListAPI = async ({ queryKey, }: QueryFunctionContext< - [string, { parent: string; search: string; folderID?: string }] + [ + string, + { parent: string; search: string; folderID?: string; currentParent: string } + ] >) => { - const [_key, { parent, search, folderID }] = queryKey; + const [_key, { parent, search, folderID, currentParent }] = queryKey; const response = await axios.get(`/folder-service/move-folder-list`, { params: { parent, search, folderID, + currentParent, }, }); return response.data; diff --git a/src/components/MoverPopup/MoverPopup.tsx b/src/components/MoverPopup/MoverPopup.tsx index 2f1d06d..5933e45 100644 --- a/src/components/MoverPopup/MoverPopup.tsx +++ b/src/components/MoverPopup/MoverPopup.tsx @@ -14,9 +14,14 @@ import FolderIcon from "../../icons/FolderIcon"; const MoverPopup = () => { const [search, setSearch] = useState(""); const [debouncedSearch, setDebouncedSearch] = useState(""); - const [parent, setParent] = useState("/"); - const [parentList, setParentList] = useState(["/"]); - const [selectedFolderID, setSelectedFolderID] = useState(""); + const [parent, setParent] = useState(null); + const [parentList, setParentList] = useState([]); + const [selectedFolder, setSelectedFolder] = useState( + null + ); + const multiSelectMode = useAppSelector( + (state) => state.selected.multiSelectMode + ); const file = useAppSelector((state) => state.selected.moveModal.file); const folder = useAppSelector((state) => state.selected.moveModal.folder); const dispatch = useAppDispatch(); @@ -26,7 +31,7 @@ const MoverPopup = () => { }); const { data: folderList, isLoading: isLoadingFolders } = useMoveFolders( - parent, + parent?._id || "/", debouncedSearch, folder?._id ); @@ -43,33 +48,34 @@ const MoverPopup = () => { }; }, [search, debouncedSetSearchText]); - const onFolderClick = (folderID: string) => { + const onFolderClick = (folder: FolderInterface) => { const currentDate = Date.now(); if ( - lastSelected.current.folderID === folderID && + lastSelected.current.folderID === folder._id && currentDate - lastSelected.current.timestamp < 1500 ) { setSearch(""); setDebouncedSearch(""); - setParentList([...parentList, folderID]); - setParent(folderID); - setSelectedFolderID(""); + setParentList([...parentList, folder]); + setParent(folder); + setSelectedFolder(folder); } else { - setSelectedFolderID(folderID); + setSelectedFolder(folder); } lastSelected.current.timestamp = Date.now(); - lastSelected.current.folderID = folderID; + lastSelected.current.folderID = folder._id; }; const onBackClick = () => { + if (!parent) return; setSearch(""); setDebouncedSearch(""); const newParentList = parentList.slice(0, parentList.length - 1); - if (newParentList.length <= 1) { - setParent("/"); - setParentList(["/"]); + if (newParentList.length === 0) { + setParent(null); + setParentList([]); } else { setParentList(newParentList); setParent(newParentList[newParentList.length - 1]); @@ -77,50 +83,90 @@ const MoverPopup = () => { }; const moveText = useMemo(() => { - if (selectedFolderID) { + if (selectedFolder?._id) { return "Move to selected folder"; - } else if (parent === "/") { + } else if (!parent) { return "Move home"; } else { return "Move here"; } - }, [selectedFolderID, parent]); + }, [selectedFolder?._id, parent?._id]); + + const headerText = useMemo(() => { + if (parent) { + return parent.name; + } else { + return "Home"; + } + }, [selectedFolder?.name, parent?._id]); const onHomeClick = () => { setSearch(""); setDebouncedSearch(""); - setParent("/"); - setParentList(["/"]); - setSelectedFolderID(""); + setParent(null); + setParentList([]); + setSelectedFolder(null); + }; + + const onMoveClick = () => { + const moveTo = selectedFolder?._id + ? selectedFolder?._id + : parent?._id || "/"; + if (file) { + } else if (folder) { + } + console.log("move to", moveTo); + }; + + const closeMoverModal = (e: any) => { + if (e.target.id !== "outer-wrapper") return; + dispatch(resetMoveModal()); }; return ( -
+
dispatch(resetMoveModal())} />
-
+
- setSearch(e.target.value)} - /> + {!multiSelectMode && ( + setSearch(e.target.value)} + /> + )}
+
+

+ {headerText} +

+
{!isLoadingFolders && ( @@ -130,17 +176,18 @@ const MoverPopup = () => { "p-2 border-b border-[#ebe9f9] rounded-md mt-1 flex flex-row items-center", { "bg-primary text-white hover:bg-primary-hover": - selectedFolderID === folder._id, - "hover:bg-white-hover": selectedFolderID !== folder._id, + selectedFolder?._id === folder._id, + "hover:bg-white-hover": + selectedFolder?._id !== folder._id, } )} key={folder._id} - onClick={() => onFolderClick(folder._id)} + onClick={() => onFolderClick(folder)} >

@@ -161,6 +208,7 @@ const MoverPopup = () => { className={classNames( "bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-md" )} + onClick={onMoveClick} > {moveText} diff --git a/src/components/MultiSelectBar/index.tsx b/src/components/MultiSelectBar/index.tsx index 4ae5d9e..595f373 100644 --- a/src/components/MultiSelectBar/index.tsx +++ b/src/components/MultiSelectBar/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react"; import { useAppDispatch, useAppSelector } from "../../hooks/store"; -import { resetMultiSelect } from "../../reducers/selected"; +import { resetMultiSelect, setMoveModal } from "../../reducers/selected"; import { deleteMultiAPI, restoreMultiAPI, @@ -122,6 +122,10 @@ const MultiSelectBar: React.FC = () => { closeMultiSelect(); }; + const moveItems = () => { + dispatch(setMoveModal({ type: "multi-select", file: null, folder: null })); + }; + if (!multiSelectMode) return

; return ( @@ -141,13 +145,13 @@ const MultiSelectBar: React.FC = () => { {!isTrash && ( {!isMedia && ( {}} + className="ml-4 cursor-pointer w-5 h-5" + onClick={moveItems} /> )} @@ -155,11 +159,11 @@ const MultiSelectBar: React.FC = () => { {isTrash && ( diff --git a/src/hooks/folders.ts b/src/hooks/folders.ts index c2b0c50..ccdc4dc 100644 --- a/src/hooks/folders.ts +++ b/src/hooks/folders.ts @@ -77,6 +77,7 @@ export const useMoveFolders = ( search: string, folderID?: string ) => { + const params = useParams(); const moveFoldersQuery = useQuery( [ "move-folder-list", @@ -84,6 +85,7 @@ export const useMoveFolders = ( parent, search, folderID, + currentParent: params.id || "/", }, ], getMoveFolderListAPI diff --git a/src/reducers/selected.ts b/src/reducers/selected.ts index 1f77bd0..306c736 100644 --- a/src/reducers/selected.ts +++ b/src/reducers/selected.ts @@ -10,7 +10,7 @@ interface MainSecionType { } type MoveStateType = { - type: "" | "file" | "folder"; + type: "" | "file" | "folder" | "multi-select"; file: FileInterface | null; folder: FolderInterface | null; };