From fefcdf6ffc401484785a622e5f4c7854e4721f8d Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 20 Dec 2023 19:31:59 +0530 Subject: [PATCH 1/3] feat: placeholder copy all pages feature at same location and change placeholder design --- .../src/Component/PdfRequestFiles.js | 1 + .../src/Component/SignYourselfPdf.js | 42 +- .../src/Component/component/borderResize.js | 6 +- .../src/Component/component/copyAllPage.js | 211 ++++++++ .../Component/component/placeholderBorder.js | 36 ++ .../Component/component/renderAllPdfPage.js | 134 ++--- .../src/Component/component/renderPdf.js | 489 ++++++++++-------- .../src/Component/placeHolderSign.js | 21 +- .../src/Component/recipientSignPdf.js | 3 +- .../SignDocuments/src/css/signature.css | 38 +- .../SignDocuments/src/utils/Utils.js | 211 ++++---- 11 files changed, 785 insertions(+), 407 deletions(-) create mode 100644 microfrontends/SignDocuments/src/Component/component/copyAllPage.js create mode 100644 microfrontends/SignDocuments/src/Component/component/placeholderBorder.js diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index c3b3c492a..6daf4a2a5 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -782,6 +782,7 @@ function PdfRequestFiles() { allPages={allPages} setAllPages={setAllPages} setPageNumber={setPageNumber} + pageNumber={pageNumber} /> {/* pdf render view */} diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index e1fad20b6..db59dd7c7 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 CopyAllPage from "./component/copyAllPage"; //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 } }; @@ -826,6 +835,7 @@ function SignYourSelf() { setAllPages={setAllPages} setPageNumber={setPageNumber} setSignBtnPosition={setSignBtnPosition} + pageNumber={pageNumber} /> {/* pdf render view */} @@ -881,6 +891,15 @@ function SignYourSelf() { )} + {/* this is modal of signature pad */} )} 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 (
{ + const randomId = Math.floor(1000 + Math.random() * 9000); + return randomId; + }; + + const allPagesCondition = ( + isAlreadyPage, + type, + rest, + newPageNumber, + getAlreadyPos + ) => { + let obj; + + if (isAlreadyPage === 1 && type === "first") { + const filterPos = + getAlreadyPos && + getAlreadyPos.filter((data) => data.xPosition !== rest.xPosition); + if (filterPos && filterPos.length > 0) { + return (obj = { + pageNumber: newPageNumber, + pos: [...filterPos] + }); + } + } else if (newPageNumber === props.allPages && type === "last") { + const filterPos = + getAlreadyPos && + getAlreadyPos.filter((data) => data.xPosition !== rest.xPosition); + + if (getAlreadyPos) { + return (obj = { + pageNumber: newPageNumber, + pos: [...filterPos] + }); + } + } else if (getAlreadyPos) { + const filterPos = + getAlreadyPos && + getAlreadyPos.filter((data) => data.xPosition !== rest.xPosition); + + return (obj = { + pageNumber: newPageNumber, + pos: [...filterPos, rest] + }); + } else { + return (obj = { + pageNumber: newPageNumber, + pos: [rest] + }); + } + }; + const addPos = (type) => { + let newXyPos = []; + let newPageNumber = 1; + const signerPos = props.xyPostion; + + if (props.signerObjId) { + const filterSignerPos = signerPos.filter( + (data) => data.signerObjId === props.signerObjId + ); + const xyData = filterSignerPos[0].placeHolder.filter( + (data) => data.pageNumber === props.pageNumber + ); + + const posData = xyData[0].pos.filter((pos) => pos.key === props.signKey); + for (let i = 0; i < props.allPages; i++) { + const { key, ...rest } = posData[0]; + const newId = randomKey(); + rest.key = newId; + const getAlreadyPos = + filterSignerPos[0].placeHolder[i] && + filterSignerPos[0].placeHolder[i].pos; + + const isAlreadyPage = + filterSignerPos[0].placeHolder[i] && + filterSignerPos[0].placeHolder[i].pageNumber; + + const getObj = allPagesCondition( + isAlreadyPage, + type, + rest, + newPageNumber, + getAlreadyPos + ); + if (getObj) { + newXyPos.push(getObj); + } + newPageNumber++; + } + + const addSign = signerPos.map((url, ind) => { + if (url.signerObjId === props.signerObjId) { + return { + ...url, + placeHolder: newXyPos + }; + } + return url; + }); + + const newSignerData = signerPos; + newSignerData.splice(0, signerPos.length, ...addSign); + props.setXyPostion(newSignerData); + } else { + const xyPostion = props.xyPostion; + + const xyData = xyPostion.filter( + (data) => data.pageNumber === props.pageNumber + ); + const posData = xyData[0].pos.filter((pos) => pos.key === props.signKey); + + for (let i = 0; i < props.allPages; i++) { + const isAlreadyPage = xyPostion[i] && xyPostion[i].pageNumber; + const getAlreadyPos = xyPostion[i] && xyPostion[i].pos; + const { key, ...rest } = posData[0]; + const newId = randomKey(); + rest.key = newId; + const getObj = allPagesCondition( + isAlreadyPage, + type, + rest, + newPageNumber, + getAlreadyPos + ); + if (getObj) { + newXyPos.push(getObj); + } + + newPageNumber++; + } + props.setXyPostion(newXyPos); + } + }; + + const applyAllPage = () => { + if (selectData === "All pages") { + addPos("all"); + } else if (selectData === "All pages but last") { + addPos("last"); + } else if (selectData === "All pages but first") { + addPos("first"); + } + }; + + return ( + + + Place All pages + + + + {allpage.map((data, key) => { + return ( +
+ +
+ ); + })} + + + + + + + + + ); +} + +export default CopyAllPage; diff --git a/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js b/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js new file mode 100644 index 000000000..79815865e --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js @@ -0,0 +1,36 @@ +import React from "react"; +import { themeColor } from "../../utils/ThemeColor/backColor"; +import { resizeBorderExtraWidth } from "../../utils/Utils"; +function PlaceholderBorder(props) { + const getResizeBorderExtraWidth = resizeBorderExtraWidth(); + + return ( +
{ + // if (!props.isDragging && props.isMobile) { + // setTimeout(() => { + // e.stopPropagation(); + // props.setIsSignPad(true); + // props.setSignKey(props.pos.key); + // props.setIsStamp(props.pos.isStamp); + // }, 500); + // } + // }} + className="borderResize" + style={{ + borderColor: themeColor(), + borderStyle: "dashed", + width: props.pos.Width + ? props.pos.Width + getResizeBorderExtraWidth + : 150 + getResizeBorderExtraWidth, + height: props.pos.Height + ? props.pos.Height + getResizeBorderExtraWidth + : 60 + getResizeBorderExtraWidth, + borderWidth: "0.2px", + overflow: "hidden" + }} + >
+ ); +} + +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..53e2500d5 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 BlockDesign = ({ 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,10 @@ function RenderPdf({ } }} > - + + - { - e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); - }} - style={{ - background: themeColor() - }} - className="placeholdCloseBtn" - > - x - - - {pos.SignUrl ? ( -
- signimg -
- ) : ( -
- {pos.isStamp ? "stamp" : "signature"} -
- )} + ) ); @@ -1124,6 +1198,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..2bcfc1aea 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 CopyAllPage from "./component/copyAllPage"; 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 */}