fix: signers list order change issue in reports

This commit is contained in:
RaktimaNXG
2024-09-02 20:01:18 +05:30
parent fa4541b59f
commit c8fb9a5b09
3 changed files with 216 additions and 202 deletions
+68 -65
View File
@@ -486,71 +486,74 @@ function RenderPdf({
? signerPos.map((data, ind) => {
return (
<React.Fragment key={ind}>
{data.placeHolder.map((placeData, index) => {
return (
<React.Fragment key={index}>
{placeData.pageNumber === pageNumber &&
placeData.pos.map((pos) => {
return (
<React.Fragment key={pos.key}>
<Placeholder
pos={pos}
setIsPageCopy={setIsPageCopy}
setSignKey={setSignKey}
handleDeleteSign={handleDeleteSign}
setIsStamp={setIsStamp}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
handleSignYourselfImageResize={
handleImageResize
}
index={pageNumber}
xyPostion={signerPos}
setXyPostion={setSignerPos}
setSignerObjId={setSignerObjId}
data={data}
setIsResize={setIsResize}
setShowDropdown={setShowDropdown}
isShowBorder={true}
isPlaceholder={true}
setUniqueId={setUniqueId}
handleLinkUser={handleLinkUser}
handleUserName={handleUserName}
isSignYourself={false}
posWidth={posWidth}
posHeight={posHeight}
isDragging={isDragging}
setIsValidate={setIsValidate}
setWidgetType={setWidgetType}
setIsRadio={setIsRadio}
setIsCheckbox={setIsCheckbox}
setCurrWidgetsDetails={
setCurrWidgetsDetails
}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={handleNameModal}
setTempSignerId={setTempSignerId}
uniqueId={uniqueId}
handleTextSettingModal={
handleTextSettingModal
}
scale={scale}
containerWH={containerWH}
pdfOriginalWH={pdfOriginalWH}
pageNumber={pageNumber}
setIsSelectId={setIsSelectId}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
/>
</React.Fragment>
);
})}
</React.Fragment>
);
})}
{data?.placeHolder &&
data?.placeHolder.map((placeData, index) => {
return (
<React.Fragment key={index}>
{placeData.pageNumber === pageNumber &&
placeData.pos.map((pos) => {
return (
<React.Fragment key={pos.key}>
<Placeholder
pos={pos}
setIsPageCopy={setIsPageCopy}
setSignKey={setSignKey}
handleDeleteSign={handleDeleteSign}
setIsStamp={setIsStamp}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
handleSignYourselfImageResize={
handleImageResize
}
index={pageNumber}
xyPostion={signerPos}
setXyPostion={setSignerPos}
setSignerObjId={setSignerObjId}
data={data}
setIsResize={setIsResize}
setShowDropdown={setShowDropdown}
isShowBorder={true}
isPlaceholder={true}
setUniqueId={setUniqueId}
handleLinkUser={handleLinkUser}
handleUserName={handleUserName}
isSignYourself={false}
posWidth={posWidth}
posHeight={posHeight}
isDragging={isDragging}
setIsValidate={setIsValidate}
setWidgetType={setWidgetType}
setIsRadio={setIsRadio}
setIsCheckbox={setIsCheckbox}
setCurrWidgetsDetails={
setCurrWidgetsDetails
}
setSelectWidgetId={
setSelectWidgetId
}
selectWidgetId={selectWidgetId}
handleNameModal={handleNameModal}
setTempSignerId={setTempSignerId}
uniqueId={uniqueId}
handleTextSettingModal={
handleTextSettingModal
}
scale={scale}
containerWH={containerWH}
pdfOriginalWH={pdfOriginalWH}
pageNumber={pageNumber}
setIsSelectId={setIsSelectId}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
/>
</React.Fragment>
);
})}
</React.Fragment>
);
})}
</React.Fragment>
);
})
+113 -80
View File
@@ -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]);
+35 -57
View File
@@ -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);