From 8308376f531758e85f8605b4bb741b9b592a9879 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 21 Feb 2024 15:22:17 +0530 Subject: [PATCH] fix: date widgets issue after place change all widgets details which are already placed --- .../src/Component/SignYourselfPdf.js | 29 --- .../Component/WidgetComponent/allWidgets.js | 2 +- .../WidgetComponent/placeholderType.js | 2 +- .../src/Component/component/header.js | 2 +- .../src/Component/component/renderPdf.js | 2 + .../src/Component/placeHolderSign.js | 175 +++++++----------- .../SignDocuments/src/utils/Utils.js | 10 +- 7 files changed, 73 insertions(+), 149 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 0279cfd1b..a51ff82b7 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -128,32 +128,6 @@ function SignYourSelf() { }) }); - const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({ - type: "BOX", - - item: { - type: "BOX", - id: 3, - text: "drag me" - }, - collect: (monitor) => ({ - isDragSignatureSS: !!monitor.isDragging() - }) - }); - - const [, dragStampSS] = useDrag({ - type: "BOX", - item: { - type: "BOX", - id: 4, - text: "drag me" - }, - - collect: (monitor) => ({ - isDragStampSS: !!monitor.isDragging() - }) - }); - const index = xyPostion.findIndex((object) => { return object.pageNumber === pageNumber; }); @@ -1046,9 +1020,6 @@ function SignYourSelf() { dragStamp={dragStamp} dragRef={dragRef} isDragStamp={isDragStamp} - isDragSignatureSS={isDragSignatureSS} - dragSignatureSS={dragSignatureSS} - dragStampSS={dragStampSS} handleAllDelete={handleAllDelete} xyPostion={xyPostion} isSignYourself={true} diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js index b4ae8cf59..92df47aac 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js @@ -1,4 +1,4 @@ -import React, { useRef, useState } from "react"; +import React from "react"; import { getWidgetType } from "../../utils/Utils"; function AllWidgets(props) { diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index 298a2b72a..5165c381f 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -402,7 +402,7 @@ function PlaceholderType(props) { tabIndex="0" ref={inputRef} placeholder={"name"} - style={{ fontSize: calculateFontSize() }} + style={{ fontSize: calculateFontSize(), textAlign: "center" }} className="inputPlaceholder" type="text" value={ diff --git a/microfrontends/SignDocuments/src/Component/component/header.js b/microfrontends/SignDocuments/src/Component/component/header.js index 1e282dc6b..b7a38659b 100644 --- a/microfrontends/SignDocuments/src/Component/component/header.js +++ b/microfrontends/SignDocuments/src/Component/component/header.js @@ -39,7 +39,7 @@ function Header({ setIsEditTemplate }) { const filterPrefill = - signerPos && signerPos.filter((data) => data.Role !== "prefill"); + signerPos && signerPos?.filter((data) => data.Role !== "prefill"); const isMobile = window.innerWidth < 767; const navigate = useNavigate(); const isGuestSigner = localStorage.getItem("isGuestSigner"); diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 45cb2ff75..35774c8cb 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -495,6 +495,8 @@ function RenderPdf({ > {pdfLoadFail.status && + signerPos && + signerPos.length > 0 && (pdfRequest ? signerPos.map((data, key) => { return ( diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 47932e2ca..2b648ebbb 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -151,30 +151,6 @@ function PlaceHolderSign() { }) }); - const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({ - type: "BOX", - item: { - id: 3, - text: "signature" - }, - - collect: (monitor) => ({ - isDragSignatureSS: !!monitor.isDragging() - }) - }); - - const [, dragStampSS] = useDrag({ - type: "BOX", - item: { - id: 4, - text: "stamp" - }, - - collect: (monitor) => ({ - isDragStampSS: !!monitor.isDragging() - }) - }); - const rowLevel = localStorage.getItem("rowlevel") && JSON.parse(localStorage.getItem("rowlevel")); @@ -282,6 +258,7 @@ function PlaceHolderSign() { blockColor: x.blockColor }; }); + setSignerPos(documentData[0].Placeholders); setSignersData(updatedSigners); setIsSelectId(0); @@ -362,6 +339,7 @@ function PlaceHolderSign() { let dropData = []; let placeHolder; const dragTypeValue = item?.text ? item.text : monitor.type; + if (item === "onclick") { const dropObj = { //onclick put placeholder center on pdf @@ -411,7 +389,7 @@ function PlaceHolderSign() { scale: scale, isMobile: isMobile, zIndex: posZIndex, - type: item.text, + type: dragTypeValue, widgetValue: dragTypeValue === "checkbox" ? false @@ -428,10 +406,16 @@ function PlaceHolderSign() { } setSelectWidgetId(key); - if (signer && dragTypeValue !== "label") { - let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); + if (signer) { + let filterSignerPos; + if (dragTypeValue === "label") { + filterSignerPos = signerPos.filter((data) => data.Role === "prefill"); + } else { + filterSignerPos = signerPos.filter((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; @@ -451,50 +435,73 @@ function PlaceHolderSign() { pos: newSignPos }; updatePlace.push(xyPos); - const updatesignerPos = signerPos.map((x) => - x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x - ); + let updatesignerPos; + if (dragTypeValue === "label") { + 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 { - const updatesignerPos = signerPos.map((x) => - x.Id === uniqueId - ? { ...x, placeHolder: [...x.placeHolder, placeHolder] } - : x - ); + let updatesignerPos; + if (dragTypeValue === "label") { + 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) // const signerData = signerPos; 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 { + if (dragTypeValue === "label") { placeHolderPos = { signerPtr: {}, signerObjId: "", - blockColor: blockColor ? blockColor : color[isSelectListId], + blockColor: "#f58f8c", placeHolder: [placeHolder], - Role: Role ? Role : roleName, - Id: uniqueId + Role: "prefill", + Id: key }; + } 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 + }; + } } - - // signerData.push(placeHolderPos); - console.log("signersddata", placeHolderPos); - // setSignerPos(signerData); setSignerPos((prev) => [...prev, placeHolderPos]); } if (dragTypeValue === "dropdown") { @@ -506,55 +513,6 @@ function PlaceHolderSign() { } setWidgetType(dragTypeValue); setSignKey(key); - } else if (dragTypeValue === "label") { - console.log("go here"); - let filterSignerPos = signerPos.filter( - (data) => data.Role === "prefill" - ); - - if (filterSignerPos.length > 0) { - const getPlaceHolder = filterSignerPos[0].placeHolder; - 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); - const updatesignerPos = signerPos.map((x) => - x.Role === "prefill" ? { ...x, placeHolder: updatePlace } : x - ); - setSignerPos(updatesignerPos); - } else { - const updatesignerPos = signerPos.map((x) => - x.Role === "prefill" - ? { ...x, placeHolder: [...x.placeHolder, placeHolder] } - : x - ); - setSignerPos(updatesignerPos); - } - } else { - let placeHolderPos; - placeHolderPos = { - signerPtr: {}, - signerObjId: "", - blockColor: "#f58f8c", - placeHolder: [placeHolder], - Role: "prefill", - Id: key - }; - setSignerPos((prev) => [...prev, placeHolderPos]); - } - setSignKey(key); } } }; @@ -578,7 +536,6 @@ function PlaceHolderSign() { setIsDragging(true); }; - console.log("signerpos", signerPos); //function for set and update x and y postion after drag and drop signature tab const handleStop = (event, dragElement, signerId, key) => { console.log("handle stop"); @@ -690,7 +647,7 @@ function PlaceHolderSign() { } return obj; }); - + console.log("signerpos3"); setSignerPos(newUpdateSigner); } else { const updateFilter = signerPos.filter((data) => data.Id !== Id); @@ -1150,6 +1107,7 @@ function PlaceHolderSign() { } return { ...x }; }); + setSignerPos(updatePlaceHolder); const updateSigner = signersdata.map((x) => { @@ -1587,9 +1545,6 @@ function PlaceHolderSign() { dragRef={dragRef} isDragStamp={isDragStamp} isSignYourself={false} - isDragSignatureSS={isDragSignatureSS} - dragSignatureSS={dragSignatureSS} - dragStampSS={dragStampSS} addPositionOfSignature={addPositionOfSignature} signerPos={signerPos} signersdata={signersdata} diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 9a02e3c6e..37a20258b 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -94,8 +94,6 @@ export const onChangeInput = ( if (isSigners) { if (userId) { filterSignerPos = xyPostion.filter((data) => data.Id === userId); - } else { - filterSignerPos = xyPostion.filter((data) => data.Role === "prefill"); } const getPlaceHolder = filterSignerPos[0]?.placeHolder; @@ -129,17 +127,15 @@ export const onChangeInput = ( return url; }); - const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + const newUpdateSignPos = getPlaceHolder.map((obj) => { if (obj.pageNumber === index) { return { ...obj, pos: addSignPos }; } return obj; }); - const newUpdateSigner = xyPostion.map((obj, ind) => { - if (obj.Role === "prefill") { - return { ...obj, placeHolder: newUpdateSignPos }; - } else if (obj.Id === userId) { + const newUpdateSigner = xyPostion.map((obj) => { + if (obj.Id === userId) { return { ...obj, placeHolder: newUpdateSignPos }; } return obj;