fix: folder list display issue in move folder modal,add alert for delete document, change modal css

2026-09-09 19:27:40 +02:00 · 2024-01-09 14:35:45 +05:30
parent 14784ec80f
commit 3ca48e5848
6 changed files with 311 additions and 471 deletions
@@ -11,6 +11,8 @@ import { useNavigate } from "react-router-dom";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
 import SelectFolder from "../../../premitives/SelectFolder";
+import ModalUi from "../../../premitives/ModalUi";
+import { themeColor } from "../../../utils/ThemeColor/backColor";

 function PdfFileComponent({
  pdfData,
@@ -25,6 +27,7 @@ function PdfFileComponent({
  const inputRef = useRef(null);
  const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
  const [selectDoc, setSelectDoc] = useState();
+  const [isDeleteDoc, setIsDeleteDoc] = useState(false);
  const contextMenu = ["Download", "Rename", "Delete", "Move"];
  const navigate = useNavigate();

@@ -163,9 +166,138 @@ function PdfFileComponent({
    }
  };

+  const handleMenuItemClick = (selectType, data) => {
+    switch (selectType) {
+      case "Download":
+        const pdfName = data && data.Name;
+        const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
+        saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+        break;
+      case "Rename":
+        setRenameValue(data.Name);
+        setRename(data.objectId);
+        break;
+      case "Delete":
+        setIsDeleteDoc(true);
+        setSelectDoc(data);
+        break;
+
+      case "Move":
+        handleMoveDocument(data);
+        break;
+    }
+  };
+  //function for delete document
+  const handleDeleteDocument = async (docData) => {
+    const docId = docData.objectId;
+    const data = {
+      IsArchive: true
+    };
+
+    await axios
+      .put(
+        `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+          "_appName"
+        )}_Document/${docId}`,
+        data,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
+        }
+      )
+      .then((result) => {
+        const res = result.data;
+        const updatedData = pdfData.filter((x) => x.objectId !== docId);
+        setPdfData(updatedData);
+      })
+      .catch((err) => {
+        console.log("err", err);
+      });
+  };
+  const handleMoveDocument = async (docData) => {
+    setIsOpenMoveModal(true);
+    setSelectDoc(docData);
+  };
+  //function for move document from one folder to another folder
+  const handleMoveFolder = async (selectFolderData) => {
+    const selecFolderId = selectDoc?.Folder?.objectId;
+    const moveFolderId = selectFolderData?.ObjectId;
+    let updateDocId = selectDoc?.objectId;
+    let updateData;
+    const checkExist = moveFolderId
+      ? selecFolderId === moveFolderId
+        ? true
+        : false
+      : false;
+
+    if (!checkExist) {
+      if (moveFolderId) {
+        updateData = {
+          Folder: {
+            __type: "Pointer",
+            className: `${localStorage.getItem("_appName")}_Document`,
+            objectId: moveFolderId
+          }
+        };
+      } else {
+        updateData = {
+          Folder: { __op: "Delete" }
+        };
+      }
+
+      await axios
+        .put(
+          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+            "_appName"
+          )}_Document/${updateDocId}`,
+          updateData,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+            }
+          }
+        )
+
+        .then((Listdata) => {
+          // console.log("Listdata ", Listdata);
+          const json = Listdata.data;
+
+          const updatedData = pdfData.filter((x) => x.objectId !== updateDocId);
+          setPdfData(updatedData);
+        })
+        .catch((err) => {
+          console.log("err", err);
+        });
+
+      setIsOpenMoveModal(false);
+    } else {
+      alert("folder already exist!");
+      setIsOpenMoveModal(false);
+    }
+  };
+
+  const sanitizeFileName = (pdfName) => {
+    // Replace spaces with underscore
+    return pdfName.replace(/ /g, "_");
+  };
+
+  const handleEnterPress = (e, data) => {
+    if (e.key === "Enter") {
+      handledRenameDoc(data);
+    }
+  };
+
+  const handleDraftDoc = (data) => {
+    window.location.hash = `/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9MZWdhR2VuaWUtTWljcm9hcHBWMi9yZW1vdGVFbnRyeS5qcw==&moduleToLoad=AppRoutes&remoteName=legageniemicroapp/legagenie?${data.objectId}`;
+  };
+
  //component to handle type of document and render according to type
  const handleFolderData = (data, ind, listType) => {
-    // console.log("data", data);
    let createddate,
      status,
      isDecline,
@@ -210,86 +342,12 @@ function PdfFileComponent({
      }
    }

-    const handleDraftDoc = (data) => {
-      window.location.hash = `/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9MZWdhR2VuaWUtTWljcm9hcHBWMi9yZW1vdGVFbnRyeS5qcw==&moduleToLoad=AppRoutes&remoteName=legageniemicroapp/legagenie?${data.objectId}`;
-    };
-
-    const handleMenuItemClick = (selectType, data) => {
-      switch (selectType) {
-        case "Download":
-          const pdfName = data && data.Name;
-          const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
-          saveAs(
-            pdfUrl,
-            `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`
-          );
-          break;
-        case "Rename":
-          setRenameValue(data.Name);
-          setRename(data.objectId);
-          break;
-        case "Delete":
-          handleDeleteDocument(data);
-          break;
-
-        case "Move":
-          handleMoveDocument(data);
-          break;
-      }
-    };
-
-    //function for delete document
-    const handleDeleteDocument = async (docData) => {
-      const docId = docData.objectId;
-      const data = {
-        IsArchive: true
-      };
-
-      await axios
-        .put(
-          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-            "_appName"
-          )}_Document/${docId}`,
-          data,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-            }
-          }
-        )
-        .then((result) => {
-          const res = result.data;
-          const updatedData = pdfData.filter((x) => x.objectId !== docId);
-          setPdfData(updatedData);
-        })
-        .catch((err) => {
-          console.log("err", err);
-        });
-    };
-    const handleMoveDocument = async (docData) => {
-      setIsOpenMoveModal(true);
-      setSelectDoc(docData);
-    };
-    const sanitizeFileName = (pdfName) => {
-      // Replace spaces with underscore
-      return pdfName.replace(/ /g, "_");
-    };
-
-    const handleEnterPress = (e, data) => {
-      if (e.key === "Enter") {
-        handledRenameDoc(data);
-      }
-    };
-
    const signersName = () => {
      const getSignersName = signerExist.map((data) => data.Name);
      const signerName = getSignersName.join(",");

      return <span className="statusSpan">{signerName} </span>;
    };
