From 01a130ef8c9949baa576bc5a95c65d0b2be36e2b Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Tue, 26 Dec 2023 13:52:52 +0530
Subject: [PATCH] add username in placeholder and validtion for fetch template

---
 .../src/Component/component/LinkUserModal.js  |  4 +-
 .../src/Component/component/renderPdf.js      | 64 ++++++++++++-------
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js b/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js
index 0f5d9645b..5b14264bb 100644
--- a/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js
+++ b/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js
@@ -10,7 +10,7 @@ const LinkUserModal = (props) => {
           details={props.handleAddUser}
           closePopup={props.closePopup}
         />
-         <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+         <div style={{ display: "flex", alignItems: "center", gap: 5, margin:"0px 25px" }}>
           <span
             style={{
               height: 1,
@@ -18,7 +18,7 @@ const LinkUserModal = (props) => {
               backgroundColor: "grey"
             }}
           ></span>
-          <span>OR</span>
+          <span>or</span>
           <span
             style={{
               height: 1,
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
index ecf188df1..a851303dc 100644
--- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js
+++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js
@@ -50,7 +50,8 @@ function RenderPdf({
   setIsResize,
   setZIndex,
   handleLinkUser,
-  setUniqueId
+  setUniqueId,
+  signersdata
 }) {
   const isMobile = window.innerWidth < 767;
   const newWidth = containerWH.width;
@@ -300,6 +301,20 @@ function RenderPdf({
     }
   };
 
+  const handleUserName = (signerId, Role) => {
+    if (signerId) {
+      const checkSign = signersdata.filter(
+        (sign) => sign.objectId === signerId
+      );
+      if (checkSign.length > 0) {
+        return <p style={{ color: "black" }}> {checkSign[0].Name} </p>;
+      } else {
+        return <p style={{ color: "black" }}> {Role} </p>;
+      }
+    } else {
+      return <p style={{ color: "black" }}> {Role} </p>;
+    }
+  };
   return (
     <>
       {isMobile && scale ? (
@@ -411,9 +426,10 @@ function RenderPdf({
                                     }}
                                   >
                                     {pos.isStamp ? "stamp" : "signature"}
-                                    {data.Role  && (<p style={{color:"black"}} onClick={()=> console.log("pos ", pos)}> 
-                                              {data.Role}
-                                            </p>)}
+                                    {handleUserName(
+                                      data.signerObjId,
+                                      data.Role
+                                    )}
                                   </div>
                                 )}
                               </Rnd>
@@ -581,9 +597,10 @@ function RenderPdf({
                                             {pos.isStamp
                                               ? "stamp"
                                               : "signature"}
-                                            {data.Role  && (<p style={{color:"black"}} onClick={()=> console.log("pos ", pos)}> 
-                                              {data.Role}
-                                            </p>)}
+                                            {handleUserName(
+                                              data.signerObjId,
+                                              data.Role
+                                            )}
                                           </div>
                                         </div>
                                       </Rnd>
@@ -707,9 +724,10 @@ function RenderPdf({
                                           }}
                                         >
                                           {pos.isStamp ? "stamp" : "signature"}
-                                          {data.Role  && (<p style={{color:"black"}} onClick={()=> console.log("pos ", pos)}> 
-                                              {data.Role}
-                                            </p>)}
+                                          {handleUserName(
+                                            data.signerObjId,
+                                            data.Role
+                                          )}
                                         </div>
                                       )}
                                     </div>
@@ -884,9 +902,10 @@ function RenderPdf({
                                         }}
                                       >
                                         {pos.isStamp ? "stamp" : "signature"}
-                                        {data.Role  && (<p style={{color:"black"}} onClick={()=> console.log("pos ", pos)}> 
-                                              {data.Role}
-                                        </p>)}
+                                        {handleUserName(
+                                          data.signerObjId,
+                                          data.Role
+                                        )}
                                       </div>
                                     )}
                                   </div>
@@ -1019,18 +1038,16 @@ function RenderPdf({
                                               overflow: "hidden"
                                             }}
                                           >
-                                             <i
-                                            
+                                            <i
                                               className="fa-regular fa-user signCopy"
                                               onClick={(e) => {
                                                 e.stopPropagation();
-                                                handleLinkUser(data.Id)
-                                                setUniqueId(data.Id)
+                                                handleLinkUser(data.Id);
+                                                setUniqueId(data.Id);
                                               }}
                                               style={{
                                                 color: "#188ae2",
                                                 right: 45
-
                                               }}
                                             ></i>
                                             <i
@@ -1051,8 +1068,8 @@ function RenderPdf({
                                                 handleDeleteSign(
                                                   pos.key,
                                                   data.Id
-                                                  );
-                                                  // data.signerObjId
+                                                );
+                                                // data.signerObjId
                                               }}
                                               style={{
                                                 color: "#188ae2"
@@ -1069,9 +1086,10 @@ function RenderPdf({
                                               {pos.isStamp
                                                 ? "stamp"
                                                 : "signature"}
-                                            {data.Role  && (<p style={{color:"black"}} onClick={()=> console.log("pos ", pos)}> 
-                                              {data.Role}
-                                            </p>)}
+                                              {handleUserName(
+                                                data.signerObjId,
+                                                data.Role
+                                              )}
                                             </div>
                                           </div>
                                         </Rnd>