WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-17 21:25:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: widgets information is saved in the server-side options field

Browse Source
This commit is contained in:
RaktimaNXG
2024-02-22 17:36:50 +05:30
parent 84b545c37d
commit 3e0747164a
9 changed files with 899 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+2 -2
View File
@@ -304,7 +304,7 @@ function PdfRequestFiles() {
for (let i = 0; i < checkUser[0].placeHolder.length; i++) {
unSignUrlData = checkUser[0].placeHolder[i].pos.filter(
(pos) => !pos?.SignUrl && !pos.widgetValue
(pos) => !pos?.SignUrl && !pos.options.response
);
}
let checkboxExist;
@@ -313,7 +313,7 @@ function PdfRequestFiles() {
if (checkboxExist) {
optionRequiredCheckbox = unSignUrlData.filter(
(data) => data.widgetStatus !== "Optional"
(data) => data.options.status !== "Optional"
);
}
if (
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+397 -269
View File
@@ -5,6 +5,7 @@ import { themeColor } from "../utils/ThemeColor/backColor";
import axios from "axios";
import moment from "moment";
import Loader from "./component/loader";
import loader from "../assests/loader2.gif";
import RenderAllPdfPage from "./component/renderAllPdfPage";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
@@ -17,7 +18,6 @@ import {
embedDocId,
multiSignEmbed,
pdfNewWidthFun,
addDefaultSignatureImg,
onImageSelect,
calculateInitialWidthHeight,
defaultWidthHeight
@@ -66,6 +66,7 @@ function SignYourSelf() {
const [documentStatus, setDocumentStatus] = useState({ isCompleted: false });
const [myInitial, setMyInitial] = useState("");
const [isInitial, setIsInitial] = useState(false);
const [isUiLoading, setIsUiLoading] = useState(false);
const [isLoading, setIsLoading] = useState({
isLoad: true,
message: "This might take some time"
@@ -176,6 +177,7 @@ function SignYourSelf() {
if (documentData && documentData.length > 0) {
setPdfDetails(documentData);
setIsUiLoading(false);
const isCompleted =
documentData[0].IsCompleted && documentData[0].IsCompleted;
if (isCompleted) {
@@ -318,6 +320,130 @@ function SignYourSelf() {
return "";
}
};
const addWidgetOptions = (type) => {
let option = {};
switch (type) {
case "signature":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "stamp":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "checkbox":
option = {
name: "",
values: [],
status: "Read only",
response: true,
validation: {}
};
return option;
case "text":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "initials":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "name":
option = {
name: "",
values: [],
status: "",
response: getWidgetValue(type),
validation: {
type: "text",
pattern: ""
}
};
return option;
case "company":
option = {
name: "",
values: [],
status: "",
response: getWidgetValue(type),
validation: {
type: "text",
pattern: ""
}
};
return option;
case "job title":
option = {
name: "",
values: [],
status: "",
response: getWidgetValue(type),
validation: {
type: "text",
pattern: ""
}
};
return option;
case "date":
option = {
name: "",
values: [],
status: "",
response: getDate(),
validation: {
type: "text",
pattern: ""
}
};
return option;
case "image":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "email":
option = {
name: "",
values: [],
status: "",
response: getWidgetValue(type),
validation: {
type: "email",
pattern: ""
}
};
return option;
}
};
//function for setting position after drop signature button over pdf
const addPositionOfSignature = (item, monitor) => {
const key = Math.floor(1000 + Math.random() * 9000);
@@ -330,7 +456,9 @@ function SignYourSelf() {
const widgetValue = getWidgetValue(dragTypeValue);
const widgetWidth = defaultWidthHeight(dragTypeValue).width;
const widgetHeight = defaultWidthHeight(dragTypeValue).height;
const widgetTypeExist = ["name", "company", "job title", "email"].includes(
dragTypeValue
);
if (item === "onclick") {
dropObj = {
xPosition: containerWH.width / 2 - widgetWidth / 2,
@@ -341,25 +469,18 @@ function SignYourSelf() {
key: key,
type: dragTypeValue,
yBottom: window.innerHeight / 2 - 60,
widgetValue: widgetValue,
Width:
dragTypeValue === "name" ||
dragTypeValue === "company" ||
dragTypeValue === "job title" ||
dragTypeValue === "email"
? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth
: dragTypeValue === "initials"
? defaultWidthHeight(dragTypeValue).width
: "",
Height:
dragTypeValue === "company" ||
dragTypeValue === "name" ||
dragTypeValue === "job title" ||
dragTypeValue === "email"
? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight
: dragTypeValue === "initials"
? defaultWidthHeight(dragTypeValue).height
: ""
Width: widgetTypeExist
? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth
: dragTypeValue === "initials"
? defaultWidthHeight(dragTypeValue).width
: "",
Height: widgetTypeExist
? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight
: dragTypeValue === "initials"
? defaultWidthHeight(dragTypeValue).height
: "",
options: addWidgetOptions(dragTypeValue)
};
dropData.push(dropObj);
@@ -377,30 +498,18 @@ function SignYourSelf() {
dropObj = {
xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
isDrag: false,
// isDrag: false,
isStamp:
(dragTypeValue === "stamp" || dragTypeValue === "image") && true,
key: key,
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
yBottom: ybottom,
type: dragTypeValue,
widgetValue: widgetValue,
Width:
dragTypeValue === "name" ||
dragTypeValue === "company" ||
dragTypeValue === "job title" ||
dragTypeValue === "email"
? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth
: defaultWidthHeight(dragTypeValue).width,
Height:
dragTypeValue === "company" ||
dragTypeValue === "name" ||
dragTypeValue === "job title" ||
dragTypeValue === "email"
? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight
: defaultWidthHeight(dragTypeValue).height
Width: widgetTypeExist
? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth
: defaultWidthHeight(dragTypeValue).width,
Height: widgetTypeExist
? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight
: defaultWidthHeight(dragTypeValue).height,
options: addWidgetOptions(dragTypeValue)
};
dropData.push(dropObj);
@@ -453,10 +562,12 @@ function SignYourSelf() {
let allXyPos = 0;
for (let i = 0; i < xyPostion.length; i++) {
const posSignUrlData = xyPostion[i].pos.filter((pos) => pos.SignUrl);
const posWidgetData = xyPostion[i].pos.filter((pos) => pos.widgetValue);
// const posSignUrlData = xyPostion[i].pos.filter((pos) => pos.SignUrl);
const posWidgetData = xyPostion[i].pos.filter(
(pos) => pos.options.response
);
checkSigned = checkSigned + posSignUrlData.length + posWidgetData.length;
checkSigned = checkSigned + posWidgetData.length;
allXyPos = allXyPos + xyPostion[i].pos.length;
}
if (xyPostion.length === 0) {
@@ -476,11 +587,7 @@ function SignYourSelf() {
setTimeout(() => {
setIsCeleb(false);
}, 3000);
const loadObj = {
isLoad: true,
message: "This might take some time"
};
setIsLoading(loadObj);
setIsUiLoading(true);
const url = pdfDetails[0] && pdfDetails[0].URL;
const existingPdfBytes = await fetch(url).then((res) =>
@@ -719,13 +826,6 @@ function SignYourSelf() {
}
};
//function for add default signature url in local array
const addDefaultSignature = () => {
const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg);
setXyPostion(getXyData);
setShowAlreadySignDoc({ status: false });
};
const handleDontShow = (isChecked) => {
setIsDontShow(isChecked);
};
@@ -807,232 +907,260 @@ function SignYourSelf() {
) : noData ? (
<Nodata />
) : (
<div className="signatureContainer" ref={divRef}>
{/* this component used for UI interaction and show their functionality */}
{pdfLoadFail && !checkTourStatus && (
<Tour
onRequestClose={closeTour}
steps={tourConfig}
isOpen={signTour}
rounded={5}
closeWithMask={false}
/>
<div>
{isUiLoading && (
<div
style={{
position: "absolute",
height: "100vh",
width: "100%",
display: "flex",
justifyContent: "center",
flexDirection: "column",
alignItems: "center",
zIndex: "999",
backgroundColor: "#e6f2f2",
opacity: 0.8
}}
>
<img
alt="no img"
src={loader}
style={{ width: "100px", height: "100px" }}
/>
<span style={{ fontSize: "13px", fontWeight: "bold" }}>
This might take some time
</span>
</div>
)}
{/* this component used to render all pdf pages in left side */}
<div className="signatureContainer" ref={divRef}>
{/* this component used for UI interaction and show their functionality */}
{pdfLoadFail && !checkTourStatus && (
<Tour
onRequestClose={closeTour}
steps={tourConfig}
isOpen={signTour}
rounded={5}
closeWithMask={false}
/>
)}
<RenderAllPdfPage
pdfUrl={pdfUrl}
signPdfUrl={pdfDetails[0] && pdfDetails[0].URL}
allPages={allPages}
setAllPages={setAllPages}
setPageNumber={setPageNumber}
setSignBtnPosition={setSignBtnPosition}
pageNumber={pageNumber}
/>
{/* this component used to render all pdf pages in left side */}
{/* pdf render view */}
<div
style={{
marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
}}
>
<ModalUi
headerColor={"#dc3545"}
isOpen={isAlert.isShow}
title={"Alert"}
handleClose={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
<RenderAllPdfPage
pdfUrl={pdfUrl}
signPdfUrl={pdfDetails[0] && pdfDetails[0].URL}
allPages={allPages}
setAllPages={setAllPages}
setPageNumber={setPageNumber}
setSignBtnPosition={setSignBtnPosition}
pageNumber={pageNumber}
/>
{/* pdf render view */}
<div
style={{
marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px",
marginRight: !isMobile && pdfOriginalWidth > 500 && "20px"
}}
>
<div style={{ height: "100%", padding: 20 }}>
<p>{isAlert.alertMessage}</p>
<ModalUi
headerColor={"#dc3545"}
isOpen={isAlert.isShow}
title={"Alert"}
handleClose={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
}}
>
<div style={{ height: "100%", padding: 20 }}>
<p>{isAlert.alertMessage}</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
onClick={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
}}
type="button"
className="finishBtn cancelBtn"
>
Ok
</button>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
onClick={() => {
setIsAlert({
isShow: false,
alertMessage: ""
});
}}
type="button"
className="finishBtn cancelBtn"
>
Ok
</button>
</div>
</ModalUi>
{/* this modal is used show this document is already sign */}
<ModalUi
isOpen={showAlreadySignDoc.status}
title={"Sign Documents"}
handleClose={() => {
setShowAlreadySignDoc({ status: false });
}}
>
<div style={{ height: "100%", padding: 20 }}>
<p>{showAlreadySignDoc.mssg}</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
className="finishBtn cancelBtn"
onClick={() => setShowAlreadySignDoc({ status: false })}
>
Close
</button>
</div>
</ModalUi>
<PlaceholderCopy
isPageCopy={isPageCopy}
setIsPageCopy={setIsPageCopy}
xyPostion={xyPostion}
setXyPostion={setXyPostion}
allPages={allPages}
pageNumber={pageNumber}
signKey={signKey}
/>
{/* this is modal of signature pad */}
<SignPad
isSignPad={isSignPad}
isStamp={isStamp}
setIsImageSelect={setIsImageSelect}
setIsSignPad={setIsSignPad}
setImage={setImage}
isImageSelect={isImageSelect}
imageRef={imageRef}
onImageChange={onImageChange}
setSignature={setSignature}
image={image}
onSaveImage={saveImage}
onSaveSign={saveSign}
defaultSign={defaultSignImg}
myInitial={myInitial}
isInitial={isInitial}
setIsInitial={setIsInitial}
setIsStamp={setIsStamp}
widgetType={widgetType}
/>
{/* render email component to send email after finish signature on document */}
<EmailComponent
isEmail={isEmail}
pdfUrl={pdfUrl}
isCeleb={isCeleb}
setIsEmail={setIsEmail}
pdfName={pdfDetails[0] && pdfDetails[0].Name}
setSuccessEmail={setSuccessEmail}
sender={jsonSender}
setIsAlert={setIsAlert}
/>
{/* pdf header which contain funish back button */}
<Header
pageNumber={pageNumber}
allPages={allPages}
changePage={changePage}
pdfUrl={pdfUrl}
documentStatus={documentStatus}
embedImages={embedImages}
pdfDetails={pdfDetails}
isShowHeader={true}
currentSigner={true}
alreadySign={pdfUrl ? true : false}
isSignYourself={true}
setIsEmail={setIsEmail}
/>
<div data-tut="reactourSecond">
{containerWH && (
<RenderPdf
pageNumber={pageNumber}
pdfOriginalWidth={pdfOriginalWidth}
pdfNewWidth={pdfNewWidth}
drop={drop}
successEmail={successEmail}
nodeRef={nodeRef}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
isDragging={isDragging}
setIsSignPad={setIsSignPad}
setIsStamp={setIsStamp}
handleDeleteSign={handleDeleteSign}
setSignKey={setSignKey}
pdfDetails={pdfDetails}
setIsDragging={setIsDragging}
xyPostion={xyPostion}
pdfRef={pdfRef}
pdfUrl={pdfUrl}
numPages={numPages}
pageDetails={pageDetails}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setXyPostion={setXyPostion}
index={index}
containerWH={containerWH}
setIsPageCopy={setIsPageCopy}
setIsInitial={setIsInitial}
setWidgetType={setWidgetType}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
/>
)}
</div>
</ModalUi>
</div>
{/* this modal is used show this document is already sign */}
<ModalUi
isOpen={showAlreadySignDoc.status}
title={"Sign Documents"}
handleClose={() => {
setShowAlreadySignDoc({ status: false });
}}
{/*if document is not completed then render signature and stamp button in the right side */}
{/*else document is completed then render signed by signer name in the right side */}
<div
style={{ maxHeight: window.innerHeight - 70 + "px" }}
className="autoSignScroll"
>
<div style={{ height: "100%", padding: 20 }}>
<p>{showAlreadySignDoc.mssg}</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
className="finishBtn cancelBtn"
onClick={() => setShowAlreadySignDoc({ status: false })}
>
Close
</button>
</div>
</ModalUi>
<PlaceholderCopy
isPageCopy={isPageCopy}
setIsPageCopy={setIsPageCopy}
xyPostion={xyPostion}
setXyPostion={setXyPostion}
allPages={allPages}
pageNumber={pageNumber}
signKey={signKey}
/>
{/* this is modal of signature pad */}
<SignPad
isSignPad={isSignPad}
isStamp={isStamp}
setIsImageSelect={setIsImageSelect}
setIsSignPad={setIsSignPad}
setImage={setImage}
isImageSelect={isImageSelect}
imageRef={imageRef}
onImageChange={onImageChange}
setSignature={setSignature}
image={image}
onSaveImage={saveImage}
onSaveSign={saveSign}
defaultSign={defaultSignImg}
myInitial={myInitial}
isInitial={isInitial}
setIsInitial={setIsInitial}
setIsStamp={setIsStamp}
widgetType={widgetType}
/>
{/* render email component to send email after finish signature on document */}
<EmailComponent
isEmail={isEmail}
pdfUrl={pdfUrl}
isCeleb={isCeleb}
setIsEmail={setIsEmail}
pdfName={pdfDetails[0] && pdfDetails[0].Name}
setSuccessEmail={setSuccessEmail}
sender={jsonSender}
setIsAlert={setIsAlert}
/>
{/* pdf header which contain funish back button */}
<Header
pageNumber={pageNumber}
allPages={allPages}
changePage={changePage}
pdfUrl={pdfUrl}
documentStatus={documentStatus}
embedImages={embedImages}
pdfDetails={pdfDetails}
isShowHeader={true}
currentSigner={true}
alreadySign={pdfUrl ? true : false}
isSignYourself={true}
setIsEmail={setIsEmail}
/>
<div data-tut="reactourSecond">
{containerWH && (
<RenderPdf
pageNumber={pageNumber}
pdfOriginalWidth={pdfOriginalWidth}
pdfNewWidth={pdfNewWidth}
drop={drop}
successEmail={successEmail}
nodeRef={nodeRef}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
isDragging={isDragging}
setIsSignPad={setIsSignPad}
setIsStamp={setIsStamp}
handleDeleteSign={handleDeleteSign}
setSignKey={setSignKey}
pdfDetails={pdfDetails}
setIsDragging={setIsDragging}
xyPostion={xyPostion}
pdfRef={pdfRef}
pdfUrl={pdfUrl}
numPages={numPages}
pageDetails={pageDetails}
setPdfLoadFail={setPdfLoadFail}
pdfLoadFail={pdfLoadFail}
setXyPostion={setXyPostion}
index={index}
containerWH={containerWH}
setIsPageCopy={setIsPageCopy}
setIsInitial={setIsInitial}
setWidgetType={setWidgetType}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
/>
{!documentStatus.isCompleted ? (
<div>
<FieldsComponent
dataTut="reactourFirst"
pdfUrl={pdfUrl}
dragSignature={dragSignature}
signRef={signRef}
handleDivClick={handleDivClick}
handleMouseLeave={handleMouseLeave}
isDragSign={isDragSign}
themeColor={themeColor}
dragStamp={dragStamp}
dragRef={dragRef}
isDragStamp={isDragStamp}
handleAllDelete={handleAllDelete}
xyPostion={xyPostion}
isSignYourself={true}
addPositionOfSignature={addPositionOfSignature}
isMailSend={false}
/>
</div>
) : (
<div>
<Signedby pdfDetails={pdfDetails[0]} />
</div>
)}
</div>
</div>
{/*if document is not completed then render signature and stamp button in the right side */}
{/*else document is completed then render signed by signer name in the right side */}
<div
style={{ maxHeight: window.innerHeight - 70 + "px" }}
className="autoSignScroll"
>
{!documentStatus.isCompleted ? (
<div>
<FieldsComponent
dataTut="reactourFirst"
pdfUrl={pdfUrl}
dragSignature={dragSignature}
signRef={signRef}
handleDivClick={handleDivClick}
handleMouseLeave={handleMouseLeave}
isDragSign={isDragSign}
themeColor={themeColor}
dragStamp={dragStamp}
dragRef={dragRef}
isDragStamp={isDragStamp}
handleAllDelete={handleAllDelete}
xyPostion={xyPostion}
isSignYourself={true}
addPositionOfSignature={addPositionOfSignature}
isMailSend={false}
/>
</div>
) : (
<div>
<Signedby pdfDetails={pdfDetails[0]} />
</div>
)}
</div>
</div>
)}
</DndProvider>
microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+179 -26
View File
@@ -348,6 +348,154 @@ const TemplatePlaceholder = () => {
getSignerPos(item, monitor);
};
const addWidgetOptions = (type) => {
let option = {};
switch (type) {
case "signature":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "stamp":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "checkbox":
option = {
name: "",
values: [],
status: "Optional",
response: false,
validation: {}
};
return option;
case "text":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "initials":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "name":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {
type: "text",
pattern: ""
}
};
return option;
case "company":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {
type: "text",
pattern: ""
}
};
return option;
case "job title":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {
type: "text",
pattern: ""
}
};
return option;
case "date":
option = {
name: "",
values: [],
status: "",
response: getDate()
};
return option;
case "image":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "email":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {
type: "email",
pattern: ""
}
};
return option;
case "dropdown":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "radio":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "label":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
}
};
// `getSignerPos` is used to get placeholder position when user place it and save it in array
const getSignerPos = (item, monitor) => {
if (uniqueId) {
@@ -373,18 +521,11 @@ const TemplatePlaceholder = () => {
isStamp:
(dragTypeValue === "stamp" || dragTypeValue === "image") && true,
key: key,
isDrag: false,
scale: scale,
isMobile: isMobile,
yBottom: window.innerHeight / 2 - 60,
zIndex: posZIndex,
type: dragTypeValue,
widgetValue:
dragTypeValue === "checkbox"
? false
: dragTypeValue === "date"
? getDate()
: ""
options: addWidgetOptions(dragTypeValue)
};
dropData.push(dropObj);
placeHolder = {
@@ -407,20 +548,11 @@ const TemplatePlaceholder = () => {
isStamp:
(dragTypeValue === "stamp" || dragTypeValue === "image") && true,
key: key,
isDrag: false,
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
yBottom: ybottom,
scale: scale,
isMobile: isMobile,
zIndex: posZIndex,
type: item.text,
widgetValue:
dragTypeValue === "checkbox"
? false
: dragTypeValue === "date"
? getDate()
: ""
options: addWidgetOptions(dragTypeValue)
};
dropData.push(dropObj);
@@ -1013,6 +1145,8 @@ const TemplatePlaceholder = () => {
//function for base on condition to add checkbox widget status and input text validation in signerPos array
const handleApplyWidgetsStatus = (textValidate) => {
const options = ["email", "number", "text"];
const regexType = options.includes(textValidate);
let regularExpression = textValidate;
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
@@ -1032,19 +1166,32 @@ const TemplatePlaceholder = () => {
if (selectRequiredType === "Read only") {
return {
...position,
widgetStatus: selectRequiredType,
widgetValue: true
options: {
...position.options,
status: selectRequiredType,
response: true
}
};
} else {
return {
...position,
widgetStatus: selectRequiredType
options: {
...position.options,
status: selectRequiredType,
response: false
}
};
}
} else {
return {
...position,
validation: regularExpression
options: {
...position.options,
validation: {
type: regexType ? regularExpression : "regex",
pattern: !regexType ? regularExpression : ""
}
}
};
}
}
@@ -1111,15 +1258,21 @@ const TemplatePlaceholder = () => {
} else {
return {
...position,
widgetName: dropdownName,
widgetOption: dropdownOptions
options: {
...position.options,
name: dropdownName,
values: dropdownOptions
}
};
}
} else {
return {
...position,
widgetName: dropdownName,
widgetOption: dropdownOptions
options: {
...position.options,
name: dropdownName,
values: dropdownOptions
}
};
}
}
microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js
+3 -3
View File
@@ -6,8 +6,8 @@ function CheckboxStatus(props) {
const checkboxType = ["Optional", "Required", "Read only"];
useEffect(() => {
if (props.currWidgetsDetails?.widgetStatus) {
props.setSelectRequiredType(props.currWidgetsDetails?.widgetStatus);
if (props.currWidgetsDetails?.options?.status) {
props.setSelectRequiredType(props.currWidgetsDetails?.options?.status);
}
}, [props.currWidgetsDetails]);
@@ -53,7 +53,7 @@ function CheckboxStatus(props) {
>
Apply
</button>
{props.currWidgetsDetails?.widgetStatus && (
{props.currWidgetsDetails?.options?.status && (
<button
type="submit"
className="finishBtn cancelBtn"
microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js
+5 -5
View File
@@ -11,11 +11,11 @@ function DropdownWidgetOption(props) {
useEffect(() => {
if (
props.currWidgetsDetails?.widgetName &&
props.currWidgetsDetails?.widgetOption
props.currWidgetsDetails?.options?.name &&
props.currWidgetsDetails?.options?.values
) {
setDropdownName(props.currWidgetsDetails?.widgetName);
setDropdownOptionList(props.currWidgetsDetails?.widgetOption);
setDropdownName(props.currWidgetsDetails?.options?.name);
setDropdownOptionList(props.currWidgetsDetails?.options?.values);
}
}, [props.currWidgetsDetails]);
@@ -149,7 +149,7 @@ function DropdownWidgetOption(props) {
>
Save
</button>
{props.currWidgetsDetails?.widgetOption?.length > 0 && (
{props.currWidgetsDetails?.options?.values?.length > 0 && (
<button
type="submit"
className="finishBtn cancelBtn"
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+8 -4
View File
@@ -270,14 +270,18 @@ function Placeholder(props) {
onClick={(e) => {
setIsShowDateFormat(!isShowDateFormat);
e.stopPropagation();
props.setSignKey(props.pos.key);
props.setUniqueId(props.data.Id);
if (props.data) {
props.setSignKey(props.pos.key);
props.setUniqueId(props.data.Id);
}
}}
onTouchEnd={(e) => {
e.stopPropagation();
setIsShowDateFormat(!isShowDateFormat);
props.setSignKey(props.pos.key);
props.setUniqueId(props.data.Id);
if (props.data) {
props.setSignKey(props.pos.key);
props.setUniqueId(props.data.Id);
}
}}
>
<i
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
+59 -40
View File
@@ -11,7 +11,6 @@ function PlaceholderType(props) {
const [validatePlaceholder, setValidatePlaceholder] = useState("");
const inputRef = useRef(null);
const [textValue, setTextValue] = useState("");
const [inputValue, setInputValue] = useState("");
const [checkedValue, setCheckedValue] = useState(false);
const [isCheckedRadio, setIsCheckedRadio] = useState({
isChecked: false,
@@ -20,7 +19,8 @@ function PlaceholderType(props) {
const validateExpression = (regexValidation) => {
const regexObject = new RegExp(regexValidation);
let isValidate = regexObject.test(inputValue);
let isValidate = regexObject.test(textValue);
if (!isValidate) {
props.setValidateAlert(true);
inputRef.current.focus();
@@ -29,9 +29,10 @@ function PlaceholderType(props) {
const handleInputBlur = () => {
props.setDraggingEnabled(true);
const validateType = props.pos?.validation;
const validateType = props.pos?.options.validation.type;
let regexValidation;
if (props.pos?.validation) {
if (validateType) {
switch (validateType) {
case "email":
regexValidation = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
@@ -46,7 +47,7 @@ function PlaceholderType(props) {
validateExpression(regexValidation);
break;
default:
regexValidation = validateType;
regexValidation = props.pos?.options.validation.pattern;
validateExpression(regexValidation);
}
}
@@ -54,8 +55,16 @@ function PlaceholderType(props) {
const handleTextValid = (e, regx) => {
const textInput = e.target.value;
const sanitizedValue = textInput.replace(regx, "");
setTextValue(sanitizedValue);
setTextValue(textInput);
// console.log('textInput',textInput)
// let isValidate = regx.test(textValue);
// console.log('isValidate',isValidate,regx)
// if (isValidate) {
// const sanitizedValue = textInput.replace(regx, "");
// setTextValue(sanitizedValue);
// } else {
// setTextValue('');
// }
};
function checkRegularExpress(validateType) {
switch (validateType) {
@@ -72,14 +81,13 @@ function PlaceholderType(props) {
}
}
useEffect(() => {
if (props.pos.validation) {
checkRegularExpress(props.pos.validation);
if (props.pos?.options?.validation?.type) {
checkRegularExpress(props.pos?.options?.validation?.type);
}
}, []);
useEffect(() => {
if (props.isNeedSign && props.pos.type === "date") {
// props.pos.widgetValue
const updateDate = new Date();
setStartDate(updateDate);
}
@@ -107,8 +115,8 @@ function PlaceholderType(props) {
date: props.saveDateFormat,
format: props.selectDate
? props.selectDate?.format
: props.pos?.dateFormat
? props.pos?.dateFormat
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/YYYY"
};
props.setSelectDate(dateObj);
@@ -124,8 +132,8 @@ function PlaceholderType(props) {
false,
props.selectDate?.format
? props.selectDate.format
: props.pos?.dateFormat
? props.pos?.dateFormat
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/YYYY"
);
}
@@ -174,7 +182,7 @@ function PlaceholderType(props) {
const handleChecked = () => {
if (props.isPlaceholder) {
if (props.pos?.widgetStatus === "Read only") {
if (props.pos?.options?.status === "Read only") {
if (checkedValue) {
return checkedValue;
} else {
@@ -189,7 +197,7 @@ function PlaceholderType(props) {
}
}
} else {
return props.pos?.widgetValue;
return props.pos?.options?.response;
}
};
@@ -253,12 +261,12 @@ function PlaceholderType(props) {
className="inputPlaceholder"
style={{ outlineColor: "#007bff" }}
type="checkbox"
defaultChecked={props.pos?.widgetStatus === "Read only"}
defaultChecked={props.pos?.options?.status === "Read only"}
disabled={
props.isNeedSign && props.data?.signerObjId !== props.signerObjId
? true
: props.isNeedSign &&
props.pos?.widgetStatus === "Read only" &&
props.pos?.options?.status === "Read only" &&
true
// : props.isPlaceholder
}
@@ -267,7 +275,7 @@ function PlaceholderType(props) {
onChange={(e) => {
let isChecked = e.target.checked;
if (props.isPlaceholder) {
if (props.pos.widgetStatus === "Read only") {
if (props.pos?.options?.status === "Read only") {
setCheckedValue(true);
isChecked = true;
} else {
@@ -297,9 +305,11 @@ function PlaceholderType(props) {
placeholder={validatePlaceholder}
style={{ fontSize: calculateFontSize() }}
value={
textValue
props.pos?.options?.validation
? textValue
: props.pos.widgetValue && props.pos.widgetValue
? textValue
: props.pos.options?.response && props.pos.options.response
: textValue
}
type="text"
tabIndex="0"
@@ -311,7 +321,10 @@ function PlaceholderType(props) {
onBlur={handleInputBlur}
onChange={(e) => {
// props.pos?.validation && handleTextValid(e, props.pos?.validation);
setInputValue(e.target.value);
// if (!props.pos.options?.validation) {
// setTextValue(e.target.value);
// }
setTextValue(e.target.value);
onChangeInput(
e.target.value,
props.pos.key,
@@ -338,6 +351,7 @@ function PlaceholderType(props) {
<select
className="inputPlaceholder"
id="myDropdown"
style={{ fontSize: "12px" }}
value={selectOption}
onChange={(e) => {
setSelectOption(e.target.value);
@@ -354,11 +368,15 @@ function PlaceholderType(props) {
>
{/* Default/Title option */}
<option value="" disabled hidden>
{props.pos.widgetName}
{props.pos.options.name}
</option>
{props.pos.widgetOption.map((data, ind) => {
return <option value={data}>{data}</option>;
{props.pos?.options?.values.map((data, ind) => {
return (
<option key={ind} value={data}>
{data}
</option>
);
})}
</select>
) : (
@@ -366,7 +384,7 @@ function PlaceholderType(props) {
className="inputPlaceholder"
style={{ fontSize: calculateFontSize() }}
>
{props.pos.widgetName ? props.pos.widgetName : props.pos.type}
{props.pos?.options?.name ? props.pos.options.name : props.pos.type}
</div>
);
case "initials":
@@ -402,13 +420,13 @@ function PlaceholderType(props) {
tabIndex="0"
ref={inputRef}
placeholder={"name"}
style={{ fontSize: calculateFontSize(), textAlign: "center" }}
style={{ fontSize: calculateFontSize() }}
className="inputPlaceholder"
type="text"
value={
textValue
? textValue
: props.pos.widgetValue && props.pos.widgetValue
: props.pos.options.response && props.pos.options.response
}
onBlur={handleInputBlur}
onChange={(e) => {
@@ -447,7 +465,7 @@ function PlaceholderType(props) {
value={
textValue
? textValue
: props.pos.widgetValue && props.pos.widgetValue
: props.pos.options.response && props.pos.options.response
}
onBlur={handleInputBlur}
onChange={(e) => {
@@ -486,7 +504,7 @@ function PlaceholderType(props) {
value={
textValue
? textValue
: props.pos.widgetValue && props.pos.widgetValue
: props.pos.options.response && props.pos.options.response
}
onBlur={handleInputBlur}
onChange={(e) => {
@@ -519,16 +537,15 @@ function PlaceholderType(props) {
disabled={
props.isNeedSign && props.data?.signerObjId !== props.signerObjId
}
// disabled={props.isPlaceholder ? true : false}
onBlur={handleInputBlur}
closeOnScroll={true}
className="inputPlaceholder"
style={{ outlineColor: "#007bff" }}
selected={
// props.pos?.widgetValue ? props.pos.widgetValue :
startDate
? startDate
: props.pos?.widgetValue && new Date(props.pos.widgetValue)
: props.pos.options?.response &&
new Date(props.pos.options.response)
}
onChange={(date) => {
setStartDate(date);
@@ -538,8 +555,8 @@ function PlaceholderType(props) {
dateFormat={
props.selectDate
? props.selectDate?.format
: props.pos?.dateFormat
? props.pos?.dateFormat
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "dd MMMM, YYYY"
}
/>
@@ -583,11 +600,14 @@ function PlaceholderType(props) {
value={
textValue
? textValue
: props.pos.widgetValue && props.pos.widgetValue
: props.pos.options?.response && props.pos.options.response
}
onBlur={handleInputBlur}
onChange={(e) => {
handleTextValid(e, /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/);
handleTextValid(
e,
/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
);
onChangeInput(
e.target.value,
props.pos.key,
@@ -612,13 +632,12 @@ function PlaceholderType(props) {
case "radio":
return (
<div>
{props.pos?.widgetOption?.map((data, ind) => {
{props.pos.options?.values.map((data, ind) => {
return (
<input
key={ind}
style={{
width: props.pos.Width,
// height: props.pos.Height,
display: "flex",
justifyContent: "center",
marginBottom: "6px",
@@ -648,7 +667,7 @@ function PlaceholderType(props) {
props.xyPostion,
props.index,
props.setXyPostion,
null,
props.data && props.data?.Id,
false
);
}}
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+179 -32
View File
@@ -321,11 +321,157 @@ function PlaceHolderSign() {
const newDate = moment(milliseconds).format("MM/DD/YYYY");
return newDate;
};
const addWidgetOptions = (type) => {
let option = {};
switch (type) {
case "signature":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "stamp":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "checkbox":
option = {
name: "",
values: [],
status: "Optional",
response: false,
validation: {}
};
return option;
case "text":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "initials":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "name":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {
type: "text",
pattern: ""
}
};
return option;
case "company":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {
type: "text",
pattern: ""
}
};
return option;
case "job title":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {
type: "text",
pattern: ""
}
};
return option;
case "date":
option = {
name: "",
values: [],
status: "",
response: getDate()
};
return option;
case "image":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "email":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {
type: "email",
pattern: ""
}
};
return option;
case "dropdown":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "radio":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
case "label":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
};
return option;
}
};
//function for setting position after drop signature button over pdf
const addPositionOfSignature = (item, monitor) => {
getSignerPos(item, monitor);
};
const getSignerPos = (item, monitor) => {
// setSignerObjId("");
// setContractName("");
@@ -351,15 +497,9 @@ function PlaceHolderSign() {
isDrag: false,
scale: scale,
isMobile: isMobile,
yBottom: window.innerHeight / 2 - 60,
zIndex: posZIndex,
type: dragTypeValue,
widgetValue:
dragTypeValue === "checkbox"
? false
: dragTypeValue === "date"
? getDate()
: ""
options: addWidgetOptions(dragTypeValue)
};
dropData.push(dropObj);
placeHolder = {
@@ -374,28 +514,17 @@ function PlaceHolderSign() {
.getBoundingClientRect();
const x = offset.x - containerRect.left;
const y = offset.y - containerRect.top;
const ybottom = containerRect.bottom - offset.y;
const dropObj = {
xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x,
yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y,
isStamp:
(dragTypeValue === "stamp" || dragTypeValue === "image") && true,
key: key,
isDrag: false,
firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos,
firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos,
yBottom: ybottom,
scale: scale,
isMobile: isMobile,
zIndex: posZIndex,
type: dragTypeValue,
widgetValue:
dragTypeValue === "checkbox"
? false
: dragTypeValue === "date"
? getDate()
: ""
options: addWidgetOptions(dragTypeValue)
};
dropData.push(dropObj);
@@ -538,7 +667,6 @@ function PlaceHolderSign() {
//function for set and update x and y postion after drag and drop signature tab
const handleStop = (event, dragElement, signerId, key) => {
console.log("handle stop");
if (!isResize && isDragging) {
const dataNewPlace = addZIndex(signerPos, key, setZIndex);
let updateSignPos = [...signerPos];
@@ -647,7 +775,6 @@ function PlaceHolderSign() {
}
return obj;
});
console.log("signerpos3");
setSignerPos(newUpdateSigner);
} else {
const updateFilter = signerPos.filter((data) => data.Id !== Id);
@@ -988,13 +1115,12 @@ function PlaceHolderSign() {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((position, ind) => {
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
if (widgetType === "radio") {
if (addOption) {
return {
...position,
Height: position.Height
? position.Height + 15
: defaultWidthHeight(widgetType).height + 15
@@ -1009,15 +1135,21 @@ function PlaceHolderSign() {
} else {
return {
...position,
widgetName: dropdownName,
widgetOption: dropdownOptions
options: {
...position.options,
name: dropdownName,
values: dropdownOptions
}
};
}
} else {
return {
...position,
widgetName: dropdownName,
widgetOption: dropdownOptions
options: {
...position.options,
name: dropdownName,
values: dropdownOptions
}
};
}
}
@@ -1138,6 +1270,8 @@ function PlaceHolderSign() {
//function for base on condition to add checkbox widget status and input text validation in signerPos array
const handleApplyWidgetsStatus = (textValidate) => {
const options = ["email", "number", "text"];
const regexType = options.includes(textValidate);
let regularExpression = textValidate;
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
@@ -1158,19 +1292,32 @@ function PlaceHolderSign() {
if (selectRequiredType === "Read only") {
return {
...position,
widgetStatus: selectRequiredType,
widgetValue: true
options: {
...position.options,
status: selectRequiredType,
response: true
}
};
} else {
return {
...position,
widgetStatus: selectRequiredType
options: {
...position.options,
status: selectRequiredType,
response: false
}
};
}
} else {
return {
...position,
validation: regularExpression
options: {
...position.options,
validation: {
type: regexType ? regularExpression : "regex",
pattern: !regexType ? regularExpression : ""
}
}
};
}
}
microfrontends/SignDocuments/src/utils/Utils.js
+67 -81
View File
@@ -67,7 +67,10 @@ export const addInitialData = (signerPos, setXyPostion, value, userId) => {
) {
return {
...item,
widgetValue: widgetData,
options: {
...item.options,
response: widgetData
},
Width: calculateInitialWidthHeight(item.type, widgetData).getWidth,
Height: calculateInitialWidthHeight(item.type, widgetData).getHeight
};
@@ -109,22 +112,32 @@ export const onChangeInput = (
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === signKey) {
const addSignPos = getPosData.map((position, ind) => {
if (position.key === signKey) {
if (dateFormat) {
return {
...url,
widgetValue: value,
dateFormat: dateFormat
...position,
options: {
...position.options,
response: value,
validation: {
type: "date-format",
format: dateFormat // This indicates the required date format explicitly.
}
}
};
} else {
return {
...url,
widgetValue: value
...position,
options: {
...position.options,
response: value
}
};
}
}
return url;
return position;
});
const newUpdateSignPos = getPlaceHolder.map((obj) => {
@@ -147,11 +160,14 @@ export const onChangeInput = (
} else {
let getXYdata = xyPostion[index].pos;
const updatePosition = getXYdata.map((positionData, ind) => {
const updatePosition = getXYdata.map((positionData) => {
if (positionData.key === signKey) {
return {
...positionData,
widgetValue: value
options: {
...positionData.options,
response: value
}
};
}
return positionData;
@@ -493,7 +509,11 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
SignUrl: image.src,
ImageType: image.imgType
ImageType: image.imgType,
options: {
...position.options,
response: image.src
}
};
}
return position;
@@ -549,7 +569,11 @@ export function onSaveSign(
...position,
Width: posWidth,
Height: posHeight,
SignUrl: signatureImg
SignUrl: signatureImg,
options: {
...position.options,
response: signatureImg
}
};
}
return position;
@@ -613,7 +637,7 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
const getPageNo = xyPostion[i].pageNumber;
const getPosData = getXYdata;
const addSign = getPosData.map((position, ind) => {
const addSign = getPosData.map((position) => {
getIMGWH = calculateImgAspectRatio(imgWH, position);
if (position.type) {
if (position?.type === "signature") {
@@ -622,7 +646,11 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
SignUrl: defaultSignImg,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
ImageType: "default"
ImageType: "default",
options: {
...position.options,
response: defaultSignImg
}
};
}
} else if (position && !position.isStamp) {
@@ -631,7 +659,11 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
SignUrl: defaultSignImg,
Width: getIMGWH.newWidth,
Height: getIMGWH.newHeight,
ImageType: "default"
ImageType: "default",
options: {
...position.options,
response: defaultSignImg
}
};
}
return position;
@@ -1030,6 +1062,15 @@ export const multiSignEmbed = async (
}
};
const randomboxId = "randombox_" + imgData.key;
const widgetTypeExist = [
"text",
"name",
"company",
"job title",
"date",
"email",
"label"
].includes(imgData.type);
if (imgData.type === "checkbox") {
const checkBox = form.createCheckBox(randomboxId);
@@ -1039,25 +1080,17 @@ export const multiSignEmbed = async (
width: scaleWidth,
height: scaleHeight
});
if (imgData.widgetValue) {
if (imgData.options.response) {
checkBox.check();
} else {
checkBox.uncheck();
}
checkBox.enableReadOnly();
} else if (
imgData.type === "text" ||
imgData.type === "name" ||
imgData.type === "company" ||
imgData.type === "job title" ||
imgData.type === "date" ||
imgData.type === "email" ||
imgData.type === "label"
) {
} else if (widgetTypeExist) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 12;
const textContent = imgData.widgetValue;
const textContent = imgData.options?.response;
page.drawText(textContent, {
x: xPos(imgData),
y: yPos(imgData) + 10,
@@ -1067,8 +1100,8 @@ export const multiSignEmbed = async (
});
} else if (imgData.type === "dropdown") {
const dropdown = form.createDropdown(randomboxId);
dropdown.addOptions(imgData.widgetOption);
dropdown.select(imgData.widgetValue);
dropdown.addOptions(imgData?.options?.values);
dropdown.select(imgData.options?.response);
dropdown.addToPage(page, {
x: xPos(imgData),
y: yPos(imgData),
@@ -1080,8 +1113,8 @@ export const multiSignEmbed = async (
const radioGroup = form.createRadioGroup(randomboxId);
let addYPosition = 18;
for (let i = 1; i <= imgData?.widgetOption.length; i++) {
const data = imgData?.widgetOption[i - 1];
for (let i = 1; i <= imgData?.options?.values.length; i++) {
const data = imgData?.options?.values[i - 1];
let yPosition;
if (i > 1) {
yPosition = yPos(imgData) - addYPosition;
@@ -1100,7 +1133,7 @@ export const multiSignEmbed = async (
}
}
radioGroup.select(imgData.widgetValue);
radioGroup.select(imgData.options?.response);
radioGroup.enableReadOnly();
} else {
page.drawImage(img, {
@@ -1164,49 +1197,9 @@ export const handleImageResize = (
(data) => data.pageNumber === pageNumber
);
if (getPageNumer.length > 0) {
// const getXYdata = getPageNumer[0].pos.filter(
// (data, ind) => data.key === key && data.Width && data.Height
// );
// if (getXYdata.length > 0) {
// const getXYdata = getPageNumer[0].pos;
// const getPosData = getXYdata;
// const addSignPos = getPosData.map((url, ind) => {
// if (url.key === key) {
// return {
// ...url,
// Width: ref.offsetWidth,
// Height: ref.offsetHeight,
// IsResize: showResize ? true : false
// };
// }
// return url;
// });
// const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
// if (obj.pageNumber === pageNumber) {
// return { ...obj, pos: addSignPos };
// }
// return obj;
// });
// // const newUpdateSigner = signerPos.map((obj, ind) => {
// // if (obj.signerObjId === signerId) {
// // return { ...obj, placeHolder: newUpdateSignPos };
// // }
// // return obj;
// // });
// const newUpdateSigner = signerPos.map((obj, ind) => {
// if (obj.Id === signerId) {
// return { ...obj, placeHolder: newUpdateSignPos };
// }
// return obj;
// });
// setSignerPos(newUpdateSigner);
// } else {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
const addSignPos = getPosData.map((url) => {
if (url.key === key) {
return {
...url,
@@ -1218,19 +1211,13 @@ export const handleImageResize = (
return url;
});
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
const newUpdateSignPos = getPlaceHolder.map((obj) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
// const newUpdateSigner = signerPos.map((obj, ind) => {
// if (obj.signerObjId === signerId) {
// return { ...obj, placeHolder: newUpdateSignPos };
// }
// return obj;
// });
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.Id === signerId) {
return { ...obj, placeHolder: newUpdateSignPos };
@@ -1240,7 +1227,6 @@ export const handleImageResize = (
setSignerPos(newUpdateSigner);
}
// }
}
};