-
    return listType === "table" ? (
      data.Type === "Folder" ? (
        <tr onClick={() => handleOnclikFolder(data)}>
@@ -383,7 +441,6 @@ function PdfFileComponent({
                  }}
                  autoFocus={true}
                  type="text"
-                  // onFocus={()=>console.log("focus")}
                  onBlur={() => handledRenameDoc(data)}
                  onKeyDown={(e) => handleEnterPress(e, data)}
                  ref={inputRef}
@@ -448,7 +505,6 @@ function PdfFileComponent({
                  }}
                  autoFocus={true}
                  type="text"
-                  // onFocus={()=>console.log("focus")}
                  onBlur={() => handledRenameDoc(data)}
                  onKeyDown={(e) => handleEnterPress(e, data)}
                  ref={inputRef}
@@ -568,33 +624,6 @@ function PdfFileComponent({
                      </ContextMenu.Item>
                    );
                  })}
-
-                  {/* <ContextMenu.Item
-                    onClick={() => handleMenuItemClick("Download", data)}
-                    // onSelect={(e) => console.log("event", e)}
-                    className="ContextMenuItem"
-                  >
-                    Download
-                  </ContextMenu.Item>
-
-                  <ContextMenu.Item
-                    onClick={() => handleMenuItemClick("Rename", data)}
-                    className="ContextMenuItem"
-                  >
-                    Rename
-                  </ContextMenu.Item>
-                  <ContextMenu.Item
-                    onClick={() => handleMenuItemClick("Delete", data)}
-                    className="ContextMenuItem"
-                  >
-                    Delete
-                  </ContextMenu.Item>
-                  <ContextMenu.Item
-                    onClick={() => handleMenuItemClick("Move", data)}
-                    className="ContextMenuItem"
-                  >
-                    Move
-                  </ContextMenu.Item> */}
                </ContextMenu.Content>
              </ContextMenu.Portal>
            </ContextMenu.Root>
