diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index c3b3c492a..6cda177de 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -21,8 +21,9 @@ import { embedDocId, pdfNewWidthFun, signPdfFun, - calculateImgAspectRatio, - onImageSelect + onImageSelect, + onSaveSign, + onSaveImage } from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -482,181 +483,99 @@ function PdfRequestFiles() { } }; //function for upload stamp image - const onSaveImage = () => { + const saveImage = () => { + //get current signers placeholder position data const currentSigner = signerPos.filter( (data) => data.signerObjId === signerObjectId ); - const i = currentSigner[0].placeHolder.findIndex((object) => { + //get current pagenumber placeholder index + const getIndex = currentSigner[0].placeHolder.findIndex((object) => { return object.pageNumber === pageNumber; }); - const updateFilter = currentSigner[0].placeHolder[i].pos.filter( - (data) => - data.key === signKey && data.Width && data.Height && data.SignUrl + //get current signer placeholder position data + const placeholderPosition = currentSigner[0].placeHolder; + //function of save image and get updated position with image url + const getUpdatePosition = onSaveImage( + placeholderPosition, + getIndex, + signKey, + imgWH, + image ); - let getIMGWH = calculateImgAspectRatio(imgWH); - if (updateFilter.length > 0) { - const getXYdata = currentSigner[0].placeHolder[i].pos; - const getPosData = getXYdata; - const addSign = getPosData.map((url, ind) => { - if (url.key === signKey) { - return { - ...url, - Width: getIMGWH.newWidth, - Height: getIMGWH.newHeight, - SignUrl: image.src, - ImageType: image.imgType - }; - } - return url; - }); - - const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => { - if (ind === i) { - return { ...obj, pos: addSign }; - } - return obj; - }); - const getPlaceData = currentSigner[0].placeHolder; - getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl); - - const indexofSigner = signerPos.findIndex((object) => { - return object.signerObjId === signerObjectId; - }); - 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; - - const getPosData = getXYdata; - - const addSign = getPosData.map((url, ind) => { - if (url.key === signKey) { - return { - ...url, - Width: getIMGWH.newWidth, - Height: getIMGWH.newHeight, - SignUrl: image.src, - ImageType: image.imgType - }; - } - return url; - }); - - const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => { - if (ind === i) { - return { ...obj, pos: addSign }; - } - return obj; - }); - - const getPlaceData = currentSigner[0].placeHolder; - getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl); - - const indexofSigner = signerPos.findIndex((object) => { - return object.signerObjId === signerObjectId; - }); - 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 - }); - } + //replace updated placeholder position with old data + placeholderPosition.splice( + 0, + placeholderPosition.length, + ...getUpdatePosition + ); + //get current signers placeholder position data index number in array + const indexofSigner = signerPos.findIndex((object) => { + return object.signerObjId === signerObjectId; + }); + //update current signers data with new placeholder position array data + 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 + }); }; //function for save button to save signature or image url - const onSaveSign = (isDefaultSign) => { + const saveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; - const isSign = true; - let getIMGWH; + let imgWH = { width: "", height: "" }; setIsSignPad(false); setIsImageSelect(false); setImage(); + + //get current signers placeholder position data + const currentSigner = signerPos.filter( + (data) => data.signerObjId === signerObjectId + ); + //get current pagenumber placeholder index + const getIndex = currentSigner[0].placeHolder.findIndex((object) => { + return object.pageNumber === pageNumber; + }); + + //set default signature image width and height if (isDefaultSign) { const img = new Image(); img.src = defaultSignImg; if (img.complete) { - let imgWH = { + imgWH = { width: img.width, height: img.height }; - getIMGWH = calculateImgAspectRatio(imgWH); } } - const currentSigner = signerPos.filter( - (data) => data.signerObjId === signerObjectId + //get current signer placeholder position data + const placeholderPosition = currentSigner[0].placeHolder; + //function of save signature image and get updated position with signature image url + const getUpdatePosition = onSaveSign( + placeholderPosition, + getIndex, + signKey, + signatureImg, + imgWH, + isDefaultSign ); - const i = currentSigner[0].placeHolder.findIndex((object) => { - return object.pageNumber === pageNumber; + const updateSignerData = currentSigner.map((obj, ind) => { + if (obj.signerObjId === signerObjectId) { + return { ...obj, placeHolder: getUpdatePosition }; + } + return obj; }); - let updateFilter; - - updateFilter = currentSigner[0].placeHolder[i].pos.filter( - (data) => data.key === signKey && data.SignUrl + const index = signerPos.findIndex( + (data) => data.signerObjId === signerObjectId ); - - const getXYdata = currentSigner[0].placeHolder[i].pos; - const getPosData = getXYdata; - const posWidth = isDefaultSign - ? getIMGWH.newWidth - : isSign && getPosData[0].ImageType - ? 150 - : getPosData[0].Width - ? getPosData[0].Width - : 150; - const posHidth = isDefaultSign - ? getIMGWH.newHeight - : isSign && getPosData[0].ImageType - ? 60 - : getPosData[0].Height - ? getPosData[0].Height - : 60; - if (updateFilter.length > 0) { - updateFilter[0].SignUrl = signatureImg; - updateFilter[0].Width = posWidth; - updateFilter[0].Height = posHidth; - } else { - const addSign = getPosData.map((url, ind) => { - if (url.key === signKey) { - return { - ...url, - SignUrl: signatureImg, - Width: posWidth, - Height: posHidth, - ImageType: "sign" - }; - } - return url; - }); - - const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => { - if (obj.pageNumber === pageNumber) { - return { ...obj, pos: addSign }; - } - return obj; - }); - - const newUpdatePos = currentSigner.map((obj, ind) => { - if (obj.signerObjId === signerObjectId) { - return { ...obj, placeHolder: newUpdateUrl }; - } - return obj; - }); - - const index = signerPos.findIndex( - (data) => data.signerObjId === signerObjectId - ); - 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 - }); - } + setSignerPos((prevState) => { + const newState = [...prevState]; + newState.splice(index, 1, ...updateSignerData); + return newState; + }); }; const checkSignerBackColor = (obj) => { @@ -782,6 +701,7 @@ function PdfRequestFiles() { allPages={allPages} setAllPages={setAllPages} setPageNumber={setPageNumber} + pageNumber={pageNumber} /> {/* pdf render view */} @@ -831,8 +751,8 @@ function PdfRequestFiles() { onImageChange={onImageChange} setSignature={setSignature} image={image} - onSaveImage={onSaveImage} - onSaveSign={onSaveSign} + onSaveImage={saveImage} + onSaveSign={saveSign} defaultSign={defaultSignImg} /> {/* pdf header which contain funish back button */} diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index e1fad20b6..c2a363590 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -23,7 +23,9 @@ import { multiSignEmbed, pdfNewWidthFun, addDefaultSignatureImg, - onImageSelect + onImageSelect, + placeholderHeight, + placeholderWidth } from "../utils/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; @@ -36,6 +38,7 @@ import RenderPdf from "./component/renderPdf"; import { contractUsers, contactBook, urlValidator } from "../utils/Utils"; import { modalAlign } from "../utils/Utils"; import AlertComponent from "./component/alertComponent"; +import PlaceholderCopy from "./component/PlaceholderCopy"; //For signYourself inProgress section signer can add sign and complete doc sign. function SignYourSelf() { @@ -79,6 +82,7 @@ function SignYourSelf() { const [noData, setNoData] = useState(false); const [contractName, setContractName] = useState(""); const [containerWH, setContainerWH] = useState({}); + const [isPageCopy, setIsPageCopy] = useState(false); const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({ status: false }); @@ -102,7 +106,6 @@ function SignYourSelf() { const [{ isDragSign }, dragSignature] = useDrag({ type: "BOX", - item: { type: "BOX", id: 1, @@ -115,7 +118,6 @@ function SignYourSelf() { const [{ isDragStamp }, dragStamp] = useDrag({ type: "BOX", - item: { type: "BOX", id: 2, @@ -140,7 +142,6 @@ function SignYourSelf() { const [{ isDragStampSS }, dragStampSS] = useDrag({ type: "BOX", - item: { type: "BOX", id: 4, @@ -329,7 +330,6 @@ function SignYourSelf() { isDrag: false, key: key, isStamp: monitor, - yBottom: window.innerHeight / 2 - 60 }; @@ -516,22 +516,31 @@ function SignYourSelf() { const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { + const xPos = () => { + const resizePos = xyPosData.xPosition; + if (isMobile) { + return resizePos * scale; + } else { + return resizePos; + } + }; const height = xyPosData.Height ? xyPosData.Height : 60; + const resizePos = xyPosData.yBottom; const bottomY = xyPosData.isDrag - ? xyPosData.yBottom * scale - height * scale + ? resizePos * scale - height * scale : xyPosData.firstYPos - ? xyPosData.yBottom * scale - height * scale + xyPosData.firstYPos - : xyPosData.yBottom * scale - height * scale; + ? resizePos * scale - height * scale + xyPosData.firstYPos + : resizePos * scale - height * scale; singleSign = { pdfFile: pdfBase64Url, docId: documentId, sign: { Base64: base64Url, - Left: isMobile ? xyPosData.xPosition * scale : xyPosData.xPosition, + Left: xPos(), Bottom: bottomY, - Width: xyPosData.Width ? xyPosData.Width * scale : 150 * scale, - Height: height * scale, + Width: placeholderWidth(xyPosData, scale), + Height: placeholderHeight(xyPosData, scale), Page: pageNo } }; @@ -650,7 +659,7 @@ function SignYourSelf() { //function for save button to save signature or image url const saveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; - const signFlag = true; + let imgWH = { width: "", height: "" }; setIsSignPad(false); setIsImageSelect(false); @@ -672,8 +681,7 @@ function SignYourSelf() { signKey, signatureImg, imgWH, - isDefaultSign, - signFlag + isDefaultSign ); setXyPostion(getUpdatePosition); @@ -826,6 +834,7 @@ function SignYourSelf() { setAllPages={setAllPages} setPageNumber={setPageNumber} setSignBtnPosition={setSignBtnPosition} + pageNumber={pageNumber} /> {/* pdf render view */} @@ -881,6 +890,15 @@ function SignYourSelf() { )} + {/* this is modal of signature pad */} )} diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 27c23f5df..5acb59798 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -3,7 +3,6 @@ import RenderAllPdfPage from "./component/renderAllPdfPage"; import { useParams, useNavigate } from "react-router-dom"; import axios from "axios"; import "../css/./signature.css"; -import Modal from "react-bootstrap/Modal"; import sign from "../assests/sign3.png"; import stamp from "../assests/stamp2.png"; import { themeColor } from "../utils/ThemeColor/backColor"; @@ -32,6 +31,8 @@ import LinkUserModal from "./component/LinkUserModal"; import EditTemplate from "./component/EditTemplate"; import ModalUi from "../premitives/ModalUi"; import AddRoleModal from "./component/AddRoleModal"; +import PlaceholderCopy from "./component/PlaceholderCopy"; + const TemplatePlaceholder = () => { const navigate = useNavigate(); const { templateId } = useParams(); @@ -155,6 +156,8 @@ const TemplatePlaceholder = () => { const [isAddUser, setIsAddUser] = useState({}); const [isCreateDoc, setIsCreateDoc] = useState(false); const [isEditTemplate, setIsEditTemplate] = useState(false); + const [isPageCopy, setIsPageCopy] = useState(false); + const [signKey, setSignKey] = useState(); const senderUser = localStorage.getItem( `Parse/${localStorage.getItem("parseAppId")}/currentUser` @@ -1010,7 +1013,8 @@ const TemplatePlaceholder = () => { setAllPages={setAllPages} setPageNumber={setPageNumber} setSignBtnPosition={setSignBtnPosition} - /> + pageNumber={pageNumber} + /> {/* pdf render view */}
{ )}
+ {/* pdf header which contain funish back button */}
{ handleLinkUser={handleLinkUser} setUniqueId={setUniqueId} signersdata={signersdata} + setIsPageCopy={setIsPageCopy} + setSignKey={setSignKey} + setSignerObjId={setSignerObjId} /> )} diff --git a/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js b/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js new file mode 100644 index 000000000..c7698e067 --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js @@ -0,0 +1,231 @@ +import React, { useState } from "react"; +import Modal from "react-bootstrap/Modal"; +import ModalHeader from "react-bootstrap/esm/ModalHeader"; +import { themeColor } from "../../utils/ThemeColor/backColor"; + +function PlaceholderCopy(props) { + const copyType = ["All pages", "All pages but last", "All pages but first"]; + const [selectCopyType, setSelectCopyType] = useState(""); + + //get RandomKey Id + const randomKey = () => { + const randomId = Math.floor(1000 + Math.random() * 9000); + return randomId; + }; + + //function for get copy placeholder position + const getCopyPlaceholderPosition = ( + type, + rest, + newPageNumber, + existPlaceholderPosition + ) => { + let obj; + + const filterPosition = + existPlaceholderPosition && + existPlaceholderPosition.filter( + (data) => data.xPosition !== rest.xPosition + ); + //copy all page placeholder at requested position except first page + if (newPageNumber === 1 && type === "first") { + if (filterPosition && filterPosition.length > 0) { + return (obj = { + pageNumber: newPageNumber, + pos: [...filterPosition] + }); + } + } + //copy all page placeholder at requested position except last page + else if (newPageNumber === props.allPages && type === "last") { + if (existPlaceholderPosition) { + return (obj = { + pageNumber: newPageNumber, + pos: [...filterPosition] + }); + } + } + //copy all page placeholder at requested position with existing placeholder position + else if (existPlaceholderPosition) { + return (obj = { + pageNumber: newPageNumber, + pos: [...filterPosition, rest] + }); + } + //copy all page placeholder at requested position + else { + return (obj = { + pageNumber: newPageNumber, + pos: [rest] + }); + } + }; + + //function for copy placeholder as per select copy type + const copyPlaceholder = (type) => { + let newPlaceholderPosition = []; + let newPageNumber = 1; + const signerPosition = props.xyPostion; + + //handle placeholder array and copy for multiple signers placeholder at requested location + if (props.signerObjId) { + //get current signers data + const filterSignerPosition = signerPosition.filter( + (data) => data.signerObjId === props.signerObjId + ); + //get current pagenumber's all placeholder position data + const placeholderPosition = filterSignerPosition[0].placeHolder.filter( + (data) => data.pageNumber === props.pageNumber + ); + //get current placeholder position data which user want to copy + const currentPlaceholder = placeholderPosition[0].pos.filter( + (position) => position.key === props.signKey + ); + const { key, ...rest } = currentPlaceholder[0]; + for (let i = 0; i < props.allPages; i++) { + const newId = randomKey(); + rest.key = newId; + //get exist placeholder position for particular page + const existPlaceholder = filterSignerPosition[0].placeHolder.filter( + (data) => data.pageNumber == newPageNumber + ); + const existPlaceholderPosition = + existPlaceholder[0] && existPlaceholder[0].pos; + + //function for get copy to requested location of placeholder position + const getPlaceholderObj = getCopyPlaceholderPosition( + type, + rest, + newPageNumber, + existPlaceholderPosition + ); + if (getPlaceholderObj) { + newPlaceholderPosition.push(getPlaceholderObj); + } + newPageNumber++; + } + + const updatedSignerPlaceholder = signerPosition.map( + (signersData, ind) => { + if (signersData.signerObjId === props.signerObjId) { + return { + ...signersData, + placeHolder: newPlaceholderPosition + }; + } + return signersData; + } + ); + + const signersData = signerPosition; + signersData.splice(0, signerPosition.length, ...updatedSignerPlaceholder); + props.setXyPostion(signersData); + } + //handle signyourself array and copy for single signers placeholder at requested location + else { + const xyPostion = props.xyPostion; + + const placeholderPosition = xyPostion.filter( + (data) => data.pageNumber === props.pageNumber + ); + //get current placeholder position data which user want to copy + const currentPlaceholder = placeholderPosition[0].pos.filter( + (pos) => pos.key === props.signKey + ); + const { key, ...rest } = currentPlaceholder[0]; + for (let i = 0; i < props.allPages; i++) { + //get exist placeholder position for particular page + const existPlaceholder = xyPostion.filter( + (data) => data.pageNumber == newPageNumber + ); + const existPlaceholderPosition = + existPlaceholder[0] && existPlaceholder[0].pos; + + const newId = randomKey(); + rest.key = newId; + //function for get copy to requested location of placeholder position + const getPlaceholderObj = getCopyPlaceholderPosition( + type, + rest, + newPageNumber, + existPlaceholderPosition + ); + if (getPlaceholderObj) { + newPlaceholderPosition.push(getPlaceholderObj); + } + + newPageNumber++; + } + props.setXyPostion(newPlaceholderPosition); + } + }; + + //function for getting selected type placeholder copy + const handleApplyCopy = () => { + if (selectCopyType === "All pages") { + copyPlaceholder("all"); + } else if (selectCopyType === "All pages but last") { + copyPlaceholder("last"); + } else if (selectCopyType === "All pages but first") { + copyPlaceholder("first"); + } + }; + + return ( + + + Place All pages + + + + {copyType.map((data, key) => { + return ( +
+ +
+ ); + })} + + + + + + + + + ); +} + +export default PlaceholderCopy; diff --git a/microfrontends/SignDocuments/src/Component/component/borderResize.js b/microfrontends/SignDocuments/src/Component/component/borderResize.js index 1596d09bb..505c68d30 100644 --- a/microfrontends/SignDocuments/src/Component/component/borderResize.js +++ b/microfrontends/SignDocuments/src/Component/component/borderResize.js @@ -1,12 +1,12 @@ import React from "react"; -function BorderResize() { +function BorderResize({ right, top }) { return (
+ ); +} + +export default PlaceholderBorder; diff --git a/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js b/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js index 1872c0a4b..85d424200 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js +++ b/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js @@ -9,7 +9,8 @@ function RenderAllPdfPage({ allPages, setAllPages, setPageNumber, - setSignBtnPosition + setSignBtnPosition, + pageNumber }) { pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; @@ -58,7 +59,10 @@ function RenderAllPdfPage({ key={index} style={{ width: "100px", - border: "2px solid #878787", + border: + pageNumber - 1 === index + ? "2px solid red" + : "2px solid #878787", // padding: "5px", margin: "10px", diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index a851303dc..e707c632c 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -10,6 +10,7 @@ import { handleSignYourselfImageResize } from "../../utils/Utils"; import EmailToast from "./emailToast"; +import PlaceholderBorder from "./placeholderBorder"; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; @@ -51,7 +52,9 @@ function RenderPdf({ setZIndex, handleLinkUser, setUniqueId, - signersdata + signersdata, + setIsPageCopy, + setSignerObjId }) { const isMobile = window.innerWidth < 767; const newWidth = containerWH.width; @@ -61,65 +64,118 @@ function RenderPdf({ // handle signature block width and height according to screen const posWidth = (pos) => { + const defaultWidth = 150; + const posWidth = pos.Width ? pos.Width : defaultWidth; let width; if (isMobile) { if (!pos.isMobile) { if (pos.IsResize) { - width = pos.Width ? pos.Width : 150; + width = posWidth ? posWidth : defaultWidth; return width; } else { - width = (pos.Width || 150) / scale; + width = (posWidth || defaultWidth) / scale; return width; } } else { - width = pos.Width ? pos.Width : 150; + width = posWidth ? posWidth : defaultWidth; return width; } } else { if (pos.isMobile) { if (pos.IsResize) { - width = pos.Width ? pos.Width : 150; + width = posWidth ? posWidth : defaultWidth; return width; } else { - width = (pos.Width || 150) * pos.scale; + width = (posWidth || defaultWidth) * pos.scale; return width; } } else { - width = pos.Width ? pos.Width : 150; + width = posWidth ? posWidth : defaultWidth; return width; } } }; const posHeight = (pos) => { let height; + const posHeight = pos.Height; + const defaultHeight = 60; if (isMobile) { if (!pos.isMobile) { if (pos.IsResize) { - height = pos.Height ? pos.Height : 60; + height = posHeight ? posHeight : defaultHeight; return height; } else { - height = (pos.Height || 60) / scale; + height = (posHeight || defaultHeight) / scale; return height; } } else { - height = pos.Height ? pos.Height : 60; + height = posHeight ? posHeight : defaultHeight; return height; } } else { if (pos.isMobile) { if (pos.IsResize) { - height = pos.Height ? pos.Height : 60; + height = posHeight ? posHeight : defaultHeight; return height; } else { - height = (pos.Height || 60) * pos.scale; + height = (posHeight || defaultHeight) * pos.scale; return height; } } else { - height = pos.Height ? pos.Height : 60; + height = posHeight ? posHeight : defaultHeight; return height; } } }; + + const xPos = (pos) => { + const resizePos = pos.xPosition; + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (!pos.isMobile) { + return resizePos / scale; + } + //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale + else { + return resizePos * (pos.scale / scale); + } + } else { + //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + + if (pos.isMobile) { + return pos.scale && resizePos * pos.scale; + } + //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) + else { + return resizePos; + } + } + }; + const yPos = (pos) => { + const resizePos = pos.yPosition; + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (!pos.isMobile) { + return resizePos / scale; + } + //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale + else { + return resizePos * (pos.scale / scale); + } + } else { + //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + + if (pos.isMobile) { + return pos.scale && resizePos * pos.scale; + } + //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) + else { + return resizePos; + } + } + }; //function for render placeholder block over pdf document const checkSignedSignes = (data) => { const checkSign = signedSigners.filter( @@ -128,52 +184,7 @@ function RenderPdf({ if (data.signerObjId === signerObjectId) { setCurrentSigner(true); } - const xPos = (pos) => { - //checking both condition mobile and desktop view - if (isMobile) { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (!pos.isMobile) { - return pos.xPosition / scale; - } - //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale - else { - return pos.xPosition * (pos.scale / scale); - } - } else { - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - if (pos.isMobile) { - return pos.scale && pos.xPosition * pos.scale; - } - //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) - else { - return pos.xPosition; - } - } - }; - const yPos = (pos) => { - //checking both condition mobile and desktop view - if (isMobile) { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (!pos.isMobile) { - return pos.yPosition / scale; - } - //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale - else { - return pos.yPosition * (pos.scale / scale); - } - } else { - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - - if (pos.isMobile) { - return pos.scale && pos.yPosition * pos.scale; - } - //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) - else { - return pos.yPosition; - } - } - }; return ( checkSign.length === 0 && data.placeHolder.map((placeData, key) => { @@ -203,11 +214,13 @@ function RenderPdf({ data.signerObjId === signerObjectId ? "pointer" : "not-allowed", - borderColor: themeColor(), background: data.blockColor, + borderColor: themeColor(), + borderStyle: "dashed", + borderWidth: "0.1px", zIndex: "1" }} - className="placeholderBlock" + className="signYourselfBlock" size={{ width: posWidth(pos), height: posHeight(pos) @@ -291,16 +304,63 @@ function RenderPdf({ ); }; - //handled x-position in mobile view saved from big screen or small screen - const xPos = (pos) => { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (!pos.isMobile) { - return pos.xPosition / scale; - } else { - return pos.xPosition * (pos.scale / scale); - } - }; + const PlaceholderDesign = ({ pos, data }) => { + return ( +
+ { + console.log("hello console"); + e.stopPropagation(); + setIsPageCopy(true); + setSignKey(pos.key); + }} + style={{ + color: "#188ae2" + }} + > + { + e.stopPropagation(); + if (data) { + handleDeleteSign(pos.key, data.signerObjId); + } else { + handleDeleteSign(pos.key); + setIsStamp(false); + } + }} + style={{ + color: "#188ae2" + }} + > + {pos.SignUrl ? ( +
+ signimg +
+ ) : ( +
+ {pos.isStamp ? "stamp" : "signature"} +
+ )} +
+ ); + }; const handleUserName = (signerId, Role) => { if (signerId) { const checkSign = signersdata.filter( @@ -357,9 +417,14 @@ function RenderPdf({ style={{ cursor: "all-scroll", borderColor: themeColor(), - zIndex: "1" + borderStyle: "dashed", + borderWidth: "0.1px", + zIndex: "1", + background: data.blockColor + ? data.blockColor + : "#daebe0" }} - className="placeholderBlock" + className="signYourselfBlock" onResize={( e, direction, @@ -390,9 +455,7 @@ function RenderPdf({ //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale default={{ x: xPos(pos), - y: !pos.isMobile - ? pos.yPosition / scale - : pos.yPosition * (pos.scale / scale) + y: yPos(pos) }} onClick={() => { setIsSignPad(true); @@ -469,23 +532,18 @@ function RenderPdf({ topLeft: false }} key={pos.key} - bounds="parent" style={{ cursor: "all-scroll", - borderColor: themeColor(), background: data.blockColor, + borderColor: data.bac, zIndex: pos.zIndex }} - className="placeholderBlock" + className="signYourselfBlock" onDrag={() => handleTabDrag(pos.key)} size={{ - width: posWidth(pos), - height: posHeight(pos) + width: pos.Width ? pos.Width : 150, + height: pos.Height ? pos.Height : 60 }} - // size={{ - // width: pos.Width ? pos.Width : 150, - // height: pos.Height ? pos.Height : 60 - // }} lockAspectRatio={ pos.Width ? pos.Width / pos.Height @@ -502,16 +560,9 @@ function RenderPdf({ // data.signerObjId, } default={{ - x: xPos(pos), - y: !pos.isMobile - ? pos.yPosition / scale - : pos.yPosition * - (pos.scale / scale) + x: pos.xPosition, + y: pos.yPosition }} - // default={{ - // x: pos.xPosition, - // y: pos.yPosition - // }} onResizeStart={() => { setIsResize(true); }} @@ -525,7 +576,6 @@ function RenderPdf({ delta, position ) => { - e.stopPropagation(); handleImageResize( ref, pos.key, @@ -540,6 +590,8 @@ function RenderPdf({ ); }} > + +
{ const dataNewPlace = addZIndex( @@ -557,20 +609,26 @@ function RenderPdf({ return newState; }); }} - style={{ - cursor: "all-scroll", - borderColor: themeColor(), - background: data.blockColor, - zIndex: pos.zIndex, - height: pos.Height - ? pos.Height - : 60, - width: pos.Width ? pos.Width : 150 - }} > - - -
{ + e.stopPropagation(); + setIsPageCopy(true); + setSignKey(pos.key); + setSignerObjId(data.signerObjId); + }} + onClick={(e) => { + e.stopPropagation(); + setIsPageCopy(true); + setSignKey(pos.key); + }} + style={{ + color: "#188ae2" + }} + > + { e.stopPropagation(); handleDeleteSign( @@ -580,12 +638,10 @@ function RenderPdf({ // data.signerObjId }} style={{ - background: themeColor() + color: "#188ae2" }} - className="placeholdCloseBtn" - > - x -
+ > +
{ + console.log("go here"); + if (!isDragging && isMobile) { + setTimeout(() => { + e.stopPropagation(); + setIsSignPad(true); + setSignKey(pos.key); + setIsStamp(pos.isStamp); + }, 500); + } + }} > - {" "} + +
{ - if (!isDragging) { + console.log("go here"); + if (!isDragging && isMobile) { setTimeout(() => { e.stopPropagation(); setIsSignPad(true); @@ -685,41 +755,54 @@ function RenderPdf({ }, 500); } }} - style={{ - height: "100%" - }} > - -
{ + { e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); + setIsPageCopy(true); + setSignKey(pos.key); }} style={{ - background: themeColor() + color: "#188ae2" }} - className="placeholdCloseBtn" - > - x -
+ > + { + e.stopPropagation(); + if (data) { + handleDeleteSign( + pos.key, + data.signerObjId + ); + } else { + handleDeleteSign(pos.key); + setIsStamp(false); + } + }} + style={{ + color: "#188ae2" + }} + > + {pos.SignUrl ? ( - signimg +
+ signimg +
) : (
@@ -849,9 +932,14 @@ function RenderPdf({ style={{ cursor: "all-scroll", borderColor: themeColor(), - zIndex: "1" + borderStyle: "dashed", + borderWidth: "0.1px", + zIndex: "1", + background: data.blockColor + ? data.blockColor + : "#daebe0" }} - className="placeholderBlock" + className="signYourselfBlock" size={{ width: posWidth(pos), height: posHeight(pos) @@ -859,15 +947,9 @@ function RenderPdf({ lockAspectRatio={ pos.Width ? pos.Width / pos.Height : 2.5 } - //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale - default={{ - x: pos.isMobile - ? pos.scale && pos.xPosition * pos.scale - : pos.xPosition, - y: pos.isMobile - ? pos.scale && pos.yPosition * pos.scale - : pos.yPosition + x: xPos(pos), + y: yPos(pos) }} onClick={() => { setIsSignPad(true); @@ -965,13 +1047,11 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", - // background: data.blockColor, - borderColor: themeColor(), + background: data.blockColor, + zIndex: pos.zIndex - ? pos.zIndex - : "1" }} - className="signWidgetblock" + className="signYourselfBlock" onDrag={() => handleTabDrag(pos.key)} size={{ width: pos.Width ? pos.Width : 150, @@ -984,13 +1064,13 @@ function RenderPdf({ } onDragStop={ (event, dragElement) => - handleStop( - event, - dragElement, - data.Id, - pos.key - ) - // data.signerObjId, + handleStop( + event, + dragElement, + data.Id, + pos.key + ) + // data.signerObjId, } default={{ x: pos.xPosition, @@ -1023,40 +1103,30 @@ function RenderPdf({ ); }} > - -
- + +
+ { e.stopPropagation(); handleLinkUser(data.Id); setUniqueId(data.Id); }} style={{ - color: "#188ae2", - right: 45 + color: "#188ae2" }} > { - // e.stopPropagation(); - // setIsPageCopy(true); - // setSignKey(pos.key); - // }} + onClick={(e) => { + e.stopPropagation(); + setIsPageCopy(true); + setSignKey(pos.key); + setSignerObjId( + data.signerObjId + ); + }} style={{ color: "#188ae2" }} @@ -1079,7 +1149,7 @@ function RenderPdf({
@@ -1125,12 +1195,13 @@ function RenderPdf({ topLeft: false }} bounds="parent" + className="signYourselfBlock" style={{ - borderColor: themeColor(), + border: "1px solid red", cursor: "all-scroll", - zIndex: "1" + zIndex: "1", + background: "#daebe0" }} - className="placeholderBlock" onDrag={() => handleTabDrag(pos.key)} size={{ width: pos.Width ? pos.Width : 150, @@ -1168,46 +1239,9 @@ function RenderPdf({ } }} > - - - { - e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); - }} - style={{ - background: themeColor() - }} - className="placeholdCloseBtn" - > - x - - - {pos.SignUrl ? ( -
- signimg -
- ) : ( -
- {pos.isStamp ? "stamp" : "signature"} -
- )} + + + ) ); diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index c3ce69dfb..af3184231 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -28,6 +28,7 @@ import { import RenderPdf from "./component/renderPdf"; import ModalComponent from "./component/modalComponent"; import { useNavigate } from "react-router-dom"; +import PlaceholderCopy from "./component/PlaceholderCopy"; import LinkUserModal from "./component/LinkUserModal"; import Title from "./component/Title"; @@ -70,10 +71,12 @@ function PlaceHolderSign() { const [selectedEmail, setSelectedEmail] = useState(false); const [isResize, setIsResize] = useState(false); const [zIndex, setZIndex] = useState(1); + const [signKey, setSignKey] = useState(); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" }); + const [isPageCopy, setIsPageCopy] = useState(false); const [uniqueId, setUniqueId] = useState(""); const [roleName, setRoleName] = useState(""); const [isAddUser, setIsAddUser] = useState({}); @@ -102,7 +105,6 @@ function PlaceHolderSign() { }); const [{ isDragSign }, dragSignature] = useDrag({ type: "BOX", - item: { type: "BOX", id: 1, @@ -114,7 +116,6 @@ function PlaceHolderSign() { }); const [{ isDragStamp }, dragStamp] = useDrag({ type: "BOX", - item: { type: "BOX", id: 2, @@ -127,7 +128,6 @@ function PlaceHolderSign() { const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({ type: "BOX", - item: { type: "BOX", id: 3, @@ -140,7 +140,6 @@ function PlaceHolderSign() { const [{ isDragStampSS }, dragStampSS] = useDrag({ type: "BOX", - item: { type: "BOX", id: 4, @@ -975,6 +974,7 @@ function PlaceHolderSign() { setAllPages={setAllPages} setPageNumber={setPageNumber} setSignBtnPosition={setSignBtnPosition} + pageNumber={pageNumber} /> {/* pdf render view */} @@ -1114,6 +1114,16 @@ function PlaceHolderSign() { type={"signersAlert"} setIsShowEmail={setIsShowEmail} /> + {/* pdf header which contain funish back button */}
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 6421e8a8b..b039b0975 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -794,8 +794,9 @@ function EmbedPdfImage() { allPages={allPages} setAllPages={setAllPages} setPageNumber={setPageNumber} + pageNumber={pageNumber} /> - {/*
kebjke
*/} + {/* pdf render view */}