resolve color issue on drag placeholder

Author: prafull-opensignlabs

microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js

@@ -32,6 +32,7 @@ import EditTemplate from "./component/EditTemplate";
 import ModalUi from "../premitives/ModalUi";
 import AddRoleModal from "./component/AddRoleModal";
 import PlaceholderCopy from "./component/PlaceholderCopy";
+import ModalComponent from "./component/modalComponent";
 
 const TemplatePlaceholder = () => {
   const navigate = useNavigate();
@@ -169,6 +170,7 @@ const TemplatePlaceholder = () => {
 
   useEffect(() => {
     fetchTemplate();
+    // eslint-disable-next-line
   }, []);
 
   useEffect(() => {
@@ -427,7 +429,7 @@ const TemplatePlaceholder = () => {
       //   .indexOf(signerObjId);
 
       const colorIndex = signerPos.map((e) => e.Id).indexOf(uniqueId);
-
+      const blockColor = signersdata.find((x) => x.Id === uniqueId)?.blockColor;
       const getPlaceHolder = filterSignerPos[0].placeHolder;
       const updatePlace = getPlaceHolder.filter(
         (data) => data.pageNumber !== pageNumber
@@ -448,7 +450,7 @@ const TemplatePlaceholder = () => {
         let placeHolderPos;
         if (contractName) {
           placeHolderPos = {
-            blockColor: color[isSelectListId],
+            blockColor: blockColor ? blockColor : color[isSelectListId],
             signerObjId: signerObjId,
             placeHolder: updatePlace,
             signerPtr: {
@@ -461,7 +463,7 @@ const TemplatePlaceholder = () => {
           };
         } else {
           placeHolderPos = {
-            blockColor: color[isSelectListId],
+            blockColor: blockColor ? blockColor : color[isSelectListId],
             signerObjId: "",
             placeHolder: updatePlace,
             signerPtr: {},
@@ -515,6 +517,7 @@ const TemplatePlaceholder = () => {
         setSignerPos(newArray);
       }
     } else {
+      const blockColor = signersdata.find((x) => x.Id === uniqueId)?.blockColor;
       let placeHolderPos;
       if (contractName) {
         placeHolderPos = {
@@ -524,7 +527,7 @@ const TemplatePlaceholder = () => {
             objectId: signerObjId
           },
           signerObjId: signerObjId,
-          blockColor: color[isSelectListId],
+          blockColor: blockColor ? blockColor : color[isSelectListId],
           placeHolder: xyPosArr,
           Role: roleName,
           Id: uniqueId
@@ -533,7 +536,7 @@ const TemplatePlaceholder = () => {
         placeHolderPos = {
           signerPtr: {},
           signerObjId: "",
-          blockColor: color[isSelectListId],
+          blockColor: blockColor ? blockColor : color[isSelectListId],
           placeHolder: xyPosArr,
           Role: roleName,
           Id: uniqueId
@@ -981,7 +984,6 @@ const TemplatePlaceholder = () => {
     setIsModalRole(false);
   };
 
-
   return (
     <div>
       <Title title={"Template"} />
@@ -1084,6 +1086,12 @@ const TemplatePlaceholder = () => {
                   )}
                 </div>
               </ModalUi>
+              {isCreateDoc && <Loader isLoading={isLoading} />}
+              <ModalComponent
+                isShow={isShowEmail}
+                type={"signersAlert"}
+                setIsShowEmail={setIsShowEmail}
+              />
               <PlaceholderCopy
                 isPageCopy={isPageCopy}
                 setIsPageCopy={setIsPageCopy}

microfrontends/SignDocuments/src/Component/component/EditTemplate.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import "../../css/AddUser.css";
 // import SelectFolder from "../../premitives/SelectFolder";
 

microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js

@@ -66,17 +66,19 @@ function PlaceholderCopy(props) {
     let newPlaceholderPosition = [];
     let newPageNumber = 1;
     const signerPosition = props.xyPostion;
-    const signerId = props.signerObjId ? props.signerObjId : props.Id
+    const signerId = props.signerObjId ? props.signerObjId : props.Id;
     //handle placeholder array and copy for multiple signers placeholder at requested location
     if (signerId) {
       //get current signers data
       let filterSignerPosition;
-      if(props?.signerObjId){
-         filterSignerPosition = signerPosition.filter(
+      if (props?.signerObjId) {
+        filterSignerPosition = signerPosition.filter(
           (data) => data.signerObjId === signerId
         );
-      }else{
-         filterSignerPosition = signerPosition.filter((item)=> item.Id === signerId)
+      } else {
+        filterSignerPosition = signerPosition.filter(
+          (item) => item.Id === signerId
+        );
       }
       //get current pagenumber's all placeholder position data
       const placeholderPosition = filterSignerPosition[0].placeHolder.filter(
@@ -92,7 +94,7 @@ function PlaceholderCopy(props) {
         rest.key = newId;
         //get exist placeholder position for particular page
         const existPlaceholder = filterSignerPosition[0].placeHolder.filter(
-          (data) => data.pageNumber == newPageNumber
+          (data) => data.pageNumber === newPageNumber
         );
         const existPlaceholderPosition =
           existPlaceholder[0] && existPlaceholder[0].pos;
@@ -110,31 +112,27 @@ function PlaceholderCopy(props) {
         newPageNumber++;
       }
       let updatedSignerPlaceholder;
-      if(props?.signerObjId){
-        updatedSignerPlaceholder = signerPosition.map(
-            (signersData, ind) => {
-              if (signersData.signerObjId === props.signerObjId) {
-                return {
-                  ...signersData,
-                  placeHolder: newPlaceholderPosition
-                };
-              }
-              return signersData;
-            }
-          );
-     }else{
-      updatedSignerPlaceholder = signerPosition.map(
-          (signersData, ind) => {
-            if (signersData.Id === props.Id) {
-              return {
-                ...signersData,
-                placeHolder: newPlaceholderPosition
-              };
-            }
-            return signersData;
+      if (props?.signerObjId) {
+        updatedSignerPlaceholder = signerPosition.map((signersData, ind) => {
+          if (signersData.signerObjId === props.signerObjId) {
+            return {
+              ...signersData,
+              placeHolder: newPlaceholderPosition
+            };
           }
-        );
-     }
+          return signersData;
+        });
+      } else {
+        updatedSignerPlaceholder = signerPosition.map((signersData, ind) => {
+          if (signersData.Id === props.Id) {
+            return {
+              ...signersData,
+              placeHolder: newPlaceholderPosition
+            };
+          }
+          return signersData;
+        });
+      }
       // const updatedSignerPlaceholder = signerPosition.map(
       //   (signersData, ind) => {
       //     if (signersData.signerObjId === props.signerObjId) {
@@ -166,7 +164,7 @@ function PlaceholderCopy(props) {
       for (let i = 0; i < props.allPages; i++) {
         //get exist placeholder position for particular page
         const existPlaceholder = xyPostion.filter(
-          (data) => data.pageNumber == newPageNumber
+          (data) => data.pageNumber === newPageNumber
         );
         const existPlaceholderPosition =
           existPlaceholder[0] && existPlaceholder[0].pos;