@@ -627,66 +656,6 @@ function PdfFileComponent({
    );
  };

-  //function for move document from one folder to another folder
-  const handleMoveFolder = async (selectFolderData) => {
-    const selecFolderId = selectDoc?.Folder?.objectId;
-    const moveFolderId = selectFolderData?.ObjectId;
-    let updateDocId = selectDoc?.objectId;
-    let updateData;
-    const checkExist = moveFolderId
-      ? selecFolderId === moveFolderId
-        ? true
-        : false
-      : false;
-
-    if (!checkExist) {
-      if (moveFolderId) {
-        updateData = {
-          Folder: {
-            __type: "Pointer",
-            className: `${localStorage.getItem("_appName")}_Document`,
-            objectId: moveFolderId
-          }
-        };
-      } else {
-        updateData = {
-          Folder: undefined
-        };
-      }
-
-      await axios
-        .put(
-          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-            "_appName"
-          )}_Document/${updateDocId}`,
-          updateData,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-            }
-          }
-        )
-
-        .then((Listdata) => {
-          // console.log("Listdata ", Listdata);
-          const json = Listdata.data;
-
-          const updatedData = pdfData.filter((x) => x.objectId !== updateDocId);
-          setPdfData(updatedData);
-        })
-        .catch((err) => {
-          console.log("err", err);
-        });
-
-      setIsOpenMoveModal(false);
-    } else {
-      alert("folder already exist!");
-      setIsOpenMoveModal(false);
-    }
-  };
-
  //component to handle type of document and render according to type
  return (
    <>
@@ -730,8 +699,58 @@ function PdfFileComponent({
          isOpenModal={isOpenMoveModal}
          folderCls={"contracts_Document"}
          setIsOpenMoveModal={setIsOpenMoveModal}
+          setPdfData={setPdfData}
        />
      )}
+      <ModalUi
+        isOpen={isDeleteDoc}
+        headerColor={themeColor()}
+        title={"Delete Document"}
+        handleClose={() => {
+          setIsDeleteDoc(false);
+        }}
+      >
+        <div style={{ height: "100%", padding: 20 }}>
+          <p>Are you sure you want to delete this document?</p>
+
+          <div
+            style={{
+              height: "1px",
+              backgroundColor: "#9f9f9f",
+              width: "100%",
+              marginTop: "15px",
+              marginBottom: "15px"
+            }}
+          ></div>
+
+          <button
+            onClick={() => {
+              handleDeleteDocument(selectDoc);
+            }}
+            style={{
+              background: themeColor(),
+              color: "white"
+            }}
+            type="button"
+            className="docDeleteBtn"
+          >
+            YES
+          </button>
+          <button
+            onClick={() => {
+              setIsDeleteDoc(false);
+            }}
+            style={{
+              background: "rgb(24 138 226)",
+              marginLeft: "10px"
+            }}
+            type="button"
+            className="docDeleteBtn"
+          >
+            NO
+          </button>
+        </div>
+      </ModalUi>
    </>
  );
 }
@@ -497,6 +497,27 @@ a {
  /* for Chrome, Safari, and Opera */
 }

+.docDeleteBtn {
+  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); */
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  padding: 7px 17px;
+  color: white;
+  font-weight: 600 !important;
+  font-size: 12px !important;
+  border: none;
+  border-radius: 2px;
+}
+
+.docDeleteBtn:focus {
+  border: none;
+  outline: none;
+}
+
+.docDeleteBtn:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+  color: white;
+}
+
@media screen and (max-width:766px) {
  .itemColor {
    font-size: 10px !important;
@@ -11,6 +11,7 @@ import AlertComponent from "../component/alertComponent";
 import { useNavigate } from "react-router-dom";
 import Title from "../component/Title";
 import Parse from "parse";
+import ModalUi from "../../premitives/ModalUi";

 function PdfFile() {
  const navigate = useNavigate();
@@ -29,7 +30,7 @@ function PdfFile() {
    message: "This might take some time"
  });
  const [docId, setDocId] = useState();
-  const [handleError, setHandleError] = useState();
+  const [handleError, setHandleError] = useState("");
  const [folderName, setFolderName] = useState([]);
  const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
  const [isNewFol, setIsNewFol] = useState(false);
@@ -123,38 +124,6 @@ function PdfFile() {
      isLoad: true,
      message: "This might take some time"
    };
-    // if (data.name === "OpenSign™ Drive") {
-    //   setIsLoading(loadObj);
-    //   if (docId) {
-    //     setDocId();
-    //   } else {
-    //     setTimeout(() => {
-    //       const loadObj = {
-    //         isLoad: false
-    //       };
-    //       setIsLoading(loadObj);
-    //     }, 1000);
-    //   }
-    // } else if (data.name === folderName[folderName.length - 1].name) {
-    //   setIsLoading(loadObj);
-    //   setTimeout(() => {
-    //     const loadObj = {
-    //       isLoad: false
-    //     };
-    //     setIsLoading(loadObj);
-    //   }, 1000);
-    // } else {
-    //   const findIndex = folderName.findIndex(
-    //     (fold) => fold.objectId === data.objectId
-    //   );
-    //   const newFolder = folderName.slice(0, findIndex + 1);
-
-    //   setFolderName(newFolder);
-    //   const getLastId = newFolder[newFolder.length - 1];
-
-    //   setDocId(getLastId.objectId);
-    //   setIsLoading(loadObj);
-    // }

    const updateFolderName = folderName.filter((x, i) => {
      if (i <= index) {
@@ -173,77 +142,60 @@ function PdfFile() {
    const value = e.target.value;
    setNewFolderName(value);
  };
-  //function for add folder
+  //function for create folder
  const handleAddFolder = async () => {
    if (newFolderName) {
      setIsFolderLoader(true);
      const getParentObjId = folderName[folderName.length - 1];
      const parentId = getParentObjId && getParentObjId.objectId;
-      let data;
-      if (parentId) {
-        data = {
-          Name: newFolderName,
-          Type: "Folder",
-          Folder: {
-            __type: "Pointer",
-            className: `${localStorage.getItem("_appName")}_Document`,
-            objectId: parentId
-          },
-          CreatedBy: {
-            __type: "Pointer",
-            className: "_User",
-            objectId: jsonCurrentUser.objectId
-          }
-        };
-      } else {
-        data = {
-          Name: newFolderName,
-          Type: "Folder",
-          CreatedBy: {
-            __type: "Pointer",
-            className: "_User",
-            objectId: jsonCurrentUser.objectId
-          }
-        };
-      }
+      const foldercls = `${localStorage.getItem("_appName")}_Document`;
+      const folderPtr = {
+        __type: "Pointer",
+        className: foldercls,
+        objectId: parentId
+      };
+      const CreatedBy = {
+        __type: "Pointer",
+        className: "_User",
+        objectId: jsonCurrentUser.objectId
+      };

-      await axios
-        .post(
-          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-            "_appName"
-          )}_Document`,
-          data,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-              "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-            }
-          }
-        )
+      try {
+        const exsitQuery = new Parse.Query(foldercls);
+        exsitQuery.equalTo("Name", newFolderName);
+        exsitQuery.equalTo("Type", "Folder");
+        if (parentId) {
+          exsitQuery.equalTo("Folder", folderPtr);
+        }
+        const templExist = await exsitQuery.first();
+        if (templExist) {
+          setError("Folder already exist!");
+          setIsFolderLoader(false);
+        } else {
+          const template = new Parse.Object(foldercls);
+          template.set("Name", newFolderName);
+          template.set("Type", "Folder");

-        .then((Listdata) => {
-          // console.log("Listdata ", Listdata);
-          const json = Listdata.data;
-          // console.log("json ", json);
-          if (json) {
+          if (parentId) {
+            template.set("Folder", folderPtr);
+          }
+          template.set("CreatedBy", CreatedBy);
+          const res = await template.save();
+          if (res) {
+            const result = JSON.parse(JSON.stringify(res));
+
+            setPdfData((prev) => [...prev, result]);
            setNewFolderName();
-
            setIsFolderLoader(false);
            setIsFolder(false);
-            if (docId) {
-              getPdfFolderDocumentList();
-            } else {
-              getPdfDocumentList();
-            }
          }
-        })
-        .catch((err) => {
-          setIsAlert({
-            isShow: true,
-            alertMessage: "something went wrong"
-          });
+        }
+      } catch (e) {
+        setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong"
        });
+      }
    } else {
      setError("Please fill out this field");
    }
