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: implement validation for checkbox min and max count and resolve issue of embed chebox position

Browse Source
This commit is contained in:
RaktimaNXG
2024-02-29 12:26:15 +05:30
parent e72baf3c1f
commit bc2f4f1ef3
8 changed files with 114 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+7 -5
View File
@@ -321,15 +321,17 @@ function PdfRequestFiles() {
for (let i = 0; i < isReadOnly.length; i++) {
const minCount =
isReadOnly[i].options?.validation?.minRequiredCount;
const parseMin = minCount && parseInt(minCount);
const maxCount =
isReadOnly[i].options?.validation?.maxRequiredCount;
const parseMax = maxCount && parseInt(maxCount);
const response = isReadOnly[i].options?.response?.length;
const defaultValue = isReadOnly[i].options?.defaultValue?.length;
if (minCount === 0 && maxCount === 0) {
if (parseMin === 0 && parseMax === 0) {
if (!minCountAlert) {
minCountAlert = false;
}
} else if (minCount === 0 && maxCount > 0) {
} else if (parseMin === 0 && parseMax > 0) {
if (!minCountAlert) {
minCountAlert = false;
}
@@ -338,14 +340,14 @@ function PdfRequestFiles() {
if (!minCountAlert) {
minCountAlert = true;
checkboxKey = isReadOnly[i].key;
setminRequiredCount(minCount);
setminRequiredCount(parseMin);
}
}
} else if (minCount > 0 && minCount > response) {
} else if (parseMin > 0 && parseMin > response) {
if (!minCountAlert) {
minCountAlert = true;
checkboxKey = isReadOnly[i].key;
setminRequiredCount(minCount);
setminRequiredCount(parseMin);
}
}
}
microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+10 -92
View File
@@ -54,8 +54,6 @@ const TemplatePlaceholder = () => {
const [isSelectListId, setIsSelectId] = useState();
const [isSendAlert, setIsSendAlert] = useState(false);
const [isCreateDocModal, setIsCreateDocModal] = useState(false);
const [isCheckboxRequired, setIsCheckboxRequired] = useState(false);
const [selectRequiredType, setSelectRequiredType] = useState("Optional");
const [isLoading, setIsLoading] = useState({
isLoad: true,
message: "This might take some time"
@@ -480,7 +478,6 @@ const TemplatePlaceholder = () => {
if (dragTypeValue === "dropdown") {
setShowDropdown(true);
} else if (dragTypeValue === "checkbox") {
// setIsCheckboxRequired(true);
setIsCheckbox(true);
} else if (dragTypeValue === "radio") {
setIsRadio(true);
@@ -1018,39 +1015,17 @@ const TemplatePlaceholder = () => {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
if (widgetType === "checkbox") {
if (selectRequiredType === "Read only") {
return {
...position,
options: {
...position.options,
status: selectRequiredType,
response: true
}
};
} else {
return {
...position,
options: {
...position.options,
status: selectRequiredType,
response: false
}
};
}
} else {
return {
...position,
options: {
...position.options,
hint: hint,
validation: {
type: regexType ? regularExpression : "regex",
pattern: !regexType ? regularExpression : ""
}
return {
...position,
options: {
...position.options,
hint: hint,
validation: {
type: regexType ? regularExpression : "regex",
pattern: !regexType ? regularExpression : ""
}
};
}
}
};
}
return position;
});
@@ -1067,11 +1042,7 @@ const TemplatePlaceholder = () => {
}
return obj;
});
setSignerPos(newUpdateSigner);
setIsCheckboxRequired(false);
setSelectRequiredType("Optional");
}
}
};
@@ -1309,58 +1280,6 @@ const TemplatePlaceholder = () => {
type={"signersAlert"}
setIsShowEmail={setIsShowEmail}
/>
{/* checkbox widget status component */}
<ModalUi isOpen={isCheckboxRequired} title={"Checkbox"}>
<div style={{ height: "100%", padding: 20 }}>
{checkboxType.map((data, key) => {
return (
<div
key={key}
style={{ display: "flex", flexDirection: "column" }}
>
<label
key={key}
style={{ fontSize: "16px", fontWeight: "500" }}
>
<input
style={{ accentColor: "red", marginRight: "10px" }}
type="radio"
value={data}
onChange={() => setSelectRequiredType(data)}
checked={selectRequiredType === data}
/>
{data}
</label>
</div>
);
})}
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
onClick={() => {
handleApplyWidgetsStatus();
}}
style={{
background: themeColor()
}}
type="button"
// disabled={!selectCopyType}
className="finishBtn"
>
Apply
</button>
</div>
</ModalUi>
<InputValidation
setIsValidate={setIsValidate}
handleValidateInput={handleValidateInput}
@@ -1457,7 +1376,6 @@ const TemplatePlaceholder = () => {
setCurrWidgetsDetails={setCurrWidgetsDetails}
setWidgetType={setWidgetType}
setIsRadio={setIsRadio}
setIsCheckboxRequired={setIsCheckboxRequired}
setIsValidate={setIsValidate}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js
-74
View File
@@ -1,74 +0,0 @@
import React, { useEffect } from "react";
import ModalUi from "../../premitives/ModalUi";
import { themeColor } from "../../utils/ThemeColor/backColor";
function CheckboxStatus(props) {
const checkboxType = ["Optional", "Required", "Read only"];
useEffect(() => {
if (props.currWidgetsDetails?.options?.status) {
props.setSelectRequiredType(props.currWidgetsDetails?.options?.status);
}
}, [props.currWidgetsDetails]);
return (
<ModalUi isOpen={props.isCheckboxRequired} title={"Checkbox"}>
<div style={{ height: "100%", padding: 20 }}>
{checkboxType.map((data, ind) => {
return (
<div key={ind} style={{ display: "flex", flexDirection: "column" }}>
<label style={{ fontSize: "16px", fontWeight: "500" }}>
<input
style={{ accentColor: "red", marginRight: "10px" }}
type="radio"
value={data}
onChange={() => props.setSelectRequiredType(data)}
checked={props.selectRequiredType === data}
/>
{data}
</label>
</div>
);
})}
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
onClick={() => {
props.handleApplyWidgetsStatus();
}}
style={{
background: themeColor()
}}
type="button"
className="finishBtn"
>
Apply
</button>
{props.currWidgetsDetails?.options?.status && (
<button
type="submit"
className="finishBtn cancelBtn"
onClick={() => {
props.setCurrWidgetsDetails([]);
props.setIsCheckboxRequired(false);
props.setSelectRequiredType("Optional");
}}
>
Cancel
</button>
)}
</div>
</ModalUi>
);
}
export default CheckboxStatus;
microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js
+16 -2
View File
@@ -67,6 +67,14 @@ function DropdownWidgetOption(props) {
setMaxCount(0);
};
const handleSetMinMax = (e) => {
const minValue = e.target.value;
if (minValue > dropdownOptionList.length) {
return "";
} else {
return minValue;
}
};
return (
//props.showDropdown
<ModalUi
@@ -106,7 +114,10 @@ function DropdownWidgetOption(props) {
required
defaultValue={0}
value={minCount}
onChange={(e) => setMinCount(e.target.value)}
onChange={(e) => {
const count = handleSetMinMax(e);
setMinCount(count);
}}
className="drodown-input"
/>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
@@ -116,7 +127,10 @@ function DropdownWidgetOption(props) {
required
defaultValue={0}
value={maxCount}
onChange={(e) => setMaxCount(e.target.value)}
onChange={(e) => {
const count = handleSetMinMax(e);
setMaxCount(count);
}}
className="drodown-input"
/>
</>
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
-61
View File
@@ -12,7 +12,6 @@ function PlaceholderType(props) {
const [validatePlaceholder, setValidatePlaceholder] = useState("");
const inputRef = useRef(null);
const [textValue, setTextValue] = useState("");
const [checkedValue, setCheckedValue] = useState(false);
const [isCheckedRadio, setIsCheckedRadio] = useState({
isChecked: false,
selectValue: ""
@@ -239,28 +238,6 @@ function PlaceholderType(props) {
const size = fontSize ? fontSize : 12;
return size + "px";
};
const handleChecked = () => {
if (props.isPlaceholder) {
if (props.pos?.options?.status === "Read only") {
if (checkedValue) {
return checkedValue;
} else {
const isChecked = true;
return isChecked;
}
} else {
if (checkedValue) {
return !checkedValue;
} else {
return false;
}
}
} else {
return props.pos?.options?.response;
}
};
//function for show checked checkbox
const selectCheckbox = (ind) => {
const res = props.pos.options?.response;
@@ -330,44 +307,6 @@ function PlaceholderType(props) {
);
case "checkbox":
return (
// <input
// className="inputPlaceholder"
// style={{ outlineColor: "#007bff" }}
// type="checkbox"
// defaultChecked={props.pos?.options?.status === "Read only"}
// disabled={
// props.isNeedSign && props.data?.signerObjId !== props.signerObjId
// ? true
// : props.isNeedSign &&
// props.pos?.options?.status === "Read only" &&
// true
// // : props.isPlaceholder
// }
// onBlur={handleInputBlur}
// checked={handleChecked()}
// onChange={(e) => {
// let isChecked = e.target.checked;
// if (props.isPlaceholder) {
// if (props.pos?.options?.status === "Read only") {
// setCheckedValue(true);
// isChecked = true;
// } else {
// setCheckedValue(false);
// isChecked = false;
// }
// }
// onChangeInput(
// isChecked,
// props.pos.key,
// props.xyPostion,
// props.index,
// props.setXyPostion,
// props.data && props.data.Id,
// false
// );
// }}
// />
<div>
{props.pos.options?.values?.map((data, ind) => {
return (
microfrontends/SignDocuments/src/Component/component/renderPdf.js
-10
View File
@@ -21,7 +21,6 @@ function RenderPdf({
drop,
signerPos,
successEmail,
handleTabDrag,
handleStop,
isDragging,
@@ -31,7 +30,6 @@ function RenderPdf({
setSignKey,
pdfDetails,
xyPostion,
pdfUrl,
numPages,
pageDetails,
@@ -47,7 +45,6 @@ function RenderPdf({
index,
containerWH,
setIsResize,
handleLinkUser,
setUniqueId,
signersdata,
@@ -55,7 +52,6 @@ function RenderPdf({
setSignerObjId,
setShowDropdown,
setIsInitial,
setIsCheckboxRequired,
setIsValidate,
setWidgetType,
setValidateAlert,
@@ -391,9 +387,6 @@ function RenderPdf({
posWidth={posWidth}
posHeight={posHeight}
isDragging={isDragging}
setIsCheckboxRequired={
setIsCheckboxRequired
}
setIsValidate={setIsValidate}
setWidgetType={setWidgetType}
setIsRadio={setIsRadio}
@@ -571,9 +564,6 @@ function RenderPdf({
posWidth={posWidth}
posHeight={posHeight}
isDragging={isDragging}
setIsCheckboxRequired={
setIsCheckboxRequired
}
setIsValidate={setIsValidate}
setWidgetType={setWidgetType}
setIsRadio={setIsRadio}
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+10 -50
View File
@@ -37,7 +37,6 @@ import TourContentWithBtn from "../premitives/TourContentWithBtn";
import ModalUi from "../premitives/ModalUi";
import DropdownWidgetOption from "../Component/WidgetComponent/dropdownWidgetOption";
import InputValidation from "./WidgetComponent/inputValidation";
import CheckboxStatus from "./WidgetComponent/checkboxStatus";
function PlaceHolderSign() {
const navigate = useNavigate();
@@ -92,9 +91,6 @@ function PlaceHolderSign() {
const [isDontShow, setIsDontShow] = useState(false);
const [isDragging, setIsDragging] = useState(false);
const [showDropdown, setShowDropdown] = useState(false);
const [isCheckboxRequired, setIsCheckboxRequired] = useState(false);
const [selectRequiredType, setSelectRequiredType] = useState("Optional");
const [isValidate, setIsValidate] = useState(false);
const [textValidate, setTextValidate] = useState("");
const [widgetType, setWidgetType] = useState("");
@@ -486,7 +482,6 @@ function PlaceHolderSign() {
if (dragTypeValue === "dropdown") {
setShowDropdown(true);
} else if (dragTypeValue === "checkbox") {
// setIsCheckboxRequired(true);
setIsCheckbox(true);
} else if (dragTypeValue === "radio") {
setIsRadio(true);
@@ -1171,39 +1166,17 @@ function PlaceHolderSign() {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position, ind) => {
if (position.key === signKey) {
if (widgetType === "checkbox") {
if (selectRequiredType === "Read only") {
return {
...position,
options: {
...position.options,
status: selectRequiredType,
response: true
}
};
} else {
return {
...position,
options: {
...position.options,
status: selectRequiredType,
response: false
}
};
}
} else {
return {
...position,
options: {
...position.options,
hint: hint,
validation: {
type: regexType ? regularExpression : "regex",
pattern: !regexType ? regularExpression : ""
}
return {
...position,
options: {
...position.options,
hint: hint,
validation: {
type: regexType ? regularExpression : "regex",
pattern: !regexType ? regularExpression : ""
}
};
}
}
};
}
return position;
});
@@ -1222,9 +1195,7 @@ function PlaceHolderSign() {
});
setSignerPos(newUpdateSigner);
setIsCheckboxRequired(false);
setTextValidate("");
setSelectRequiredType("Optional");
}
}
};
@@ -1456,16 +1427,6 @@ function PlaceHolderSign() {
</button>
</div>
</ModalUi>
{/* checkbox widget status component */}
{/* <CheckboxStatus
setSelectRequiredType={setSelectRequiredType}
selectRequiredType={selectRequiredType}
isCheckboxRequired={isCheckboxRequired}
setIsCheckboxRequired={setIsCheckboxRequired}
handleApplyWidgetsStatus={handleApplyWidgetsStatus}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
/> */}
<InputValidation
setIsValidate={setIsValidate}
handleValidateInput={handleValidateInput}
@@ -1558,7 +1519,6 @@ function PlaceHolderSign() {
setUniqueId={setUniqueId}
isDragging={isDragging}
setShowDropdown={setShowDropdown}
setIsCheckboxRequired={setIsCheckboxRequired}
setIsValidate={setIsValidate}
setWidgetType={setWidgetType}
setIsRadio={setIsRadio}
microfrontends/SignDocuments/src/utils/Utils.js
+71 -82
View File
@@ -49,23 +49,22 @@ export const addInitialData = (signerPos, setXyPostion, value, userId) => {
// Adjust this line to add the desired field
};
} else {
const widgetData =
item.type === "name"
? value?.Name
: item.type === "company"
? value?.Company
: item.type === "job title"
? value?.JobTitle
: item.type === "email"
? value?.Email
: "";
if (
item.type === "name" ||
item.type === "company" ||
item.type === "job title" ||
item.type === "email"
) {
function widgetDataValue(type) {
switch (type) {
case "name":
return value?.Name;
case "company":
return value?.Company;
case "job title":
return value?.JobTitle;
case "email":
return value?.Email;
default:
return "";
}
}
const widgetData = widgetDataValue(item.type);
if (["name", "company", "job title", "email"].includes(item.type)) {
return {
...item,
options: {
@@ -973,26 +972,21 @@ export const multiSignEmbed = async (
})
);
imgUrlList.forEach(async (imgData, id) => {
imgUrlList.forEach(async (position, id) => {
let img;
if (
imgData.type === "signature" ||
imgData.type === "stamp" ||
imgData.type === "initials" ||
imgData.type === "image"
) {
if (["signature", "stamp", "initials", "image"].includes(position.type)) {
if (
(imgData.ImageType && imgData.ImageType === "image/png") ||
imgData.ImageType === "image/jpeg"
(position.ImageType && position.ImageType === "image/png") ||
position.ImageType === "image/jpeg"
) {
img = await pdfDoc.embedJpg(images[id]);
} else {
img = await pdfDoc.embedPng(images[id]);
}
} else if (!imgData.type) {
} else if (!position.type) {
if (
(imgData.ImageType && imgData.ImageType === "image/png") ||
imgData.ImageType === "image/jpeg"
(position.ImageType && position.ImageType === "image/png") ||
position.ImageType === "image/jpeg"
) {
img = await pdfDoc.embedJpg(images[id]);
} else {
@@ -1000,11 +994,12 @@ export const multiSignEmbed = async (
}
}
let scaleWidth, scaleHeight;
scaleWidth = placeholderWidth(imgData, scale, signyourself);
scaleHeight = placeholderHeight(imgData, scale, signyourself);
scaleWidth = placeholderWidth(position, scale, signyourself);
scaleHeight = placeholderHeight(position, scale, signyourself);
const xPos = (pos) => {
const resizePos = pos.xPosition;
if (signyourself) {
if (isMobile) {
return resizePos * scale;
@@ -1069,18 +1064,29 @@ export const multiSignEmbed = async (
}
} else {
const widgetHeight =
imgData.type === "radio"
position.type === "radio"
? 10
: imgData.type === "checkbox"
: position.type === "checkbox"
? 10
: scaleHeight;
return page.getHeight() - resizePos - widgetHeight;
// - scaleHeight;
const newHeight = ind
? ind > 0
? widgetHeight
: 0
: widgetHeight;
if (ind && ind > 0 && position.type === "checkbox") {
return page.getHeight() - resizePos - newHeight;
} else if (!ind && position.type === "checkbox") {
return page.getHeight() - resizePos;
} else {
return page.getHeight() - resizePos - newHeight;
}
}
}
}
};
const randomboxId = "randombox_" + imgData.key;
const randomboxId = "randombox_" + position.key;
const widgetTypeExist = [
"text",
"name",
@@ -1089,32 +1095,31 @@ export const multiSignEmbed = async (
"date",
"email",
"label"
].includes(imgData.type);
if (imgData.type === "checkbox") {
].includes(position.type);
if (position.type === "checkbox") {
let addYPosition, isCheck;
if (imgData?.options?.values.length > 0) {
imgData?.options?.values.forEach((item, ind) => {
if (position?.options?.values.length > 0) {
position?.options?.values.forEach((item, ind) => {
const checkboxRandomId = "checkbox" + randomId();
let yPosition;
const height = 10;
if (imgData?.options?.response) {
isCheck = imgData?.options?.response?.includes(ind);
} else if (imgData?.options?.defaultValue) {
isCheck = imgData?.options?.defaultValue?.includes(ind);
if (position?.options?.response) {
isCheck = position?.options?.response?.includes(ind);
} else if (position?.options?.defaultValue) {
isCheck = position?.options?.defaultValue?.includes(ind);
}
const checkbox = form.createCheckBox(checkboxRandomId);
if (ind > 0) {
yPosition = yPos(imgData, ind) - addYPosition;
yPosition = yPos(position, ind) - addYPosition;
addYPosition = addYPosition + height + 10;
} else {
yPosition = yPos(imgData, ind);
addYPosition = height + 10;
yPosition = yPos(position, ind);
addYPosition = height;
}
checkbox.addToPage(page, {
x: xPos(imgData),
x: xPos(position),
y: yPosition,
width: height,
height: height
@@ -1127,59 +1132,43 @@ export const multiSignEmbed = async (
checkbox.enableReadOnly();
});
}
// const checkBox = form.createCheckBox(randomboxId);
// checkBox.addToPage(page, {
// x: xPos(imgData),
// y: yPos(imgData),
// width: scaleWidth,
// height: scaleHeight
// });
// if (imgData.options.response) {
// checkBox.check();
// } else {
// checkBox.uncheck();
// }
// checkBox.enableReadOnly();
} else if (widgetTypeExist) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 12;
const textContent = imgData.options?.response;
const textContent = position.options?.response;
page.drawText(textContent, {
x: xPos(imgData),
y: yPos(imgData) + 10,
x: xPos(position),
y: yPos(position) + 10,
size: fontSize,
font,
color: rgb(0, 0, 0)
});
} else if (imgData.type === "dropdown") {
} else if (position.type === "dropdown") {
const dropdown = form.createDropdown(randomboxId);
dropdown.addOptions(imgData?.options?.values);
dropdown.select(imgData.options?.response);
dropdown.addOptions(position?.options?.values);
dropdown.select(position.options?.response);
dropdown.addToPage(page, {
x: xPos(imgData),
y: yPos(imgData),
x: xPos(position),
y: yPos(position),
width: scaleWidth,
height: scaleHeight
});
dropdown.enableReadOnly();
} else if (imgData.type === "radio") {
} else if (position.type === "radio") {
const radioGroup = form.createRadioGroup(randomboxId);
let addYPosition = 18;
for (let i = 1; i <= imgData?.options?.values.length; i++) {
const data = imgData?.options?.values[i - 1];
for (let i = 1; i <= position?.options?.values.length; i++) {
const data = position?.options?.values[i - 1];
let yPosition;
if (i > 1) {
yPosition = yPos(imgData) - addYPosition;
yPosition = yPos(position) - addYPosition;
} else {
yPosition = yPos(imgData);
yPosition = yPos(position);
}
radioGroup.addOptionToPage(data, page, {
x: xPos(imgData),
x: xPos(position),
y: yPosition,
width: 11,
height: 11
@@ -1189,12 +1178,12 @@ export const multiSignEmbed = async (
}
}
radioGroup.select(imgData.options?.response);
radioGroup.select(position.options?.response);
radioGroup.enableReadOnly();
} else {
page.drawImage(img, {
x: xPos(imgData),
y: yPos(imgData),
x: xPos(position),
y: yPos(position),
width: scaleWidth,
height: scaleHeight
});