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/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 ffac41108..85d424200 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js +++ b/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js @@ -10,6 +10,7 @@ function RenderAllPdfPage({ setAllPages, setPageNumber, setSignBtnPosition, + pageNumber }) { pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; @@ -20,75 +21,80 @@ function RenderAllPdfPage({ return (
-
-
-
- Pages -
+
+
+
+ Pages +
- -
- - + - {Array.from(new Array(allPages), (el, index) => ( -
+ {Array.from(new Array(allPages), (el, index) => ( +
{ - setPageNumber(index + 1); - if (setSignBtnPosition) { - setSignBtnPosition([]); - } - }} - > - -
- ))} - - + display: "flex", + justifyContent: "center", + alignItems: "center", + contain: "content" + }} + onClick={() => { + setPageNumber(index + 1); + if (setSignBtnPosition) { + setSignBtnPosition([]); + } + }} + > + +
+ ))} + + +
+
-
- - -
); } diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 7469e6630..324ce65a2 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`; @@ -48,7 +49,9 @@ function RenderPdf({ index, containerWH, setIsResize, - setZIndex + setZIndex, + setIsPageCopy, + setSignerObjId }) { const isMobile = window.innerWidth < 767; const newWidth = containerWH.width; @@ -58,66 +61,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( @@ -126,52 +181,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) => { @@ -201,11 +211,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) @@ -289,14 +301,62 @@ 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"} +
+ )} +
+ ); }; return ( @@ -341,9 +401,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, @@ -374,9 +439,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); @@ -449,14 +512,13 @@ 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: pos.Width ? pos.Width : 150, @@ -506,6 +568,9 @@ function RenderPdf({ ); }} > + + +
{ const dataNewPlace = addZIndex( @@ -523,20 +588,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( @@ -545,12 +616,10 @@ function RenderPdf({ ); }} 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); @@ -646,41 +729,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 +
) : (
@@ -806,9 +902,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) @@ -816,15 +917,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); @@ -919,10 +1014,10 @@ function RenderPdf({ style={{ cursor: "all-scroll", background: data.blockColor, - borderColor: themeColor(), + zIndex: pos.zIndex }} - className="placeholderBlock" + className="signYourselfBlock" onDrag={() => handleTabDrag(pos.key)} size={{ width: pos.Width ? pos.Width : 150, @@ -972,34 +1067,48 @@ function RenderPdf({ ); }} > - -
{ - e.stopPropagation(); - handleDeleteSign( - pos.key, - data.signerObjId - ); - }} - style={{ - background: themeColor() - }} - className="placeholdCloseBtn" - > - x -
-
+ +
+ { + e.stopPropagation(); + setIsPageCopy(true); + setSignKey(pos.key); + setSignerObjId( + data.signerObjId + ); + }} + style={{ + color: "#188ae2" + }} + > + { + e.stopPropagation(); + handleDeleteSign( + pos.key, + data.signerObjId + ); + }} + style={{ + color: "#188ae2" + }} + > - marginTop: "0px" - }} - > - {pos.isStamp - ? "stamp" - : "signature"} +
+ {pos.isStamp + ? "stamp" + : "signature"} +
); @@ -1034,12 +1143,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, @@ -1077,46 +1187,9 @@ function RenderPdf({ } }} > - - - { - e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); - }} - style={{ - background: themeColor() - }} - className="placeholdCloseBtn" - > - x - - - {pos.SignUrl ? ( -
- signimg -
- ) : ( -
- {pos.isStamp ? "stamp" : "signature"} -
- )} + + + ) ); @@ -1124,6 +1197,7 @@ function RenderPdf({ ); }))} + {/* this component for render pdf document is in middle of the component */} { diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 564938f7f..a7ba8dd90 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -27,6 +27,7 @@ import { import RenderPdf from "./component/renderPdf"; import ModalComponent from "./component/modalComponent"; import { useNavigate } from "react-router-dom"; +import PlaceholderCopy from "./component/PlaceholderCopy"; function PlaceHolderSign() { const navigate = useNavigate(); @@ -68,10 +69,12 @@ function PlaceHolderSign() { const [isResize, setIsResize] = useState(false); const [isAlreadyPlace, setIsAlreadyPlace] = 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 color = [ "#93a3db", "#e6c3db", @@ -96,7 +99,6 @@ function PlaceHolderSign() { }); const [{ isDragSign }, dragSignature] = useDrag({ type: "BOX", - item: { type: "BOX", id: 1, @@ -108,7 +110,6 @@ function PlaceHolderSign() { }); const [{ isDragStamp }, dragStamp] = useDrag({ type: "BOX", - item: { type: "BOX", id: 2, @@ -121,7 +122,6 @@ function PlaceHolderSign() { const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({ type: "BOX", - item: { type: "BOX", id: 3, @@ -134,7 +134,6 @@ function PlaceHolderSign() { const [{ isDragStampSS }, dragStampSS] = useDrag({ type: "BOX", - item: { type: "BOX", id: 4, @@ -814,6 +813,7 @@ function PlaceHolderSign() { setAllPages={setAllPages} setPageNumber={setPageNumber} setSignBtnPosition={setSignBtnPosition} + pageNumber={pageNumber} /> {/* pdf render view */} @@ -953,6 +953,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 */}