From 3ca48e584840824db2c206513f1ad0e282ac60a6 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 9 Jan 2024 14:35:45 +0530 Subject: [PATCH] fix: folder list display issue in move folder modal,add alert for delete document, change modal css --- .../FolderDrive/legaDriveComponent.js | 347 +++++++++--------- .../src/Component/LegaDrive/LegaDrive.css | 21 ++ .../src/Component/LegaDrive/LegaDrive.js | 218 ++++------- .../SignDocuments/src/css/selectFolder.css | 2 +- .../src/premitives/CreateFolder.js | 28 +- .../src/premitives/SelectFolder.js | 166 +-------- 6 files changed, 311 insertions(+), 471 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js b/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js index de39df94c..39f4211d0 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js @@ -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 {signerName} ; }; - return listType === "table" ? ( data.Type === "Folder" ? ( 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({ ); })} - - {/* handleMenuItemClick("Download", data)} - // onSelect={(e) => console.log("event", e)} - className="ContextMenuItem" - > - Download - - - handleMenuItemClick("Rename", data)} - className="ContextMenuItem" - > - Rename - - handleMenuItemClick("Delete", data)} - className="ContextMenuItem" - > - Delete - - handleMenuItemClick("Move", data)} - className="ContextMenuItem" - > - Move - */} @@ -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} /> )} + { + setIsDeleteDoc(false); + }} + > +
+

Are you sure you want to delete this document?

+ +
+ + + +
+ ); } diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css index 7df3321f4..0266b29e4 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css @@ -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; diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index 5c3c24c0e..5f04b38ed 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -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} /> - - - Add New Folder - {!folderLoader && ( - { - setNewFolderName(""); - setIsFolder(false); - }} - > - X - - )} - - - + { + setIsFolder(false); + }} + > +
{folderLoader ? (
) : ( -
+
)} - - +
+ {isLoading.isLoad ? (
{ template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id)); const res = await template.save(); if (res) { + const result = JSON.parse(JSON.stringify(res)); if (onSuccess) { setAlert({ type: "success", @@ -84,7 +85,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { setTimeout(() => { setIsAlert(false); }, 1000); - onSuccess(res); + onSuccess(result); } } } @@ -105,32 +106,36 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { {isAlert && {alert.message}}

Create Folder

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