Merge pull request #534 from OpenSignLabs/widget_copy

feat: implement feature of copy widget to next of that widget for any widgets except `signature,text,stamp,initial` widgets.

Author: prafull-opensignlabs

apps/OpenSign/src/components/pdf/Placeholder.js

@@ -4,6 +4,7 @@ import PlaceholderBorder from "./PlaceholderBorder";
 import { Rnd } from "react-rnd";
 import {
   defaultWidthHeight,
+  handleCopyNextToWidget,
   isMobile,
   onChangeInput,
   radioButtonWidget,
@@ -302,8 +303,14 @@ function Placeholder(props) {
     props.setWidgetType(props.pos.type);
     props.setCurrWidgetsDetails(props.pos);
   };
-  //function ro set state value of onclick on widget's copy icon
+  //function to set required state value onclick on widget's copy icon
   const handleCopyPlaceholder = (e) => {
+    e.stopPropagation();
+    //condition to handle text widget signer obj id and unique id
+    //when user click on copy icon of text widget in that condition text widget does not have any signerObjId
+    //in that case i have to save in tempSignerId as a unique id of previous select signer's unique id
+    //and on save or cancel button of copy all page popup i have set this temp signer Id in unique id
+
     if (props.data && props?.pos?.type !== textWidget) {
       props.setSignerObjId(props?.data?.signerObjId);
       props.setUniqueId(props?.data?.Id);
@@ -312,9 +319,24 @@ function Placeholder(props) {
       props.setSignerObjId(props?.data?.signerObjId);
       props.setUniqueId(props?.data?.Id);
     }
-    e.stopPropagation();
-    props.setIsPageCopy(true);
-    props.setSignKey(props.pos.key);
+
+    //checking widget's type and open widget copy modal for required widgets
+    if (
+      ["signature", textWidget, "stamp", "initial"].includes(props.pos.type)
+    ) {
+      props.setIsPageCopy(true);
+      props.setSignKey(props.pos.key);
+    } else {
+      //function to create new widget next to just widget
+      handleCopyNextToWidget(
+        props.pos,
+        props.pos.type,
+        props.xyPostion,
+        props.index,
+        props.setXyPostion,
+        props.data && props.data?.Id
+      );
+    }
   };
 
   //function to save date and format on local array onchange date and onclick format

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -353,7 +353,7 @@ function PlaceholderType(props) {
               <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
                   style={{
-                    width: props.pos.Width,
+                    // width: props.pos.Width,
                     display: "flex",
                     justifyContent: "center",
                     marginTop: ind === 0 ? 0 : "5px"

apps/OpenSign/src/constant/Utils.js

@@ -1255,13 +1255,14 @@ export const multiSignEmbed = async (
         "email"
       ].includes(position.type);
       if (position.type === "checkbox") {
-        let addYPosition, isCheck;
+        let addYPosition = 0,
+          isCheck;
 
         if (position?.options?.values.length > 0) {
           position?.options?.values.forEach((item, ind) => {
             const checkboxRandomId = "checkbox" + randomId();
             let yPosition;
-            const height = 10;
+            const height = 13;
             if (
               position?.options?.response &&
               position?.options?.response?.length > 0
@@ -1282,14 +1283,14 @@ export const multiSignEmbed = async (
             if (!position?.options?.isHideLabel) {
               // below line of code is used to embed label with radio button in pdf
               page.drawText(item, {
-                x: xPos(position) + 15,
+                x: xPos(position) + 17,
                 y: yPosition + 2,
                 size: height
               });
             }
             checkbox.addToPage(page, {
               x: xPos(position),
-              y: yPosition,
+              y: yPosition - 3,
               width: height,
               height: height
             });
@@ -1702,3 +1703,66 @@ export const getYear = (date) => {
   const newYear = new Date(date).getFullYear();
   return newYear;
 };
+
+//function to create/copy widget next to already dropped widget
+export const handleCopyNextToWidget = (
+  position,
+  widgetType,
+  xyPostion,
+  index,
+  setXyPostion,
+  userId
+) => {
+  const isSigners = xyPostion.some((data) => data.signerPtr);
+  let filterSignerPos;
+  //get position of previous widget and create new widget next to that widget on same data except
+  // xPosition and key
+  let newpos = position;
+  const calculateXPosition =
+    parseInt(position.xPosition) +
+    defaultWidthHeight(widgetType).width +
+    resizeBorderExtraWidth();
+  const newId = randomId();
+  newpos = { ...newpos, xPosition: calculateXPosition, key: newId };
+  //if condition to create widget in request-sign flow
+  if (isSigners) {
+    if (userId) {
+      filterSignerPos = xyPostion.filter((data) => data.Id === userId);
+    }
+    const getPlaceHolder = filterSignerPos[0]?.placeHolder;
+    const getPageNumer = getPlaceHolder.filter(
+      (data) => data.pageNumber === index
+    );
+    const getXYdata = getPageNumer[0].pos;
+    getXYdata.push(newpos);
+    if (getPageNumer.length > 0) {
+      const newUpdateSignPos = getPlaceHolder.map((obj) => {
+        if (obj.pageNumber === index) {
+          return { ...obj, pos: getXYdata };
+        }
+        return obj;
+      });
+
+      const newUpdateSigner = xyPostion.map((obj) => {
+        if (obj.Id === userId) {
+          return { ...obj, placeHolder: newUpdateSignPos };
+        }
+        return obj;
+      });
+
+      setXyPostion(newUpdateSigner);
+    }
+  } else {
+    // else condition to create widget in sign-yourself flow
+    let getXYdata = xyPostion[index].pos;
+    getXYdata.push(newpos);
+    const updatePlaceholder = xyPostion.map((obj, ind) => {
+      if (ind === index) {
+        return { ...obj, pos: getXYdata };
+      }
+      return obj;
+    });
+
+    setXyPostion(updatePlaceholder);
+  }
+};