mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-20 06:35:54 +02:00
fix: handle widgets functionality for mobile view in placeholder and template creation flow
This commit is contained in:
RaktimaNXG
@@ -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 (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<Title title={"Request Sign"} />
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
+30
-24
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user