WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-09-01 04:38:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add dropdown,initial sign,name,job title in placeholder flow

Browse Source
This commit is contained in:
RaktimaNXG
2024-01-16 19:47:07 +05:30
parent 221a49bb4a
commit bb732d7606
9 changed files with 470 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+19 -96
View File
@@ -79,6 +79,7 @@ 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 =
@@ -268,6 +269,7 @@ function PdfRequestFiles() {
if (res[0] && res.length > 0) {
setDefaultSignImg(res[0].ImageURL);
setInitial(res[0]?.Initials);
}
const loadObj = {
isLoad: false
@@ -289,18 +291,23 @@ function PdfRequestFiles() {
(data) => data.signerObjId === signerObjectId
);
if (checkUser && checkUser.length > 0) {
let checkSignUrl = [];
const checkSign = checkUser[0].placeHolder.filter(
(data, ind) => data.pos
);
for (let i = 0; i < checkSign.length; i++) {
const posData = checkSign[i].pos.filter((pos) => !pos.SignUrl);
if (posData && posData.length > 0) {
checkSignUrl.push(posData);
}
let checkSigned = 0;
let allXyPos = 0;
for (let i = 0; i < checkUser[0].placeHolder.length; i++) {
const posSignUrlData = checkUser[0].placeHolder[i].pos.filter(
(pos) => pos.SignUrl
);
const posWidgetData = checkUser[0].placeHolder[i].pos.filter(
(pos) => pos.widgetValue
);
checkSigned =
checkSigned + posSignUrlData.length + posWidgetData.length;
allXyPos = allXyPos + checkUser[0].placeHolder[i].pos.length;
}
if (checkSignUrl && checkSignUrl.length > 0) {
if (allXyPos !== checkSigned) {
setIsAlert({
isShow: true,
alertMessage: "Please complete your signature!"
@@ -315,93 +322,7 @@ function PdfRequestFiles() {
const pdfDoc = await PDFDocument.load(existingPdfBytes, {
ignoreEncryption: true
});
// let pdfBase64;
//checking if signature is only one then send image url in jpeg formate to server
// if (pngUrl.length === 1 && pngUrl[0].pos.length === 1) {
// if (isDocId) {
// try {
// pdfBase64 = await getBase64FromUrl(pdfUrl);
// } catch (err) {
// console.log(err);
// }
// } else {
// //embed document's object id to all pages in pdf document
// try {
// await embedDocId(pdfDoc, documentId, allPages);
// } catch (err) {
// console.log(err);
// }
// try {
// pdfBase64 = await pdfDoc.saveAsBase64({
// useObjectStreams: false
// });
// } catch (err) {
// console.log(err);
// }
// }
// for (let pngData of pngUrl) {
// const imgUrlList = pngData.pos;
// const pageNo = pngData.pageNumber;
// imgUrlList.map(async (data) => {
// //cheking signUrl is defau;t signature url of custom url
// let ImgUrl = data.SignUrl;
// const checkUrl = urlValidator(ImgUrl);
// //if default signature url then convert it in base 64
// if (checkUrl) {
// ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
// }
// //function for called convert png signatre to jpeg in base 64
// convertPNGtoJPEG(ImgUrl)
// .then((jpegBase64Data) => {
// const removeBase64Fromjpeg = "data:image/jpeg;base64,";
// const newImgUrl = jpegBase64Data.replace(
// removeBase64Fromjpeg,
// ""
// );
// //function for call to embed signature in pdf and get digital signature pdf
// signPdfFun(
// newImgUrl,
// documentId,
// signerObjectId,
// pdfOriginalWidth,
// pngUrl,
// containerWH,
// setIsAlert,
// data,
// pdfBase64,
// pageNo
// )
// .then((res) => {
// if (res && res.status === "success") {
// setPdfUrl(res.data);
// setIsSigned(true);
// setSignedSigners([]);
// setUnSignedSigners([]);
// getDocumentDetails();
// } else {
// setIsAlert({
// isShow: true,
// alertMessage: "something went wrong"
// });
// }
// })
// .catch((err) => {
// setIsAlert({
// isShow: true,
// alertMessage: "something went wrong"
// });
// });
// })
// .catch((error) => {
// console.error("Error:", error);
// });
// });
// }
// }
// //else if signature is more than one then embed all sign with the use of pdf-lib
// else if (pngUrl.length > 0 && pngUrl[0].pos.length > 0) {
const flag = false;
//embed document's object id to all pages in pdf document
if (!isDocId) {
@@ -415,6 +336,7 @@ function PdfRequestFiles() {
flag,
containerWH
);
//function for call to embed signature in pdf and get digital signature pdf
try {
const res = await signPdfFun(
@@ -922,6 +844,7 @@ function PdfRequestFiles() {
pdfLoadFail={pdfLoadFail}
setSignerPos={setSignerPos}
containerWH={containerWH}
initial={initial}
/>
)}
</div>
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+84 -84
View File
@@ -17,7 +17,8 @@ import {
multiSignEmbed,
pdfNewWidthFun,
addDefaultSignatureImg,
onImageSelect
onImageSelect,
calculateInitialWidthHeight
} from "../utils/Utils";
import { useParams } from "react-router-dom";
import Tour from "reactour";
@@ -321,28 +322,6 @@ function SignYourSelf() {
}
};
//calculate width and height
const calculateWidthHeight = (type) => {
const intialText =
type === "name"
? pdfDetails[0].ExtUserPtr.Name
: type === "company"
? pdfDetails[0].ExtUserPtr.Company
: type === "job title" && pdfDetails[0].ExtUserPtr.JobTitle;
const span = document.createElement("span");
span.textContent = intialText;
span.style.font = `14px`; // here put your text size and font family
span.style.display = "hidden";
document.body.appendChild(span);
const width = span.offsetWidth;
const height = span.offsetHeight;
document.body.removeChild(span);
return {
getWidth: width,
getHeight: height
};
};
//function for setting position after drop signature button over pdf
const addPositionOfSignature = (item, monitor) => {
const key = Math.floor(1000 + Math.random() * 9000);
@@ -357,11 +336,31 @@ function SignYourSelf() {
xPosition: window.innerWidth / 2 - 100,
yPosition: window.innerHeight / 2 - 60,
isDrag: false,
isStamp: monitor.type === "stamp" && true,
key: key,
isStamp: monitor,
type: item.text,
type: monitor.type,
yBottom: window.innerHeight / 2 - 60,
SignUrl: item.text === "initials" && initial
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
: "",
Width:
monitor.type === "name" ||
monitor.type === "company" ||
monitor.type === "job title"
? calculateInitialWidthHeight(monitor.type, pdfDetails[0]).getWidth
: "",
Height:
monitor.type === "company" ||
monitor.type === "name" ||
monitor.type === "job title"
? calculateInitialWidthHeight(monitor.type, pdfDetails[0]).getHeight
: ""
};
dropData.push(dropObj);
@@ -386,8 +385,8 @@ function SignYourSelf() {
xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
isDrag: false,
isStamp: item.text === "stamp" && true,
key: key,
isStamp: isDragStamp || isDragStampSS ? true : false,
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
yBottom: ybottom,
@@ -405,13 +404,13 @@ function SignYourSelf() {
item.text === "name" ||
item.text === "company" ||
item.text === "job title"
? calculateWidthHeight(item.text).getWidth
? calculateInitialWidthHeight(item.text, pdfDetails[0]).getWidth
: "",
Height:
item.text === "company" ||
item.text === "name" ||
item.text === "job title"
? calculateWidthHeight(item.text).getHeight
? calculateInitialWidthHeight(item.text, pdfDetails[0]).getHeight
: ""
};
@@ -449,78 +448,79 @@ function SignYourSelf() {
};
setXyPostion((prev) => [...prev, xyPos]);
if (isDragSign || isDragSignatureSS) {
if (isDragSign || isDragSignatureSS || isDragStamp || isDragStampSS) {
setIsSignPad(true);
setSignKey(key);
}
}
// setXyPostion((prev) => [...prev, xyPos]);
};
//function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
async function embedImages() {
let checkSignUrl = [];
let checkSigned = 0;
let allXyPos = 0;
for (let i = 0; i < xyPostion.length; i++) {
const posData = xyPostion[i].pos.filter((pos) => !pos.SignUrl);
if (posData && posData.length > 0) {
checkSignUrl.push(posData);
}
const posSignUrlData = xyPostion[i].pos.filter((pos) => pos.SignUrl);
const posWidgetData = xyPostion[i].pos.filter((pos) => pos.widgetValue);
checkSigned = checkSigned + posSignUrlData.length + posWidgetData.length;
allXyPos = allXyPos + xyPostion[i].pos.length;
}
// if (xyPostion.length === 0) {
// setIsAlert({
// isShow: true,
// alertMessage: "Please complete your signature!"
// });
// return;
// } else if (xyPostion.length > 0 && checkSignUrl.length > 0) {
// setIsAlert({
// isShow: true,
// alertMessage: "Please complete your signature!"
// });
// return;
// } else {
setIsCeleb(true);
setTimeout(() => {
setIsCeleb(false);
}, 3000);
const loadObj = {
isLoad: true,
message: "This might take some time"
};
setIsLoading(loadObj);
const url = pdfDetails[0] && pdfDetails[0].URL;
if (xyPostion.length === 0) {
setIsAlert({
isShow: true,
alertMessage: "Please complete your signature!"
});
return;
} else if (xyPostion.length > 0 && allXyPos !== checkSigned) {
setIsAlert({
isShow: true,
alertMessage: "Please complete your signature!"
});
return;
} else {
setIsCeleb(true);
setTimeout(() => {
setIsCeleb(false);
}, 3000);
const loadObj = {
isLoad: true,
message: "This might take some time"
};
setIsLoading(loadObj);
const url = pdfDetails[0] && pdfDetails[0].URL;
const existingPdfBytes = await fetch(url).then((res) => res.arrayBuffer());
const existingPdfBytes = await fetch(url).then((res) =>
res.arrayBuffer()
);
// Load a PDFDocument from the existing PDF bytes
const pdfDoc = await PDFDocument.load(existingPdfBytes, {
ignoreEncryption: true
});
// Load a PDFDocument from the existing PDF bytes
const pdfDoc = await PDFDocument.load(existingPdfBytes, {
ignoreEncryption: true
});
const flag = true;
//embed document's object id to all pages in pdf document
await embedDocId(pdfDoc, documentId, allPages);
const flag = true;
//embed document's object id to all pages in pdf document
await embedDocId(pdfDoc, documentId, allPages);
//embed multi signature in pdf
const pdfBytes = await multiSignEmbed(
xyPostion,
pdfDoc,
pdfOriginalWidth,
flag,
containerWH
);
//embed multi signature in pdf
const pdfBytes = await multiSignEmbed(
xyPostion,
pdfDoc,
pdfOriginalWidth,
flag,
containerWH
);
// console.log("pdf", pdfBytes);
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(pdfBytes, documentId);
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(pdfBytes, documentId);
setIsSignPad(false);
setIsEmail(true);
setXyPostion([]);
setSignBtnPosition([]);
// }
setIsSignPad(false);
setIsEmail(true);
setXyPostion([]);
setSignBtnPosition([]);
}
}
//function for get digital signature
microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js
+4
View File
@@ -6,6 +6,10 @@ function AllWidgets(props) {
return (
<div
key={ind}
onClick={() =>
props.addPositionOfSignature &&
props.addPositionOfSignature("onclick", item)
}
ref={(element) => {
item.ref(element);
if (element) {
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+14 -11
View File
@@ -8,20 +8,20 @@ import PlaceholderType from "./placeholderType";
function Placeholder(props) {
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
//onclick placeholder function to open signature pad
const handlePlaceholderClick = () => {
if (props.pos.type === "text") {
if (props.pos.type === "text" || props.pos.type === "checkbox") {
setDraggingEnabled(false);
}
if (!props.data && !props.isDragging) {
if (props.isNeedSign && !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.setShowDropdown(true);
props.setSignKey(props.pos.key);
} else if (props.pos.type === "dropdown" && !props.isNeedSign) {
props?.setShowDropdown(true);
props?.setSignKey(props.pos.key);
}
} else {
props.setIsSignPad(true);
@@ -33,7 +33,7 @@ function Placeholder(props) {
props.setShowDropdown(true);
props.setSignKey(props.pos.key);
}
} else {
} else if (!props.pos.type) {
if (
!props.pos.type &&
props.isNeedSign &&
@@ -209,8 +209,9 @@ function Placeholder(props) {
className="fa-regular fa-circle-xmark signCloseBtn"
onClick={(e) => {
e.stopPropagation();
if (props.data) {
props.handleDeleteSign(props.pos.key, props.data.signerObjId);
props.handleDeleteSign(props.pos.key, props.data.Id);
} else {
props.handleDeleteSign(props.pos.key);
props.setIsStamp(false);
@@ -219,7 +220,7 @@ function Placeholder(props) {
onTouchEnd={(e) => {
e.stopPropagation();
if (props.data) {
props.handleDeleteSign(props.pos.key, props.data.signerObjId);
props.handleDeleteSign(props.pos.key, props.data.Id);
} else {
props.handleDeleteSign(props.pos.key);
props.setIsStamp(false);
@@ -239,12 +240,14 @@ function Placeholder(props) {
setXyPostion={props.setXyPostion}
data={props.data}
setSignKey={props.setSignKey}
isShowDropdown={props.isShowDropdown}
isShowDropdown={props?.isShowDropdown}
isPlaceholder={props.isPlaceholder}
signerObjId={props.signerObjId}
handleUserName={props.handleUserName}
setDraggingEnabled={setDraggingEnabled}
pdfDetails={props.pdfDetails}
pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
isNeedSign={props.isNeedSign}
initial={props.initial}
/>
</div>
</Rnd>
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
+140 -17
View File
@@ -1,12 +1,26 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { onChangeInput } from "../../utils/Utils";
function PlaceholderType(props) {
const [selectOption, setSelectOption] = useState("");
const type = props.pos.type;
const handleInputBlur = () => {
props.setDraggingEnabled(true);
};
useEffect(() => {
if (props.isNeedSign) {
onChangeInput(
props.pdfDetails,
null,
props.xyPostion,
null,
props.setXyPostion,
props.data && props.data.signerObjId,
props.initial
);
}
}, [type]);
switch (props.pos.type) {
case "signature":
return props.pos.SignUrl ? (
@@ -136,19 +150,54 @@ function PlaceholderType(props) {
</div>
);
case "initials":
return (
return props.pos.SignUrl || props.initial ? (
<img
alt="signimg"
src={props.pos.SignUrl}
src={props.pos?.SignUrl ? props.pos?.SignUrl : props.initial}
style={{
width: "99%",
height: "100%",
objectFit: "contain"
}}
/>
) : (
<div
style={{
fontSize: "10px",
color: "black",
justifyContent: "center"
}}
>
<div>{props.pos.type}</div>
{props?.handleUserName &&
props?.handleUserName(props?.data.signerObjId, props?.data.Role)}
</div>
);
case "name":
return (
return props.isNeedSign ? (
<input
className="inputPlaceholder"
type="text"
value={
props.pos.widgetValue
? props.pos.widgetValue
: props.pdfDetails.ExtUserPtr.Name
}
onChange={(e) =>
onChangeInput(
e.target.value,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.signerObjId,
false
)
}
/>
) : props.pos.widgetValue ? (
<div
style={{
color: "black",
@@ -157,27 +206,98 @@ function PlaceholderType(props) {
>
<span>{props.pos.widgetValue}</span>
</div>
);
case "company":
return (
) : (
<div
style={{
fontSize: "14px",
color: "black"
color: "black",
fontSize: "14px"
}}
>
<div>{props.pos.widgetValue}</div>
<span>{props.pos.type}</span>
</div>
);
case "job title":
return (
case "company":
return props.isNeedSign ? (
<input
className="inputPlaceholder"
type="text"
value={
props.pos.widgetValue
? props.pos.widgetValue
: props.pdfDetails.ExtUserPtr.Company
}
onChange={(e) =>
onChangeInput(
e.target.value,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.signerObjId,
false
)
}
/>
) : props.pos.widgetValue ? (
<div
style={{
fontSize: "14px",
color: "black"
color: "black",
fontSize: "14px"
}}
>
<div>{props.pos.widgetValue}</div>
<span>{props.pos.widgetValue}</span>
</div>
) : (
<div
style={{
color: "black",
fontSize: "14px"
}}
>
<span>{props.pos.type}</span>
</div>
);
case "job title":
return props.isNeedSign ? (
<input
className="inputPlaceholder"
type="text"
value={
props.pos.widgetValue
? props.pos.widgetValue
: props.pdfDetails.ExtUserPtr.JobTitle
}
onChange={(e) =>
onChangeInput(
e.target.value,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.signerObjId,
false
)
}
/>
) : props.pos.widgetValue ? (
<div
style={{
color: "black",
fontSize: "14px"
}}
>
<span>{props.pos.widgetValue}</span>
</div>
) : (
<div
style={{
color: "black",
fontSize: "14px"
}}
>
<span>{props.pos.type}</span>
</div>
);
case "date":
@@ -186,7 +306,9 @@ function PlaceholderType(props) {
className="inputPlaceholder"
style={{ outlineColor: "#007bff" }}
type="date"
disabled={props.isPlaceholder}
disabled={
props.isNeedSign ? false : props.isPlaceholder ? true : false
}
onBlur={handleInputBlur}
onChange={(e) =>
onChangeInput(
@@ -201,6 +323,7 @@ function PlaceholderType(props) {
}
/>
);
default:
return props.pos.SignUrl ? (
<div style={{ pointerEvents: "none" }}>
microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+1
View File
@@ -435,6 +435,7 @@ function FieldsComponent({
handleMouseLeave={handleMouseLeave}
signRef={signRef}
marginLeft={5}
addPositionOfSignature={addPositionOfSignature}
/>
</div>
<i
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+7 -1
View File
@@ -56,7 +56,8 @@ function RenderPdf({
signersdata,
setIsPageCopy,
setSignerObjId,
setShowDropdown
setShowDropdown,
initial
}) {
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
@@ -360,6 +361,9 @@ function RenderPdf({
posWidth={posWidth}
posHeight={posHeight}
handleUserName={handleAllUserName}
isDragging={false}
initial={initial}
pdfDetails={pdfDetails}
/>
</React.Fragment>
)
@@ -964,6 +968,7 @@ function RenderPdf({
posWidth={posWidth}
posHeight={posHeight}
pdfDetails={pdfDetails[0]}
isDragging={isDragging}
/>
)
);
@@ -1487,6 +1492,7 @@ function RenderPdf({
posWidth={posWidth}
posHeight={posHeight}
pdfDetails={pdfDetails[0]}
isDragging={isDragging}
/>
)
);
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+75 -69
View File
@@ -452,9 +452,14 @@ function PlaceHolderSign() {
}
setSignerPos((prev) => [...prev, placeHolderPos]);
}
if (item.text === "dropdown") {
setShowDropdown(true);
setSignKey(key);
}
}
}
};
//function for get pdf page details
const pageDetails = async (pdf) => {
const load = {
@@ -858,52 +863,46 @@ function PlaceHolderSign() {
];
const handleSaveDropdownOptions = (dropdownName, dropdownOptions) => {
//get current signers placeholder position data
const currentSigner = signerPos.filter(
(data) => data.signerObjId === signerObjId
);
//get current pagenumber placeholder index
const getIndex = currentSigner[0].placeHolder.findIndex((object) => {
return object.pageNumber === pageNumber;
});
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
const placeholderPosition = currentSigner[0].placeHolder;
//function of save signature image and get updated position with signature image url
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
let getXYdata = placeholderPosition[getIndex].pos;
const updateXYData = getXYdata.map((position) => {
if (position.key === signKey) {
return {
...position,
widgetName: dropdownName,
widgetOption: dropdownOptions
};
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((position, ind) => {
if (position.key === signKey) {
return {
...position,
widgetName: dropdownName,
widgetOption: dropdownOptions
};
}
return position;
});
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.Id === uniqueId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
}
return position;
});
const getUpdatePosition = placeholderPosition.map((obj, ind) => {
if (ind === getIndex) {
return { ...obj, pos: updateXYData };
}
return obj;
});
const updateSignerData = currentSigner.map((obj, ind) => {
if (obj.signerObjId === signerObjId) {
return { ...obj, placeHolder: getUpdatePosition };
}
return obj;
});
const index = signerPos.findIndex(
(data) => data.signerObjId === signerObjId
);
setSignerPos((prevState) => {
const newState = [...prevState];
newState.splice(index, 1, ...updateSignerData);
return newState;
});
}
};
//function for update TourStatus
@@ -1082,7 +1081,7 @@ function PlaceHolderSign() {
{isSendAlert.mssg === "confirm" && (
<button
// onClick={() => sendEmailToSigners()}
onClick={() => sendEmailToSigners()}
style={{
background: themeColor()
}}
@@ -1298,37 +1297,44 @@ function PlaceHolderSign() {
selectedEmail={selectedEmail}
setUniqueId={setUniqueId}
setRoleName={setRoleName}
initial={true}
/>
</div>
) : (
<div>
<div className="signerComponent">
<SignerListPlace
signerPos={signerPos}
signersdata={signersdata}
isSelectListId={isSelectListId}
setSignerObjId={setSignerObjId}
setIsSelectId={setIsSelectId}
setContractName={setContractName}
setUniqueId={setUniqueId}
setRoleName={setRoleName}
// handleAddSigner={handleAddSigner}
/>
<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}
setIsSelectId={setIsSelectId}
setContractName={setContractName}
setUniqueId={setUniqueId}
setRoleName={setRoleName}
// handleAddSigner={handleAddSigner}
/>
<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}
initial={true}
/>
</div>
</div>
</div>
</div>
microfrontends/SignDocuments/src/utils/Utils.js
+126 -36
View File
@@ -3,13 +3,87 @@ import { rgb } from "pdf-lib";
import { themeColor } from "./ThemeColor/backColor";
const isMobile = window.innerWidth < 767;
//calculate width and height
export const calculateInitialWidthHeight = (type, pdfDetails) => {
const intialText =
type === "name"
? pdfDetails.ExtUserPtr.Name
: type === "company"
? pdfDetails.ExtUserPtr.Company
: type === "job title" && pdfDetails.ExtUserPtr.JobTitle;
const span = document.createElement("span");
span.textContent = intialText;
span.style.font = `14px`; // here put your text size and font family
span.style.display = "hidden";
document.body.appendChild(span);
const width = span.offsetWidth;
const height = span.offsetHeight;
document.body.removeChild(span);
return {
getWidth: width,
getHeight: height
};
};
export const addInitialData = (signerPos, setXyPostion, value, initial) => {
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
)
};
} else if (item.pos && item.pos.length > 0) {
// If there is no nested array, add the new field
return {
...item,
pos: addInitialData(item.pos, setXyPostion, value, initial)
// Adjust this line to add the desired field
};
} else {
const widgetData =
item.type === "name"
? value.ExtUserPtr.Name
: item.type === "company"
? value.ExtUserPtr.Company
: item.type === "job title" && value.ExtUserPtr.JobTitle;
if (item.type === "initials") {
return {
...item,
SignUrl: initial
};
} else if (
item.type === "name" ||
item.type === "company" ||
item.type === "job title"
) {
return {
...item,
widgetValue: widgetData,
Width: calculateInitialWidthHeight(item.type, value).getWidth,
Height: calculateInitialWidthHeight(item.type, value).getHeight
};
} else {
return {
...item
};
}
}
});
};
export const onChangeInput = (
value,
signKey,
xyPostion,
index,
setXyPostion,
signerObjId
signerObjId,
initial
) => {
const isSigners = xyPostion.some((data) => data.signerPtr);
@@ -17,38 +91,44 @@ export const onChangeInput = (
const filterSignerPos = xyPostion.filter(
(data) => data.signerObjId === signerObjId
);
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === index
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
widgetValue: value
};
}
return url;
});
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
if (obj.pageNumber === index) {
return { ...obj, pos: addSignPos };
}
return obj;
});
const newUpdateSigner = xyPostion.map((obj, ind) => {
if (obj.Id === signerObjId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
if (initial) {
const xyData = addInitialData(xyPostion, setXyPostion, value, initial);
setXyPostion(xyData);
} else {
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === index
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
widgetValue: value
};
}
return url;
});
setXyPostion(newUpdateSigner);
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
if (obj.pageNumber === index) {
return { ...obj, pos: addSignPos };
}
return obj;
});
const newUpdateSigner = xyPostion.map((obj, ind) => {
if (obj.signerObjId === signerObjId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setXyPostion(newUpdateSigner);
}
}
} else {
let getXYdata = xyPostion[index].pos;
@@ -122,7 +202,7 @@ export const widgets = [
{
type: "date",
icon: "fa-solid fa-calendar-days",
iconSize: "19px"
iconSize: "20px"
}
];
@@ -221,20 +301,20 @@ export const defaultWidthHeight = (type) => {
return obj;
case "name":
obj = {
width: 150,
width: 50,
height: 25
};
return obj;
case "company":
obj = {
width: 150,
width: 60,
height: 25
};
return obj;
case "job title":
obj = {
width: 150,
width: 60,
height: 25
};
return obj;
@@ -466,7 +546,17 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
const addSign = getPosData.map((position, ind) => {
getIMGWH = calculateImgAspectRatio(imgWH, position);
if (position && !position.isStamp) {
if (position.type) {
if (position?.type === "signature") {
return {
...position,
SignUrl: defaultSignImg,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
ImageType: "default"
};
}
} else if (position && !position.isStamp) {
return {
...position,
SignUrl: defaultSignImg,
@@ -897,7 +987,7 @@ export const multiSignEmbed = async (
width: scaleWidth,
height: scaleHeight
});
dropdown.disableEditing();
dropdown.enableReadOnly();
} else {
page.drawImage(img, {
x: xPos(imgData),