From c8fb9a5b09bf5b78af6763df903ea3a5dc76f441 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 2 Sep 2024 20:01:18 +0530 Subject: [PATCH] fix: signers list order change issue in reports --- apps/OpenSign/src/components/pdf/RenderPdf.js | 133 ++++++------ apps/OpenSign/src/pages/PlaceHolderSign.js | 193 ++++++++++-------- .../OpenSign/src/pages/TemplatePlaceholder.js | 92 ++++----- 3 files changed, 216 insertions(+), 202 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js index c877a8a4f..3c9bc7bb2 100644 --- a/apps/OpenSign/src/components/pdf/RenderPdf.js +++ b/apps/OpenSign/src/components/pdf/RenderPdf.js @@ -486,71 +486,74 @@ function RenderPdf({ ? signerPos.map((data, ind) => { return ( - {data.placeHolder.map((placeData, index) => { - return ( - - {placeData.pageNumber === pageNumber && - placeData.pos.map((pos) => { - return ( - - - - ); - })} - - ); - })} + {data?.placeHolder && + data?.placeHolder.map((placeData, index) => { + return ( + + {placeData.pageNumber === pageNumber && + placeData.pos.map((pos) => { + return ( + + + + ); + })} + + ); + })} ); }) diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 7b28d007a..79337828e 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -313,12 +313,36 @@ function PlaceHolderSign() { } } setPdfDetails(documentData); - if (documentData[0].Signers && documentData[0].Signers.length > 0) { + //condition when placeholder have empty array with role details and signers array have signers data + //and both array length are same + //this case happen using placeholder form in auto save funtionality to save draft type document without adding any placehlder + if ( + documentData[0]?.Placeholders?.length === + documentData[0]?.Signers?.length + ) { + const signersArr = documentData[0].Signers; + const placeholder = documentData[0].Placeholders; + const updatedSigners = signersArr.map((x, index) => ({ + ...x, + Id: placeholder[index]?.Id, + Role: placeholder[index]?.Role, + blockColor: placeholder[index]?.blockColor + })); + setSignerPos(placeholder); + setSignersData(updatedSigners); + setIsSelectId(0); + setUniqueId(placeholder[0].Id); + setBlockColor(placeholder[0].blockColor); + } + //else condition when signers array have some signer's data + //this case happen using placeholder form and load first time + else if (documentData[0].Signers && documentData[0].Signers.length > 0) { const currEmail = documentData[0].ExtUserPtr.Email; setCurrentId(currEmail); setSignerObjId(documentData[0].Signers[0].objectId); setContractName(documentData[0].Signers[0].className); setIsSelectId(0); + //if condition when placeholder array present then update signers local array according to placeholder length if ( documentData[0].Placeholders && documentData[0].Placeholders.length > 0 @@ -347,6 +371,9 @@ function PlaceHolderSign() { setUniqueId(updatedSigners[0].Id); setBlockColor(updatedSigners[0].blockColor); } else { + //else condition when signers length present but placeholder empty then + //update signers array with add role,id and add empty object in placeholder with signers details + //in placeholder array const updatedSigners = documentData[0].Signers.map((x, index) => ({ ...x, Id: randomId(), @@ -354,10 +381,29 @@ function PlaceHolderSign() { blockColor: color[index % color.length] })); setSignersData(updatedSigners); + const updatedPlaceholder = documentData[0].Signers.map((x, index) => { + return { + // Role: updatedSigners[index].Role, + Id: updatedSigners[index].Id, + blockColor: color[index % color.length], + signerPtr: { + __type: "Pointer", + className: x?.className || "contracts_Contactbook", + objectId: x?.objectId + }, + signerObjId: x?.objectId + }; + }); + + setSignerPos(updatedPlaceholder); + setSignersData(updatedSigners); setUniqueId(updatedSigners[0].Id); setBlockColor(updatedSigners[0].blockColor); } } else { + //when user create document using template where signers data not present and only placeholders present + //else condition when signers array is empty then check placeholders array length + //if placeholders have some data then update signers data according to placeholders length // setRoleName("User 1"); if ( documentData[0].Placeholders && @@ -491,62 +537,43 @@ function PlaceHolderSign() { } setSelectWidgetId(key); if (signer) { - let filterSignerPos; + let signerData, currentPagePosition; if (dragTypeValue === textWidget) { - filterSignerPos = signerPos.filter((data) => data.Role === "prefill"); + signerData = signerPos.find((data) => data.Role === "prefill"); } else { - filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); + signerData = signerPos.find((data) => data.Id === uniqueId); } - - const { blockColor, Role } = signer; - //adding placholder in existing signer pos array (placaholder) - if (filterSignerPos.length > 0) { - const getPlaceHolder = filterSignerPos[0].placeHolder; + const getPlaceHolder = signerData?.placeHolder; + if (getPlaceHolder) { + //checking exist placeholder on same page + currentPagePosition = getPlaceHolder.find( + (data) => data.pageNumber === pageNumber + ); + } + //checking current page has already some placeholders then update that placeholder and add upcoming placehoder position + if (getPlaceHolder && currentPagePosition) { 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); - let updatesignerPos; - if (dragTypeValue === textWidget) { - updatesignerPos = signerPos.map((x) => - x.Role === "prefill" ? { ...x, placeHolder: updatePlace } : x - ); - } else { - updatesignerPos = signerPos.map((x) => - x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x - ); - } - setSignerPos(updatesignerPos); - } else { - let updatesignerPos; - if (dragTypeValue === textWidget) { - updatesignerPos = signerPos.map((x) => - x.Role === "prefill" - ? { ...x, placeHolder: [...x.placeHolder, placeHolder] } - : x - ); - } else { - 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; + const getPos = currentPagePosition?.pos; + const newSignPos = getPos.concat(dropData); + let xyPos = { pageNumber: pageNumber, pos: newSignPos }; + updatePlace.push(xyPos); + let updatesignerPos; if (dragTypeValue === textWidget) { - placeHolderPos = { + updatesignerPos = signerPos.map((x) => + x.Role === "prefill" ? { ...x, placeHolder: updatePlace } : x + ); + } else { + updatesignerPos = signerPos.map((x) => + x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x + ); + } + setSignerPos(updatesignerPos); + } else { + let updatesignerPos; + if (dragTypeValue === textWidget) { + const prefileTextWidget = { signerPtr: {}, signerObjId: "", blockColor: "#f58f8c", @@ -554,33 +581,17 @@ function PlaceHolderSign() { Role: "prefill", Id: key }; + + signerPos.push(prefileTextWidget); + setSignerPos(signerPos); } else { - if (contractName) { - placeHolderPos = { - signerPtr: { - __type: "Pointer", - className: `${contractName}`, - objectId: signerObjId - }, - signerObjId: signerObjId, - blockColor: blockColor ? blockColor : color[isSelectListId], - placeHolder: [placeHolder], - Role: Role ? Role : roleName, - Id: uniqueId - }; - } else { - placeHolderPos = { - signerPtr: {}, - signerObjId: "", - blockColor: blockColor ? blockColor : color[isSelectListId], - placeHolder: [placeHolder], - Role: Role ? Role : roleName, - Id: uniqueId - }; - } + updatesignerPos = signerPos.map((x) => + x.Id === uniqueId ? { ...x, placeHolder: [placeHolder] } : x + ); + setSignerPos(updatesignerPos); } - setSignerPos((prev) => [...prev, placeHolderPos]); } + if (dragTypeValue === "dropdown") { setShowDropdown(true); } else if (dragTypeValue === "checkbox") { @@ -710,6 +721,7 @@ function PlaceHolderSign() { const getXYdata = getPageNumer[0].pos.filter( (data) => data.key !== key ); + //condition to check on same has multiple widgets so do not delete all widgets if (getXYdata.length > 0) { updateData.push(getXYdata); const newUpdatePos = getPlaceHolder.map((obj) => { @@ -727,11 +739,11 @@ function PlaceHolderSign() { }); setSignerPos(newUpdateSigner); } else { - const updateFilter = signerPos.filter((data) => data.Id !== Id); const getRemainPage = filterSignerPos[0].placeHolder.filter( (data) => data.pageNumber !== pageNumber ); - + //condition to check placeholder length is greater than 1 do not need to remove whole placeholder + //array only resove particular widgets if (getRemainPage && getRemainPage.length > 0) { const newUpdatePos = filterSignerPos.map((obj) => { if (obj.Id === Id) { @@ -744,7 +756,15 @@ function PlaceHolderSign() { signerupdate.push(newUpdatePos[0]); setSignerPos(signerupdate); } else { - setSignerPos(updateFilter); + const updatedData = signerPos.map((item) => { + if (item.Id === Id) { + // Destructuring to remove the name field + const { placeHolder, ...rest } = item; + return rest; + } + return item; + }); + setSignerPos(updatedData); } } } @@ -883,13 +903,14 @@ function PlaceHolderSign() { }, 2000); return () => clearTimeout(timer); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [signerPos]); + }, [signerPos, signersdata]); // `autosavedetails` is used to save doc details after every 2 sec when changes are happern in placeholder like drag-drop widgets, remove signers const autosavedetails = async () => { const signers = signersdata?.filter( (x) => - x?.Role !== "prefill" && { + x?.Role !== "prefill" && + x.objectId && { __type: "Pointer", className: "contracts_Contactbook", objectId: x.objectId @@ -1585,12 +1606,24 @@ function PlaceHolderSign() { //function to add new signer in document signers list const handleAddNewRecipients = (data) => { const newId = randomId(); + const backgroundColor = color[signersdata.length]; signersdata.push({ ...data, className: "contracts_Contactbook", Id: newId, - blockColor: color[signersdata.length] + blockColor: backgroundColor }); + const signerPosObj = { + signerPtr: { + __type: "Pointer", + className: "contracts_Contactbook", + objectId: data.objectId + }, + signerObjId: data.objectId, + blockColor: backgroundColor, + Id: newId + }; + setSignerPos((prev) => [...prev, signerPosObj]); setUniqueId(newId); setIsSelectId(signersdata.length - 1); setBlockColor(color[signersdata.length]); diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 92a438379..7c88a648a 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -381,11 +381,11 @@ const TemplatePlaceholder = () => { containerWH ); const key = randomId(); - let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); const dragTypeValue = item?.text ? item.text : monitor.type; const widgetWidth = defaultWidthHeight(dragTypeValue).width; const widgetHeight = defaultWidthHeight(dragTypeValue).height; - let dropData = []; + let dropData = [], + currentPagePosition; let placeHolder; if (item === "onclick") { const dropObj = { @@ -446,65 +446,35 @@ const TemplatePlaceholder = () => { pos: dropData }; } - const { blockColor, Role } = signer; - //adding placholder in existing signer pos array (placaholder) - if (filterSignerPos.length > 0) { - const getPlaceHolder = filterSignerPos[0].placeHolder; + + const getPlaceHolder = signer?.placeHolder; + if (getPlaceHolder) { + //checking exist placeholder on same page + currentPagePosition = getPlaceHolder.find( + (data) => data.pageNumber === pageNumber + ); + } + //checking current page has already some placeholders then update that placeholder and add upcoming placehoder position + if (getPlaceHolder && currentPagePosition) { const updatePlace = getPlaceHolder.filter( (data) => data.pageNumber !== pageNumber ); - const getPageNumer = getPlaceHolder.filter( - (data) => data.pageNumber === pageNumber + const getPos = currentPagePosition?.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 ); - - //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); - } + setSignerPos(updatesignerPos); } else { - //adding new placeholder for selected signer in pos array (placeholder) - let placeHolderPos; - if (contractName) { - placeHolderPos = { - signerPtr: { - __type: "Pointer", - className: `${contractName}`, - objectId: signerObjId - }, - signerObjId: signerObjId, - blockColor: blockColor ? blockColor : color[isSelectListId], - placeHolder: [placeHolder], - Role: Role ? Role : roleName, - Id: uniqueId - }; - } else { - placeHolderPos = { - signerPtr: {}, - signerObjId: "", - blockColor: blockColor ? blockColor : color[isSelectListId], - placeHolder: [placeHolder], - Role: Role ? Role : roleName, - Id: uniqueId - }; - } - setSignerPos((prev) => [...prev, placeHolderPos]); + const updatesignerPos = signerPos.map((x) => + x.Id === uniqueId ? { ...x, placeHolder: [placeHolder] } : x + ); + setSignerPos(updatesignerPos); } if (dragTypeValue === "dropdown") { @@ -964,7 +934,6 @@ const TemplatePlaceholder = () => { setIsCreateDoc(false); } }; - // `handleAddSigner` is used to open Add Role Modal const handleAddSigner = () => { setIsModalRole(true); @@ -986,6 +955,15 @@ const TemplatePlaceholder = () => { blockColor: color[index] }; setSignersData((prevArr) => [...prevArr, obj]); + const signerPosObj = { + signerPtr: {}, + signerObjId: "", + blockColor: color[index], + Role: roleName || "User " + count, + Id: Id + }; + + setSignerPos((prev) => [...prev, signerPosObj]); setIsModalRole(false); setRoleName(""); setUniqueId(Id);