From af52bb30f5533607e1203a096906fedeec73b16f Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Thu, 27 Jun 2024 12:23:39 +0530
Subject: [PATCH] fix: signer's list order issue after change order of signers
 in tamplate and placeholder flow

---
 .../src/components/pdf/RecipientList.js       | 28 +++++++++++++------
 apps/OpenSign/src/pages/PlaceHolderSign.js    |  1 +
 .../OpenSign/src/pages/TemplatePlaceholder.js |  1 +
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/RecipientList.js b/apps/OpenSign/src/components/pdf/RecipientList.js
index b31c907d4..b7c3b69d8 100644
--- a/apps/OpenSign/src/components/pdf/RecipientList.js
+++ b/apps/OpenSign/src/components/pdf/RecipientList.js
@@ -61,15 +61,27 @@ const RecipientList = (props) => {
     );
     //splice method is used to replace or add new value in array at specific index
     remainingItems.splice(index, 0, ...draggedItem);
-
     //set current draggable recipient details,objectId,index,contract_className ... after replace recipient list
-    props.setSignersData(remainingItems);
-    props.setSignerObjId(remainingItems[index]?.objectId || "");
-    props.setIsSelectId(index);
-    props.setContractName(remainingItems[index]?.className || "");
-    props.setUniqueId(remainingItems[index]?.Id);
-    props.setRoleName(remainingItems[index]?.Role);
-    props.setBlockColor(remainingItems[index]?.blockColor);
+    props?.setSignersData(remainingItems);
+    props?.setSignerObjId(remainingItems[index]?.objectId || "");
+    props?.setIsSelectId(index);
+    props?.setContractName(remainingItems[index]?.className || "");
+    props?.setUniqueId(remainingItems[index]?.Id);
+    props?.setRoleName(remainingItems[index]?.Role);
+    props?.setBlockColor(remainingItems[index]?.blockColor);
+
+    //change order of placeholder's list using sorting method
+    //`remainingItems` is correct order of signers after change order
+    const changeOrderSignerList = props?.signerPos.sort((a, b) => {
+      //`indexA` and `indexB` is to get element position using index in correct order array
+      const indexA = remainingItems.findIndex((item) => item.Id === a.Id);
+      const indexB = remainingItems.findIndex((item) => item.Id === b.Id);
+      //and then compare `indexA - indexB` value
+      //if positive it means indexB element comes before indexA then need to sorting
+      //if negative it means indexA element is on correct position do not need to sorting
+      return indexA - indexB;
+    });
+    props?.setSignerPos(changeOrderSignerList);
   };
   return (
     <>
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index e550a00de..1a37a5cb7 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -2151,6 +2151,7 @@ function PlaceHolderSign() {
                         aria-disabled
                       >
                         <SignerListPlace
+                          setSignerPos={setSignerPos}
                           signerPos={signerPos}
                           signersdata={signersdata}
                           isSelectListId={isSelectListId}
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index c120747b4..05d75f670 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -1591,6 +1591,7 @@ const TemplatePlaceholder = () => {
                     <SignerListPlace
                       isMailSend={isMailSend}
                       signerPos={signerPos}
+                      setSignerPos={setSignerPos}
                       signersdata={signersdata}
                       isSelectListId={isSelectListId}
                       setSignerObjId={setSignerObjId}