From 4648ace84ef81ebe1d1e7d40f496390a07529f76 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Fri, 29 Dec 2023 23:00:37 +0530 Subject: [PATCH] fix : minor bug fix in template --- .../src/Component/TemplatePlaceholder.js | 131 +++----- .../Component/component/fieldsComponent.js | 104 +++++-- .../src/Component/component/renderPdf.js | 9 +- .../src/Component/placeHolderSign.js | 288 +++++++----------- .../src/premitives/RecipientList.js | 3 + 5 files changed, 227 insertions(+), 308 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 13cc69416..04c1b6210 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -327,12 +327,12 @@ const TemplatePlaceholder = () => { //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { - getSignerPos(item, monitor); + getSignerPos(item, monitor); }; // `getSignerPos` is used to get placeholder position when user place it and save it in array const getSignerPos = (item, monitor) => { - const signer = signersdata.find((x) => x.Id === uniqueId); + if(uniqueId){const signer = signersdata.find((x) => x.Id === uniqueId); if (signer) { const posZIndex = zIndex + 1; setZIndex(posZIndex); @@ -344,8 +344,7 @@ const TemplatePlaceholder = () => { // ); let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); let dropData = []; - let xyPosArr = []; - let xyPos = {}; + let placeHolder ; if (item === "onclick") { const dropObj = { xPosition: window.innerWidth / 2 - 100, @@ -359,12 +358,11 @@ const TemplatePlaceholder = () => { zIndex: posZIndex }; dropData.push(dropObj); - xyPos = { + placeHolder = { pageNumber: pageNumber, pos: dropData }; - xyPosArr.push(xyPos); } else if (item.type === "BOX") { const offset = monitor.getClientOffset(); //adding and updating drop position in array when user drop signature button in div @@ -390,21 +388,14 @@ const TemplatePlaceholder = () => { }; dropData.push(dropObj); - xyPos = { + placeHolder = { pageNumber: pageNumber, pos: dropData }; - - xyPosArr.push(xyPos); } - const { blockColor, Role } = signersdata.find((x) => x.Id === uniqueId); + const { blockColor, Role } = signer //adding placholder in existing signer pos array (placaholder) if (filterSignerPos.length > 0) { - // const colorIndex = signerPos - // .map((e) => e.signerObjId) - // .indexOf(signerObjId); - - const colorIndex = signerPos.map((e) => e.Id).indexOf(uniqueId); const getPlaceHolder = filterSignerPos[0].placeHolder; const updatePlace = getPlaceHolder.filter( (data) => data.pageNumber !== pageNumber @@ -416,79 +407,21 @@ const TemplatePlaceholder = () => { //add entry of position for same signer on multiple page if (getPageNumer.length > 0) { const getPos = getPageNumer[0].pos; - const newSignPos = getPos.concat(dropData); + const newSignPos = getPos.concat(dropData); let xyPos = { pageNumber: pageNumber, pos: newSignPos }; updatePlace.push(xyPos); - let placeHolderPos; - if (contractName) { - placeHolderPos = { - blockColor: blockColor ? blockColor : color[isSelectListId], - signerObjId: signerObjId, - placeHolder: updatePlace, - signerPtr: { - __type: "Pointer", - className: `${contractName}`, - objectId: signerObjId - }, - Role: Role ? Role : roleName, - Id: uniqueId - }; - } else { - placeHolderPos = { - blockColor: blockColor ? blockColor : color[isSelectListId], - signerObjId: "", - placeHolder: updatePlace, - signerPtr: {}, - Role: Role ? Role : roleName, - Id: uniqueId - }; - } - // signerPos.splice(colorIndex, 1, placeHolderPos); - const newArry = [placeHolderPos]; - const newArray = [ - ...signerPos.slice(0, colorIndex), - ...newArry, - ...signerPos.slice(colorIndex + 1) - ]; - setSignerPos(newArray); + const updatesignerPos = signerPos.map((x) => + x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x + ); + setSignerPos(updatesignerPos); } else { - const newSignPoss = getPlaceHolder.concat(xyPosArr[0]); - let placeHolderPos; - if (contractName) { - placeHolderPos = { - blockColor: color[isSelectListId], - signerObjId: signerObjId, - placeHolder: newSignPoss, - signerPtr: { - __type: "Pointer", - className: `${contractName}`, - objectId: signerObjId - }, - Role: Role ? Role : roleName, - Id: uniqueId - }; - } else { - placeHolderPos = { - blockColor: color[isSelectListId], - signerObjId: "", - placeHolder: newSignPoss, - signerPtr: {}, - Role: Role ? Role : roleName, - Id: uniqueId - }; - } - - const newArry = [placeHolderPos]; - const newArray = [ - ...signerPos.slice(0, colorIndex), - ...newArry, - ...signerPos.slice(colorIndex + 1) - ]; - - setSignerPos(newArray); + const updatesignerPos = signerPos.map((x) => + x.Id === uniqueId ? { ...x, placeHolder: [...x.placeHolder, placeHolder] } : x + ); + setSignerPos(updatesignerPos); } } else { //adding new placeholder for selected signer in pos array (placeholder) @@ -502,7 +435,7 @@ const TemplatePlaceholder = () => { }, signerObjId: signerObjId, blockColor: blockColor ? blockColor : color[isSelectListId], - placeHolder: xyPosArr, + placeHolder: [placeHolder], Role: Role ? Role : roleName, Id: uniqueId }; @@ -511,18 +444,17 @@ const TemplatePlaceholder = () => { signerPtr: {}, signerObjId: "", blockColor: blockColor ? blockColor : color[isSelectListId], - placeHolder: xyPosArr, + placeHolder: [placeHolder], Role: Role ? Role : roleName, Id: uniqueId }; } - setSignerPos((prev) => [...prev, placeHolderPos]); } setIsMailSend(false); } else { setIsReceipent(false); - } + }} }; //function for get pdf page details const pageDetails = async (pdf) => { @@ -884,18 +816,18 @@ const TemplatePlaceholder = () => { // `handleDeleteUser` function is used to delete record and placeholder when user click on delete which is place next user name in recipients list const handleDeleteUser = (Id) => { const updateSigner = signersdata - .filter((x) => x.Id !== Id) - .map((x, i) => ({ ...x, blockColor: color[i] })); + .filter((x) => x.Id !== Id) + .map((x, i) => ({ ...x, blockColor: color[i] })); setSignersData(updateSigner); const updatePlaceholderUser = signerPos - .filter((x) => x.Id !== Id) - .map((x, i) => ({ ...x, blockColor: color[i] })); - const index = signersdata.findIndex((x)=> x.Id === Id) - if(index === signersdata.length - 1){ - setUniqueId(updateSigner[updateSigner.length - 1]?.Id ||""); + .filter((x) => x.Id !== Id) + .map((x, i) => ({ ...x, blockColor: color[i] })); + const index = signersdata.findIndex((x) => x.Id === Id); + if (index === signersdata.length - 1) { + setUniqueId(updateSigner[updateSigner.length - 1]?.Id || ""); setIsSelectId(0); - }else{ - setUniqueId(updateSigner[index]?.Id ||""); + } else { + setUniqueId(updateSigner[index]?.Id || ""); setIsSelectId(index); } @@ -924,12 +856,14 @@ const TemplatePlaceholder = () => { const updateSigner = signersdata.map((x) => { if (x.Id === uniqueId) { - return { ...x, ...data }; + return { ...x, ...data, className: "contracts_Contactbook" }; } return { ...x }; }); setSignersData(updateSigner); setIsMailSend(false); + const index = signersdata.findIndex((x)=> x.Id ===uniqueId) + setIsSelectId(index) }; // `closePopup` is used to close Add/Choose signer modal @@ -1054,7 +988,10 @@ const TemplatePlaceholder = () => { handleClose={() => setIsCreateDocModal(false)} >
-

Do you want to create a document using the template you just created ?

+

+ Do you want to create a document using the template you just + created ? +

{ - if (signersdata?.length) { - handleModal(); - } + // if (signersdata?.length) { + handleModal(); + // } }} > - + Recipient - + {signersdata[isSelectListId]?.Role && (
- {signersdata[isSelectListId]?.Name - ? ` : ${signersdata[isSelectListId]?.Name}` - : ` : ${signersdata[isSelectListId]?.Role}`} + {signersdata[isSelectListId]?.Name ? ( + <> + :{" "} + {signersdata[isSelectListId]?.Name?.length > 12 + ? `${signersdata[isSelectListId].Name.slice( + 0, + 12 + )}...` + : signersdata[isSelectListId]?.Name} + + ) : ( + <> + :{" "} + {signersdata[isSelectListId]?.Role?.length > 12 + ? `${signersdata[isSelectListId].Role.slice( + 0, + 12 + )}...` + : signersdata[isSelectListId]?.Role} + + )}
)} +
+ +
)} @@ -333,25 +367,41 @@ function FieldsComponent({
)} - - - + {isSignersModal && ( + + {signersdata.length > 0 ? ( + + ) : ( +
+ Please add Recipient +
+ )} + + )} ); } diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 808e12c9b..2be2c7675 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -381,14 +381,12 @@ function RenderPdf({ }; const handleUserName = (signerId, Role) => { if (signerId) { - const checkSign = signersdata.filter( - (sign) => sign.objectId === signerId - ); - if (checkSign.length > 0) { + const checkSign = signersdata.find((sign) => sign.objectId === signerId); + if (checkSign?.Name) { return ( <>
- {checkSign[0].Name} + {checkSign?.Name}
{`(${Role})`}
@@ -788,7 +786,6 @@ function RenderPdf({ xyPostion, index, setXyPostion - ); }} > diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 32e1f3607..00c03f030 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -53,7 +53,7 @@ function PlaceHolderSign() { message: "This might take some time" }); const [handleError, setHandleError] = useState(); - const [currentEmail, setCurrentEmail] = useState(); + const [currentId, setCurrentId] = useState(""); const [pdfNewWidth, setPdfNewWidth] = useState(); const [placeholderTour, setPlaceholderTour] = useState(true); const [checkTourStatus, setCheckTourStatus] = useState(false); @@ -202,10 +202,7 @@ function PlaceHolderSign() { if (documentData[0].Signers && documentData[0].Signers.length > 0) { const currEmail = documentData[0].ExtUserPtr.Email; - const filterCurrEmail = documentData[0].Signers.filter( - (data) => data.Email === currEmail - ); - setCurrentEmail(filterCurrEmail); + setCurrentId(currEmail) setSignerObjId(documentData[0].Signers[0].objectId); setContractName(documentData[0].Signers[0].className); setIsSelectId(0); @@ -329,196 +326,128 @@ function PlaceHolderSign() { }; const getSignerPos = (item, monitor) => { - const posZIndex = zIndex + 1; - setZIndex(posZIndex); - const newWidth = containerWH.width; - const scale = pdfOriginalWidth / newWidth; - const key = Math.floor(1000 + Math.random() * 9000); - // let filterSignerPos = signerPos.filter( - // (data) => data.signerObjId === signerObjId - // ); - let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); - - let dropData = []; - let xyPosArr = []; - let xyPos = {}; - if (item === "onclick") { - const dropObj = { - //onclick put placeholder center on pdf - xPosition: window.innerWidth / 2 - 100, - yPosition: window.innerHeight / 2 - 60, - isStamp: monitor, - key: key, - isDrag: false, - scale: scale, - isMobile: isMobile, - yBottom: window.innerHeight / 2 - 60, - zIndex: posZIndex - }; - dropData.push(dropObj); - xyPos = { - pageNumber: pageNumber, - pos: dropData - }; - - xyPosArr.push(xyPos); - } else if (item.type === "BOX") { - const offset = monitor.getClientOffset(); - //adding and updating drop position in array when user drop signature button in div - const containerRect = document - .getElementById("container") - .getBoundingClientRect(); - const x = offset.x - containerRect.left; - const y = offset.y - containerRect.top; - const ybottom = containerRect.bottom - offset.y; - - const dropObj = { - xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x, - yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y, - isStamp: isDragStamp || isDragStampSS ? true : false, - key: key, - isDrag: false, - firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, - firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, - yBottom: ybottom, - scale: scale, - isMobile: isMobile, - zIndex: posZIndex - }; - dropData.push(dropObj); - xyPos = { - pageNumber: pageNumber, - pos: dropData - }; - - xyPosArr.push(xyPos); - } - - //add signers objId first inseretion - if (filterSignerPos.length > 0) { - // const colorIndex = signerPos - // .map((e) => e.signerObjId) - // .indexOf(signerObjId); - - const colorIndex = signerPos.map((e) => e.Id).indexOf(uniqueId); - - const getPlaceHolder = filterSignerPos[0].placeHolder; - const updatePlace = getPlaceHolder.filter( - (data) => data.pageNumber !== pageNumber - ); - const getPageNumer = getPlaceHolder.filter( - (data) => data.pageNumber === pageNumber - ); - - //add entry of position for same signer on multiple page - if (getPageNumer.length > 0) { - const getPos = getPageNumer[0].pos; - const newSignPos = getPos.concat(dropData); - let xyPos = { + const signer = signersdata.find((x) => x.Id === uniqueId); + if (signer) { + const posZIndex = zIndex + 1; + setZIndex(posZIndex); + const newWidth = containerWH.width; + const scale = pdfOriginalWidth / newWidth; + const key = randomId(); + // let filterSignerPos = signerPos.filter( + // (data) => data.signerObjId === signerObjId + // ); + let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); + let dropData = []; + let placeHolder ; + if (item === "onclick") { + const dropObj = { + xPosition: window.innerWidth / 2 - 100, + yPosition: window.innerHeight / 2 - 60, + isStamp: monitor, + key: key, + isDrag: false, + scale: scale, + isMobile: isMobile, + yBottom: window.innerHeight / 2 - 60, + zIndex: posZIndex + }; + dropData.push(dropObj); + placeHolder = { pageNumber: pageNumber, - pos: newSignPos + pos: dropData }; - updatePlace.push(xyPos); + + } else if (item.type === "BOX") { + const offset = monitor.getClientOffset(); + //adding and updating drop position in array when user drop signature button in div + const containerRect = document + .getElementById("container") + .getBoundingClientRect(); + const x = offset.x - containerRect.left; + const y = offset.y - containerRect.top; + const ybottom = containerRect.bottom - offset.y; + + const dropObj = { + xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x, + yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y, + isStamp: isDragStamp || isDragStampSS ? true : false, + key: key, + isDrag: false, + firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, + firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, + yBottom: ybottom, + scale: scale, + isMobile: isMobile, + zIndex: posZIndex + }; + + dropData.push(dropObj); + placeHolder = { + pageNumber: pageNumber, + pos: dropData + }; + } + const { blockColor, Role } = signer + //adding placholder in existing signer pos array (placaholder) + if (filterSignerPos.length > 0) { + const getPlaceHolder = filterSignerPos[0].placeHolder; + const updatePlace = getPlaceHolder.filter( + (data) => data.pageNumber !== pageNumber + ); + const getPageNumer = getPlaceHolder.filter( + (data) => data.pageNumber === pageNumber + ); + + //add entry of position for same signer on multiple page + if (getPageNumer.length > 0) { + const getPos = getPageNumer[0].pos; + const newSignPos = getPos.concat(dropData); + let xyPos = { + pageNumber: pageNumber, + pos: newSignPos + }; + updatePlace.push(xyPos); + const updatesignerPos = signerPos.map((x) => + x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x + ); + setSignerPos(updatesignerPos); + } else { + const updatesignerPos = signerPos.map((x) => + x.Id === uniqueId ? { ...x, placeHolder: [...x.placeHolder, placeHolder] } : x + ); + setSignerPos(updatesignerPos); + } + } else { + //adding new placeholder for selected signer in pos array (placeholder) let placeHolderPos; if (contractName) { placeHolderPos = { - blockColor: color[isSelectListId], - signerObjId: signerObjId, - placeHolder: updatePlace, signerPtr: { __type: "Pointer", className: `${contractName}`, objectId: signerObjId }, - Role: roleName, - Id: uniqueId - }; - } else { - placeHolderPos = { - blockColor: color[isSelectListId], - signerObjId: "", - placeHolder: updatePlace, - signerPtr: {}, - Role: roleName, - Id: uniqueId - }; - } - // signerPos.splice(colorIndex, 1, placeHolderPos); - const newArry = [placeHolderPos]; - const newArray = [ - ...signerPos.slice(0, colorIndex), - ...newArry, - ...signerPos.slice(colorIndex + 1) - ]; - setSignerPos(newArray); - } else { - const newSignPoss = getPlaceHolder.concat(xyPosArr[0]); - let placeHolderPos; - if (contractName) { - placeHolderPos = { - blockColor: color[isSelectListId], signerObjId: signerObjId, - placeHolder: newSignPoss, - signerPtr: { - __type: "Pointer", - className: `${contractName}`, - objectId: signerObjId - }, - Role: roleName, + blockColor: blockColor ? blockColor : color[isSelectListId], + placeHolder: [placeHolder], + Role: Role ? Role : roleName, Id: uniqueId }; } else { placeHolderPos = { - blockColor: color[isSelectListId], - signerObjId: "", - placeHolder: newSignPoss, signerPtr: {}, - Role: roleName, + signerObjId: "", + blockColor: blockColor ? blockColor : color[isSelectListId], + placeHolder: [placeHolder], + Role: Role ? Role : roleName, Id: uniqueId }; } - - // signerPos.splice(colorIndex, 1, placeHolderPos); - const newArry = [placeHolderPos]; - const newArray = [ - ...signerPos.slice(0, colorIndex), - ...newArry, - ...signerPos.slice(colorIndex + 1) - ]; - - setSignerPos(newArray); - } - } else { - let placeHolderPos; - if (contractName) { - placeHolderPos = { - signerPtr: { - __type: "Pointer", - className: `${contractName}`, - objectId: signerObjId - }, - signerObjId: signerObjId, - blockColor: color[isSelectListId], - placeHolder: xyPosArr, - Role: roleName, - Id: uniqueId - }; - } else { - placeHolderPos = { - signerPtr: {}, - signerObjId: "", - blockColor: color[isSelectListId], - placeHolder: xyPosArr, - Role: roleName, - Id: uniqueId - }; + setSignerPos((prev) => [...prev, placeHolderPos]); } - setSignerPos((prev) => [...prev, placeHolderPos]); - } - setIsMailSend(false); + } }; - //function for get pdf page details const pageDetails = async (pdf) => { const load = { @@ -791,6 +720,8 @@ function PlaceHolderSign() { objectId: x.objectId }; }); + const currentUser = signersdata.find((x)=> x.Email === currentId) + setCurrentId(currentUser?.objectId) // console.log("signers ", signers); try { const data = { @@ -904,7 +835,7 @@ function PlaceHolderSign() { const handleRecipientSign = () => { const hostUrl = getHostUrl(); navigate( - `${hostUrl}recipientSignPdf/${documentId}/${currentEmail[0].objectId}` + `${hostUrl}recipientSignPdf/${documentId}/${currentId}` ); }; @@ -929,13 +860,14 @@ function PlaceHolderSign() { const updateSigner = signersdata.map((x) => { if (x.Id === uniqueId) { - return { ...x, ...data }; + return { ...x, ...data, className: "contracts_Contactbook" }; } return { ...x }; }); // console.log("updateSigner ", updateSigner); - setSignersData(updateSigner); + const index = signersdata.findIndex((x)=> x.Id ===uniqueId) + setIsSelectId(index) } }; @@ -1056,13 +988,13 @@ function PlaceHolderSign() { {/* signature modal */}

You have successfully sent mails to all recipients!

- {currentEmail?.length > 0 && ( + {currentId && (

Do you want to sign documents right now ?

)} - {currentEmail?.length > 0 ? ( + {currentId ? ( <>