WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-09-08 18:57:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update components

Browse Source
This commit is contained in:
prafull-opensignlabs
2024-03-07 12:56:15 +05:30
parent 7e1f21b02b
commit 9bda7dee7f
13 changed files with 404 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+40 -12
View File
@@ -15,6 +15,16 @@ function DropdownWidgetOption(props) {
const statusArr = ["required", "optional"];
const [defaultCheckbox, setDefaultCheckbox] = useState([]);
const resetState = () => {
setDropdownOptionList(["option-1", "option-2"]);
setDropdownName(props.type);
setIsReadOnly(false);
setMinCount(0);
setMaxCount(0);
setDefaultCheckbox([]);
setDefaultValue("");
};
useEffect(() => {
if (
props.currWidgetsDetails?.options?.name &&
@@ -34,7 +44,9 @@ function DropdownWidgetOption(props) {
setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue || []);
} else {
setStatus("required");
resetState();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.currWidgetsDetails]);
const handleInputChange = (index, value) => {
setDropdownOptionList((prevInputs) => {
@@ -44,19 +56,39 @@ function DropdownWidgetOption(props) {
});
};
//function add add checkbox option and add width of checkbox
const handleAddInput = () => {
const flage = true;
const deleteOption = false;
const addOption = true;
setDropdownOptionList((prevInputs) => [...prevInputs, ""]);
props.handleSaveWidgetsOptions(null, null, null, null, null, flage, false);
props.handleSaveWidgetsOptions(
null,
null,
null,
null,
null,
addOption,
deleteOption
);
};
//function add add checkbox option and delete width of checkbox
const handleDeleteInput = (ind) => {
const flage = true;
const deleteOption = true;
const addOption = false;
const getUpdatedOptions = dropdownOptionList.filter(
(data, index) => index !== ind
);
setDropdownOptionList(getUpdatedOptions);
props.handleSaveWidgetsOptions(null, null, null, null, null, false, flage);
props.handleSaveWidgetsOptions(
null,
null,
null,
null,
null,
addOption,
deleteOption
);
};
const handleSaveOption = () => {
@@ -76,10 +108,10 @@ function DropdownWidgetOption(props) {
status,
defaultData
);
props.setShowDropdown(false);
// props.setShowDropdown(false);
setDropdownOptionList(["option-1", "option-2"]);
setDropdownName(props.type);
props.setCurrWidgetsDetails({});
// props.setCurrWidgetsDetails({});
setIsReadOnly(false);
setMinCount(0);
setMaxCount(0);
@@ -354,12 +386,8 @@ function DropdownWidgetOption(props) {
type="submit"
className="finishBtn cancelBtn"
onClick={() => {
setDropdownOptionList(["option-1", "option-2"]);
setDropdownName(props.type);
props.setCurrWidgetsDetails([]);
props.setShowDropdown(false);
setDefaultCheckbox([]);
setDefaultValue("");
props.handleClose && props.handleClose();
resetState();
}}
>
Cancel
apps/OpenSign/src/components/pdf/Placeholder.js
+19 -3
View File
@@ -55,6 +55,21 @@ function Placeholder(props) {
}
};
useEffect(() => {
//set default current date and default format MM/dd/yyyy
if (props.isPlaceholder || props.isSignYourself) {
const date = new Date();
const milliseconds = date.getTime();
const newDate = moment(milliseconds).format("MM/DD/YYYY");
const dateObj = {
date: newDate,
format: "MM/dd/YYYY"
};
setSelectDate(dateObj);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
//function for add selected date and format in selectFormat
const changeDateFormat = () => {
const updateDate = [];
@@ -410,10 +425,11 @@ function Placeholder(props) {
//ref={nodeRef}
key={props.pos.key}
lockAspectRatio={
props.pos.Width
props.pos.type !== "label" &&
(props.pos.Width
? props.pos.Width / props.pos.Height
: defaultWidthHeight(props.pos.type).width /
defaultWidthHeight(props.pos.type).height
defaultWidthHeight(props.pos.type).height)
}
enableResizing={{
top: false,
@@ -458,7 +474,7 @@ function Placeholder(props) {
? props.pos.zIndex
: "5",
background: props.data
? props.pos.type !== "checkbox" && props.data.blockColor
? props.data.blockColor
: props.pos.type !== "checkbox" && "rgb(203 233 237)"
}}
onDrag={() => {
apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+1
View File
@@ -14,6 +14,7 @@ function PlaceholderBorder(props) {
return (
<div
onMouseEnter={props?.setDraggingEnabled(true)}
className="borderResize"
style={{
borderColor: themeColor,
apps/OpenSign/src/components/pdf/PlaceholderType.js
+50 -28
View File
@@ -24,7 +24,7 @@ function PlaceholderType(props) {
// new RegExp(regexValidation);
let isValidate = regexObject.test(textValue);
if (!isValidate) {
props.setValidateAlert(true);
props?.setValidateAlert(true);
inputRef.current.focus();
}
};
@@ -94,7 +94,9 @@ function PlaceholderType(props) {
);
if (props.pos?.type && props.pos.type === "checkbox" && props.isNeedSign) {
const isDefaultValue = props.pos.options?.defaultValue;
setSelectedCheckbox(isDefaultValue);
if (isDefaultValue) {
setSelectedCheckbox(isDefaultValue);
}
}
}
useEffect(() => {
@@ -105,7 +107,9 @@ function PlaceholderType(props) {
const [day, month, year] = props.saveDateFormat.split("-");
updateDate = new Date(`${year}-${month}-${day}`);
} else {
updateDate = new Date();
if (props?.saveDateFormat) {
updateDate = new Date(props.saveDateFormat);
}
}
// const updateDate = new Date(props.saveDateFormat);
setStartDate(updateDate);
@@ -156,7 +160,20 @@ function PlaceholderType(props) {
ExampleCustomInput.displayName = "ExampleCustomInput";
useEffect(() => {
if (props.pos?.type) {
if (
["name", "email", "job title", "company"].includes(props.pos?.type) &&
props.isNeedSign &&
props.data?.signerObjId === props?.signerObjId
) {
const defaultData = props.pos?.options?.defaultValue;
if (defaultData) {
setTextValue(defaultData);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.pos?.options?.defaultValue]);
useEffect(() => {
if (["name", "email", "job title", "company"].includes(props.pos?.type)) {
const senderUser = localStorage.getItem(`Extand_Class`);
const jsonSender = JSON.parse(senderUser);
@@ -220,8 +237,9 @@ function PlaceholderType(props) {
let updateSelectedCheckbox = [],
checkedList;
let isDefaultValue, isDefaultEmpty;
if (props.pos?.type && ["checkbox", "radio"].includes(props.pos.type)) {
updateSelectedCheckbox = selectedCheckbox;
if (props.pos?.type === "checkbox") {
updateSelectedCheckbox = selectedCheckbox ? selectedCheckbox : [];
if (isChecked) {
updateSelectedCheckbox.push(ind);
setSelectedCheckbox(updateSelectedCheckbox);
@@ -244,8 +262,6 @@ function PlaceholderType(props) {
props.data && props.data.Id,
false,
null,
null,
null,
isDefaultEmpty
);
}
@@ -253,7 +269,9 @@ function PlaceholderType(props) {
//function to handle select radio widget and set value seletced by user
const handleCheckRadio = (isChecked, data) => {
let isDefaultValue, isDefaultEmpty;
let isDefaultValue,
isDefaultEmpty,
isRadio = true;
if (props.isNeedSign) {
isDefaultValue = props.pos.options?.defaultValue;
}
@@ -266,7 +284,7 @@ function PlaceholderType(props) {
setTextValue("");
}
onChangeInput(
textValue,
data,
props.pos.key,
props.xyPostion,
props.index,
@@ -274,9 +292,8 @@ function PlaceholderType(props) {
props.data && props.data.Id,
false,
null,
null,
null,
isDefaultEmpty
isDefaultEmpty,
isRadio
);
};
switch (props.pos.type) {
@@ -339,22 +356,28 @@ function PlaceholderType(props) {
onBlur={handleInputBlur}
disabled={
props.isNeedSign &&
props.pos.options?.isReadOnly &&
props.pos.options?.isReadOnly
(props.pos.options?.isReadOnly ||
props.data?.signerObjId !== props.signerObjId)
}
type="checkbox"
checked={selectCheckbox(ind)}
onChange={(e) => {
if (e.target.checked && !props.isPlaceholder) {
const maxRequired =
props.pos.options?.validation?.maxRequiredCount;
const maxCountInt = maxRequired && parseInt(maxRequired);
if (maxCountInt > 0) {
if (selectedCheckbox.length <= maxCountInt - 1) {
if (e.target.checked) {
if (!props.isPlaceholder) {
const maxRequired =
props.pos.options?.validation?.maxRequiredCount;
const maxCountInt = maxRequired && parseInt(maxRequired);
if (maxCountInt > 0) {
if (
selectedCheckbox &&
selectedCheckbox?.length <= maxCountInt - 1
) {
handleCheckboxValue(e.target.checked, ind);
}
} else {
handleCheckboxValue(e.target.checked, ind);
}
} else {
handleCheckboxValue(e.target.checked, ind);
}
} else {
handleCheckboxValue(e.target.checked, ind);
@@ -597,7 +620,7 @@ function PlaceholderType(props) {
? props.selectDate?.format
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "dd MMMM, YYYY"
: "MM/dd/YYYY"
}
/>
</div>
@@ -674,12 +697,10 @@ function PlaceholderType(props) {
type="radio"
disabled={
props.isNeedSign &&
props.pos.options?.isReadOnly &&
props.pos.options?.isReadOnly
(props.pos.options?.isReadOnly ||
props.data?.signerObjId !== props.signerObjId)
}
// disabled={props.isPlaceholder}
checked={handleRadioCheck(data)}
// checked={isCheckedRadio.isChecked}
onChange={(e) => {
if (!props.isPlaceholder) {
handleCheckRadio(e.target.checked, data);
@@ -706,6 +727,7 @@ function PlaceholderType(props) {
);
}}
className="labelTextArea"
style={{ whiteSpace: "pre-wrap" }}
cols="50"
/>
);
apps/OpenSign/src/components/pdf/RenderPdf.js
+2
View File
@@ -441,6 +441,7 @@ function RenderPdf({
selectWidgetId={selectWidgetId}
handleUserName={handleUserName}
setIsCheckbox={setIsCheckbox}
setValidateAlert={setValidateAlert}
setCurrWidgetsDetails={setCurrWidgetsDetails}
/>
)
@@ -624,6 +625,7 @@ function RenderPdf({
selectWidgetId={selectWidgetId}
handleUserName={handleUserName}
setIsCheckbox={setIsCheckbox}
setValidateAlert={setValidateAlert}
setCurrWidgetsDetails={
setCurrWidgetsDetails
}
apps/OpenSign/src/components/pdf/SignPad.js
-2
View File
@@ -281,7 +281,6 @@ function SignPad({
}}
style={{
color: isTab === "draw" ? themeColor : "#515252",
marginLeft: "2px"
}}
className="signTab"
@@ -332,7 +331,6 @@ function SignPad({
}}
style={{
color: isTab === "type" ? themeColor : "#515252",
marginLeft: "2px"
}}
className="signTab"
apps/OpenSign/src/components/pdf/Signedby.js
-2
View File
@@ -24,7 +24,6 @@ function Signedby({ pdfDetails }) {
display: "flex",
flexDirection: "row",
padding: "10px",
background: "#93a3db"
}}
>
@@ -49,7 +48,6 @@ function Signedby({ pdfDetails }) {
fontWeight: "bold"
}}
>
{" "}
{getFirstLetter(pdfDetails.ExtUserPtr.Name)}
</span>
</div>
apps/OpenSign/src/components/pdf/WidgetNameModal.js
+2 -2
View File
@@ -13,7 +13,7 @@ const WidgetNameModal = (props) => {
});
const [isValid, setIsValid] = useState(true);
const statusArr = ["Required", "Optional"];
const inputOpt = ["email", "number", "text"];
const inputOpt = ["email", "number"];
useEffect(() => {
if (props.defaultdata) {
@@ -144,7 +144,7 @@ const WidgetNameModal = (props) => {
placeholder="Enter custom expression"
value={formdata.textvalidate}
onChange={(e) => handleChange(e)}
onBlur={() => handleBlurRegex()}
// onBlur={() => handleBlurRegex()}
/>
<select
style={{ position: "absolute", left: 0, zIndex: 1 }}
apps/OpenSign/src/constant/Utils.js
+85 -25
View File
@@ -453,7 +453,6 @@ export const signPdfFun = async (
pdfFile: base64Url,
docId: documentId,
userId: signerObjectId
// };
};
const response = await axios
@@ -612,9 +611,8 @@ export const onChangeInput = (
userId,
initial,
dateFormat,
isPlaceholder,
selectedKey,
isDefaultEmpty
isDefaultEmpty,
isRadio
) => {
const isSigners = xyPostion.some((data) => data.signerPtr);
let filterSignerPos;
@@ -653,7 +651,7 @@ export const onChangeInput = (
options: {
...position.options,
response: value,
defaultValue: []
defaultValue: isRadio ? "" : []
}
};
} else {
@@ -758,7 +756,7 @@ export const addInitialData = (signerPos, setXyPostion, value, userId) => {
...item,
options: {
...item.options,
response: widgetData
defaultValue: widgetData
},
Width: calculateInitialWidthHeight(item.type, widgetData).getWidth,
Height: calculateInitialWidthHeight(item.type, widgetData).getHeight
@@ -955,10 +953,18 @@ export const multiSignEmbed = async (
containerWH
) => {
for (let item of pngUrl) {
let updateItem = item.pos;
if (signyourself) {
updateItem = item;
} else {
updateItem = item.pos.filter(
(data) => data?.options?.status === "required"
);
}
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const pageNo = item.pageNumber;
const imgUrlList = item.pos;
const imgUrlList = signyourself ? updateItem.pos : updateItem;
const pages = pdfDoc.getPages();
const form = pdfDoc.getForm();
const page = pages[pageNo - 1];
@@ -1038,14 +1044,17 @@ export const multiSignEmbed = async (
}
};
const yPos = (pos, ind) => {
const yPos = (pos, ind, labelDefaultHeight) => {
const resizePos = pos.yPosition;
let newUpdateHeight = labelDefaultHeight
? labelDefaultHeight
: scaleHeight;
const widgetHeight =
position.type === "radio"
? 10
: position.type === "checkbox"
? 10
: scaleHeight;
: newUpdateHeight;
const newHeight = ind ? (ind > 0 ? widgetHeight : 0) : widgetHeight;
if (signyourself) {
@@ -1053,7 +1062,7 @@ export const multiSignEmbed = async (
if (ind && ind > 0 && position.type === "checkbox") {
return page.getHeight() - resizePos * scale - newHeight;
} else if (!ind && position.type === "checkbox") {
return page.getHeight() - resizePos * scale;
return page.getHeight() - resizePos * scale - 10;
} else {
return page.getHeight() - resizePos * scale - newHeight;
}
@@ -1062,7 +1071,7 @@ export const multiSignEmbed = async (
if (ind && ind > 0 && position.type === "checkbox") {
return page.getHeight() - resizePos - newHeight;
} else if (!ind && position.type === "checkbox") {
return page.getHeight() - resizePos;
return page.getHeight() - resizePos - 10;
} else {
return page.getHeight() - resizePos - newHeight;
}
@@ -1075,12 +1084,12 @@ export const multiSignEmbed = async (
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
if (pos.isMobile) {
const y = resizePos * (pos.scale / scale);
return page.getHeight() - y * scale - scaleHeight;
return page.getHeight() - y * scale - newUpdateHeight;
} else {
if (pos.IsResize) {
return page.getHeight() - y * scale - scaleHeight;
return page.getHeight() - y * scale - newUpdateHeight;
} else {
return page.getHeight() - y * scale - scaleHeight;
return page.getHeight() - y * scale - newUpdateHeight;
}
}
} else {
@@ -1088,16 +1097,16 @@ export const multiSignEmbed = async (
if (pos.isMobile) {
if (pos.IsResize) {
const y = resizePos * pos.scale;
return page.getHeight() - y - scaleHeight;
return page.getHeight() - y - newUpdateHeight;
} else {
const y = resizePos * pos.scale;
return page.getHeight() - y - scaleHeight;
return page.getHeight() - y - newUpdateHeight;
}
} else {
if (ind && ind > 0 && position.type === "checkbox") {
return page.getHeight() - resizePos - newHeight;
} else if (!ind && position.type === "checkbox") {
return page.getHeight() - resizePos;
} else if (position.type === "checkbox") {
return page.getHeight() - resizePos - 10;
} else {
return page.getHeight() - resizePos - newHeight;
}
@@ -1105,15 +1114,13 @@ export const multiSignEmbed = async (
}
}
};
const randomboxId = "randombox_" + position.key;
const widgetTypeExist = [
"text",
"name",
"company",
"job title",
"date",
"email",
"label"
"email"
].includes(position.type);
if (position.type === "checkbox") {
let addYPosition, isCheck;
@@ -1135,10 +1142,10 @@ export const multiSignEmbed = async (
const checkbox = form.createCheckBox(checkboxRandomId);
if (ind > 0) {
yPosition = yPos(position, ind) - addYPosition;
addYPosition = addYPosition + height + 10;
addYPosition = addYPosition + height + 8;
} else {
yPosition = yPos(position, ind);
addYPosition = height;
addYPosition = height + 8;
}
checkbox.addToPage(page, {
x: xPos(position),
@@ -1154,6 +1161,56 @@ export const multiSignEmbed = async (
checkbox.enableReadOnly();
});
}
} else if (position.type === "label") {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 12;
let textContent;
if (position?.options?.response) {
textContent = position.options?.response;
} else if (position?.options?.defaultValue) {
textContent = position?.options?.defaultValue;
}
const fixedWidth = scaleWidth; // Set your fixed width
// Function to break text into lines based on the fixed width
const breakTextIntoLines = (textContent, width) => {
const lines = [];
let currentLine = "";
for (const word of textContent.split(" ")) {
const lineWidth = font.widthOfTextAtSize(
`${currentLine} ${word}`,
fontSize
);
if (lineWidth <= width) {
currentLine += ` ${word}`;
} else {
lines.push(currentLine.trim());
currentLine = `${word}`;
}
}
lines.push(currentLine.trim());
return lines;
};
const lines = breakTextIntoLines(textContent, fixedWidth);
// Set initial y-coordinate for the first line
const labelDefaultHeight = defaultWidthHeight(position.type).height;
let y = yPos(position, null, labelDefaultHeight) + 10;
let x = xPos(position);
//xPos(position)
// Embed each line on the page
for (const line of lines) {
page.drawText(line, {
x: x,
y,
font,
color: rgb(0, 0, 0),
size: fontSize
});
y -= 15; // Adjust the line height as needed
}
} else if (widgetTypeExist) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 12;
@@ -1171,7 +1228,8 @@ export const multiSignEmbed = async (
color: rgb(0, 0, 0)
});
} else if (position.type === "dropdown") {
const dropdown = form.createDropdown(randomboxId);
const dropdownRandomId = "dropdown" + randomId();
const dropdown = form.createDropdown(dropdownRandomId);
dropdown.addOptions(position?.options?.values);
if (position?.options?.response) {
dropdown.select(position.options?.response);
@@ -1187,7 +1245,8 @@ export const multiSignEmbed = async (
});
dropdown.enableReadOnly();
} else if (position.type === "radio") {
const radioGroup = form.createRadioGroup(randomboxId);
const radioRandomId = "radio" + randomId();
const radioGroup = form.createRadioGroup(radioRandomId);
let addYPosition = 18;
for (let i = 1; i <= position?.options?.values.length; i++) {
@@ -1356,6 +1415,7 @@ export const contactBook = async (objectId) => {
return result;
};
//function for getting document details from contract_Documents class
export const contractDocument = async (documentId) => {
const data = {
docId: documentId
apps/OpenSign/src/pages/PdfRequestFiles.js
+81 -164
View File
@@ -382,94 +382,100 @@ function PdfRequestFiles() {
requiredCheckbox;
for (let i = 0; i < checkUser[0].placeHolder.length; i++) {
checkboxExist = checkUser[0].placeHolder[i].pos.some(
(data) => data.type === "checkbox"
);
radioExist = checkUser[0].placeHolder[i].pos.some(
(data) => data.type === "radio"
);
if (checkboxExist) {
requiredCheckbox = checkUser[0].placeHolder[i].pos.filter(
(position) =>
!position.options?.isReadOnly && position.type === "checkbox"
);
for (let j = 0; j < checkUser[0].placeHolder[i].pos.length; j++) {
checkboxExist =
checkUser[0].placeHolder[i].pos[j].type === "checkbox";
radioExist = checkUser[0].placeHolder[i].pos[j].type === "radio";
if (checkboxExist) {
requiredCheckbox = checkUser[0].placeHolder[i].pos.filter(
(position) =>
!position.options?.isReadOnly && position.type === "checkbox"
);
if (requiredCheckbox && requiredCheckbox?.length > 0) {
for (let i = 0; i < requiredCheckbox.length; i++) {
const minCount =
requiredCheckbox[i].options?.validation?.minRequiredCount;
const parseMin = minCount && parseInt(minCount);
const maxCount =
requiredCheckbox[i].options?.validation?.maxRequiredCount;
const parseMax = maxCount && parseInt(maxCount);
const response = requiredCheckbox[i].options?.response?.length;
const defaultValue =
requiredCheckbox[i].options?.defaultValue?.length;
if (parseMin === 0 && parseMax === 0) {
if (!showAlert) {
showAlert = false;
}
} else if (parseMin === 0 && parseMax > 0) {
if (!showAlert) {
showAlert = false;
}
} else if (!response) {
if (!defaultValue) {
if (requiredCheckbox && requiredCheckbox.length > 0) {
for (let i = 0; i < requiredCheckbox.length; i++) {
const minCount =
requiredCheckbox[i].options?.validation?.minRequiredCount;
const parseMin = minCount && parseInt(minCount);
const maxCount =
requiredCheckbox[i].options?.validation?.maxRequiredCount;
const parseMax = maxCount && parseInt(maxCount);
const response =
requiredCheckbox[i].options?.response?.length;
const defaultValue =
requiredCheckbox[i].options?.defaultValue?.length;
if (parseMin === 0 && parseMax === 0) {
if (!showAlert) {
showAlert = false;
setminRequiredCount(null);
}
} else if (parseMin === 0 && parseMax > 0) {
if (!showAlert) {
showAlert = false;
setminRequiredCount(null);
}
} else if (!response) {
if (!defaultValue) {
if (!showAlert) {
showAlert = true;
widgetKey = requiredCheckbox[i].key;
setminRequiredCount(parseMin);
}
}
} else if (parseMin > 0 && parseMin > response) {
if (!showAlert) {
showAlert = true;
widgetKey = requiredCheckbox[i].key;
setminRequiredCount(parseMin);
}
}
} else if (parseMin > 0 && parseMin > response) {
if (!showAlert) {
showAlert = true;
widgetKey = requiredCheckbox[i].key;
setminRequiredCount(parseMin);
}
}
}
}
} else if (radioExist) {
requiredRadio = checkUser[0].placeHolder[i].pos.filter(
(position) =>
!position.options?.isReadOnly && position.type === "radio"
);
if (requiredRadio && requiredRadio?.length > 0) {
let checkSigned;
for (let i = 0; i < requiredRadio.length; i++) {
checkSigned = requiredRadio[i]?.options.response;
if (!checkSigned) {
let checkDefaultSigned =
requiredRadio[i]?.options.defaultValue;
if (!checkDefaultSigned) {
if (!showAlert) {
showAlert = true;
widgetKey = requiredRadio[i].key;
} else if (radioExist) {
requiredRadio = checkUser[0].placeHolder[i].pos.filter(
(position) =>
!position.options?.isReadOnly && position.type === "radio"
);
if (requiredRadio && requiredRadio?.length > 0) {
let checkSigned;
for (let i = 0; i < requiredRadio?.length; i++) {
checkSigned = requiredRadio[i]?.options.response;
if (!checkSigned) {
let checkDefaultSigned =
requiredRadio[i]?.options.defaultValue;
if (!checkDefaultSigned) {
if (!showAlert) {
showAlert = true;
widgetKey = requiredRadio[i].key;
setminRequiredCount(null);
}
}
}
}
}
}
} else {
const requiredWidgets = checkUser[0].placeHolder[i].pos.filter(
(position) => !position.options?.isReadOnly
);
if (requiredWidgets && requiredCheckbox?.length > 0) {
let checkSigned;
for (let i = 0; i < requiredWidgets.length; i++) {
checkSigned = requiredWidgets[i]?.options?.response;
if (!checkSigned) {
const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl;
} else {
const requiredWidgets = checkUser[0].placeHolder[i].pos.filter(
(position) =>
position.options?.status === "required" &&
position.type !== "radio" &&
position.type !== "checkbox"
);
if (requiredWidgets && requiredWidgets?.length > 0) {
let checkSigned;
for (let i = 0; i < requiredWidgets?.length; i++) {
checkSigned = requiredWidgets[i]?.options?.response;
if (!checkSigned) {
const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl;
let checkDefaultSigned =
requiredWidgets[i]?.options?.defaultValue;
if (!checkSignUrl) {
if (!checkDefaultSigned) {
if (!showAlert) {
showAlert = true;
widgetKey = requiredWidgets[i].key;
let checkDefaultSigned =
requiredWidgets[i]?.options?.defaultValue;
if (!checkSignUrl) {
if (!checkDefaultSigned) {
if (!showAlert) {
showAlert = true;
widgetKey = requiredWidgets[i].key;
setminRequiredCount(null);
}
}
}
}
@@ -498,93 +504,6 @@ 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;
const extUserPtr = pdfDetails[0].ExtUserPtr;
const HeaderDocId = extUserPtr?.HeaderDocId;
@@ -1266,9 +1185,7 @@ function PdfRequestFiles() {
{signedSigners.length > 0 && (
<>
<div
style={{
background: themeColor
}}
style={{ background: themeColor }}
className="signedStyle"
>
Signed by
apps/OpenSign/src/pages/PlaceHolderSign.js
+13 -5
View File
@@ -490,6 +490,7 @@ function PlaceHolderSign() {
}
setWidgetType(dragTypeValue);
setSignKey(key);
setCurrWidgetsDetails({});
}
}
};
@@ -1123,6 +1124,9 @@ function PlaceHolderSign() {
});
setSignerPos(newUpdateSigner);
if (!addOption && !deleteOption) {
handleNameModal();
}
}
}
};
@@ -1202,8 +1206,11 @@ function PlaceHolderSign() {
};
const handleNameModal = () => {
setIsNameModal(!isNameModal);
setIsNameModal(false);
setCurrWidgetsDetails({});
setShowDropdown(false);
setIsRadio(false);
setIsCheckbox(false);
};
//function for update TourStatus
const closeTour = async () => {
@@ -1404,9 +1411,7 @@ function PlaceHolderSign() {
{isSendAlert.mssg === "confirm" && (
<button
onClick={() => sendEmailToSigners()}
style={{
background: themeColor
}}
style={{ background: themeColor }}
type="button"
className="finishBtn"
>
@@ -1539,6 +1544,7 @@ function PlaceHolderSign() {
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
/>
<DropdownWidgetOption
type="checkbox"
@@ -1548,6 +1554,7 @@ function PlaceHolderSign() {
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
/>
<DropdownWidgetOption
type="dropdown"
@@ -1557,6 +1564,7 @@ function PlaceHolderSign() {
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
/>
{/* pdf header which contain funish back button */}
@@ -1610,7 +1618,7 @@ function PlaceHolderSign() {
setCurrWidgetsDetails={setCurrWidgetsDetails}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={handleNameModal}
handleNameModal={setIsNameModal}
/>
)}
</div>
apps/OpenSign/src/pages/SignyourselfPdf.js
+98 -93
View File
@@ -69,6 +69,7 @@ function SignYourSelf() {
const [myInitial, setMyInitial] = useState("");
const [isInitial, setIsInitial] = useState(false);
const [isUiLoading, setIsUiLoading] = useState(false);
const [validateAlert, setValidateAlert] = useState(false);
const [isLoading, setIsLoading] = useState({
isLoad: true,
message: "This might take some time"
@@ -157,7 +158,9 @@ function SignYourSelf() {
const jsonSender = JSON.parse(senderUser);
useEffect(() => {
getDocumentDetails(true);
if (documentId) {
getDocumentDetails(true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -330,126 +333,75 @@ function SignYourSelf() {
}
};
const addWidgetOptions = (type) => {
let option = {};
switch (type) {
case "signature":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
return {
name: "signature"
};
return option;
case "stamp":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
return {
name: "stamp"
};
return option;
case "checkbox":
option = {
name: "",
values: [],
response: true,
validation: {}
return {
name: "checkbox"
};
return option;
case "text":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
return {
name: "text"
};
return option;
case "initials":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
return {
name: "initials"
};
return option;
case "name":
option = {
name: "",
values: [],
status: "",
response: getWidgetValue(type),
return {
name: "name",
defaultValue: getWidgetValue(type),
validation: {
type: "text",
pattern: ""
}
};
return option;
case "company":
option = {
name: "",
values: [],
status: "",
response: getWidgetValue(type),
return {
name: "company",
defaultValue: getWidgetValue(type),
validation: {
type: "text",
pattern: ""
}
};
return option;
case "job title":
option = {
name: "",
values: [],
status: "",
response: getWidgetValue(type),
return {
name: "job title",
defaultValue: getWidgetValue(type),
validation: {
type: "text",
pattern: ""
}
};
return option;
case "date":
option = {
name: "",
values: [],
status: "",
response: getDate(),
validation: {
type: "text",
pattern: ""
}
return {
name: "date",
defaultValue: getDate()
};
return option;
case "image":
option = {
name: "",
values: [],
status: "",
response: "",
validation: {}
return {
name: "image"
};
return option;
case "email":
option = {
name: "",
values: [],
status: "",
response: getWidgetValue(type),
return {
name: "email",
defaultValue: getWidgetValue(type),
validation: {
type: "email",
pattern: ""
}
};
return option;
default:
return {};
}
};
//function for setting position after drop signature button over pdf
@@ -567,16 +519,30 @@ function SignYourSelf() {
//function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
async function embedWidgetsData() {
let checkSigned = 0;
let allXyPos = 0;
let showAlert = false;
for (let i = 0; i < xyPostion.length; i++) {
const posWidgetData = xyPostion[i].pos.filter(
(pos) => pos.options.response
for (let i = 0; i < xyPostion?.length; i++) {
const requiredWidgets = xyPostion[i].pos.filter(
(position) => position.type !== "checkbox"
);
if (requiredWidgets && requiredWidgets?.length > 0) {
let checkSigned;
for (let i = 0; i < requiredWidgets?.length; i++) {
checkSigned = requiredWidgets[i]?.options?.response;
if (!checkSigned) {
const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl;
checkSigned = checkSigned + posWidgetData.length;
allXyPos = allXyPos + xyPostion[i].pos.length;
let checkDefaultSigned = requiredWidgets[i]?.options?.defaultValue;
if (!checkSignUrl) {
if (!checkDefaultSigned) {
if (!showAlert) {
showAlert = true;
}
}
}
}
}
}
}
if (xyPostion.length === 0) {
setIsAlert({
@@ -584,7 +550,7 @@ function SignYourSelf() {
alertMessage: "Please complete your signature!"
});
return;
} else if (xyPostion.length > 0 && allXyPos !== checkSigned) {
} else if (showAlert) {
setIsAlert({
isShow: true,
alertMessage: "Please complete your signature!"
@@ -624,7 +590,7 @@ function SignYourSelf() {
flag,
containerWH
);
// console.log(pdfBytes)
// console.log('pdf',pdfBytes)
//function for call to embed signature in pdf and get digital signature pdf
await signPdfFun(pdfBytes, documentId);
}
@@ -940,8 +906,7 @@ function SignYourSelf() {
...position.options,
name: dropdownName,
values: dropdownOptions,
isReadOnly: isReadOnly,
response: []
isReadOnly: isReadOnly
}
};
}
@@ -955,9 +920,16 @@ function SignYourSelf() {
return obj;
});
setXyPostion(updateXYposition);
if (!addOption && !deleteOption) {
handleCloseModal();
}
}
};
const handleCloseModal = () => {
setCurrWidgetsDetails({});
setIsCheckbox(false);
};
return (
<DndProvider backend={HTML5Backend}>
<Title title={"Self Sign"} />
@@ -1099,6 +1071,7 @@ function SignYourSelf() {
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
isSignYourself={true}
handleClose={handleCloseModal}
/>
<PlaceholderCopy
isPageCopy={isPageCopy}
@@ -1192,6 +1165,7 @@ function SignYourSelf() {
selectWidgetId={selectWidgetId}
setIsCheckbox={setIsCheckbox}
setCurrWidgetsDetails={setCurrWidgetsDetails}
setValidateAlert={setValidateAlert}
/>
)}
</div>
@@ -1236,6 +1210,37 @@ function SignYourSelf() {
</div>
</div>
)}
<ModalUi
headerColor={"#dc3545"}
isOpen={validateAlert}
title={"Validation alert"}
handleClose={() => {
setValidateAlert(false);
}}
>
<div style={{ height: "100%", padding: 20 }}>
<p>
The input does not meet the criteria set by the regular expression.
</p>
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
onClick={() => setValidateAlert(false)}
type="button"
className="finishBtn cancelBtn"
>
Close
</button>
</div>
</ModalUi>
</DndProvider>
);
}
apps/OpenSign/src/pages/TemplatePlaceholder.js
+13 -4
View File
@@ -151,7 +151,7 @@ const TemplatePlaceholder = () => {
useEffect(() => {
fetchTemplate();
// eslint-disable-next-line
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
@@ -447,7 +447,7 @@ const TemplatePlaceholder = () => {
} else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
setIsNameModal(true);
}
setCurrWidgetsDetails("");
setCurrWidgetsDetails({});
setWidgetType(dragTypeValue);
setSignKey(key);
setSelectWidgetId(key);
@@ -1074,6 +1074,9 @@ const TemplatePlaceholder = () => {
});
setSignerPos(newUpdateSigner);
if (!addOption && !deleteOption) {
handleNameModal();
}
}
}
};
@@ -1152,8 +1155,11 @@ const TemplatePlaceholder = () => {
handleNameModal();
};
const handleNameModal = () => {
setIsNameModal(!isNameModal);
setIsNameModal(false);
setCurrWidgetsDetails({});
setShowDropdown(false);
setIsRadio(false);
setIsCheckbox(false);
};
return (
@@ -1305,6 +1311,7 @@ const TemplatePlaceholder = () => {
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
/>
<DropdownWidgetOption
type="checkbox"
@@ -1314,6 +1321,7 @@ const TemplatePlaceholder = () => {
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
/>
<DropdownWidgetOption
type="dropdown"
@@ -1323,6 +1331,7 @@ const TemplatePlaceholder = () => {
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
handleClose={handleNameModal}
/>
<PlaceholderCopy
isPageCopy={isPageCopy}
@@ -1388,7 +1397,7 @@ const TemplatePlaceholder = () => {
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
setIsCheckbox={setIsCheckbox}
handleNameModal={handleNameModal}
handleNameModal={setIsNameModal}
/>
)}
</div>