diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 000000000..7983b7ed8 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,22 @@ +# To get started with Dependabot version updates, you'll need to specify which +# package ecosystems to update and where the package manifests are located. +# Please see the documentation for all configuration options: +# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates + +version: 2 +updates: + # maintain dependencies for frontend + - package-ecosystem: "npm" # See documentation for possible values + directory: "/apps/OpenSign" # Location of package manifests + schedule: + interval: "weekly" + # maintain dependencies for server + - package-ecosystem: "npm" # See documentation for possible values + directory: "/apps/OpenSignServer" # Location of package manifests + schedule: + interval: "weekly" + # maintain dependencies for microfrontends + - package-ecosystem: "npm" # See documentation for possible values + directory: "microfrontends/SignDocuments" # Location of package manifests + schedule: + interval: "weekly" diff --git a/microfrontends/SignDocuments/public/index.html b/microfrontends/SignDocuments/public/index.html index bf27a008e..b3ac89822 100644 --- a/microfrontends/SignDocuments/public/index.html +++ b/microfrontends/SignDocuments/public/index.html @@ -47,7 +47,7 @@ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> - OpenSign App + OpenSign™ diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css index e86310a9a..41b16ed3b 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css @@ -84,14 +84,10 @@ color: var(--mauve-8); } - .dropdown-menu { - min-width: 10rem; - } - .dropdown-item { display: block; width: 100%; @@ -103,21 +99,18 @@ white-space: nowrap; background-color: transparent; border: 0; + cursor: pointer; } - .dropdown-item:hover { background-color: #dad9db; color: var(--violet-11); - } .itemColor { font-size: 13px !important; } - - .folderComponent { margin: 30px; height: 100%; @@ -490,41 +483,52 @@ a { display: none; } - .folderPath{ +.folderPath { overflow-x: auto; white-space: nowrap; cursor: pointer; user-select: none; - } - .folderPath::-webkit-scrollbar { +} + +.folderPath::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } +@media screen and (max-width:766px) { + .itemColor { + font-size: 10px !important; + } + +} @media (min-width: 310px) and (max-width:550px) { - + .pdfContainer { justify-content: space-around; } + .sort { -padding: 2px; + padding: 2px; } - .folderComponent{ + + .folderComponent { margin: 10px; } - + } -@media screen and (max-width:309px) { - +@media screen and (max-width:309px) { + .pdfContainer { justify-content: center; } + .sort { padding: 2px; - } - .folderComponent{ - margin: 10px; - } + } + + .folderComponent { + margin: 10px; + } } \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index 20a4d3b5e..417e156c0 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,69 @@ 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/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 4bd54bbf9..c3b3c492a 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -494,6 +494,7 @@ function PdfRequestFiles() { data.key === signKey && data.Width && data.Height && data.SignUrl ); let getIMGWH = calculateImgAspectRatio(imgWH); + if (updateFilter.length > 0) { const getXYdata = currentSigner[0].placeHolder[i].pos; const getPosData = getXYdata; @@ -516,11 +517,17 @@ function PdfRequestFiles() { } return obj; }); - currentSigner[0].placeHolder.splice(i, 1, newUpdateUrl[0]); + const getPlaceData = currentSigner[0].placeHolder; + getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl); + const indexofSigner = signerPos.findIndex((object) => { return object.signerObjId === signerObjectId; }); - signerPos.splice(indexofSigner, 1, currentSigner[0]); + setSignerPos((prevState) => { + const newState = [...prevState]; // Create a copy of the state + newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy + return newState; // Update the state with the modified copy + }); } else { const getXYdata = currentSigner[0].placeHolder[i].pos; @@ -546,11 +553,17 @@ function PdfRequestFiles() { return obj; }); - currentSigner[0].placeHolder.splice(i, 1, newUpdateUrl[0]); + const getPlaceData = currentSigner[0].placeHolder; + getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl); + const indexofSigner = signerPos.findIndex((object) => { return object.signerObjId === signerObjectId; }); - signerPos.splice(indexofSigner, 1, currentSigner[0]); + setSignerPos((prevState) => { + const newState = [...prevState]; // Create a copy of the state + newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy + return newState; // Update the state with the modified copy + }); } }; @@ -586,6 +599,7 @@ function PdfRequestFiles() { updateFilter = currentSigner[0].placeHolder[i].pos.filter( (data) => data.key === signKey && data.SignUrl ); + const getXYdata = currentSigner[0].placeHolder[i].pos; const getPosData = getXYdata; const posWidth = isDefaultSign @@ -633,12 +647,15 @@ function PdfRequestFiles() { } return obj; }); - let signerupdate = []; - signerupdate = signerPos.filter( - (data) => data.signerObjId !== signerObjectId + + const index = signerPos.findIndex( + (data) => data.signerObjId === signerObjectId ); - signerupdate.push(newUpdatePos[0]); - setSignerPos(signerupdate); + setSignerPos((prevState) => { + const newState = [...prevState]; // Create a copy of the state + newState.splice(index, 1, ...newUpdatePos); // Modify the copy + return newState; // Update the state with the modified copy + }); } }; diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index 5d7691e68..cccf897f0 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js @@ -39,7 +39,7 @@ function EmailComponent({ "X-Parse-Application-Id": localStorage.getItem("parseAppId"), sessionToken: localStorage.getItem("accesstoken") }; - + const openSignUrl = "https://www.opensignlabs.com/"; const themeBGcolor = themeColor(); let params = { pdfName: pdfName, @@ -54,9 +54,11 @@ function EmailComponent({ themeBGcolor + ";'>

