From e454bbaa57a235e941a51353054b5d3669635992 Mon Sep 17 00:00:00 2001 From: Anis Hamal <73131641+AndrewHamal@users.noreply.github.com> Date: Thu, 31 Oct 2024 16:14:33 +0545 Subject: [PATCH] Added delete folder modal with strong prompt, added logic to delete folder with its associated files and folders (#1191) * Added delete folder modal with string prompt, added logic to delete folder and all its associated files and folder * Chande delete folder modal to match delete dataroom model and file delete from storate * feat: update delete folder modal and functions - update copy for dataroom --------- Co-authored-by: Marc Seitz --- components/documents/delete-folder-modal.tsx | 115 ++++++++++++++++++ components/documents/folder-card.tsx | 95 ++++++--------- .../folders/manage/[folderId]/index.ts | 66 ++++++++-- 3 files changed, 207 insertions(+), 69 deletions(-) create mode 100644 components/documents/delete-folder-modal.tsx diff --git a/components/documents/delete-folder-modal.tsx b/components/documents/delete-folder-modal.tsx new file mode 100644 index 000000000..2a6b16af9 --- /dev/null +++ b/components/documents/delete-folder-modal.tsx @@ -0,0 +1,115 @@ +import { FileIcon, Files, Folder } from "lucide-react"; + +import { Button } from "@/components/ui/button"; + +import { useMediaQuery } from "@/lib/utils/use-media-query"; + +import { CardDescription, CardTitle } from "../ui/card"; +import { Input } from "../ui/input"; +import { Modal } from "../ui/modal"; + +export type TSelectedDataroom = { id: string; name: string } | null; + +export function DeleteFolderModal({ + open, + setOpen, + folderName, + folderId, + documents, + childFolders, + isDataroom, + handleButtonClick, +}: { + open: boolean; + folderId: string; + folderName?: string; + documents: number; + childFolders: number; + isDataroom?: boolean; + handleButtonClick?: any; + setOpen: React.Dispatch>; +}) { + const { isMobile } = useMediaQuery(); + + return ( + +
+ {isDataroom ? "Remove Folder" : "Delete Folder"} + + {isDataroom + ? "This will remove the folder and its contents from this dataroom. The original documents will remain in your workspace." + : "This will permanently delete the folder and all its contents, including subfolders, documents, dataroom references, and any visitor analytics."} +
+ + {documents}{" "} + {documents > 1 ? "documents" : "document"} + + + {childFolders}{" "} + {childFolders > 1 ? "folders" : "folder"} + +
+ +
+ +
{ + e.preventDefault(); + handleButtonClick(e, folderId); + }} + className="flex flex-col space-y-6 bg-muted px-4 py-8 text-left dark:bg-gray-900 sm:px-8" + > +
+ + +
+ +
+
+ +
+ +
+ +
+
+ +
+ + ); +} diff --git a/components/documents/folder-card.tsx b/components/documents/folder-card.tsx index 2816fabf9..e649f35fd 100644 --- a/components/documents/folder-card.tsx +++ b/components/documents/folder-card.tsx @@ -6,7 +6,9 @@ import { TeamContextType } from "@/context/team-context"; import { BetweenHorizontalStartIcon, FolderIcon, + FolderPenIcon, MoreVertical, + PackagePlusIcon, TrashIcon, } from "lucide-react"; import { toast } from "sonner"; @@ -28,6 +30,7 @@ import { timeAgo } from "@/lib/utils"; import { EditFolderModal } from "../folders/edit-folder-modal"; import { AddFolderToDataroomModal } from "./add-folder-to-dataroom-modal"; +import { DeleteFolderModal } from "./delete-folder-modal"; type FolderCardProps = { folder: FolderWithCount | DataroomFolderWithCount; @@ -47,10 +50,9 @@ export default function FolderCard({ }: FolderCardProps) { const router = useRouter(); const [openFolder, setOpenFolder] = useState(false); - const [isFirstClick, setIsFirstClick] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const [addDataroomOpen, setAddDataroomOpen] = useState(false); - + const [deleteModalOpen, setDeleteModalOpen] = useState(false); const dropdownRef = useRef(null); const folderPath = @@ -62,49 +64,25 @@ export default function FolderCard({ folder.path.lastIndexOf("/"), ); - useEffect(() => { - function handleClickOutside(event: { target: any }) { - if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { - setMenuOpen(false); - setIsFirstClick(false); - } - } - - document.addEventListener("mousedown", handleClickOutside); - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, []); - // https://github.com/radix-ui/primitives/issues/1241#issuecomment-1888232392 useEffect(() => { - if (!openFolder || !addDataroomOpen) { + if (!openFolder || !addDataroomOpen || !deleteModalOpen) { setTimeout(() => { document.body.style.pointerEvents = ""; }); } - }, [openFolder, addDataroomOpen]); + }, [openFolder, addDataroomOpen, deleteModalOpen]); const handleButtonClick = (event: any, documentId: string) => { event.stopPropagation(); event.preventDefault(); - if (isFirstClick) { - handleDeleteFolder(documentId); - setIsFirstClick(false); - setMenuOpen(false); // Close the dropdown after deleting - } else { - setIsFirstClick(true); - } + setDeleteModalOpen(false); + handleDeleteFolder(documentId); + setMenuOpen(false); }; const handleDeleteFolder = async (folderId: string) => { - // Prevent the first click from deleting the document - if (!isFirstClick) { - setIsFirstClick(true); - return; - } - const endpointTargetType = isDataroom && dataroomId ? `datarooms/${dataroomId}/folders` : "folders"; @@ -129,7 +107,7 @@ export default function FolderCard({ ); return isDataroom ? "Folder removed successfully." - : "Folder deleted successfully."; + : `Folder deleted successfully with ${folder._count.documents} documents and ${folder._count.childFolders} folders`; }, error: isDataroom ? "Failed to remove folder." @@ -138,21 +116,6 @@ export default function FolderCard({ ); }; - const handleMenuStateChange = (open: boolean) => { - if (isFirstClick) { - setMenuOpen(true); // Keep the dropdown open on the first click - return; - } - - // If the menu is closed, reset the isFirstClick state - if (!open) { - setIsFirstClick(false); - setMenuOpen(false); // Ensure the dropdown is closed - } else { - setMenuOpen(true); // Open the dropdown - } - }; - const handleCreateDataroom = (e: any, folderId: string) => { e.stopPropagation(); e.preventDefault(); @@ -231,14 +194,14 @@ export default function FolderCard({ href={`/documents/${prismaDocument.id}`} className="flex items-center z-10 space-x-1 rounded-md bg-gray-200 dark:bg-gray-700 px-1.5 sm:px-2 py-0.5 transition-all duration-75 hover:scale-105 active:scale-100" > - -

+ +

{nFormatter(prismaDocument._count.views)} - views + views

*/} - +