diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css index e86310a9a..31082ed45 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css @@ -103,6 +103,7 @@ white-space: nowrap; background-color: transparent; border: 0; + cursor: pointer; } diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index 20a4d3b5e..405ec5cd0 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -8,8 +8,10 @@ import ModalHeader from "react-bootstrap/esm/ModalHeader"; import { themeColor, iconColor } from "../../utils/ThemeColor/backColor"; import { getDrive } from "../../utils/Utils"; import AlertComponent from "../component/alertComponent"; +import { useNavigate } from "react-router-dom"; function PdfFile() { + const navigate = useNavigate(); const scrollRef = useRef(null); const [isList, setIsList] = useState(false); const [selectedSort, setSelectedSort] = useState("Date"); @@ -28,6 +30,7 @@ function PdfFile() { const [handleError, setHandleError] = useState(); const [folderName, setFolderName] = useState([]); const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); + const [isNewFol, setIsNewFol] = useState(false); const currentUser = localStorage.getItem( `Parse/${localStorage.getItem("parseAppId")}/currentUser` @@ -188,7 +191,6 @@ function PdfFile() { }; } - // console.log("data", data); await axios .post( `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( @@ -314,6 +316,8 @@ function PdfFile() { const closeMenuOnOutsideClick = (e) => { if (isShowSort && !e.target.closest("#menu-container")) { setIsShowSort(false); + } else if (isNewFol && !e.target.closest("#folder-menu")) { + setIsNewFol(false); } }; @@ -502,6 +506,67 @@ function PdfFile() { })}
+
setIsNewFol(!isNewFol)} + > +
+ +
+
+ {" "} +
+ getParentFolder()} + > + + Create folder + + navigate("/form/sHAnZphf69")} + > + + Sign Yourself + + navigate("/form/8mZzFxbG1z")} + > + {" "} + + Request Signatures{" "} + +
+
+
- -
getParentFolder()}> - -
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 01993a387..0354c81c4 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -5,6 +5,7 @@ import { themeColor } from "../../utils/ThemeColor/backColor"; import { Document, Page, pdfjs } from "react-pdf"; import BorderResize from "./borderResize"; import { + addZIndex, handleImageResize, handleSignYourselfImageResize } from "../../utils/Utils"; @@ -46,7 +47,8 @@ function RenderPdf({ setXyPostion, index, containerWH, - setIsResize + setIsResize, + setZIndex }) { const isMobile = window.innerWidth < 767; const newWidth = containerWH.width; @@ -200,7 +202,8 @@ function RenderPdf({ ? "pointer" : "not-allowed", borderColor: themeColor(), - background: data.blockColor + background: data.blockColor, + zIndex: "1" }} className="placeholderBlock" size={{ @@ -337,7 +340,8 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + zIndex: "1" }} className="placeholderBlock" onResize={( @@ -449,7 +453,8 @@ function RenderPdf({ style={{ cursor: "all-scroll", borderColor: themeColor(), - background: data.blockColor + background: data.blockColor, + zIndex: pos.zIndex }} className="placeholderBlock" onDrag={() => @@ -482,14 +487,16 @@ function RenderPdf({ onResizeStart={() => { setIsResize(true); }} - onResizeStop={( + onResizeStop={() => { + setIsResize && setIsResize(false); + }} + onResize={( e, direction, ref, delta, position ) => { - e.stopPropagation(); handleImageResize( ref, pos.key, @@ -500,37 +507,67 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, - false, - setIsResize + false ); }} > - -
{ - e.stopPropagation(); - handleDeleteSign( + onTouchEnd={() => { + const dataNewPlace = addZIndex( + signerPos, pos.key, - data.signerObjId + setZIndex ); + setSignerPos((prevState) => { + const newState = [...prevState]; + newState.splice( + 0, + signerPos.length, + ...dataNewPlace + ); + return newState; + }); }} style={{ - background: themeColor() - }} - className="placeholdCloseBtn" - > - x -
-
- {pos.isStamp ? "stamp" : "signature"} + + +
{ + e.stopPropagation(); + handleDeleteSign( + pos.key, + data.signerObjId + ); + }} + style={{ + background: themeColor() + }} + className="placeholdCloseBtn" + > + x +
+
+ {pos.isStamp + ? "stamp" + : "signature"} +
); @@ -569,7 +606,8 @@ function RenderPdf({ key={pos.key} style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + zIndex: "1" }} size={{ width: pos.Width ? pos.Width : 151, @@ -772,7 +810,8 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + zIndex: "1" }} className="placeholderBlock" size={{ @@ -854,6 +893,22 @@ function RenderPdf({ placeData.pos.map((pos) => { return ( { + const dataNewPlace = addZIndex( + signerPos, + pos.key, + setZIndex + ); + setSignerPos((prevState) => { + const newState = [...prevState]; + newState.splice( + 0, + signerPos.length, + ...dataNewPlace + ); + return newState; + }); + }} key={pos.key} enableResizing={{ top: false, @@ -869,15 +924,11 @@ function RenderPdf({ style={{ cursor: "all-scroll", background: data.blockColor, - borderColor: themeColor() + borderColor: themeColor(), + zIndex: pos.zIndex }} className="placeholderBlock" - onDrag={() => - handleTabDrag( - pos.key - // data.signerObjId - ) - } + onDrag={() => handleTabDrag(pos.key)} size={{ width: pos.Width ? pos.Width : 150, height: pos.Height ? pos.Height : 60 @@ -902,7 +953,10 @@ function RenderPdf({ onResizeStart={() => { setIsResize(true); }} - onResizeStop={( + onResizeStop={() => { + setIsResize && setIsResize(false); + }} + onResize={( e, direction, ref, @@ -919,8 +973,7 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, - false, - setIsResize + false ); }} > @@ -988,7 +1041,8 @@ function RenderPdf({ bounds="parent" style={{ borderColor: themeColor(), - cursor: "all-scroll" + cursor: "all-scroll", + zIndex: "1" }} className="placeholderBlock" onDrag={() => handleTabDrag(pos.key)} diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 923b43d2e..2eb873c01 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -66,6 +66,7 @@ function PlaceHolderSign() { const [selectedEmail, setSelectedEmail] = useState(false); const [isResize, setIsResize] = useState(false); const [isAlreadyPlace, setIsAlreadyPlace] = useState(false); + const [zIndex, setZIndex] = useState(1); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -263,6 +264,8 @@ function PlaceHolderSign() { }; const getSignerPos = (item, monitor) => { + const posZIndex = zIndex + 1; + setZIndex(posZIndex); const newWidth = containerWH.width; const scale = pdfOriginalWidth / newWidth; const key = Math.floor(1000 + Math.random() * 9000); @@ -282,7 +285,8 @@ function PlaceHolderSign() { isDrag: false, scale: scale, isMobile: isMobile, - yBottom: window.innerHeight / 2 - 60 + yBottom: window.innerHeight / 2 - 60, + zIndex: posZIndex }; dropData.push(dropObj); xyPos = { @@ -311,9 +315,9 @@ function PlaceHolderSign() { firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, yBottom: ybottom, scale: scale, - isMobile: isMobile + isMobile: isMobile, + zIndex: posZIndex }; - dropData.push(dropObj); xyPos = { pageNumber: pageNumber, @@ -322,6 +326,7 @@ function PlaceHolderSign() { xyPosArr.push(xyPos); } + //add signers objId first inseretion if (filterSignerPos.length > 0) { const colorIndex = signerPos @@ -403,6 +408,7 @@ function PlaceHolderSign() { setSignerPos((prev) => [...prev, placeHolderPos]); } }; + //function for get pdf page details const pageDetails = async (pdf) => { const load = { @@ -419,7 +425,6 @@ function PlaceHolderSign() { //function for save x and y position and show signature tab on that position const handleTabDrag = (key, signerId) => { setDragKey(key); - // setSignerObjId(signerId); }; //function for set and update x and y postion after drag and drop signature tab @@ -981,6 +986,7 @@ function PlaceHolderSign() { setSignerPos={setSignerPos} containerWH={containerWH} setIsResize={setIsResize} + setZIndex={setZIndex} /> )} diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 34ed5ea08..3ed622f98 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -176,7 +176,6 @@ .placeholderBlock { padding: 0px; - z-index: 1; position: absolute; border-style: dashed; width: 150px; @@ -185,7 +184,7 @@ text-align: center; justify-content: center; border-width: 0.2px; - + } .finishBtn { diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index a1aca4c2e..292a9c2f4 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -219,6 +219,36 @@ export function onSaveSign( return newUpdateUrl; } +export const addZIndex = (signerPos, key, setZIndex) => { + return signerPos.map((item) => { + if (item.placeHolder && item.placeHolder.length > 0) { + // If there is a nested array, recursively add the field to the last object + return { + ...item, + placeHolder: addZIndex(item.placeHolder, key, setZIndex) + }; + } else if (item.pos && item.pos.length > 0) { + // If there is no nested array, add the new field + return { + ...item, + pos: addZIndex(item.pos, key, setZIndex) + // Adjust this line to add the desired field + }; + } else { + if (item.key === key) { + setZIndex(item.zIndex); + return { + ...item, + zIndex: item.zIndex ? item.zIndex + 1 : 1 + }; + } else { + return { + ...item + }; + } + } + }); +}; //function for add default signature or image for all requested location export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => { let imgWH = { width: "", height: "" }; @@ -674,8 +704,7 @@ export const handleImageResize = ( setSignerPos, pdfOriginalWidth, containerWH, - showResize, - setIsResize + showResize ) => { const filterSignerPos = signerPos.filter( (data) => data.signerObjId === signerId @@ -753,7 +782,6 @@ export const handleImageResize = ( } } } - setIsResize && setIsResize(false); }; //function for resize image and update width and height for sign-yourself