Document Copy

A copy of the document " + pdfName + - " Standard is attached to this email. Kindly download the document from the attachment.

This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " + + " Standard is attached to this email. Kindly download the document from the attachment.

This is an automated email from OpenSign. For any queries regarding this email, please contact the sender " + sender.email + - " directly. If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.

" + " directly. If you think this email is inappropriate or spam, you may file a complaint with OpenSign here

" }; sendMail = await axios.post(url, params, { headers: headers }); } catch (error) { diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index a3990fe61..7469e6630 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={( @@ -377,6 +381,7 @@ function RenderPdf({ onClick={() => { setIsSignPad(true); setSignKey(pos.key); + setIsStamp(false); }} > @@ -448,15 +453,11 @@ function RenderPdf({ style={{ cursor: "all-scroll", borderColor: themeColor(), - background: data.blockColor + background: data.blockColor, + 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 @@ -481,14 +482,16 @@ function RenderPdf({ onResizeStart={() => { setIsResize(true); }} - onResizeStop={( + onResizeStop={() => { + setIsResize && setIsResize(false); + }} + onResize={( e, direction, ref, delta, position ) => { - e.stopPropagation(); handleImageResize( ref, pos.key, @@ -499,37 +502,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"} +
); @@ -568,7 +601,8 @@ function RenderPdf({ key={pos.key} style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + zIndex: "1" }} size={{ width: pos.Width ? pos.Width : 151, @@ -771,7 +805,8 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + zIndex: "1" }} className="placeholderBlock" size={{ @@ -794,6 +829,7 @@ function RenderPdf({ onClick={() => { setIsSignPad(true); setSignKey(pos.key); + setIsStamp(false); }} >
@@ -852,6 +888,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, @@ -867,15 +919,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 @@ -900,7 +948,10 @@ function RenderPdf({ onResizeStart={() => { setIsResize(true); }} - onResizeStop={( + onResizeStop={() => { + setIsResize && setIsResize(false); + }} + onResize={( e, direction, ref, @@ -917,8 +968,7 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, - false, - setIsResize + false ); }} > @@ -986,7 +1036,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 8d1eb8a54..564938f7f 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -21,7 +21,8 @@ import { pdfNewWidthFun, contractDocument, contractUsers, - getHostUrl + getHostUrl, + addZIndex } from "../utils/Utils"; import RenderPdf from "./component/renderPdf"; import ModalComponent from "./component/modalComponent"; @@ -66,6 +67,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 +265,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); @@ -274,6 +278,7 @@ function PlaceHolderSign() { let xyPos = {}; if (item === "onclick") { const dropObj = { + //onclick put placeholder center on pdf xPosition: window.innerWidth / 2 - 100, yPosition: window.innerHeight / 2 - 60, isStamp: monitor, @@ -281,7 +286,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 = { @@ -310,9 +316,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, @@ -355,8 +361,15 @@ function PlaceHolderSign() { objectId: signerObjId } }; - - signerPos.splice(colorIndex, 1, placeHolderPos); + // signerPos.splice(colorIndex, 1, placeHolderPos); + const newArry = [placeHolderPos]; + const newArray = [ + ...signerPos.slice(0, colorIndex), + ...newArry, + ...signerPos.slice(colorIndex + 1) + ]; + + setSignerPos(newArray); } else { const newSignPoss = getPlaceHolder.concat(xyPosArr[0]); @@ -371,7 +384,15 @@ function PlaceHolderSign() { } }; - signerPos.splice(colorIndex, 1, placeHolderPos); + // signerPos.splice(colorIndex, 1, placeHolderPos); + const newArry = [placeHolderPos]; + const newArray = [ + ...signerPos.slice(0, colorIndex), + ...newArry, + ...signerPos.slice(colorIndex + 1) + ]; + + setSignerPos(newArray); } } else { let placeHolderPos = { @@ -388,6 +409,7 @@ function PlaceHolderSign() { setSignerPos((prev) => [...prev, placeHolderPos]); } }; + //function for get pdf page details const pageDetails = async (pdf) => { const load = { @@ -400,15 +422,17 @@ function PlaceHolderSign() { setPdfOriginalWidth(pageWidth); }); }; + //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 const handleStop = (event, dragElement, signerId, key) => { if (!isResize) { + const dataNewPlace = addZIndex(signerPos, key, setZIndex); + signerPos.splice(0, signerPos.length, ...dataNewPlace); const containerRect = document .getElementById("container") .getBoundingClientRect(); @@ -610,7 +634,7 @@ function PlaceHolderSign() { const hostUrl = window.location.origin + "/loadmf/signmicroapp"; let signPdf = `${hostUrl}/login/${signersdata.objectId}/${signerMail[i].Email}/${objectId}/${serverParams}`; - + const openSignUrl = "https://www.opensignlabs.com/"; const themeBGcolor = themeColor(); let params = { recipient: signerMail[i].Email, @@ -632,9 +656,11 @@ function PlaceHolderSign() { localExpireDate + "

This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " + + ">

This is an automated email from OpenSign. For any queries regarding this email, please contact the sender " + sender + - " directly.If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.

" + " directly.If you think this email is inappropriate or spam, you may file a complaint with OpenSign here.

" }; sendMail = await axios.post(url, params, { headers: headers }); } catch (error) { @@ -963,6 +989,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..b4aed0610 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 { @@ -543,6 +542,7 @@ option { overflow-y: scroll; } + .SelectTrigger:hover { border: none; outline: none; @@ -648,12 +648,20 @@ option { } +.dropDownStyle { + width: auto; +} + @media screen and (max-width:766px) { .showPages { display: none; } + .dropdown-menu { + min-width: 0rem !important; + } + .signatureContainer { display: flex; flex-direction: column; @@ -680,8 +688,7 @@ option { #navbar { overflow: hidden; - - z-index: 10; + z-index: 49; } /* Navbar links */ @@ -717,7 +724,7 @@ option { .stickyfooter { position: fixed; - z-index: 32 !important; + z-index: 99 !important; bottom: 0px; right: 0rem; } 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