mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-17 21:25:54 +02:00
fix: widget scrolling issue in mobile view, on delete placeholder user remove issue,dropdown & checkbox disappear after complete signature by two signers issue
This commit is contained in:
RaktimaNXG
@@ -66,7 +66,6 @@ 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: ""
|
||||
@@ -83,7 +82,6 @@ function PdfRequestFiles() {
|
||||
const [isExpired, setIsExpired] = useState(false);
|
||||
const [alreadySign, setAlreadySign] = useState(false);
|
||||
const [containerWH, setContainerWH] = useState({});
|
||||
const [initial, setInitial] = useState("");
|
||||
const divRef = useRef(null);
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const rowLevel =
|
||||
@@ -120,17 +118,7 @@ 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;
|
||||
@@ -282,29 +270,6 @@ function PdfRequestFiles() {
|
||||
|
||||
if (res[0] && res.length > 0) {
|
||||
setDefaultSignImg(res[0].ImageURL);
|
||||
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);
|
||||
}
|
||||
} else {
|
||||
const getcurrentUserPosition = documentData[0].Placeholders.filter(
|
||||
(data) => data.signerObjId === currUserId
|
||||
);
|
||||
|
||||
const getPlacecholder = getcurrentUserPosition[0].placeHolder;
|
||||
const checkInitialExist = isInitialValueExist(getPlacecholder);
|
||||
|
||||
if (checkInitialExist) {
|
||||
setIsInitialSign(true);
|
||||
}
|
||||
}
|
||||
|
||||
const loadObj = {
|
||||
@@ -605,11 +570,6 @@ function PdfRequestFiles() {
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddInitial = () => {
|
||||
const hostUrl = getHostUrl();
|
||||
navigate(`${hostUrl}managesign`);
|
||||
};
|
||||
|
||||
return (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<Title title={"Request Sign"} />
|
||||
@@ -886,7 +846,6 @@ function PdfRequestFiles() {
|
||||
pdfLoadFail={pdfLoadFail}
|
||||
setSignerPos={setSignerPos}
|
||||
containerWH={containerWH}
|
||||
initial={initial}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -1044,34 +1003,6 @@ function PdfRequestFiles() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<ModalUi isOpen={isInitialSign} title={"Add Initial signature"}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -106,6 +106,7 @@ function SignYourSelf() {
|
||||
id: 1,
|
||||
text: "signature"
|
||||
},
|
||||
|
||||
collect: (monitor) => ({
|
||||
isDragSign: !!monitor.isDragging()
|
||||
})
|
||||
@@ -117,6 +118,7 @@ function SignYourSelf() {
|
||||
id: 2,
|
||||
text: "stamp"
|
||||
},
|
||||
|
||||
collect: (monitor) => ({
|
||||
isDragStamp: !!monitor.isDragging()
|
||||
})
|
||||
@@ -130,6 +132,7 @@ function SignYourSelf() {
|
||||
id: 3,
|
||||
text: "drag me"
|
||||
},
|
||||
canDrag: false,
|
||||
collect: (monitor) => ({
|
||||
isDragSignatureSS: !!monitor.isDragging()
|
||||
})
|
||||
@@ -171,17 +174,6 @@ function SignYourSelf() {
|
||||
const jsonSender = JSON.parse(senderUser);
|
||||
|
||||
useEffect(() => {
|
||||
// localStorage.setItem("accesstoken", "r:17de3495dd207dc88677da7f9f9e4d6b");
|
||||
// localStorage.setItem(
|
||||
// "baseUrl",
|
||||
// "https://staging-app.opensignlabs.com/api/app/"
|
||||
// );
|
||||
// localStorage.setItem("parseAppId", "opensignstgn");
|
||||
// localStorage.setItem(
|
||||
// "Parse/opensignstgn/currentUser",
|
||||
// '{"name":"raktima","email":"raktimachaurasiya@gmail.com","phone":"5645676534","username":"raktimachaurasiya@gmail.com","emailVerified":false,"createdAt":"2024-01-10T14:40:59.326Z","updatedAt":"2024-01-10T14:40:59.326Z","ACL":{"9MUdPyX2ae":{"read":true,"write":true}},"sessionToken":"r:17de3495dd207dc88677da7f9f9e4d6b","__type":"Object","className":"_User","objectId":"9MUdPyX2ae"}'
|
||||
// );
|
||||
// localStorage.setItem("_appName", "contracts");
|
||||
if (documentId) {
|
||||
getDocumentDetails(true);
|
||||
}
|
||||
@@ -331,6 +323,16 @@ function SignYourSelf() {
|
||||
(data) => data.pageNumber === pageNumber
|
||||
);
|
||||
|
||||
const widgetValue =
|
||||
monitor.type === "name"
|
||||
? pdfDetails[0].ExtUserPtr.Name
|
||||
: monitor.type === "company"
|
||||
? pdfDetails[0].ExtUserPtr.Company
|
||||
: monitor.type === "job title"
|
||||
? pdfDetails[0].ExtUserPtr.JobTitle
|
||||
: monitor.type === "checkbox"
|
||||
? true
|
||||
: "";
|
||||
if (item === "onclick") {
|
||||
dropObj = {
|
||||
xPosition: window.innerWidth / 2 - 100,
|
||||
@@ -340,26 +342,19 @@ function SignYourSelf() {
|
||||
key: key,
|
||||
type: monitor.type,
|
||||
yBottom: window.innerHeight / 2 - 60,
|
||||
SignUrl: monitor.type === "initials" && initial,
|
||||
widgetValue:
|
||||
monitor.type === "name"
|
||||
? pdfDetails[0].ExtUserPtr.Name
|
||||
: monitor.type === "company"
|
||||
? pdfDetails[0].ExtUserPtr.Company
|
||||
: monitor.type === "job title"
|
||||
? pdfDetails[0].ExtUserPtr.JobTitle
|
||||
: "",
|
||||
// SignUrl: monitor.type === "initials" && initial,
|
||||
widgetValue: widgetValue,
|
||||
Width:
|
||||
monitor.type === "name" ||
|
||||
monitor.type === "company" ||
|
||||
monitor.type === "job title"
|
||||
? calculateInitialWidthHeight(monitor.type, pdfDetails[0]).getWidth
|
||||
? calculateInitialWidthHeight(monitor.type, widgetValue).getWidth
|
||||
: "",
|
||||
Height:
|
||||
monitor.type === "company" ||
|
||||
monitor.type === "name" ||
|
||||
monitor.type === "job title"
|
||||
? calculateInitialWidthHeight(monitor.type, pdfDetails[0]).getHeight
|
||||
? calculateInitialWidthHeight(monitor.type, widgetValue).getHeight
|
||||
: ""
|
||||
};
|
||||
|
||||
@@ -387,7 +382,9 @@ function SignYourSelf() {
|
||||
? pdfDetails[0].ExtUserPtr.Company
|
||||
: item.text === "job title"
|
||||
? pdfDetails[0].ExtUserPtr.JobTitle
|
||||
: "";
|
||||
: item.text === "checkbox"
|
||||
? true
|
||||
: "";
|
||||
dropObj = {
|
||||
xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
|
||||
yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
|
||||
@@ -398,7 +395,7 @@ function SignYourSelf() {
|
||||
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
|
||||
yBottom: ybottom,
|
||||
type: item.text,
|
||||
SignUrl: item.text === "initials" && initial,
|
||||
// SignUrl: item.text === "initials" && initial,
|
||||
widgetValue: widgetData,
|
||||
Width:
|
||||
item.text === "name" ||
|
||||
|
||||
@@ -454,6 +454,7 @@ const TemplatePlaceholder = () => {
|
||||
}
|
||||
setSignerPos((prev) => [...prev, placeHolderPos]);
|
||||
}
|
||||
|
||||
setIsMailSend(false);
|
||||
} else {
|
||||
setIsReceipent(false);
|
||||
|
||||
@@ -11,10 +11,12 @@ function AllWidgets(props) {
|
||||
props.addPositionOfSignature("onclick", item)
|
||||
}
|
||||
ref={(element) => {
|
||||
item.ref(element);
|
||||
if (element) {
|
||||
if (props?.signRef) {
|
||||
props.signRef.current = element;
|
||||
if (!props.isMobile) {
|
||||
item.ref(element);
|
||||
if (element) {
|
||||
if (props?.signRef) {
|
||||
props.signRef.current = element;
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
|
||||
@@ -38,6 +38,8 @@ function DropdownWidgetOption(props) {
|
||||
} else {
|
||||
props.handleSaveDropdownOptions(dropdownName, dropdownOptionList);
|
||||
props.setShowDropdown(false);
|
||||
setDropdownOptionList(["option-1", "option-2"]);
|
||||
setDropdownName("Dropdown-1");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -10,12 +10,23 @@ function Placeholder(props) {
|
||||
|
||||
//onclick placeholder function to open signature pad
|
||||
const handlePlaceholderClick = () => {
|
||||
if (props.pos.type === "text" || props.pos.type === "checkbox") {
|
||||
if (
|
||||
props.pos.type === "text" ||
|
||||
props.pos.type === "checkbox" ||
|
||||
props.pos.type === "name" ||
|
||||
props.pos.type === "company" ||
|
||||
props.pos.type === "job title" ||
|
||||
props.pos.type === "date"
|
||||
) {
|
||||
setDraggingEnabled(false);
|
||||
}
|
||||
if ((props.isNeedSign || props.isSignYourself) && !props.isDragging) {
|
||||
if (props.pos.type) {
|
||||
if (props.pos.type === "signature" || props.pos.type === "stamp") {
|
||||
if (
|
||||
props.pos.type === "signature" ||
|
||||
props.pos.type === "stamp" ||
|
||||
props.pos.type === "initials"
|
||||
) {
|
||||
props.setIsSignPad(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setIsStamp(props.pos.isStamp);
|
||||
@@ -114,7 +125,13 @@ function Placeholder(props) {
|
||||
onResizeStop={() => {
|
||||
props.setIsResize && props.setIsResize(false);
|
||||
}}
|
||||
disableDragging={props.isNeedSign ? true : !isDraggingEnabled}
|
||||
disableDragging={
|
||||
props.isNeedSign
|
||||
? true
|
||||
: props.isPlaceholder
|
||||
? false
|
||||
: !isDraggingEnabled
|
||||
}
|
||||
onDragStop={(event, dragElement) =>
|
||||
props.handleStop &&
|
||||
props.handleStop(event, dragElement, props.signerObjId, props.pos.key)
|
||||
@@ -155,7 +172,12 @@ function Placeholder(props) {
|
||||
<BorderResize />
|
||||
)}
|
||||
|
||||
{props.isShowBorder && <PlaceholderBorder pos={props.pos} />}
|
||||
{props.isShowBorder && (
|
||||
<PlaceholderBorder
|
||||
setDraggingEnabled={setDraggingEnabled}
|
||||
pos={props.pos}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
left: props.xPos(props.pos, props.isSignYourself),
|
||||
@@ -247,12 +269,12 @@ function Placeholder(props) {
|
||||
setSignKey={props.setSignKey}
|
||||
isShowDropdown={props?.isShowDropdown}
|
||||
isPlaceholder={props.isPlaceholder}
|
||||
isSignYourself={props.isSignYourself}
|
||||
signerObjId={props.signerObjId}
|
||||
handleUserName={props.handleUserName}
|
||||
setDraggingEnabled={setDraggingEnabled}
|
||||
pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
|
||||
isNeedSign={props.isNeedSign}
|
||||
initial={props.initial}
|
||||
/>
|
||||
</div>
|
||||
</Rnd>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { onChangeInput } from "../../utils/Utils";
|
||||
import "../../css/signature.css";
|
||||
|
||||
function PlaceholderType(props) {
|
||||
const [selectOption, setSelectOption] = useState("");
|
||||
@@ -9,25 +10,18 @@ function PlaceholderType(props) {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const senderUser =
|
||||
localStorage.getItem(
|
||||
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
|
||||
) &&
|
||||
localStorage.getItem(
|
||||
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
|
||||
);
|
||||
const senderUser = localStorage.getItem(`Extand_Class`);
|
||||
const jsonSender = JSON.parse(senderUser);
|
||||
|
||||
if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
|
||||
onChangeInput(
|
||||
props.pdfDetails,
|
||||
jsonSender && jsonSender[0],
|
||||
null,
|
||||
props.xyPostion,
|
||||
null,
|
||||
props.setXyPostion,
|
||||
props.signerObjId,
|
||||
props.initial,
|
||||
jsonSender.name
|
||||
true
|
||||
);
|
||||
}
|
||||
}, [type]);
|
||||
@@ -55,7 +49,7 @@ function PlaceholderType(props) {
|
||||
<div>{props.pos.type}</div>
|
||||
|
||||
{props?.handleUserName &&
|
||||
props?.handleUserName(props?.data.signerObjId, props?.data.Role)}
|
||||
props?.handleUserName(props?.data.Id, props?.data.Role)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -81,7 +75,7 @@ function PlaceholderType(props) {
|
||||
<div>{props.pos.type}</div>
|
||||
|
||||
{props?.handleUserName &&
|
||||
props?.handleUserName(props?.data?.signerObjId, props?.data?.Role)}
|
||||
props?.handleUserName(props?.data.Id, props?.data.Role)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -97,6 +91,7 @@ function PlaceholderType(props) {
|
||||
: props.isPlaceholder
|
||||
}
|
||||
onBlur={handleInputBlur}
|
||||
checked={props.pos.widgetValue}
|
||||
onChange={(e) =>
|
||||
onChangeInput(
|
||||
e.target.checked,
|
||||
@@ -169,11 +164,10 @@ function PlaceholderType(props) {
|
||||
</div>
|
||||
);
|
||||
case "initials":
|
||||
return props.pos.SignUrl ||
|
||||
props.data?.signerObjId === props.signerObjId ? (
|
||||
return props.pos.SignUrl ? (
|
||||
<img
|
||||
alt="signimg"
|
||||
src={props.pos?.SignUrl ? props.pos?.SignUrl : props.initial}
|
||||
src={props.pos.SignUrl}
|
||||
style={{
|
||||
width: "99%",
|
||||
height: "100%",
|
||||
@@ -191,21 +185,20 @@ function PlaceholderType(props) {
|
||||
<div>{props.pos.type}</div>
|
||||
|
||||
{props?.handleUserName &&
|
||||
props?.handleUserName(props?.data.signerObjId, props?.data.Role)}
|
||||
props?.handleUserName(props?.data.Id, props?.data.Role)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case "name":
|
||||
return props.isNeedSign &&
|
||||
props.data?.signerObjId === props.signerObjId ? (
|
||||
return props.isSignYourself ||
|
||||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
|
||||
<input
|
||||
tabIndex="0"
|
||||
placeholder="name"
|
||||
className="inputPlaceholder"
|
||||
type="text"
|
||||
value={
|
||||
props.pos.widgetValue
|
||||
? props.pos.widgetValue
|
||||
: props.pdfDetails.ExtUserPtr.Name
|
||||
}
|
||||
value={props.pos.widgetValue}
|
||||
onBlur={handleInputBlur}
|
||||
onChange={(e) =>
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
@@ -218,15 +211,6 @@ function PlaceholderType(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : props.pos.widgetValue ? (
|
||||
<div
|
||||
style={{
|
||||
color: "black",
|
||||
fontSize: "14px"
|
||||
}}
|
||||
>
|
||||
<span>{props.pos.widgetValue}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
@@ -239,12 +223,14 @@ function PlaceholderType(props) {
|
||||
);
|
||||
|
||||
case "company":
|
||||
return props.isNeedSign &&
|
||||
props.data?.signerObjId === props.signerObjId ? (
|
||||
return props.isSignYourself ||
|
||||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
|
||||
<input
|
||||
className="inputPlaceholder"
|
||||
type="text"
|
||||
placeholder="company"
|
||||
value={props.pos.widgetValue && props.pos.widgetValue}
|
||||
onBlur={handleInputBlur}
|
||||
onChange={(e) =>
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
@@ -257,15 +243,6 @@ function PlaceholderType(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : props.pos.widgetValue ? (
|
||||
<div
|
||||
style={{
|
||||
color: "black",
|
||||
fontSize: "14px"
|
||||
}}
|
||||
>
|
||||
<span>{props.pos.widgetValue}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
@@ -278,12 +255,14 @@ function PlaceholderType(props) {
|
||||
);
|
||||
|
||||
case "job title":
|
||||
return props.isNeedSign &&
|
||||
props.data?.signerObjId === props.signerObjId ? (
|
||||
return props.isSignYourself ||
|
||||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
|
||||
<input
|
||||
className="inputPlaceholder"
|
||||
type="text"
|
||||
placeholder="job title"
|
||||
value={props.pos.widgetValue && props.pos.widgetValue}
|
||||
onBlur={handleInputBlur}
|
||||
onChange={(e) =>
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
@@ -296,15 +275,6 @@ function PlaceholderType(props) {
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : props.pos.widgetValue ? (
|
||||
<div
|
||||
style={{
|
||||
color: "black",
|
||||
fontSize: "14px"
|
||||
}}
|
||||
>
|
||||
<span>{props.pos.widgetValue}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
@@ -318,12 +288,11 @@ function PlaceholderType(props) {
|
||||
case "date":
|
||||
return (
|
||||
<input
|
||||
placeholder="mm/dd/yyyy"
|
||||
className="inputPlaceholder"
|
||||
style={{ outlineColor: "#007bff" }}
|
||||
type="date"
|
||||
disabled={
|
||||
props.isNeedSign ? false : props.isPlaceholder ? true : false
|
||||
}
|
||||
disabled={props.isPlaceholder ? true : false}
|
||||
onBlur={handleInputBlur}
|
||||
onChange={(e) =>
|
||||
onChangeInput(
|
||||
@@ -362,7 +331,7 @@ function PlaceholderType(props) {
|
||||
>
|
||||
{props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
|
||||
{props?.handleUserName &&
|
||||
props?.handleUserName(props?.data?.signerObjId, props?.data?.Role)}
|
||||
props?.handleUserName(props?.data.Id, props?.data.Role)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -277,158 +277,22 @@ function FieldsComponent({
|
||||
<span style={{ marginLeft: 2 }}>Add role</span>
|
||||
</div>
|
||||
)}
|
||||
{/* <div
|
||||
data-tut={dataTut2}
|
||||
className="signLayoutContainer2"
|
||||
style={{ backgroundColor: themeColor() }}
|
||||
>
|
||||
<div
|
||||
onClick={() => addPositionOfSignature("onclick", false)}
|
||||
ref={(element) => {
|
||||
dragSignatureSS(element);
|
||||
if (element) {
|
||||
signRef.current = element;
|
||||
// const height = signRef && signRef.current.offsetHeight;
|
||||
// const width = signRef && signRef.current.offsetWidth;
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
userSelect: "none",
|
||||
opacity: isDragSignatureSS ? 0.5 : 1,
|
||||
backgroundImage: `url(${sign})`,
|
||||
backgroundSize: "70% 70%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center center",
|
||||
paddingBottom: "2.2rem"
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: "12px",
|
||||
position: "relative",
|
||||
top: "2.6rem"
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => addPositionOfSignature("onclick", true)}
|
||||
ref={(element) => {
|
||||
dragStampSS(element);
|
||||
dragRef.current = element;
|
||||
}}
|
||||
onMouseMove={handleDivClick}
|
||||
onMouseDown={handleMouseLeave}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
userSelect: "none",
|
||||
backgroundImage: `url(${stamp})`,
|
||||
backgroundSize: "32px 33px",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center center",
|
||||
paddingBottom: "2.2rem"
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: "12px",
|
||||
position: "relative",
|
||||
top: "2.6rem"
|
||||
}}
|
||||
>
|
||||
Stamp
|
||||
</span>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
style={{
|
||||
overflowX: "scroll",
|
||||
whiteSpace: "nowrap",
|
||||
padding: "10px",
|
||||
background: "white",
|
||||
borderTop: `2px solid ${themeColor()}`
|
||||
}}
|
||||
>
|
||||
<i
|
||||
<div
|
||||
style={{
|
||||
color: "rgb(140 142 149)",
|
||||
position: "fixed",
|
||||
left: "1%",
|
||||
bottom: "3%",
|
||||
fontSize: "23px"
|
||||
display: "flex",
|
||||
overflowX: "scroll",
|
||||
whiteSpace: "nowrap",
|
||||
padding: "10px"
|
||||
}}
|
||||
onClick={() => handleScroll(-100)}
|
||||
className="fa-solid fa-circle-chevron-left"
|
||||
></i>
|
||||
<div style={{ display: "flex" }}>
|
||||
{/* {updateWidgets.map((item, ind) => {
|
||||
return (
|
||||
<div
|
||||
key={ind}
|
||||
ref={(element) => {
|
||||
item.ref(element);
|
||||
if (element) {
|
||||
signRef.current = element;
|
||||
}
|
||||
}}
|
||||
className={signStyle}
|
||||
onMouseMove={handleDivClick}
|
||||
onMouseDown={handleMouseLeave}
|
||||
style={{
|
||||
opacity: isDragSign ? 0.5 : 1,
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
|
||||
marginLeft: "5px"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginLeft: "5px"
|
||||
}}
|
||||
>
|
||||
<i
|
||||
class="fa-sharp fa-solid fa-grip-vertical"
|
||||
style={{ color: "#908d8d", fontSize: "13px" }}
|
||||
></i>
|
||||
<span
|
||||
style={{
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
// padding: "3px 20px 0px 20px",
|
||||
color: "black",
|
||||
marginLeft: "5px"
|
||||
}}
|
||||
>
|
||||
{item.type}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: themeColor(),
|
||||
padding: "0 5px",
|
||||
display: "flex",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<i
|
||||
style={{ color: "white", fontSize: item.iconSize }}
|
||||
className={item.icon}
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})} */}
|
||||
>
|
||||
<AllWidgets
|
||||
updateWidgets={updateWidgets}
|
||||
handleDivClick={handleDivClick}
|
||||
@@ -436,19 +300,9 @@ function FieldsComponent({
|
||||
signRef={signRef}
|
||||
marginLeft={5}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
</div>
|
||||
<i
|
||||
style={{
|
||||
color: "rgb(140 142 149)",
|
||||
position: "fixed",
|
||||
left: "93%",
|
||||
bottom: "3%",
|
||||
fontSize: "23px"
|
||||
}}
|
||||
onClick={() => handleScroll(100)}
|
||||
className="fa-solid fa-circle-chevron-right"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -56,8 +56,7 @@ function RenderPdf({
|
||||
signersdata,
|
||||
setIsPageCopy,
|
||||
setSignerObjId,
|
||||
setShowDropdown,
|
||||
initial
|
||||
setShowDropdown
|
||||
}) {
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const newWidth = containerWH.width;
|
||||
@@ -362,7 +361,6 @@ function RenderPdf({
|
||||
posHeight={posHeight}
|
||||
handleUserName={handleAllUserName}
|
||||
isDragging={false}
|
||||
initial={initial}
|
||||
pdfDetails={pdfDetails}
|
||||
/>
|
||||
</React.Fragment>
|
||||
@@ -375,9 +373,9 @@ function RenderPdf({
|
||||
);
|
||||
};
|
||||
|
||||
const handleUserName = (signerId, Role) => {
|
||||
if (signerId) {
|
||||
const checkSign = signersdata.find((sign) => sign.objectId === signerId);
|
||||
const handleUserName = (Id, Role) => {
|
||||
if (Id) {
|
||||
const checkSign = signersdata.find((sign) => sign.Id === Id);
|
||||
if (checkSign?.Name) {
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -20,14 +20,7 @@ export const calculateInitialWidthHeight = (type, widgetData) => {
|
||||
getHeight: height
|
||||
};
|
||||
};
|
||||
export const addInitialData = (
|
||||
signerPos,
|
||||
setXyPostion,
|
||||
value,
|
||||
initial,
|
||||
signerObjId,
|
||||
jsonSender
|
||||
) => {
|
||||
export const addInitialData = (signerPos, setXyPostion, value, 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
|
||||
@@ -38,9 +31,7 @@ export const addInitialData = (
|
||||
item.placeHolder,
|
||||
setXyPostion,
|
||||
value,
|
||||
initial,
|
||||
signerObjId,
|
||||
jsonSender
|
||||
signerObjId
|
||||
)
|
||||
};
|
||||
} else {
|
||||
@@ -52,29 +43,19 @@ export const addInitialData = (
|
||||
// If there is no nested array, add the new field
|
||||
return {
|
||||
...item,
|
||||
pos: addInitialData(
|
||||
item.pos,
|
||||
setXyPostion,
|
||||
value,
|
||||
initial,
|
||||
signerObjId,
|
||||
jsonSender
|
||||
)
|
||||
pos: addInitialData(item.pos, setXyPostion, value, signerObjId)
|
||||
// Adjust this line to add the desired field
|
||||
};
|
||||
} else {
|
||||
const widgetData =
|
||||
item.type === "name"
|
||||
? jsonSender
|
||||
? value?.Name
|
||||
: item.type === "company"
|
||||
? value.ExtUserPtr.Company
|
||||
: item.type === "job title" && value.ExtUserPtr.JobTitle;
|
||||
if (item.type === "initials") {
|
||||
return {
|
||||
...item,
|
||||
SignUrl: initial
|
||||
};
|
||||
} else if (
|
||||
? value?.Company
|
||||
: item.type === "job title"
|
||||
? value?.JobTitle
|
||||
: "";
|
||||
if (
|
||||
item.type === "name" ||
|
||||
item.type === "company" ||
|
||||
item.type === "job title"
|
||||
@@ -100,11 +81,10 @@ export const onChangeInput = (
|
||||
index,
|
||||
setXyPostion,
|
||||
signerObjId,
|
||||
initial,
|
||||
jsonSender
|
||||
initial
|
||||
) => {
|
||||
const isSigners = xyPostion.some((data) => data.signerPtr);
|
||||
console.log(signerObjId);
|
||||
|
||||
if (isSigners) {
|
||||
const filterSignerPos = xyPostion.filter(
|
||||
(data) => data.signerObjId === signerObjId
|
||||
@@ -116,9 +96,7 @@ export const onChangeInput = (
|
||||
xyPostion,
|
||||
setXyPostion,
|
||||
value,
|
||||
initial,
|
||||
signerObjId,
|
||||
jsonSender
|
||||
signerObjId
|
||||
);
|
||||
setXyPostion(xyData);
|
||||
} else {
|
||||
@@ -973,7 +951,7 @@ export const multiSignEmbed = async (
|
||||
}
|
||||
}
|
||||
};
|
||||
const checkboxId = "checkbox_" + id;
|
||||
const checkboxId = "checkbox_" + imgData.key;
|
||||
if (imgData.type === "checkbox") {
|
||||
const checkBox = form.createCheckBox(checkboxId);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user