diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js b/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js index 1c7ae57c1..de39df94c 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js @@ -10,6 +10,7 @@ import { getHostUrl } from "../../../utils/Utils"; 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"; function PdfFileComponent({ pdfData, @@ -22,7 +23,9 @@ function PdfFileComponent({ const [rename, setRename] = useState(""); const [renameValue, setRenameValue] = useState(""); const inputRef = useRef(null); - + const [isOpenMoveModal, setIsOpenMoveModal] = useState(false); + const [selectDoc, setSelectDoc] = useState(); + const contextMenu = ["Download", "Rename", "Delete", "Move"]; const navigate = useNavigate(); //to focus input box on press rename to change doc name @@ -212,19 +215,63 @@ function PdfFileComponent({ }; const handleMenuItemClick = (selectType, data) => { - // console.log("data",data) - if (selectType === "Download") { - // console.log("download") - const pdfName = data && data.Name; - const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL; - saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`); - } else if (selectType === "Rename") { - // console.log("rename") - setRenameValue(data.Name); - setRename(data.objectId); + 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, "_"); @@ -236,6 +283,13 @@ function PdfFileComponent({ } }; + const signersName = () => { + const getSignersName = signerExist.map((data) => data.Name); + const signerName = getSignersName.join(","); + + return {signerName} ; + }; + return listType === "table" ? ( data.Type === "Folder" ? ( handleOnclikFolder(data)}> @@ -355,14 +409,6 @@ function PdfFileComponent({ sideOffset={5} align="end" > - {/* handleMenuItemClick("Download", data)} - onSelect={(e) => console.log("event", e)} - className="ContextMenuItem" - > - Download - */} - handleMenuItemClick("Rename", data)} className="ContextMenuItem" @@ -428,14 +474,6 @@ function PdfFileComponent({ sideOffset={5} align="end" > - {/* handleMenuItemClick("Download", data)} - onSelect={(e) => console.log("event", e)} - className="ContextMenuItem" - > - Download - */} - handleMenuItemClick("Rename", data)} className="ContextMenuItem" @@ -447,7 +485,7 @@ function PdfFileComponent({ ) : ( - +
@@ -518,9 +556,22 @@ function PdfFileComponent({ sideOffset={5} align="end" > - { + return ( + handleMenuItemClick(menuType, data)} + // onSelect={(e) => console.log("event", e)} + className="ContextMenuItem" + > + {menuType} + + ); + })} + + {/* handleMenuItemClick("Download", data)} - onSelect={(e) => console.log("event", e)} + // onSelect={(e) => console.log("event", e)} className="ContextMenuItem" > Download @@ -532,6 +583,18 @@ function PdfFileComponent({ > Rename + handleMenuItemClick("Delete", data)} + className="ContextMenuItem" + > + Delete + + handleMenuItemClick("Move", data)} + className="ContextMenuItem" + > + Move + */} @@ -554,13 +617,7 @@ function PdfFileComponent({ {signerExist && ( <> Signers: - {signerExist.map((data, key) => { - return ( - - {data.Name}, - - ); - })} + {signersName()} )} @@ -569,41 +626,113 @@ function PdfFileComponent({ ); }; - //component to handle type of document and render according to type - return isList ? ( -
- - - - - - - - - - - + //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 ( + <> + {isList ? ( +
+
NameCreated DateTypeStatusAction
+ + + + + + + + + + + {pdfData.map((data, ind) => { + return ( + + {handleFolderData(data, ind, "table")} + + ); + })} + +
NameCreated DateTypeStatusAction
+
+ ) : ( +
{pdfData.map((data, ind) => { return ( - - {handleFolderData(data, ind, "table")} - +
+ {handleFolderData(data, ind, "list")} +
); })} - - -
- ) : ( -
- {pdfData.map((data, ind) => { - return ( -
- {handleFolderData(data, ind, "list")} -
- ); - })} -
+
+ )} + {isOpenMoveModal && ( + + )} + ); } diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css index 41b16ed3b..7df3321f4 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css @@ -12,6 +12,7 @@ overflow: hidden; padding: 5px; box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2); + z-index: 99; } .ContextMenuItem, @@ -502,6 +503,7 @@ a { } } + @media (min-width: 310px) and (max-width:550px) { .pdfContainer { diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index 417e156c0..5c3c24c0e 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -9,6 +9,8 @@ import { themeColor, iconColor } from "../../utils/ThemeColor/backColor"; import { getDrive } from "../../utils/Utils"; import AlertComponent from "../component/alertComponent"; import { useNavigate } from "react-router-dom"; +import Title from "../component/Title"; +import Parse from "parse"; function PdfFile() { const navigate = useNavigate(); @@ -54,7 +56,9 @@ function PdfFile() { isLoad: true, message: "This might take some time" }; + setIsLoading(load); + const driveDetails = await getDrive(); if (driveDetails) { if (driveDetails.length > 0) { @@ -62,7 +66,7 @@ function PdfFile() { } const data = [ { - name: "OpenSignDrive™", + name: "OpenSign™ Drive", objectId: "" } ]; @@ -85,8 +89,11 @@ function PdfFile() { isLoad: true, message: "This might take some time" }; + setIsLoading(load); + const driveDetails = await getDrive(docId); + if (driveDetails) { if (driveDetails.length > 0) { setPdfData(driveDetails); @@ -111,43 +118,53 @@ function PdfFile() { setIsFolder(true); }; //function for handle folder name path - const handleRoute = (data) => { + const handleRoute = (index) => { let loadObj = { isLoad: true, message: "This might take some time" }; - if (data.name === "LegaDrive™") { - setIsLoading(loadObj); - if (docId) { - setDocId(); - } else { - setTimeout(() => { - const loadObj = { - isLoad: false - }; - setIsLoading(loadObj); - }, 1000); + // 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) { + return x; } - } 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); - } + setFolderName(updateFolderName); + const getLastId = updateFolderName[updateFolderName.length - 1]; + setDocId(getLastId.objectId); }; //function for add new folder name @@ -160,7 +177,6 @@ function PdfFile() { const handleAddFolder = async () => { if (newFolderName) { setIsFolderLoader(true); - const getParentObjId = folderName[folderName.length - 1]; const parentId = getParentObjId && getParentObjId.objectId; let data; @@ -329,8 +345,38 @@ function PdfFile() { }; }, [isShowSort]); + const handleFolderTab = (folderData, isMove) => { + return folderData.map((data, id) => { + return ( + <> + handleRoute(id)} + style={{ + color: "#a64b4e", + fontWeight: "400", + cursor: "pointer" + }} + > + {data.name} + + > + + + + ); + }); + }; return (
+ <div> <AlertComponent isShow={isAlert.isShow} @@ -479,31 +525,7 @@ function PdfFile() { }} className="folderPath" > - {folderName.map((data, id) => { - return ( - <span - key={id} - onClick={() => handleRoute(data)} - style={{ - color: "#a64b4e", - fontWeight: "400", - cursor: "pointer" - }} - > - {data.name} - <span - style={{ - color: "#a64b4e", - fontWeight: "200", - cursor: "pointer", - margin: "0 4px" - }} - > - > - </span> - </span> - ); - })} + {handleFolderTab(folderName)} </div> <div className="dropMenuBD"> <div diff --git a/microfrontends/SignDocuments/src/Component/component/Title.js b/microfrontends/SignDocuments/src/Component/component/Title.js index 892edee3a..6781b61b4 100644 --- a/microfrontends/SignDocuments/src/Component/component/Title.js +++ b/microfrontends/SignDocuments/src/Component/component/Title.js @@ -1,10 +1,10 @@ import React from "react"; import { Helmet } from "react-helmet"; -function Title({ title }) { +function Title({ title, drive }) { return ( <Helmet> - <title>{`${title} - OpenSign™`} + {drive ? title : `${title} - OpenSign™`} { const folderPtr = { @@ -20,7 +21,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { const fetchFolder = async () => { try { - const FolderQuery = new Parse.Query(folderCls); + const FolderQuery = new Parse.Query(folderCls); if (parentFolderId) { FolderQuery.equalTo("Folder", folderPtr); FolderQuery.equalTo("Type", "Folder"); @@ -98,28 +99,39 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { const handleOptions = (e) => { setSelectedParent(e.target.value); }; + return (
{isAlert && {alert.message}}
-

Create Folder

-
+

Create Folder

+
setName(e.target.value)} required />
-
+