From 92d3a851472f8a3197b9407585694b0a3d7acad5 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Thu, 28 Dec 2023 17:30:08 +0530 Subject: [PATCH 1/2] fix: placeholder resize issue in mobile view --- .../Component/component/placeholderBorder.js | 8 +- .../src/Component/component/renderPdf.js | 320 ++++++++++-------- .../SignDocuments/src/utils/Utils.js | 163 +++++---- 3 files changed, 268 insertions(+), 223 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js b/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js index 146fa7a73..b387d929d 100644 --- a/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js +++ b/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js @@ -16,8 +16,12 @@ function PlaceholderBorder(props) { // height: props.pos.Height // ? props.pos.Height + getResizeBorderExtraWidth // : 60 + getResizeBorderExtraWidth, - width: props?.posWidth(props.pos) + getResizeBorderExtraWidth, - height: props?.posHeight(props.pos) + getResizeBorderExtraWidth, + width: + props?.posWidth(props.pos, props?.isSignYourself) + + getResizeBorderExtraWidth, + height: + props?.posHeight(props.pos, props?.isSignYourself) + + getResizeBorderExtraWidth, borderWidth: "0.2px", overflow: "hidden" }} diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 086cfc377..43c95d53e 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -63,116 +63,134 @@ function RenderPdf({ const isGuestSigner = localStorage.getItem("isGuestSigner"); // handle signature block width and height according to screen - const posWidth = (pos) => { + const posWidth = (pos, signYourself) => { const defaultWidth = 150; const posWidth = pos.Width ? pos.Width : defaultWidth; let width; - if (isMobile) { - if (!pos.isMobile) { - if (pos.IsResize) { - width = posWidth ? posWidth : defaultWidth; - return width; - } else { - width = (posWidth || defaultWidth) / scale; - return width; - } - } else { - width = posWidth ? posWidth : defaultWidth; - return width; - } + if (signYourself) { + width = posWidth; + return width; } else { - if (pos.isMobile) { - if (pos.IsResize) { - width = posWidth ? posWidth : defaultWidth; - return width; + if (isMobile) { + if (!pos.isMobile) { + if (pos.IsResize) { + width = posWidth ? posWidth : defaultWidth; + return width; + } else { + width = (posWidth || defaultWidth) / scale; + return width; + } } else { - width = (posWidth || defaultWidth) * pos.scale; + width = posWidth; return width; } } else { - width = posWidth ? posWidth : defaultWidth; - return width; + if (pos.isMobile) { + if (pos.IsResize) { + width = posWidth ? posWidth : defaultWidth; + return width; + } else { + width = (posWidth || defaultWidth) * pos.scale; + return width; + } + } else { + width = posWidth ? posWidth : defaultWidth; + return width; + } } } }; - const posHeight = (pos) => { + const posHeight = (pos, signYourself) => { let height; const posHeight = pos.Height; const defaultHeight = 60; - if (isMobile) { - if (!pos.isMobile) { - if (pos.IsResize) { - height = posHeight ? posHeight : defaultHeight; - return height; - } else { - height = (posHeight || defaultHeight) / scale; - return height; - } - } else { - height = posHeight ? posHeight : defaultHeight; - return height; - } + if (signYourself) { + height = posHeight ? posHeight : defaultHeight; + return height; } else { - if (pos.isMobile) { - if (pos.IsResize) { - height = posHeight ? posHeight : defaultHeight; - return height; + if (isMobile) { + if (!pos.isMobile) { + if (pos.IsResize) { + height = posHeight ? posHeight : defaultHeight; + return height; + } else { + height = (posHeight || defaultHeight) / scale; + return height; + } } else { - height = (posHeight || defaultHeight) * pos.scale; + height = posHeight ? posHeight : defaultHeight; return height; } } else { - height = posHeight ? posHeight : defaultHeight; - return height; + if (pos.isMobile) { + if (pos.IsResize) { + height = posHeight ? posHeight : defaultHeight; + return height; + } else { + height = (posHeight || defaultHeight) * pos.scale; + return height; + } + } else { + height = posHeight ? posHeight : defaultHeight; + return height; + } } } }; - const xPos = (pos) => { + const xPos = (pos, signYourself) => { const resizePos = pos.xPosition; - //checking both condition mobile and desktop view - if (isMobile) { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (!pos.isMobile) { - return resizePos / scale; - } - //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale - else { - return resizePos * (pos.scale / scale); - } + if (signYourself) { + return resizePos; } else { - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (!pos.isMobile) { + return resizePos / scale; + } + //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale + else { + return resizePos * (pos.scale / scale); + } + } else { + //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - if (pos.isMobile) { - return pos.scale && resizePos * pos.scale; - } - //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) - else { - return resizePos; + if (pos.isMobile) { + return pos.scale && resizePos * pos.scale; + } + //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) + else { + return resizePos; + } } } }; - const yPos = (pos) => { + const yPos = (pos, signYourself) => { const resizePos = pos.yPosition; - //checking both condition mobile and desktop view - if (isMobile) { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (!pos.isMobile) { - return resizePos / scale; - } - //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale - else { - return resizePos * (pos.scale / scale); - } + if (signYourself) { + return resizePos; } else { - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (!pos.isMobile) { + return resizePos / scale; + } + //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale + else { + return resizePos * (pos.scale / scale); + } + } else { + //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - if (pos.isMobile) { - return pos.scale && resizePos * pos.scale; - } - //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) - else { - return resizePos; + if (pos.isMobile) { + return pos.scale && resizePos * pos.scale; + } + //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) + else { + return resizePos; + } } } }; @@ -225,11 +243,19 @@ function RenderPdf({ width: posWidth(pos), height: posHeight(pos) }} + onClick={() => { + if (data.signerObjId === signerObjectId) { + setIsSignPad(true); + setSignKey(pos.key); + setIsStamp(pos.isStamp); + } + }} onResize={(e, direction, ref, delta, position) => { + e.stopPropagation(); handleImageResize( ref, pos.key, - data.signerObjId, + data.Id, position, signerPos, pageNumber, @@ -246,13 +272,6 @@ function RenderPdf({ x: xPos(pos), y: yPos(pos) }} - onClick={() => { - if (data.signerObjId === signerObjectId) { - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - } - }} >
{data.signerObjId === signerObjectId && ( @@ -366,7 +385,9 @@ function RenderPdf({ (sign) => sign.objectId === signerId ); if (checkSign.length > 0) { - return

{checkSign[0].Name}

; + return ( +

{checkSign[0].Name}

+ ); } else { return

{Role}

; } @@ -450,8 +471,6 @@ function RenderPdf({ lockAspectRatio={ pos.Width ? pos.Width / pos.Height : 2.5 } - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale default={{ x: xPos(pos), y: yPos(pos) @@ -520,6 +539,7 @@ function RenderPdf({ placeData.pos.map((pos) => { return ( - +
{ const dataNewPlace = addZIndex( @@ -618,21 +642,21 @@ function RenderPdf({ }} > { - e.stopPropagation(); - handleLinkUser(data.Id); - setUniqueId(data.Id); - }} - onClick={(e) => { - e.stopPropagation(); - handleLinkUser(data.Id); - setUniqueId(data.Id); - }} - style={{ - color: "#188ae2" - }} - > + className="fa-regular fa-user signUserIcon" + onTouchEnd={(e) => { + e.stopPropagation(); + handleLinkUser(data.Id); + setUniqueId(data.Id); + }} + onClick={(e) => { + e.stopPropagation(); + handleLinkUser(data.Id); + setUniqueId(data.Id); + }} + style={{ + color: "#188ae2" + }} + > { @@ -640,14 +664,14 @@ function RenderPdf({ setIsPageCopy(true); setSignKey(pos.key); setSignerObjId(data.signerObjId); - setUniqueId(data.Id) + setUniqueId(data.Id); }} onClick={(e) => { e.stopPropagation(); setIsPageCopy(true); setSignKey(pos.key); setSignerObjId(data.signerObjId); - setUniqueId(data.Id) + setUniqueId(data.Id); }} style={{ color: "#188ae2" @@ -735,12 +759,12 @@ function RenderPdf({ background: "#daebe0" }} size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 + width: posWidth(pos, true), + height: posHeight(pos, true) }} default={{ - x: pos.xPosition, - y: pos.yPosition + x: xPos(pos, true), + y: yPos(pos, true) }} onDrag={() => handleTabDrag(pos.key)} onDragStop={handleStop} @@ -775,7 +799,12 @@ function RenderPdf({ }} > - +
{ if (!isDragging && isMobile) { @@ -1085,8 +1114,8 @@ function RenderPdf({ className="signYourselfBlock" onDrag={() => handleTabDrag(pos.key)} size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 + width: posWidth(pos), + height: posHeight(pos) }} lockAspectRatio={ pos.Width @@ -1095,17 +1124,21 @@ function RenderPdf({ } onDragStop={ (event, dragElement) => - handleStop( - event, - dragElement, - data.Id, - pos.key - ) - // data.signerObjId, + handleStop( + event, + dragElement, + data.Id, + pos.key + ) + // data.signerObjId, } + // default={{ + // x: pos.xPosition, + // y: pos.yPosition + // }} default={{ - x: pos.xPosition, - y: pos.yPosition + x: xPos(pos), + y: yPos(pos) }} onResizeStart={() => { setIsResize(true); @@ -1120,11 +1153,11 @@ function RenderPdf({ delta, position ) => { - e.stopPropagation() + e.stopPropagation(); handleImageResize( ref, pos.key, - data.Id,//data.signerObjId, + data.Id, //data.signerObjId, position, signerPos, pageNumber, @@ -1136,9 +1169,13 @@ function RenderPdf({ }} > - +
- { e.stopPropagation(); @@ -1146,7 +1183,7 @@ function RenderPdf({ setUniqueId(data.Id); }} style={{ - color: "#188ae2" + color: "#188ae2" }} > { + if (!isDragging) { + setIsSignPad(true); + setSignKey(pos.key); + setIsStamp(pos.isStamp); + } + }} onResize={( e, direction, @@ -1252,6 +1296,7 @@ function RenderPdf({ delta, position ) => { + e.stopPropagation(); handleSignYourselfImageResize( ref, pos.key, @@ -1264,16 +1309,13 @@ function RenderPdf({ containerWH ); }} - onClick={() => { - if (!isDragging) { - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - } - }} > - + ) diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 051ee44a1..fab57658f 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -673,92 +673,91 @@ export const handleImageResize = ( // (data) => data.signerObjId === signerId // ); - const filterSignerPos = signerPos.filter( - (data) => data.Id === signerId - ); + const filterSignerPos = signerPos.filter((data) => data.Id === signerId); + if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; const getPageNumer = getPlaceHolder.filter( (data) => data.pageNumber === pageNumber ); if (getPageNumer.length > 0) { - const getXYdata = getPageNumer[0].pos.filter( - (data, ind) => data.key === key && data.Width && data.Height - ); - if (getXYdata.length > 0) { - const getXYdata = getPageNumer[0].pos; - const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { - if (url.key === key) { - return { - ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight, - IsResize: showResize ? true : false - }; - } - return url; - }); + // const getXYdata = getPageNumer[0].pos.filter( + // (data, ind) => data.key === key && data.Width && data.Height + // ); + // if (getXYdata.length > 0) { + // const getXYdata = getPageNumer[0].pos; + // const getPosData = getXYdata; + // const addSignPos = getPosData.map((url, ind) => { + // if (url.key === key) { + // return { + // ...url, + // Width: ref.offsetWidth, + // Height: ref.offsetHeight, + // IsResize: showResize ? true : false + // }; + // } + // return url; + // }); - const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { - if (obj.pageNumber === pageNumber) { - return { ...obj, pos: addSignPos }; - } - return obj; - }); + // const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + // if (obj.pageNumber === pageNumber) { + // return { ...obj, pos: addSignPos }; + // } + // return obj; + // }); - // const newUpdateSigner = signerPos.map((obj, ind) => { - // if (obj.signerObjId === signerId) { - // return { ...obj, placeHolder: newUpdateSignPos }; - // } - // return obj; - // }); + // // const newUpdateSigner = signerPos.map((obj, ind) => { + // // if (obj.signerObjId === signerId) { + // // return { ...obj, placeHolder: newUpdateSignPos }; + // // } + // // return obj; + // // }); - const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.Id === signerId) { - return { ...obj, placeHolder: newUpdateSignPos }; - } - return obj; - }); - setSignerPos(newUpdateSigner); - } else { - const getXYdata = getPageNumer[0].pos; - const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { - if (url.key === key) { - return { - ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight, - IsResize: showResize ? true : false - }; - } - return url; - }); + // const newUpdateSigner = signerPos.map((obj, ind) => { + // if (obj.Id === signerId) { + // return { ...obj, placeHolder: newUpdateSignPos }; + // } + // return obj; + // }); + // setSignerPos(newUpdateSigner); + // } else { + const getXYdata = getPageNumer[0].pos; + const getPosData = getXYdata; + const addSignPos = getPosData.map((url, ind) => { + if (url.key === key) { + return { + ...url, + Width: ref.offsetWidth, + Height: ref.offsetHeight, + IsResize: showResize ? true : false + }; + } + return url; + }); - const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { - if (obj.pageNumber === pageNumber) { - return { ...obj, pos: addSignPos }; - } - return obj; - }); + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); - // const newUpdateSigner = signerPos.map((obj, ind) => { - // if (obj.signerObjId === signerId) { - // return { ...obj, placeHolder: newUpdateSignPos }; - // } - // return obj; - // }); - const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.Id === signerId) { - return { ...obj, placeHolder: newUpdateSignPos }; - } - return obj; - }); + // const newUpdateSigner = signerPos.map((obj, ind) => { + // if (obj.signerObjId === signerId) { + // return { ...obj, placeHolder: newUpdateSignPos }; + // } + // return obj; + // }); + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.Id === signerId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); - setSignerPos(newUpdateSigner); - } + setSignerPos(newUpdateSigner); } + // } } }; @@ -987,20 +986,20 @@ export const createDocument = async (template, placeholders, signerData) => { if (template && template.length > 0) { const Doc = template[0]; - let placeholdersArr = [] - if(placeholders?.length > 0 ){ - placeholdersArr= placeholders + let placeholdersArr = []; + if (placeholders?.length > 0) { + placeholdersArr = placeholders; } - let signers = [] - if(signerData?.length > 0){ - signerData.forEach((x) => { - if(x.objectId){ - const obj = { + let signers = []; + if (signerData?.length > 0) { + signerData.forEach((x) => { + if (x.objectId) { + const obj = { __type: "Pointer", className: "contracts_Contactbook", objectId: x.objectId }; - signers.push(obj) + signers.push(obj); } }); } From e82384dff88b26f4e2ef7cbbbec870cf29b9452d Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Thu, 28 Dec 2023 19:36:06 +0530 Subject: [PATCH 2/2] fix: signyourself flow, add validtion in template flow, change UI recipientlist in mobile view --- .../src/Component/TemplatePlaceholder.js | 30 +-- .../Component/component/fieldsComponent.js | 168 ++++-------- .../src/Component/component/header.js | 2 +- .../src/Component/component/renderPdf.js | 85 +++--- .../Component/component/signerListPlace.js | 252 +----------------- .../src/premitives/RecipientList.js | 205 ++++++++++++++ .../src/premitives/SelectSigners.js | 2 +- .../SignDocuments/src/utils/Utils.js | 26 ++ 8 files changed, 343 insertions(+), 427 deletions(-) create mode 100644 microfrontends/SignDocuments/src/premitives/RecipientList.js diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 2eb0e8cf7..13cc69416 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -327,21 +327,13 @@ const TemplatePlaceholder = () => { //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { - if (isMobile) { - if (selectedEmail) { getSignerPos(item, monitor); - } else { - setIsShowEmail(true); - } - } else { - getSignerPos(item, monitor); - } }; // `getSignerPos` is used to get placeholder position when user place it and save it in array const getSignerPos = (item, monitor) => { - const singer = signersdata.find((x) => x.Id === uniqueId); - if (singer) { + const signer = signersdata.find((x) => x.Id === uniqueId); + if (signer) { const posZIndex = zIndex + 1; setZIndex(posZIndex); const newWidth = containerWH.width; @@ -709,8 +701,7 @@ const TemplatePlaceholder = () => { } }; const handleSaveTemplate = async () => { - const singer = signersdata.find((x) => x.Id === uniqueId); - if (singer) { + if (signersdata?.length) { const loadObj = { isLoad: true, message: "This might take some time" @@ -899,12 +890,14 @@ const TemplatePlaceholder = () => { const updatePlaceholderUser = signerPos .filter((x) => x.Id !== Id) .map((x, i) => ({ ...x, blockColor: color[i] })); - // console.log("removePlaceholderUser ", removePlaceholderUser) - const index = signersdata.findIndex((x)=> x.Id === Id) - setUniqueId(updateSigner[index]?.Id ||""); - // setIsSelectId(index === -1 ? 0: index); - setIsSelectId(0); + if(index === signersdata.length - 1){ + setUniqueId(updateSigner[updateSigner.length - 1]?.Id ||""); + setIsSelectId(0); + }else{ + setUniqueId(updateSigner[index]?.Id ||""); + setIsSelectId(index); + } setSignerPos(updatePlaceholderUser); setIsMailSend(false); @@ -1205,6 +1198,9 @@ const TemplatePlaceholder = () => { handleAddSigner={handleAddSigner} setUniqueId={setUniqueId} setRoleName={setRoleName} + handleDeleteUser={handleDeleteUser} + handleRoleChange={handleRoleChange} + handleOnBlur={handleOnBlur} />
) : ( diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index d785ad886..b3cb187bc 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -1,6 +1,6 @@ -import React from "react"; -import * as Select from "@radix-ui/react-select"; -import classnames from "classnames"; +import React, { useState } from "react"; +import ModalUi from "../../premitives/ModalUi"; +import RecipientList from "../../premitives/RecipientList"; function FieldsComponent({ pdfUrl, @@ -28,33 +28,20 @@ function FieldsComponent({ isSigners, dataTut, dataTut2, - setIsShowEmail, isMailSend, - selectedEmail, - setSelectedEmail, handleAddSigner, setUniqueId, - setRoleName + setRoleName, + handleDeleteUser, + signerPos, + handleRoleChange, + handleOnBlur }) { + const [isSignersModal, setIsSignersModal] = useState(false); const signStyle = pdfUrl ? "disableSign" : "signatureBtn"; const isMobile = window.innerWidth < 767; - const SelectItem = React.forwardRef( - ({ children, className, ...props }, forwardedRef) => { - return ( - - {children} - - - ); - } - ); - const color = [ "#93a3db", "#e6c3db", @@ -70,6 +57,9 @@ function FieldsComponent({ "#ffffcc" ]; + const handleModal = () => { + setIsSignersModal(!isSignersModal); + }; return ( <> {isMobile && isSignYourself ? ( @@ -92,97 +82,24 @@ function FieldsComponent({ alignItems: "center", justifyContent: "center" }} + onClick={() => { + if (signersdata?.length) { + handleModal(); + } + }} > - Signer : + Recipient + + + {signersdata[isSelectListId]?.Role && ( +
+ {signersdata[isSelectListId]?.Name + ? ` : ${signersdata[isSelectListId]?.Name}` + : ` : ${signersdata[isSelectListId]?.Role}`} +
+ )} - - { - const [selectedKey, selectedData] = obj.split("|"); - const parseData = JSON.parse(selectedData); - - setSignerObjId(parseData.objectId); - setIsSelectId(selectedKey); - setContractName(parseData.className); - setSelectedEmail(true); - setUniqueId(parseData.Id); - setRoleName(parseData.Role); - }} - > - - - {!selectedEmail && ( - - - - )} - - - - - - - - - {signersdata.map((obj, ind) => { - return ( - - {obj.Email ? obj.Email : obj.Role } - - ); - })} - - - - - - - -
)} {handleAddSigner && ( @@ -206,17 +123,7 @@ function FieldsComponent({ style={{ backgroundColor: themeColor() }} >
{ - if (isSigners) { - if (selectedEmail) { - addPositionOfSignature("onclick", false); - } else { - setIsShowEmail(true); - } - } else { - addPositionOfSignature("onclick", false); - } - }} + onClick={() => addPositionOfSignature("onclick", false)} ref={(element) => { dragSignatureSS(element); if (element) { @@ -426,6 +333,25 @@ function FieldsComponent({
)} + + + ); } diff --git a/microfrontends/SignDocuments/src/Component/component/header.js b/microfrontends/SignDocuments/src/Component/component/header.js index cdf13b65f..b92dfff72 100644 --- a/microfrontends/SignDocuments/src/Component/component/header.js +++ b/microfrontends/SignDocuments/src/Component/component/header.js @@ -540,7 +540,7 @@ function Header({
{signerPos.length === 0 ? ( - Add all {signersdata.length - signerPos.length}{" "} + Add {signersdata.length - signerPos.length}{" "} recipients signature ) : ( diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 43c95d53e..808e12c9b 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -386,13 +386,18 @@ function RenderPdf({ ); if (checkSign.length > 0) { return ( -

{checkSign[0].Name}

+ <> +
+ {checkSign[0].Name} +
+
{`(${Role})`}
+ ); } else { - return

{Role}

; + return
{Role}
; } } else { - return

{Role}

; + return
{Role}
; } }; return ( @@ -455,13 +460,9 @@ function RenderPdf({ handleSignYourselfImageResize( ref, pos.key, - direction, - position, xyPostion, index, - setXyPostion, - pdfOriginalWidth, - containerWH + setXyPostion ); }} size={{ @@ -506,7 +507,11 @@ function RenderPdf({ marginTop: "0px" }} > - {pos.isStamp ? "stamp" : "signature"} + {pos.isStamp ? ( +
stamp
+ ) : ( +
signature
+ )} {handleUserName( data.signerObjId, data.Role @@ -708,9 +713,11 @@ function RenderPdf({ marginTop: "0px" }} > - {pos.isStamp - ? "stamp" - : "signature"} + {pos.isStamp ? ( +
stamp
+ ) : ( +
signature
+ )} {handleUserName( data.signerObjId, data.Role @@ -778,25 +785,12 @@ function RenderPdf({ handleSignYourselfImageResize( ref, pos.key, - direction, - position, xyPostion, index, - setXyPostion, - pdfOriginalWidth, - containerWH + setXyPostion + ); }} - onTouchEnd={(e) => { - if (!isDragging && isMobile) { - setTimeout(() => { - e.stopPropagation(); - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - }, 500); - } - }} >
{ if (!isDragging && isMobile) { setTimeout(() => { @@ -868,10 +869,6 @@ function RenderPdf({ }} > {pos.isStamp ? "stamp" : "signature"} - {handleUserName( - data.signerObjId, - data.Role - )}
)}
@@ -979,13 +976,9 @@ function RenderPdf({ handleSignYourselfImageResize( ref, pos.key, - direction, - position, xyPostion, index, - setXyPostion, - pdfOriginalWidth, - containerWH + setXyPostion ); }} key={pos.key} @@ -1044,7 +1037,11 @@ function RenderPdf({ marginTop: "0px" }} > - {pos.isStamp ? "stamp" : "signature"} + {pos.isStamp ? ( +
stamp
+ ) : ( +
signature
+ )} {handleUserName( data.signerObjId, data.Role @@ -1223,9 +1220,11 @@ function RenderPdf({ justifyContent: "center" }} > - {pos.isStamp - ? "stamp" - : "signature"} + {pos.isStamp ? ( +
stamp
+ ) : ( +
signature
+ )} {handleUserName( data.signerObjId, data.Role @@ -1300,13 +1299,9 @@ function RenderPdf({ handleSignYourselfImageResize( ref, pos.key, - direction, - position, xyPostion, index, - setXyPostion, - pdfOriginalWidth, - containerWH + setXyPostion ); }} > diff --git a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js index 85b44237c..9a4c56b08 100644 --- a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js +++ b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js @@ -1,106 +1,9 @@ -import React, { useRef, useState } from "react"; +import React from "react"; import { themeColor } from "../../utils/ThemeColor/backColor"; import "../../css/signerListPlace.css"; +import RecipientList from "../../premitives/RecipientList"; -function SignerListPlace({ - signerPos, - signersdata, - isSelectListId, - setSignerObjId, - setIsSelectId, - setContractName, - handleAddSigner, - setUniqueId, - setRoleName, - handleDeleteUser, - handleRoleChange, - handleOnBlur -}) { - const color = [ - "#93a3db", - "#e6c3db", - "#c0e3bc", - "#bce3db", - "#b8ccdb", - "#ceb8db", - "#ffccff", - "#99ffcc", - "#cc99ff", - "#ffcc99", - "#66ccff", - "#ffffcc" - ]; - - const nameColor = [ - "#304fbf", - "#7d5270", - "#5f825b", - "#578077", - "#576e80", - "#6d527d", - "#cc00cc", - "#006666", - "#cc00ff", - "#ff9900", - "#336699", - "#cc9900" - ]; - const [isHover, setIsHover] = useState(); - const [isEdit, setIsEdit] = useState(false); - //function for onhover signer name change background color - const inputRef = useRef(null); - const onHoverStyle = (ind, blockColor) => { - const style = { - background: blockColor ? blockColor : color[ind % color.length], - padding: "10px", - marginTop: "2px", - display: "flex", - flexDirection: "row", - borderBottom: "1px solid #e3e1e1", - alignItems: "center" - }; - return style; - }; - //function for onhover signer name remove background color - const nonHoverStyle = (ind) => { - const style = { - padding: "10px", - marginTop: "2px", - display: "flex", - flexDirection: "row", - borderBottom: "1px solid #e3e1e1", - alignItems: "center" - }; - return style; - }; - - const getFirstLetter = (name) => { - const firstLetter = name?.charAt(0); - return firstLetter; - }; - - const darkenColor = (color, factor) => { - // Remove '#' from the color code and parse it to get RGB values - const hex = color.replace("#", ""); - const r = parseInt(hex.substring(0, 2), 16); - const g = parseInt(hex.substring(2, 4), 16); - const b = parseInt(hex.substring(4, 6), 16); - - // Darken the color by reducing each RGB component - const darkerR = Math.floor(r * (1 - factor)); - const darkerG = Math.floor(g * (1 - factor)); - const darkerB = Math.floor(b * (1 - factor)); - - // Convert the darkened RGB components back to hex - return `#${((darkerR << 16) | (darkerG << 8) | darkerB) - .toString(16) - .padStart(6, "0")}`; - }; - - const isWidgetExist = (Id) => { - return signerPos.some((x) => x.Id === Id); - }; - +function SignerListPlace(props) { return (
Recipients
-
- <> - {signersdata.length > 0 && - signersdata.map((obj, ind) => { - return ( -
setIsHover(ind)} - onMouseLeave={() => setIsHover(null)} - key={ind} - style={ - isHover === ind || isSelectListId === ind - ? onHoverStyle(ind, obj.blockColor) - : nonHoverStyle(ind) - } - onClick={() => { - setSignerObjId(obj?.objectId); - setIsSelectId(ind); - setContractName(obj?.className); - setUniqueId(obj.Id); - setRoleName(obj.Role); - }} - > -
-
- - {isWidgetExist(obj.Id) ? ( - - ) : ( - <> - {obj.Name - ? getFirstLetter(obj.Name) - : getFirstLetter(obj.Role)} - - )} - -
-
- {obj.Name ? ( - - {obj.Name} - - ) : ( - <> - { - setIsEdit({ [obj.Id]: true }); - setRoleName(obj.Role); - }} - > - {isEdit?.[obj.Id] && handleRoleChange ? ( - handleRoleChange(e, obj.Id)} - onBlur={() => { - setIsEdit({}); - handleOnBlur(obj.Role, obj.Id); - }} - onKeyDown={(e) => { - if (e.key === "Enter") { - e.preventDefault(); - inputRef.current.blur(); - } - }} - /> - ) : ( - obj.Role - )} - - - )} - {obj.Email && ( - - {obj.Email} - - )} -
-
- {handleDeleteUser && ( -
{ - e.stopPropagation(); - handleDeleteUser(obj.Id); - }} - style={{ cursor: "pointer" }} - > - -
- )} -
-
- ); - })} - +
- {handleAddSigner && ( -
handleAddSigner()}> + {props.handleAddSigner && ( +
props.handleAddSigner()} + > Add role
diff --git a/microfrontends/SignDocuments/src/premitives/RecipientList.js b/microfrontends/SignDocuments/src/premitives/RecipientList.js new file mode 100644 index 000000000..9f533a849 --- /dev/null +++ b/microfrontends/SignDocuments/src/premitives/RecipientList.js @@ -0,0 +1,205 @@ +import React, { useRef, useState } from "react"; +import "../css/signerListPlace.css"; +import { darkenColor, getFirstLetter } from "../utils/Utils"; + +const RecipientList = (props) => { + const color = [ + "#93a3db", + "#e6c3db", + "#c0e3bc", + "#bce3db", + "#b8ccdb", + "#ceb8db", + "#ffccff", + "#99ffcc", + "#cc99ff", + "#ffcc99", + "#66ccff", + "#ffffcc" + ]; + + const nameColor = [ + "#304fbf", + "#7d5270", + "#5f825b", + "#578077", + "#576e80", + "#6d527d", + "#cc00cc", + "#006666", + "#cc00ff", + "#ff9900", + "#336699", + "#cc9900" + ]; + const [isHover, setIsHover] = useState(); + const [isEdit, setIsEdit] = useState(false); + //function for onhover signer name change background color + const inputRef = useRef(null); + const onHoverStyle = (ind, blockColor) => { + const style = { + background: blockColor ? blockColor : color[ind % color.length], + padding: "10px", + marginTop: "2px", + display: "flex", + flexDirection: "row", + borderBottom: "1px solid #e3e1e1", + alignItems: "center" + }; + return style; + }; + //function for onhover signer name remove background color + const nonHoverStyle = (ind) => { + const style = { + padding: "10px", + marginTop: "2px", + display: "flex", + flexDirection: "row", + borderBottom: "1px solid #e3e1e1", + alignItems: "center" + }; + return style; + }; + const isWidgetExist = (Id) => { + return props.signerPos.some((x) => x.Id === Id); + }; + + return ( + <> + {props.signersdata.length > 0 && + props.signersdata.map((obj, ind) => { + return ( +
setIsHover(ind)} + onMouseLeave={() => setIsHover(null)} + key={ind} + style={ + isHover === ind || props.isSelectListId === ind + ? onHoverStyle(ind, obj.blockColor) + : nonHoverStyle(ind) + } + onClick={() => { + props.setSignerObjId(obj?.objectId); + props.setIsSelectId(ind); + props.setContractName(obj?.className); + props.setUniqueId(obj.Id); + props.setRoleName(obj.Role); + }} + > +
+
+ + {isWidgetExist(obj.Id) ? ( + + ) : ( + <> + {obj.Name + ? getFirstLetter(obj.Name) + : getFirstLetter(obj.Role)} + + )} + +
+
+ {obj.Name ? ( + + {obj.Name} + + ) : ( + <> + { + setIsEdit({ [obj.Id]: true }); + props.setRoleName(obj.Role); + }} + > + {isEdit?.[obj.Id] && props.handleRoleChange ? ( + props.handleRoleChange(e, obj.Id)} + onBlur={() => { + setIsEdit({}); + props.handleOnBlur(obj.Role, obj.Id); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + inputRef.current.blur(); + } + }} + /> + ) : ( + obj.Role + )} + + + )} + {obj.Name && ( + + {obj.Role} + + )} +
+
+ {props.handleDeleteUser && ( +
{ + e.stopPropagation(); + props.handleDeleteUser(obj.Id); + }} + style={{ cursor: "pointer" }} + > + +
+ )} +
+
+ ); + })} + + ); +}; + +export default RecipientList; diff --git a/microfrontends/SignDocuments/src/premitives/SelectSigners.js b/microfrontends/SignDocuments/src/premitives/SelectSigners.js index 11eb5c053..88b188842 100644 --- a/microfrontends/SignDocuments/src/premitives/SelectSigners.js +++ b/microfrontends/SignDocuments/src/premitives/SelectSigners.js @@ -61,7 +61,7 @@ const SelectSigners = (props) => { // console.log("userList ", res); setUserList(res); return await res.map((item) => ({ - label: item.Name, + label: item.Email, value: item.objectId })); } diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index fab57658f..803d278d3 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -1046,3 +1046,29 @@ export const createDocument = async (template, placeholders, signerData) => { } } }; + +export const getFirstLetter = (name) => { + const firstLetter = name?.charAt(0); + return firstLetter; +}; + + +export const darkenColor = (color, factor) => { + // Remove '#' from the color code and parse it to get RGB values + const hex = color.replace("#", ""); + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + + // Darken the color by reducing each RGB component + const darkerR = Math.floor(r * (1 - factor)); + const darkerG = Math.floor(g * (1 - factor)); + const darkerB = Math.floor(b * (1 - factor)); + + // Convert the darkened RGB components back to hex + return `#${((darkerR << 16) | (darkerG << 8) | darkerB) + .toString(16) + .padStart(6, "0")}`; +}; + +