Users can rename documentseverywhere using a popup, just like renaming a folder 📂.

components/datarooms/dataroom-document-card.tsx

@@ -10,6 +10,7 @@ import {
   BetweenHorizontalStartIcon,
   FolderInputIcon,
   MoreVertical,
+  PencilLineIcon,
 } from "lucide-react";
 import { useTheme } from "next-themes";
 import { toast } from "sonner";
@@ -32,6 +33,7 @@ import { cn, nFormatter, timeAgo } from "@/lib/utils";
 import { fileIcon } from "@/lib/utils/get-file-icon";
 
 import { AddToDataroomModal } from "../documents/add-document-to-dataroom-modal";
+import { EditDocumentModal } from "../documents/edit-document-modal";
 import { MoveToDataroomFolderModal } from "./move-dataroom-folder-modal";
 
 type DocumentsCardProps = {
@@ -60,6 +62,7 @@ export default function DataroomDocumentCard({
   const [moveFolderOpen, setMoveFolderOpen] = useState<boolean>(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const [addDataRoomOpen, setAddDataRoomOpen] = useState<boolean>(false);
+  const [isEditingName, setIsEditingName] = useState<boolean>(false);
 
   /** current folder name */
   const currentFolderPath = router.query.name as string[] | undefined;
@@ -91,7 +94,6 @@ export default function DataroomDocumentCard({
     event.stopPropagation();
     event.preventDefault();
 
-    console.log("isFirstClick", isFirstClick);
     if (isFirstClick) {
       handleRemoveDocument(documentId);
       setIsFirstClick(false);
@@ -234,6 +236,15 @@ export default function DataroomDocumentCard({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" ref={dropdownRef}>
               <DropdownMenuLabel>Actions</DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsEditingName(true);
+                }}
+              >
+                <PencilLineIcon className="mr-2 h-4 w-4" />
+                Rename
+              </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={(e) => {
                   e.stopPropagation();
@@ -290,6 +301,16 @@ export default function DataroomDocumentCard({
           documentName={dataroomDocument.document.name}
         />
       ) : null}
+      {isEditingName ? (
+        <EditDocumentModal
+          open={isEditingName}
+          setOpen={setIsEditingName}
+          documentId={dataroomDocument.document.id}
+          name={dataroomDocument.document.name}
+          dataroomId={dataroomDocument.dataroomId}
+          isDataroom={!!dataroomDocument.dataroomId}
+        />
+      ) : null}
     </>
   );
 }

components/documents/document-card.tsx

@@ -9,6 +9,7 @@ import {
   FolderInputIcon,
   Layers2Icon,
   MoreVertical,
+  PencilLineIcon,
   TrashIcon,
 } from "lucide-react";
 import { useTheme } from "next-themes";
@@ -36,6 +37,7 @@ import { useCopyToClipboard } from "@/lib/utils/use-copy-to-clipboard";
 import { UpgradePlanModal } from "../billing/upgrade-plan-modal";
 import { DataroomTrialModal } from "../datarooms/dataroom-trial-modal";
 import { AddToDataroomModal } from "./add-document-to-dataroom-modal";
+import { EditDocumentModal } from "./edit-document-modal";
 import { MoveToFolderModal } from "./move-folder-modal";
 
 type DocumentsCardProps = {
@@ -64,6 +66,7 @@ export default function DocumentsCard({
   const [addDataroomOpen, setAddDataroomOpen] = useState<boolean>(false);
   const [trialModalOpen, setTrialModalOpen] = useState<boolean>(false);
   const [planModalOpen, setPlanModalOpen] = useState<boolean>(false);
+  const [isEditingName, setIsEditingName] = useState<boolean>(false);
 
   const { datarooms } = useDatarooms();
 
@@ -282,6 +285,10 @@ export default function DocumentsCard({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" ref={dropdownRef}>
               <DropdownMenuLabel>Actions</DropdownMenuLabel>
+              <DropdownMenuItem onClick={() => setIsEditingName(true)}>
+                <PencilLineIcon className="mr-2 h-4 w-4" />
+                Rename
+              </DropdownMenuItem>
               <DropdownMenuItem onClick={() => setMoveFolderOpen(true)}>
                 <FolderInputIcon className="mr-2 h-4 w-4" />
                 Move to folder
@@ -325,7 +332,14 @@ export default function DocumentsCard({
           documentName={prismaDocument.name}
         />
       ) : null}
-
+      {isEditingName ? (
+        <EditDocumentModal
+          open={isEditingName}
+          setOpen={setIsEditingName}
+          documentId={prismaDocument.id}
+          name={prismaDocument.name}
+        />
+      ) : null}
       {addDataroomOpen ? (
         <AddToDataroomModal
           open={addDataroomOpen}

components/documents/edit-document-modal.tsx

@@ -0,0 +1,128 @@
+import { useRouter } from "next/router";
+
+import { useState } from "react";
+
+import { useTeam } from "@/context/team-context";
+import { toast } from "sonner";
+import { mutate } from "swr";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function EditDocumentModal({
+  open,
+  setOpen,
+  name,
+  documentId,
+  onAddition,
+  isDataroom,
+  dataroomId,
+  children,
+}: {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  name: string;
+  documentId: string;
+  onAddition?: (documentName: string) => void;
+  isDataroom?: boolean;
+  dataroomId?: string;
+  children?: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [documentName, setDocumentName] = useState<string>(name);
+  const [loading, setLoading] = useState<boolean>(false);
+  const currentFolderPath = router.query.name as string[] | undefined;
+
+  const teamInfo = useTeam();
+
+  const handleSubmit = async (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (documentName == "") return;
+
+    setLoading(true);
+
+    try {
+      const response = await fetch(
+        `/api/teams/${teamInfo?.currentTeam?.id}/documents/${documentId}/update-name`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: documentName,
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        const { message } = await response.json();
+        setLoading(false);
+        toast.error(message);
+        return;
+      }
+      const endpointTargetType =
+        isDataroom && dataroomId ? `/datarooms/${dataroomId}` : "";
+
+      const endpoint = currentFolderPath
+        ? `/folders/documents/${currentFolderPath.join("/")}`
+        : "/documents";
+      console.log(
+        "13213213",
+        `/api/teams/${teamInfo?.currentTeam?.id}/${endpointTargetType}${endpoint}`,
+      );
+      toast.success("Document updated successfully! 🎉");
+      mutate(
+        `/api/teams/${teamInfo?.currentTeam?.id}${endpointTargetType}${endpoint}`,
+      );
+    } catch (error) {
+      setLoading(false);
+      toast.error("Error updating Document. Please try again.");
+      return;
+    } finally {
+      setLoading(false);
+      setOpen(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader className="text-start">
+          <DialogTitle>Edit document</DialogTitle>
+          <DialogDescription>Enter a new document name.</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit}>
+          <Label htmlFor="document-name-update" className="opacity-80">
+            Document Name
+          </Label>
+          <Input
+            id="document-name-update"
+            value={documentName}
+            placeholder="folder-123"
+            className="mb-4 mt-1 w-full"
+            onChange={(e) => setDocumentName(e.target.value)}
+          />
+          <DialogFooter>
+            <Button type="submit" className="h-9 w-full" loading={loading}>
+              Update Document
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}