|
|
import UploadFile from "../../components/Modals/ManageWorkspace/Documents/UploadFile";import PreLoader from "@/components/Preloader";import { memo, useEffect, useState } from "react";import FolderRow from "../../components/Modals/ManageWorkspace/Documents/Directory/FileRow";import System from "@/models/system";import { MagnifyingGlass, Plus, Trash } from "@phosphor-icons/react";import Document from "@/models/document";import showToast from "@/utils/toast";import FolderSelectionPopup from "../../components/Modals/ManageWorkspace/Documents/Directory/FolderSelectionPopup";import MoveToFolderIcon from "../../components/Modals/ManageWorkspace/Documents/Directory/MoveToFolderIcon";import { useModal } from "@/hooks/useModal";import NewFolderModal from "../../components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal";import debounce from "lodash.debounce";import { filterFileSearchResults } from "../../components/Modals/ManageWorkspace/Documents/Directory/utils";// import ContextMenu from "../../components/Modals/ManageWorkspace/Documents/Directory/ContextMenu";
import { Tooltip } from "react-tooltip";import { safeJsonParse } from "@/utils/request";import { data } from "autoprefixer";function Directory({ files, setFiles, loading, setLoading, workspace, fetchKeys, selectedItems, setSelectedItems, setHighlightWorkspace, moveToWorkspace, setLoadingMessage, loadingMessage,}) { const [amountSelected, setAmountSelected] = useState(0); const [showFolderSelection, setShowFolderSelection] = useState(false); const [searchTerm, setSearchTerm] = useState(""); const [dataTo, setFDataTo] = useState([]); const [show, setShow] = useState(false); const { isOpen: isFolderModalOpen, openModal: openFolderModal, closeModal: closeFolderModal, } = useModal(); // const [contextMenu, setContextMenu] = useState({
// visible: false,
// x: 0,
// y: 0,
// });
useEffect(() => { async function fetchUsers() { const nodata = await System.localFiles(); const em0 = nodata.items[0].items const em1 = nodata.items[1].items const em2 = nodata.items[2].items const em = [...em0,...em1,...em2] setFDataTo(em) console.log(2222,nodata); } fetchUsers(); }, []);
const deleteFiles = async (event) => { event.stopPropagation(); if ( !window.confirm( "Are you sure you want to delete these files and folders?\nThis will remove the files from the system and remove them from any existing workspaces automatically.\nThis action is not reversible." ) ) { return false; }
try { const toRemove = []; const foldersToRemove = [];
for (const itemId of Object.keys(selectedItems)) { for (const folder of files.items) { const foundItem = folder.items.find((file) => file.id === itemId); if (foundItem) { toRemove.push(`${folder.name}/${foundItem.name}`); break; } } } for (const folder of files.items) { if (folder.name === "custom-documents") { continue; }
if (isSelected(folder.id, folder)) { foldersToRemove.push(folder.name); } }
setLoading(true); setLoadingMessage( `Removing ${toRemove.length} documents and ${foldersToRemove.length} folders. Please wait.` ); await System.deleteDocuments(toRemove); for (const folderName of foldersToRemove) { await System.deleteFolder(folderName); }
await fetchKeys(true); setSelectedItems({}); } catch (error) { console.error("Failed to delete files and folders:", error); } finally { setLoading(false); setSelectedItems({}); } };
const toggleSelection = (item) => { setSelectedItems((prevSelectedItems) => { const newSelectedItems = { ...prevSelectedItems }; if (item.type === "folder") { // select all files in the folder
if (newSelectedItems[item.name]) { delete newSelectedItems[item.name]; item.items.forEach((file) => delete newSelectedItems[file.id]); } else { newSelectedItems[item.name] = true; item.items.forEach((file) => (newSelectedItems[file.id] = true)); } } else { // single file selections
if (newSelectedItems[item.id]) { delete newSelectedItems[item.id]; } else { newSelectedItems[item.id] = true; } }
return newSelectedItems; }); };
// check if item is selected based on selectedItems state
const isSelected = (id, item) => { if (item && item.type === "folder") { if (!selectedItems[item.name]) { return false; } return item.items.every((file) => selectedItems[file.id]); }
return !!selectedItems[id]; };
const moveToFolder = async (folder) => { const toMove = []; for (const itemId of Object.keys(selectedItems)) { for (const currentFolder of files.items) { const foundItem = currentFolder.items.find( (file) => file.id === itemId ); if (foundItem) { toMove.push({ ...foundItem, folderName: currentFolder.name }); break; } } } setLoading(true); setLoadingMessage(`Moving ${toMove.length} documents. Please wait.`); const { success, message } = await Document.moveToFolder( toMove, folder.name ); if (!success) { showToast(`Error moving files: ${message}`, "error"); setLoading(false); return; }
if (success && message) { // show info if some files were not moved due to being embedded
showToast(message, "info"); } else { showToast(`Successfully moved ${toMove.length} documents.`, "success"); } await fetchKeys(true); setSelectedItems({}); setLoading(false); };
const handleSearch = debounce((e) => { const searchValue = e.target.value; setSearchTerm(searchValue); }, 500);
const filteredFiles =filterFileSearchResults(files, searchTerm) // console.log(114545,filteredFiles);
const handleContextMenu = (event) => { event.preventDefault(); // setContextMenu({ visible: true, x: event.clientX, y: event.clientY });
};
const closeContextMenu = () => { // setContextMenu({ visible: false, x: 0, y: 0 });
};
// 点击显示隐藏
const bindUrl = () =>{ setShow(!show) console.log(show); }
// 返回首页
const bindHome = () =>{ window.location = '/' }
return ( <> <div className="px-8 pb-8 w-[60%] mt-[30px] ml-[20px] pt-[10px] shadow-lg shadow-[0_0_20px_0_#F4F6FC] onContextMenu={handleContextMenu}"> <div className="flex flex-col gap-y-6"> <div className="flex items-center justify-between w-[100%] px-5 relative"> <h3 className="text-white text-base font-bold cursor-pointer text-[22px]" onClick={bindHome}>首页</h3> <div className="relative"> <input type="search" placeholder="搜寻文件" onChange={handleSearch} className="border-none search-input bg-[#ECEFF6] text-white placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg pl-9 pr-2.5 py-2 w-[600px] h-[32px] light:border-theme-modal-border light:border" /> <MagnifyingGlass size={14} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white" weight="bold" /> </div> <button className="border-none flex items-center gap-x-2 cursor-pointer px-[14px] py-[7px] -mr-[14px] rounded-lg hover:bg-theme-sidebar-subitem-hover z-20 relative" onClick={openFolderModal} > <Plus size={18} weight="bold" className="text-theme-text-primary light:text-[#0ba5ec]" /> <div className="text-theme-text-primary light:text-[#0ba5ec] text-xs font-bold leading-[18px]"> 新文件夹 </div> </button> </div>
<div className="relative w-[100%] h-[500px] bg-[#ECEFF6] rounded-2xl overflow-hidden border "> <div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-theme-text-primary text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-md "> <p className="col-span-6">Name</p> </div>
<div className="overflow-y-auto h-full pt-8"> {loading ? ( <div className="w-full h-full flex items-center justify-center flex-col gap-y-5"> <PreLoader /> <p className="text-white text-sm font-semibold animate-pulse text-center w-1/3"> {loadingMessage} </p> </div> ) : dataTo.length > 0 ? ( dataTo.map((item, index) => ( <div key={index} onClick={bindUrl}> <div className="hover:bg-slate-400 pt-[10px] pb-[10px] pl-[30px] hover:text-[#fff]">{item.title}</div> </div> )) ) : ( <div className="w-full h-full flex items-center justify-center"> <p className="text-white text-opacity-40 text-sm font-medium"> 暂无文件 </p> </div> )} </div> {show == true && ( <div className="absolute bottom-[12px] left-0 right-0 flex justify-center pointer-events-none"> <div className="mx-auto bg-white/40 light:bg-white rounded-lg py-1 px-2 pointer-events-auto light:shadow-lg"> <div className="flex flex-row items-center gap-x-2"> <button // onClick={moveToWorkspace}
onMouseEnter={() => setHighlightWorkspace(true)} onMouseLeave={() => setHighlightWorkspace(false)} className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[30px] px-2.5 rounded-lg hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white" > 设为私有 </button> <button // onClick={moveToWorkspace}
onMouseEnter={() => setHighlightWorkspace(true)} onMouseLeave={() => setHighlightWorkspace(false)} className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[30px] px-2.5 rounded-lg hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white" > 设为公有 </button> <button // onClick={moveToWorkspace}
onMouseEnter={() => setHighlightWorkspace(true)} onMouseLeave={() => setHighlightWorkspace(false)} className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[30px] px-2.5 rounded-lg hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white" > 添加标签 </button> <div className="relative"> <button // onClick={() =>
// setShowFolderSelection(!showFolderSelection)
// }
className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[32px] w-[32px] rounded-lg text-dark-text hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white flex justify-center items-center group" > <MoveToFolderIcon className="text-dark-text light:text-[#026AA2] group-hover:text-white" /> </button> {showFolderSelection && ( <FolderSelectionPopup folders={files.items.filter( (item) => item.type === "folder" )} onSelect={moveToFolder} onClose={() => setShowFolderSelection(false)} /> )} </div> <button // onClick={deleteFiles}
className="border-none text-sm font-semibold bg-white light:bg-[#E0F2FE] h-[32px] w-[32px] rounded-lg text-dark-text hover:bg-neutral-800/80 hover:text-white light:text-[#026AA2] light:hover:bg-[#026AA2] light:hover:text-white flex justify-center items-center" > <Trash size={18} weight="bold" /> </button> </div> </div> </div> )} </div>
<UploadFile workspace={workspace} fetchKeys={fetchKeys} setLoading={setLoading} setLoadingMessage={setLoadingMessage} /> </div> {isFolderModalOpen && ( <div className="bg-black/60 backdrop-blur-sm fixed top-0 left-0 outline-none w-screen h-screen flex items-center justify-center z-30"> <NewFolderModal closeModal={closeFolderModal} files={files} setFiles={setFiles} /> </div> )} {/* <ContextMenu contextMenu={contextMenu} closeContextMenu={closeContextMenu} files={files} selectedItems={selectedItems} setSelectedItems={setSelectedItems} /> */} </div> <DirectoryTooltips /> </> );}
/** * Tooltips for the directory components. Renders when the directory is shown * or updated so that tooltips are attached as the items are changed. */function DirectoryTooltips() { return ( <Tooltip id="directory-item" place="bottom" delayShow={800} className="tooltip invert light:invert-0 z-99 max-w-[200px]" render={({ content }) => { const data = safeJsonParse(content, null); if (!data) return null; return ( <div className="text-xs"> <p className="text-white light:invert font-medium">{data.title}</p> <div className="flex mt-1 gap-x-2"> <p className=""> Date: <b>{data.date}</b> </p> <p className=""> Type: <b>{data.extension}</b> </p> </div> </div> ); }} /> );}
export default memo(Directory);
|
