diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 2b23e9384..91266cffd 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -9,6 +9,7 @@ import { HTML5Backend } from "react-dnd-html5-backend"; import { useParams } from "react-router-dom"; import SignPad from "./component/signPad"; import RenderAllPdfPage from "./component/renderAllPdfPage"; +import { useNavigate } from "react-router-dom"; import { contractDocument, multiSignEmbed, @@ -18,7 +19,8 @@ import { onImageSelect, onSaveSign, onSaveImage, - addDefaultSignatureImg + addDefaultSignatureImg, + getHostUrl } from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -31,6 +33,7 @@ import DefaultSignature from "./component/defaultSignature"; import ModalUi from "../premitives/ModalUi"; function PdfRequestFiles() { + const navigate = useNavigate(); const { docId } = useParams(); const [pdfDetails, setPdfDetails] = useState([]); const [signedSigners, setSignedSigners] = useState([]); @@ -63,6 +66,7 @@ function PdfRequestFiles() { const [isDecline, setIsDecline] = useState({ isDeclined: false }); const [currentSigner, setCurrentSigner] = useState(false); const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); + const [isInitialSign, setIsInitialSign] = useState(false); const [defaultSignAlert, setDefaultSignAlert] = useState({ isShow: false, alertMessage: "" @@ -116,9 +120,20 @@ function PdfRequestFiles() { }); } }, [divRef.current]); - + // Function to check if the given initial value exists in the array + const isInitialValueExist = (array, initialValue) => { + for (const item of array) { + for (const pos of item.pos) { + if (pos.type === "initials") { + return true; + } + } + } + return false; + }; //function for get document details for perticular signer with signer'object id const getDocumentDetails = async () => { + let currUserId; //getting document details const documentData = await contractDocument(documentId); if (documentData && documentData.length > 0) { @@ -135,9 +150,7 @@ function PdfRequestFiles() { (data) => data.UserId.objectId === jsonSender.objectId ); - const currUserId = getCurrentSigner[0] - ? getCurrentSigner[0].objectId - : ""; + currUserId = getCurrentSigner[0] ? getCurrentSigner[0].objectId : ""; setSignerObjectId(currUserId); if (documentData[0].SignedUrl) { setPdfUrl(documentData[0].SignedUrl); @@ -269,7 +282,17 @@ function PdfRequestFiles() { if (res[0] && res.length > 0) { setDefaultSignImg(res[0].ImageURL); - setInitial(res[0]?.Initials); + const getcurrentUserPosition = documentData[0].Placeholders.filter( + (data) => data.signerObjId === currUserId + ); + const getPlacecholder = getcurrentUserPosition[0].placeHolder; + const checkInitialExist = isInitialValueExist(getPlacecholder); + + if (res[0].Initials) { + setInitial(res[0]?.Initials); + } else if (checkInitialExist) { + setIsInitialSign(true); + } } const loadObj = { isLoad: false @@ -568,6 +591,11 @@ function PdfRequestFiles() { }); }; + const handleAddInitial = () => { + const hostUrl = getHostUrl(); + navigate(`${hostUrl}managesign`); + }; + return ( @@ -1002,6 +1030,40 @@ function PdfRequestFiles() { </div> </div> )} + <ModalUi + isOpen={isInitialSign} + title={"Add Initial signature"} + handleClose={() => { + setIsInitialSign(false); + }} + > + <div style={{ height: "100%", padding: 20 }}> + <p>Please add your initial signature</p> + + <div + style={{ + height: "1px", + backgroundColor: "#9f9f9f", + width: "100%", + marginTop: "15px", + marginBottom: "15px" + }} + ></div> + + <button + style={{ + background: themeColor() + }} + onClick={() => { + handleAddInitial(); + }} + type="button" + className="finishBtn" + > + Add + </button> + </div> + </ModalUi> </DndProvider> ); } diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index f41b5d454..055cf9e2b 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -103,7 +103,7 @@ const TemplatePlaceholder = () => { item: { type: "BOX", id: 1, - text: "drag me" + text: "signature" }, collect: (monitor) => ({ isDragSign: !!monitor.isDragging() @@ -115,7 +115,7 @@ const TemplatePlaceholder = () => { item: { type: "BOX", id: 2, - text: "drag me" + text: "stamp" }, collect: (monitor) => ({ isDragStamp: !!monitor.isDragging() @@ -127,7 +127,7 @@ const TemplatePlaceholder = () => { item: { type: "BOX", id: 3, - text: "drag me" + text: "signature" }, collect: (monitor) => ({ isDragSignatureSS: !!monitor.isDragging() @@ -139,7 +139,7 @@ const TemplatePlaceholder = () => { item: { type: "BOX", id: 4, - text: "drag me" + text: "stamp" }, collect: (monitor) => ({ isDragStampSS: !!monitor.isDragging() @@ -349,13 +349,14 @@ const TemplatePlaceholder = () => { const dropObj = { xPosition: window.innerWidth / 2 - 100, yPosition: window.innerHeight / 2 - 60, - isStamp: monitor, + isStamp: monitor.type === "stamp" && true, key: key, isDrag: false, scale: scale, isMobile: isMobile, yBottom: window.innerHeight / 2 - 60, - zIndex: posZIndex + zIndex: posZIndex, + type: monitor.type }; dropData.push(dropObj); placeHolder = { @@ -383,7 +384,8 @@ const TemplatePlaceholder = () => { yBottom: ybottom, scale: scale, isMobile: isMobile, - zIndex: posZIndex + zIndex: posZIndex, + type: item.text }; dropData.push(dropObj); @@ -458,6 +460,7 @@ const TemplatePlaceholder = () => { } } }; + //function for get pdf page details const pageDetails = async (pdf) => { const load = { @@ -635,7 +638,7 @@ const TemplatePlaceholder = () => { if (signerPos.length !== signersdata.length) { setIsSendAlert(true); } else { - // handleSaveTemplate(); + handleSaveTemplate(); } }; const handleSaveTemplate = async () => { @@ -1156,7 +1159,7 @@ const TemplatePlaceholder = () => { dragStamp={dragStamp} dragRef={dragRef} isDragStamp={isDragStamp} - isSignYourself={true} + isSignYourself={false} isDragSignatureSS={isDragSignatureSS} dragSignatureSS={dragSignatureSS} dragStampSS={dragStampSS} @@ -1179,42 +1182,49 @@ const TemplatePlaceholder = () => { handleRoleChange={handleRoleChange} handleOnBlur={handleOnBlur} title={"Roles"} + initial={true} /> </div> ) : ( <div> <div className="signerComponent"> - <SignerListPlace - signerPos={signerPos} - signersdata={signersdata} - isSelectListId={isSelectListId} - setSignerObjId={setSignerObjId} - setRoleName={setRoleName} - setIsSelectId={setIsSelectId} - setContractName={setContractName} - handleAddSigner={handleAddSigner} - setUniqueId={setUniqueId} - handleDeleteUser={handleDeleteUser} - handleRoleChange={handleRoleChange} - handleOnBlur={handleOnBlur} - title={"Roles"} - /> - <div data-tut="reactourSecond"> - <FieldsComponent - pdfUrl={isMailSend} - dragSignature={dragSignature} - signRef={signRef} - handleDivClick={handleDivClick} - handleMouseLeave={handleMouseLeave} - isDragSign={isDragSign} - themeColor={themeColor} - dragStamp={dragStamp} - dragRef={dragRef} - isDragStamp={isDragStamp} - isSignYourself={false} - addPositionOfSignature={addPositionOfSignature} + <div + style={{ maxHeight: window.innerHeight - 70 + "px" }} + className="autoSignScroll" + > + <SignerListPlace + signerPos={signerPos} + signersdata={signersdata} + isSelectListId={isSelectListId} + setSignerObjId={setSignerObjId} + setRoleName={setRoleName} + setIsSelectId={setIsSelectId} + setContractName={setContractName} + handleAddSigner={handleAddSigner} + setUniqueId={setUniqueId} + handleDeleteUser={handleDeleteUser} + handleRoleChange={handleRoleChange} + handleOnBlur={handleOnBlur} title={"Roles"} /> + <div data-tut="reactourSecond"> + <FieldsComponent + pdfUrl={isMailSend} + dragSignature={dragSignature} + signRef={signRef} + handleDivClick={handleDivClick} + handleMouseLeave={handleMouseLeave} + isDragSign={isDragSign} + themeColor={themeColor} + dragStamp={dragStamp} + dragRef={dragRef} + isDragStamp={isDragStamp} + isSignYourself={false} + addPositionOfSignature={addPositionOfSignature} + title={"Roles"} + initial={true} + /> + </div> </div> </div> </div> diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js index 8888a7c5b..f5f138640 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js @@ -1,7 +1,6 @@ import React, { useState } from "react"; -import Modal from "react-bootstrap/Modal"; -import ModalHeader from "react-bootstrap/esm/ModalHeader"; import { themeColor } from "../../utils/ThemeColor/backColor"; +import ModalUi from "../../premitives/ModalUi"; function DropdownWidgetOption(props) { const [dropdownOptionList, setDropdownOptionList] = useState([ "option-1", @@ -21,9 +20,7 @@ function DropdownWidgetOption(props) { const handleAddInput = () => { setDropdownOptionList((prevInputs) => [...prevInputs, ""]); }; - const handleAddOption = () => { - setDropdownOptionList([...dropdownOptionList, ""]); - }; + const handleDeleteInput = (ind) => { const getUpdatedOptions = dropdownOptionList.filter( (data, index) => index !== ind @@ -46,11 +43,14 @@ function DropdownWidgetOption(props) { return ( //props.showDropdown - <Modal show={props.showDropdown} size="sm"> - <ModalHeader style={{ color: "white", background: themeColor() }}> - Dropdown options - </ModalHeader> - <Modal.Body> + <ModalUi + dropdownModal={"dropdownModal"} + isOpen={props.showDropdown} + title={"Dropdown options"} + closeOff={true} + // handleClose={() => props.setShowDropdown(false)} + > + <div style={{ height: "100%", padding: 20 }}> <div className="dropdownContainer"> <label style={{ fontSize: "13px", fontWeight: "600" }}>Name</label> <input @@ -68,8 +68,7 @@ function DropdownWidgetOption(props) { <div style={{ display: "flex", - flexDirection: "row", - flexWrap: "wrap" + flexDirection: "column" }} > {dropdownOptionList.map((option, index) => ( @@ -109,18 +108,15 @@ function DropdownWidgetOption(props) { </div> </div> <span style={{ fontSize: "13px", color: "red" }}>{error}</span> - </Modal.Body> - <Modal.Footer> - <button - onClick={() => props.setShowDropdown(false)} + <div style={{ - color: "black" + height: "1px", + backgroundColor: "#9f9f9f", + width: "100%", + marginTop: "15px", + marginBottom: "15px" }} - type="button" - className="finishBtn" - > - cancel - </button> + ></div> <button onClick={() => handleSaveOption()} disabled={dropdownOptionList.length === 0 && true} @@ -133,8 +129,18 @@ function DropdownWidgetOption(props) { > Save </button> - </Modal.Footer> - </Modal> + {/* <button + onClick={() => props.setShowDropdown(false)} + style={{ + color: "black" + }} + type="button" + className="finishBtn" + > + cancel + </button> */} + </div> + </ModalUi> ); } diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index bce9dd82d..ef608842b 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -13,26 +13,26 @@ function Placeholder(props) { if (props.pos.type === "text" || props.pos.type === "checkbox") { setDraggingEnabled(false); } - if (props.isNeedSign && !props.isDragging) { + if ((props.isNeedSign || props.isSignYourself) && !props.isDragging) { if (props.pos.type) { if (props.pos.type === "signature" || props.pos.type === "stamp") { props.setIsSignPad(true); props.setSignKey(props.pos.key); props.setIsStamp(props.pos.isStamp); - } else if (props.pos.type === "dropdown" && !props.isNeedSign) { - props?.setShowDropdown(true); - props?.setSignKey(props.pos.key); } } else { props.setIsSignPad(true); props.setSignKey(props.pos.key); props.setIsStamp(props.pos?.isStamp ? props.pos.isStamp : false); } - } else if (props.isPlaceholder && props.pos.type) { - if (props.pos.type === "dropdown") { - props.setShowDropdown(true); - props.setSignKey(props.pos.key); - } + } else if ( + props.isPlaceholder && + props.pos.type === "dropdown" && + !props.isDragging + ) { + props?.setShowDropdown(true); + props?.setSignKey(props.pos.key); + props.setUniqueId(props.data.Id); } else if (!props.pos.type) { if ( !props.pos.type && @@ -114,8 +114,7 @@ function Placeholder(props) { onResizeStop={() => { props.setIsResize && props.setIsResize(false); }} - disableDragging={!isDraggingEnabled} - // disableDragging={props.isNeedSign || (props.isRecipient && true)} + disableDragging={props.isNeedSign ? true : !isDraggingEnabled} onDragStop={(event, dragElement) => props.handleStop && props.handleStop(event, dragElement, props.signerObjId, props.pos.key) @@ -136,7 +135,13 @@ function Placeholder(props) { false ); }} - onClick={() => handlePlaceholderClick()} + onClick={() => { + props.isNeedSign && props.data?.signerObjId === props.signerObjId + ? handlePlaceholderClick() + : props.isPlaceholder + ? handlePlaceholderClick() + : props.isSignYourself && handlePlaceholderClick(); + }} > {props.isShowBorder ? ( <BorderResize right={-12} top={-11} /> diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index 4852a6a8f..1b2a1f1e1 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -8,14 +8,14 @@ function PlaceholderType(props) { props.setDraggingEnabled(true); }; useEffect(() => { - if (props.isNeedSign) { + if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) { onChangeInput( props.pdfDetails, null, props.xyPostion, null, props.setXyPostion, - props.data && props.data.signerObjId, + props.signerObjId, props.initial ); } @@ -80,7 +80,11 @@ function PlaceholderType(props) { className="inputPlaceholder" style={{ outlineColor: "#007bff" }} type="checkbox" - disabled={props.isPlaceholder} + disabled={ + props.isNeedSign && props.data?.signerObjId !== props.signerObjId + ? true + : props.isPlaceholder + } onBlur={handleInputBlur} onChange={(e) => onChangeInput( @@ -101,7 +105,11 @@ function PlaceholderType(props) { className="inputPlaceholder" type="text" tabIndex="0" - disabled={props.isPlaceholder} + disabled={ + props.isNeedSign && props.data?.signerObjId !== props.signerObjId + ? true + : props.isPlaceholder + } onBlur={handleInputBlur} onChange={(e) => onChangeInput( @@ -117,7 +125,7 @@ function PlaceholderType(props) { /> ); case "dropdown": - return !props.isPlaceholder ? ( + return props.data?.signerObjId === props.signerObjId ? ( <select className="inputPlaceholder" id="myDropdown" @@ -150,7 +158,8 @@ function PlaceholderType(props) { </div> ); case "initials": - return props.pos.SignUrl || props.initial ? ( + return props.pos.SignUrl || + props.data?.signerObjId === props.signerObjId ? ( <img alt="signimg" src={props.pos?.SignUrl ? props.pos?.SignUrl : props.initial} @@ -176,7 +185,8 @@ function PlaceholderType(props) { ); case "name": - return props.isNeedSign ? ( + return props.isNeedSign && + props.data?.signerObjId === props.signerObjId ? ( <input className="inputPlaceholder" type="text" @@ -218,7 +228,8 @@ function PlaceholderType(props) { ); case "company": - return props.isNeedSign ? ( + return props.isNeedSign && + props.data?.signerObjId === props.signerObjId ? ( <input className="inputPlaceholder" type="text" @@ -260,7 +271,8 @@ function PlaceholderType(props) { ); case "job title": - return props.isNeedSign ? ( + return props.isNeedSign && + props.data?.signerObjId === props.signerObjId ? ( <input className="inputPlaceholder" type="text" diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 7d4fed1a7..ff7034485 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -375,63 +375,6 @@ function RenderPdf({ ); }; - const PlaceholderDesign = ({ pos, data }) => { - return ( - <div> - <i - className="fa-regular fa-copy signCopy" - onClick={(e) => { - e.stopPropagation(); - setIsPageCopy(true); - setSignKey(pos.key); - }} - style={{ - color: "#188ae2" - }} - ></i> - <i - className="fa-regular fa-circle-xmark signCloseBtn" - onClick={(e) => { - e.stopPropagation(); - if (data) { - handleDeleteSign(pos.key, data.signerObjId); - } else { - handleDeleteSign(pos.key); - setIsStamp(false); - } - }} - style={{ - color: "#188ae2" - }} - ></i> - - {pos.SignUrl ? ( - <div style={{ pointerEvents: "none" }}> - <img - alt="signimg" - src={pos.SignUrl} - style={{ - width: "100%", - height: "100%", - objectFit: "contain" - }} - /> - </div> - ) : ( - <div - style={{ - fontSize: "10px", - color: "black", - justifyContent: "center" - }} - > - {pos.type} - </div> - )} - </div> - ); - }; - const handleUserName = (signerId, Role) => { if (signerId) { const checkSign = signersdata.find((sign) => sign.objectId === signerId); @@ -451,6 +394,7 @@ function RenderPdf({ return <div style={{ color: "black", fontSize: 11 }}> {Role} </div>; } }; + return ( <> {isMobile && scale ? ( @@ -617,186 +561,216 @@ function RenderPdf({ {placeData.pageNumber === pageNumber && placeData.pos.map((pos) => { return ( - <Rnd - bounds="parent" - enableResizing={{ - top: false, - right: false, - bottom: false, - left: false, - topRight: false, - bottomRight: true, - bottomLeft: false, - topLeft: false - }} - key={pos.key} - style={{ - cursor: "all-scroll", - background: data.blockColor, - borderColor: data.bac, - zIndex: pos.zIndex - }} - className="signYourselfBlock" - onDrag={() => handleTabDrag(pos.key)} - size={{ - width: posWidth(pos), - height: posHeight(pos) - }} - // size={{ - // width: pos.Width ? pos.Width : 150, - // height: pos.Height ? pos.Height : 60 - // }} - lockAspectRatio={ - pos.Width ? pos.Width / pos.Height : 2.5 - } - onDragStop={ - (event, dragElement) => - handleStop( - event, - dragElement, - data.Id, - pos.key - ) - // data.signerObjId, - } - // default={{ - // x: pos.xPosition, - // y: pos.yPosition - // }} - default={{ - x: xPos(pos), - y: yPos(pos) - }} - onResizeStart={() => { - setIsResize(true); - }} - onResizeStop={() => { - setIsResize && setIsResize(false); - }} - onResize={( - e, - direction, - ref, - delta, - position - ) => { - handleImageResize( - ref, - pos.key, - data.Id, - position, - signerPos, - pageNumber, - setSignerPos, - pdfOriginalWidth, - containerWH, - true - ); - }} - > - <BorderResize right={-12} top={-11} /> - <PlaceholderBorder - pos={pos} - posWidth={posWidth} - posHeight={posHeight} - /> - <div - onClick={(e) => { - if (!isDragging) { - handleLinkUser(data.Id); - setUniqueId(data.Id); - } - }} - onTouchEnd={() => { - if (!isDragging) { - handleLinkUser(data.Id); - setUniqueId(data.Id); - } - const dataNewPlace = addZIndex( - signerPos, - pos.key, - setZIndex - ); - setSignerPos((prevState) => { - const newState = [...prevState]; - newState.splice( - 0, - signerPos.length, - ...dataNewPlace - ); - return newState; - }); - }} - > - <i - data-tut="reactourLinkUser" - 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" - }} - ></i> - <i - className="fa-regular fa-copy signCopy" - onTouchEnd={(e) => { - e.stopPropagation(); - setIsPageCopy(true); - setSignKey(pos.key); - setSignerObjId(data.signerObjId); - setUniqueId(data.Id); - }} - onClick={(e) => { - e.stopPropagation(); - setIsPageCopy(true); - setSignKey(pos.key); - setSignerObjId(data.signerObjId); - setUniqueId(data.Id); - }} - style={{ - color: "#188ae2" - }} - ></i> - <i - className="fa-regular fa-circle-xmark signCloseBtn" - onTouchEnd={(e) => { - e.stopPropagation(); - handleDeleteSign(pos.key, data.Id); - }} - onClick={(e) => { - e.stopPropagation(); - handleDeleteSign(pos.key, data.Id); - // data.signerObjId - }} - style={{ - color: "#188ae2" - }} - ></i> + // <Rnd + // bounds="parent" + // enableResizing={{ + // top: false, + // right: false, + // bottom: false, + // left: false, + // topRight: false, + // bottomRight: true, + // bottomLeft: false, + // topLeft: false + // }} + // key={pos.key} + // style={{ + // cursor: "all-scroll", + // background: data.blockColor, + // borderColor: data.bac, + // zIndex: pos.zIndex + // }} + // className="signYourselfBlock" + // onDrag={() => handleTabDrag(pos.key)} + // size={{ + // width: posWidth(pos), + // height: posHeight(pos) + // }} + // // size={{ + // // width: pos.Width ? pos.Width : 150, + // // height: pos.Height ? pos.Height : 60 + // // }} + // lockAspectRatio={ + // pos.Width ? pos.Width / pos.Height : 2.5 + // } + // onDragStop={ + // (event, dragElement) => + // handleStop( + // event, + // dragElement, + // data.Id, + // pos.key + // ) + // // data.signerObjId, + // } + // // default={{ + // // x: pos.xPosition, + // // y: pos.yPosition + // // }} + // default={{ + // x: xPos(pos), + // y: yPos(pos) + // }} + // onResizeStart={() => { + // setIsResize(true); + // }} + // onResizeStop={() => { + // setIsResize && setIsResize(false); + // }} + // onResize={( + // e, + // direction, + // ref, + // delta, + // position + // ) => { + // handleImageResize( + // ref, + // pos.key, + // data.Id, + // position, + // signerPos, + // pageNumber, + // setSignerPos, + // pdfOriginalWidth, + // containerWH, + // true + // ); + // }} + // > + // <BorderResize right={-12} top={-11} /> + // <PlaceholderBorder + // pos={pos} + // posWidth={posWidth} + // posHeight={posHeight} + // /> + // <div + // onClick={(e) => { + // if (!isDragging) { + // handleLinkUser(data.Id); + // setUniqueId(data.Id); + // } + // }} + // onTouchEnd={() => { + // if (!isDragging) { + // handleLinkUser(data.Id); + // setUniqueId(data.Id); + // } + // const dataNewPlace = addZIndex( + // signerPos, + // pos.key, + // setZIndex + // ); + // setSignerPos((prevState) => { + // const newState = [...prevState]; + // newState.splice( + // 0, + // signerPos.length, + // ...dataNewPlace + // ); + // return newState; + // }); + // }} + // > + // <i + // data-tut="reactourLinkUser" + // 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" + // }} + // ></i> + // <i + // className="fa-regular fa-copy signCopy" + // onTouchEnd={(e) => { + // e.stopPropagation(); + // setIsPageCopy(true); + // setSignKey(pos.key); + // setSignerObjId(data.signerObjId); + // setUniqueId(data.Id); + // }} + // onClick={(e) => { + // e.stopPropagation(); + // setIsPageCopy(true); + // setSignKey(pos.key); + // setSignerObjId(data.signerObjId); + // setUniqueId(data.Id); + // }} + // style={{ + // color: "#188ae2" + // }} + // ></i> + // <i + // className="fa-regular fa-circle-xmark signCloseBtn" + // onTouchEnd={(e) => { + // e.stopPropagation(); + // handleDeleteSign(pos.key, data.Id); + // }} + // onClick={(e) => { + // e.stopPropagation(); + // handleDeleteSign(pos.key, data.Id); + // // data.signerObjId + // }} + // style={{ + // color: "#188ae2" + // }} + // ></i> - <div - style={{ - fontSize: "10px", - color: "black", - fontWeight: "500", - marginTop: "0px" - }} - > - <div>{pos.type}</div> - {handleUserName( - data.signerObjId, - data.Role - )}{" "} - </div> - </div> - </Rnd> + // <div + // style={{ + // fontSize: "10px", + // color: "black", + // fontWeight: "500", + // marginTop: "0px" + // }} + // > + // <div>{pos.type}</div> + // {handleUserName( + // data.signerObjId, + // data.Role + // )}{" "} + // </div> + // </div> + // </Rnd> + <Placeholder + pos={pos} + setIsPageCopy={setIsPageCopy} + setSignKey={setSignKey} + handleDeleteSign={handleDeleteSign} + setIsStamp={setIsStamp} + handleTabDrag={handleTabDrag} + handleStop={handleStop} + handleSignYourselfImageResize={ + handleImageResize + } + index={pageNumber} + xyPostion={signerPos} + setXyPostion={setSignerPos} + setSignerObjId={setSignerObjId} + data={data} + setIsResize={setIsResize} + setShowDropdown={setShowDropdown} + isShowBorder={true} + isPlaceholder={true} + setUniqueId={setUniqueId} + handleLinkUser={handleLinkUser} + handleUserName={handleUserName} + isSignYourself={false} + xPos={xPos} + yPos={yPos} + posWidth={posWidth} + posHeight={posHeight} + isDragging={isDragging} + /> ); })} </React.Fragment> @@ -1038,143 +1012,6 @@ function RenderPdf({ > <EmailToast isShow={successEmail} /> {pdfLoadFail.status && - // recipient - // ? !pdfUrl && - // !isAlreadySign.mssg && - // xyPostion.length > 0 && - // xyPostion.map((data, ind) => { - // return ( - // <React.Fragment key={ind}> - // {data.pageNumber === pageNumber && - // data.pos.map((pos) => { - // return ( - // pos && ( - // // <Rnd - // // data-tut="reactourSecond" - // // disableDragging={true} - // // enableResizing={{ - // // top: false, - // // right: false, - // // bottom: false, - // // left: false, - // // topRight: false, - // // bottomRight: true, - // // bottomLeft: false, - // // topLeft: false - // // }} - // // onResize={( - // // e, - // // direction, - // // ref, - // // delta, - // // position - // // ) => { - // // handleSignYourselfImageResize( - // // ref, - // // pos.key, - // // xyPostion, - // // index, - // // setXyPostion - // // ); - // // }} - // // key={pos.key} - // // bounds="parent" - // // style={{ - // // cursor: "all-scroll", - // // borderColor: themeColor(), - // // borderStyle: "dashed", - // // borderWidth: "0.1px", - // // zIndex: "1", - // // background: data.blockColor - // // ? data.blockColor - // // : "#daebe0" - // // }} - // // className="signYourselfBlock" - // // size={{ - // // width: posWidth(pos), - // // height: posHeight(pos) - // // }} - // // lockAspectRatio={ - // // pos.Width ? pos.Width / pos.Height : 2.5 - // // } - // // default={{ - // // x: xPos(pos), - // // y: yPos(pos) - // // }} - // // onClick={() => { - // // setIsSignPad(true); - // // setSignKey(pos.key); - // // setIsStamp(pos?.isStamp ? pos.isStamp : false); - // // }} - // // > - // // <div style={{ pointerEvents: "none" }}> - // // <BorderResize /> - // // {pos.SignUrl ? ( - // // <img - // // alt="no img" - // // onClick={() => { - // // setIsSignPad(true); - // // setSignKey(pos.key); - // // }} - // // src={pos.SignUrl} - // // style={{ - // // width: "100%", - // // height: "100%", - // // objectFit: "contain" - // // }} - // // /> - // // ) : ( - // // <div - // // style={{ - // // fontSize: "10px", - // // color: "black", - // // fontWeight: "600", - // // justifyContent: "center", - // // marginTop: "0px" - // // }} - // // > - // // {pos.isStamp ? ( - // // <div>stamp</div> - // // ) : ( - // // <div>signature</div> - // // )} - // // {handleUserName( - // // data.signerObjId, - // // data.Role - // // )} - // // </div> - // // )} - // // </div> - // // </Rnd> - - // <Placeholder - // pos={pos} - // setSignKey={setSignKey} - // setIsStamp={setIsStamp} - // handleSignYourselfImageResize={ - // handleSignYourselfImageResize - // } - // index={index} - // xyPostion={xyPostion} - // setXyPostion={setXyPostion} - // pdfOriginalWidth={pdfOriginalWidth} - // containerWH={containerWH} - // setIsSignPad={setIsSignPad} - // isShowDropdown={true} - // isRecipient={true} - // isSignYourself={false} - // xPos={xPos} - // yPos={yPos} - // posWidth={posWidth} - // posHeight={posHeight} - // /> - // ) - // ); - // })} - // </React.Fragment> - // ); - // }) - // : (pdfRequest ? signerPos.map((data, key) => { return ( @@ -1384,6 +1221,7 @@ function RenderPdf({ yPos={yPos} posWidth={posWidth} posHeight={posHeight} + isDragging={isDragging} /> ); })} diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index a610b79e5..543420596 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -119,12 +119,6 @@ function PlaceHolderSign() { }) }); const [{ isDragStamp }, dragStamp] = useDrag({ - type: "BOX", - item: { - type: "BOX", - id: 2, - text: "stamp" - }, type: "BOX", item: { type: "BOX", @@ -347,14 +341,14 @@ function PlaceHolderSign() { //onclick put placeholder center on pdf xPosition: window.innerWidth / 2 - 100, yPosition: window.innerHeight / 2 - 60, - isStamp: monitor, + isStamp: monitor.type === "stamp" && true, key: key, isDrag: false, scale: scale, isMobile: isMobile, yBottom: window.innerHeight / 2 - 60, zIndex: posZIndex, - type: item.text + type: monitor.type }; dropData.push(dropObj); placeHolder = { @@ -452,7 +446,7 @@ function PlaceHolderSign() { } setSignerPos((prev) => [...prev, placeHolderPos]); } - if (item.text === "dropdown") { + if (item.text === "dropdown" || monitor.type === "dropdown") { setShowDropdown(true); setSignKey(key); } @@ -864,7 +858,6 @@ function PlaceHolderSign() { const handleSaveDropdownOptions = (dropdownName, dropdownOptions) => { const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); - if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; diff --git a/microfrontends/SignDocuments/src/css/ModalUi.css b/microfrontends/SignDocuments/src/css/ModalUi.css index 6364ef60f..80633e81e 100644 --- a/microfrontends/SignDocuments/src/css/ModalUi.css +++ b/microfrontends/SignDocuments/src/css/ModalUi.css @@ -22,8 +22,28 @@ max-height: 80%; min-width: 500px; overflow-y: auto; - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* Internet Explorer and Edge */ + scrollbar-width: none; + /* Firefox */ + -ms-overflow-style: none; + /* Internet Explorer and Edge */ +} + +.dropdownModal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 901; + max-height: 80%; + min-width: 30%; + overflow-y: auto; + scrollbar-width: none; + /* Firefox */ + -ms-overflow-style: none; + /* Internet Explorer and Edge */ } /* Hide scrollbar for Webkit browsers */ @@ -31,6 +51,11 @@ display: none; } +/* Hide scrollbar for Webkit browsers */ +.dropdownModal::-webkit-scrollbar { + display: none; +} + .modalheader { display: flex; justify-content: space-between; @@ -43,7 +68,7 @@ /* Styling for the modal title */ .modaltitle { font-size: 1.2rem; - font-weight:normal; + font-weight: normal; } /* Styling for the close button */ @@ -69,4 +94,35 @@ min-width: 90%; overflow-y: auto; } + + .dropdownModal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 1000; + max-height: 80%; + min-width: 60%; + overflow-y: auto; + } +} + +@media (max-width:464px) { + .dropdownModal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 1000; + max-height: 80%; + min-width: 78%; + overflow-y: auto; + } + } \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/premitives/ModalUi.js b/microfrontends/SignDocuments/src/premitives/ModalUi.js index 68fe937c9..a53740a88 100644 --- a/microfrontends/SignDocuments/src/premitives/ModalUi.js +++ b/microfrontends/SignDocuments/src/premitives/ModalUi.js @@ -1,23 +1,34 @@ import React from "react"; import "../css/ModalUi.css"; -const ModalUi = ({ children, title, isOpen, handleClose, headerColor }) => { +const ModalUi = ({ + children, + title, + isOpen, + handleClose, + headerColor, + dropdownModal +}) => { return ( <> {isOpen && ( <div className="modaloverlay"> - <div className="modalcontainer"> - {title && <div - style={{ background: headerColor ? headerColor : "#32a3ac" }} - className="modalheader" - > - <div className="modaltitle">{title}</div> + <div className={dropdownModal ? dropdownModal : "modalcontainer"}> + {title && ( <div - className="closebtn" - onClick={() => handleClose && handleClose()} + style={{ background: headerColor ? headerColor : "#32a3ac" }} + className="modalheader" > - × + <div className="modaltitle">{title}</div> + {handleClose && ( + <div + className="closebtn" + onClick={() => handleClose && handleClose()} + > + × + </div> + )} </div> - </div>} + )} <div>{children}</div> </div> </div> diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 41e93044d..210b53dc5 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -25,19 +25,31 @@ export const calculateInitialWidthHeight = (type, pdfDetails) => { getHeight: height }; }; -export const addInitialData = (signerPos, setXyPostion, value, initial) => { +export const addInitialData = ( + signerPos, + setXyPostion, + value, + initial, + signerObjId +) => { return signerPos.map((item) => { if (item.placeHolder && item.placeHolder.length > 0) { // If there is a nested array, recursively add the field to the last object - return { - ...item, - placeHolder: addInitialData( - item.placeHolder, - setXyPostion, - value, - initial - ) - }; + if (item.signerObjId === signerObjId) { + return { + ...item, + placeHolder: addInitialData( + item.placeHolder, + setXyPostion, + value, + initial + ) + }; + } else { + return { + ...item + }; + } } else if (item.pos && item.pos.length > 0) { // If there is no nested array, add the new field return { @@ -94,7 +106,13 @@ export const onChangeInput = ( const getPlaceHolder = filterSignerPos[0].placeHolder; if (initial) { - const xyData = addInitialData(xyPostion, setXyPostion, value, initial); + const xyData = addInitialData( + xyPostion, + setXyPostion, + value, + initial, + signerObjId + ); setXyPostion(xyData); } else { const getPageNumer = getPlaceHolder.filter(