@@ -383,23 +335,14 @@ function PdfFile() {
          alertMessage={isAlert.alertMessage}
          setIsAlert={setIsAlert}
        />
-        <Modal show={isFolder}>
-          <ModalHeader style={{ background: themeColor() }}>
-            <span style={{ color: "white" }}>Add New Folder</span>
-            {!folderLoader && (
-              <span
-                style={{ cursor: "pointer" }}
-                onClick={() => {
-                  setNewFolderName("");
-                  setIsFolder(false);
-                }}
-              >
-                X
-              </span>
-            )}
-          </ModalHeader>
-
-          <Modal.Body>
+        <ModalUi
+          isOpen={isFolder}
+          title={"Add New Folder"}
+          handleClose={() => {
+            setIsFolder(false);
+          }}
+        >
+          <div style={{ height: "100%", padding: 20 }}>
            {folderLoader ? (
              <div
                style={{
@@ -420,7 +363,7 @@ function PdfFile() {
                </span>
              </div>
            ) : (
-              <form style={{ display: "flex", flexDirection: "column" }}>
+              <div style={{ display: "flex", flexDirection: "column" }}>
                <label
                  style={{
                    margin: "10px 0px 10px 0px",
@@ -439,46 +382,47 @@ function PdfFile() {
                  onChange={(e) => handleFolderName(e)}
                  // className="addFolderInput"
                />
-                <span style={{ color: "red", fontSize: "12px" }}>{error}</span>
-
+                <span
+                  style={{ color: "red", fontSize: "12px", marginTop: "6px" }}
+                >
+                  {error}
+                </span>
                <div
                  style={{
-                    margin: "20px 10px 10px 10px ",
-                    display: "flex",
-                    alignItems: "flex-end",
-                    justifyContent: "flex-end",
-                    alignContent: "flex-end"
+                    height: "1px",
+                    backgroundColor: "#9f9f9f",
+                    width: "100%",
+                    marginTop: "15px",
+                    marginBottom: "15px"
                  }}
-                >
-                  <button
-                    type="submit"
-                    style={{
-                      borderRadius: "0px",
-                      border: "1.5px solid #e3e2e1",
-                      fontWeight: "600",
-                      color: "black"
-                    }}
-                    className="finishBtn"
-                    onClick={() => setIsFolder(false)}
-                  >
-                    Close
-                  </button>
-
+                ></div>
+                <div style={{ display: "flex", flexDirection: "row" }}>
                  <button
                    onClick={() => handleAddFolder()}
                    style={{
                      background: themeColor()
                    }}
                    type="button"
-                    className="finishBtn"
+                    className="docDeleteBtn"
                  >
-                    Add
+                    ADD
+                  </button>
+                  <button
+                    type="submit"
+                    style={{
+                      background: "rgb(24 138 226)",
+                      marginLeft: "10px"
+                    }}
+                    className="docDeleteBtn"
+                    onClick={() => setIsFolder(false)}
+                  >
+                    CLOSE
                  </button>
                </div>
-              </form>
+              </div>
            )}
-          </Modal.Body>
-        </Modal>
+          </div>
+        </ModalUi>

        {isLoading.isLoad ? (
          <div