WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-23 16:12:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: checkbox default options issue, add default data functionality, fix checbox position issue signyour-self flow,change sequence of widgets

Browse Source
This commit is contained in:
RaktimaNXG
2024-03-04 09:58:53 +05:30
parent 708a3f4ad9
commit bd72ef84ed
15 changed files with 613 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+86 -31
View File
@@ -368,8 +368,9 @@ function PdfRequestFiles() {
return true;
}
};
//function for embed signature or image url in pdf
async function embedImages() {
async function embedWidgetsData() {
const validateSigning = checkSendInOrder();
if (validateSigning) {
const checkUser = signerPos.filter(
@@ -378,69 +379,122 @@ function PdfRequestFiles() {
if (checkUser && checkUser.length > 0) {
let unSignUrlData,
checkboxExist,
isReadOnly,
minCountAlert = false,
checkboxKey;
requiredRadio,
showAlert = false,
widgetKey,
radioExist,
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) {
isReadOnly = checkUser[0].placeHolder[i].pos.filter(
(position) => !position.options?.isReadOnly
requiredCheckbox = checkUser[0].placeHolder[i].pos.filter(
(position) => !position.options?.isReadOnly && position.type ==='checkbox'
);
if (isReadOnly && isReadOnly.length > 0) {
for (let i = 0; i < isReadOnly.length; i++) {
if (requiredCheckbox && requiredCheckbox.length > 0) {
for (let i = 0; i < requiredCheckbox.length; i++) {
const minCount =
isReadOnly[i].options?.validation?.minRequiredCount;
requiredCheckbox[i].options?.validation?.minRequiredCount;
const parseMin = minCount && parseInt(minCount);
const maxCount =
isReadOnly[i].options?.validation?.maxRequiredCount;
requiredCheckbox[i].options?.validation?.maxRequiredCount;
const parseMax = maxCount && parseInt(maxCount);
const response = isReadOnly[i].options?.response?.length;
const defaultValue = isReadOnly[i].options?.defaultValue?.length;
const response = requiredCheckbox[i].options?.response?.length;
const defaultValue = requiredCheckbox[i].options?.defaultValue?.length;
if (parseMin === 0 && parseMax === 0) {
if (!minCountAlert) {
minCountAlert = false;
if (!showAlert) {
showAlert = false;
}
} else if (parseMin === 0 && parseMax > 0) {
if (!minCountAlert) {
minCountAlert = false;
if (!showAlert) {
showAlert = false;
}
} else if (!response) {
if (!defaultValue) {
if (!minCountAlert) {
minCountAlert = true;
checkboxKey = isReadOnly[i].key;
if (!showAlert) {
showAlert = true;
widgetKey = requiredCheckbox[i].key;
setminRequiredCount(parseMin);
}
}
} else if (parseMin > 0 && parseMin > response) {
if (!minCountAlert) {
minCountAlert = true;
checkboxKey = isReadOnly[i].key;
if (!showAlert) {
showAlert = true;
widgetKey = requiredCheckbox[i].key;
setminRequiredCount(parseMin);
}
}
}
}
} else {
unSignUrlData = checkUser[0].placeHolder[i].pos.filter(
(pos) => !pos?.SignUrl && !pos.options.response
} 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{
const requiredWidgets = checkUser[0].placeHolder[i].pos.filter(
(position) => !position.options?.isReadOnly
);
if(requiredWidgets && requiredCheckbox.length >0){
unSignUrlData = checkUser[0].placeHolder[i].pos.filter(
(pos) => !pos?.SignUrl && !pos.options.response
);
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;
}
}
}
}
}
}
}
}
if (checkboxExist && isReadOnly && minCountAlert) {
setUnSignedWidgetId(checkboxKey);
if (checkboxExist && requiredCheckbox && showAlert) {
setUnSignedWidgetId(widgetKey);
setWidgetsTour(true);
} else if (!checkboxExist && unSignUrlData && unSignUrlData.length > 0) {
setUnSignedWidgetId(unSignUrlData[0].key);
}else if(radioExist && showAlert ){
setUnSignedWidgetId(widgetKey);
setWidgetsTour(true);
}
else if (showAlert) {
setUnSignedWidgetId(widgetKey);
setWidgetsTour(true);
}
else {
setIsUiLoading(true);
const pngUrl = checkUser[0].placeHolder;
@@ -555,6 +609,7 @@ function PdfRequestFiles() {
flag,
containerWH
);
//function for call to embed signature in pdf and get digital signature pdf
try {
const res = await signPdfFun(
@@ -1188,7 +1243,7 @@ function PdfRequestFiles() {
signerPos={signerPos}
isSigned={isSigned}
isCompleted={isCompleted}
embedImages={embedImages}
embedWidgetsData={embedWidgetsData}
isShowHeader={true}
setIsDecline={setIsDecline}
decline={true}
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+15 -13
View File
@@ -98,7 +98,7 @@ function SignYourSelf() {
const [isDontShow, setIsDontShow] = useState(false);
const divRef = useRef(null);
const nodeRef = useRef(null);
const [{ isOver }, drop] = useDrop({
const [, drop] = useDrop({
accept: "BOX",
drop: (item, monitor) => addPositionOfSignature(item, monitor),
collect: (monitor) => ({
@@ -180,7 +180,7 @@ function SignYourSelf() {
if (documentData && documentData.length > 0) {
setPdfDetails(documentData);
setIsUiLoading(false);
const isCompleted =
documentData[0].IsCompleted && documentData[0].IsCompleted;
if (isCompleted) {
@@ -195,6 +195,12 @@ function SignYourSelf() {
};
if (showComplete) {
setShowAlreadySignDoc(alreadySign);
}else{
setIsUiLoading(false);
setIsSignPad(false);
setIsEmail(true);
setXyPostion([]);
setSignBtnPosition([]);
}
}
} else if (
@@ -561,13 +567,12 @@ function SignYourSelf() {
};
//function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
async function embedImages() {
async function embedWidgetsData() {
let checkSigned = 0;
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(
const posWidgetData = xyPostion[i].pos.filter(
(pos) => pos.options.response
);
@@ -620,13 +625,10 @@ function SignYourSelf() {
flag,
containerWH
);
// console.log(pdfBytes)
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(pdfBytes, documentId);
setIsSignPad(false);
setIsEmail(true);
setXyPostion([]);
setSignBtnPosition([]);
await signPdfFun(pdfBytes, documentId);
}
}
@@ -1150,7 +1152,7 @@ function SignYourSelf() {
changePage={changePage}
pdfUrl={pdfUrl}
documentStatus={documentStatus}
embedImages={embedImages}
embedWidgetsData={embedWidgetsData}
pdfDetails={pdfDetails}
isShowHeader={true}
currentSigner={true}
@@ -1202,7 +1204,7 @@ function SignYourSelf() {
{/*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" }}
style={{ maxHeight: window.innerHeight - 70 + "px",backgroundColor:"white" }}
className="autoSignScroll"
>
{!documentStatus.isCompleted ? (
microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+7 -2
View File
@@ -143,7 +143,7 @@ const TemplatePlaceholder = () => {
const [isDragging, setIsDragging] = useState(false);
const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]);
const [isCheckbox, setIsCheckbox] = useState(false);
const [widgetName, setWidgetName] = useState(false);
const senderUser =
localStorage.getItem(
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -312,6 +312,9 @@ const TemplatePlaceholder = () => {
//function for setting position after drop signature button over pdf
const addPositionOfSignature = (item, monitor) => {
if (item && item.text) {
setWidgetName(item.text);
}
getSignerPos(item, monitor);
};
@@ -445,7 +448,7 @@ const TemplatePlaceholder = () => {
setIsCheckbox(true);
} else if (dragTypeValue === "radio") {
setIsRadio(true);
} else {
} else if(dragTypeValue !== 'label' && dragTypeValue !== 'signature') {
setIsNameModal(true);
}
setCurrWidgetsDetails("");
@@ -1155,6 +1158,7 @@ const TemplatePlaceholder = () => {
};
const handleNameModal = () => {
setIsNameModal(!isNameModal);
setCurrWidgetsDetails({})
};
return (
@@ -1488,6 +1492,7 @@ const TemplatePlaceholder = () => {
/>
</ModalUi>
<NameModal
widgetName={widgetName}
defaultdata={currWidgetsDetails}
isOpen={isNameModal}
handleClose={handleNameModal}
microfrontends/SignDocuments/src/Component/WidgetComponent/NameModal.js
+7 -7
View File
@@ -25,11 +25,13 @@ const NameModal = (props) => {
textvalidate:
props.defaultdata?.options?.validation?.type === "regex"
? props.defaultdata?.options?.validation?.pattern
: props.defaultdata?.options?.validation?.type || "text"
: props.defaultdata?.options?.validation?.type || ""
});
} else {
setFormdata({
name: props.defaultdata?.options?.name || props?.widgetName || ""
...formdata,
name: props.defaultdata?.options?.name || props?.widgetName || "",
});
}
}, [props.defaultdata, props.widgetName]);
@@ -114,7 +116,7 @@ const NameModal = (props) => {
<>
<div className="form-section">
<label htmlFor="textvalidate" style={{ fontSize: 13 }}>
Regular expressions
Validation
</label>
<div
style={{
@@ -139,6 +141,7 @@ const NameModal = (props) => {
zIndex: 2
}}
name="textvalidate"
placeholder="Enter custom expression"
value={formdata.textvalidate}
onChange={(e) => handleChange(e)}
onBlur={() => handleBlurRegex()}
@@ -202,9 +205,6 @@ const NameModal = (props) => {
</>
)}
<div className="form-section">
<label htmlFor="name" style={{ fontSize: 13 }}>
Status
</label>
<div
style={{
display: "flex",
@@ -274,7 +274,7 @@ const NameModal = (props) => {
type="submit"
className="finishBtn"
>
Add
Save
</button>
</form>
</ModalUi>
microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js
+121 -106
View File
@@ -30,8 +30,8 @@ function DropdownWidgetOption(props) {
);
setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
setStatus(props.currWidgetsDetails?.options?.status || "required");
setDefaultValue(props.currWidgetsDetails?.options?.defaultValue);
setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue);
setDefaultValue(props.currWidgetsDetails?.options?.defaultValue || "");
setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue|| []);
} else {
setStatus("required");
}
@@ -58,12 +58,14 @@ function DropdownWidgetOption(props) {
setDropdownOptionList(getUpdatedOptions);
props.handleSaveWidgetsOptions(null, null, null, null, null, false, flage);
};
const handleSaveOption = () => {
const defaultData =
defaultCheckbox && defaultCheckbox.length > 0
? defaultCheckbox
: defaultValue;
props.handleSaveWidgetsOptions(
dropdownName,
dropdownOptionList,
@@ -78,11 +80,12 @@ function DropdownWidgetOption(props) {
props.setShowDropdown(false);
setDropdownOptionList(["option-1", "option-2"]);
setDropdownName(props.type);
props.setCurrWidgetsDetails([]);
props.setCurrWidgetsDetails({});
setIsReadOnly(false);
setMinCount(0);
setMaxCount(0);
setDefaultCheckbox([]);
setDefaultValue("")
};
const handleSetMinMax = (e) => {
@@ -94,16 +97,16 @@ function DropdownWidgetOption(props) {
}
};
// const handleDefaultCheck = (index) => {
// const getDefaultCheck = defaultCheckbox.includes(index);
// if (getDefaultCheck[0] === index) {
// return "check";
// } else {
// return "uncheck";
// }
// // return "check";
// };
const handleDefaultCheck = (index) => {
const getDefaultCheck = defaultCheckbox.includes(index);
if (getDefaultCheck) {
return true;
} else {
return false;
}
};
return (
//props.showDropdown
<ModalUi
@@ -113,8 +116,17 @@ function DropdownWidgetOption(props) {
closeOff={true}
>
<div style={{ height: "100%", padding: 20 }}>
{props.type === "checkbox" && !props.isSignYourself && (
<>
<form
onSubmit={(e) => {
e.preventDefault();
handleSaveOption();
}}
>
<div className="dropdownContainer">
{["checkbox","radio"].includes(props.type) && !props.isSignYourself && (
<div>
<input
type="checkbox"
checked={isReadOnly}
@@ -124,16 +136,8 @@ function DropdownWidgetOption(props) {
/>
<label style={{ marginLeft: "10px" }}>Is read only</label>
</>
</div>
)}
<form
onSubmit={(e) => {
e.preventDefault();
handleSaveOption();
}}
>
<div className="dropdownContainer">
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Name<span style={{ color: "red", fontSize: 13 }}> *</span>
</label>
@@ -144,65 +148,12 @@ function DropdownWidgetOption(props) {
onChange={(e) => setDropdownName(e.target.value)}
className="drodown-input"
/>
{props.type !== "checkbox" && (
<>
<label
style={{ fontSize: "13px", fontWeight: "600", marginTop: 2 }}
>
status
</label>
<div
style={{
display: "flex",
flexDirection: "row",
gap: 10,
marginBottom: "0.5rem"
}}
>
{statusArr.map((data, ind) => {
return (
<div
key={ind}
style={{
display: "flex",
flexDirection: "row",
gap: 5,
alignItems: "center"
}}
>
<input
style={{ accentColor: "red" }}
type="radio"
name="status"
onChange={(e) => setStatus(data.toLowerCase())}
checked={status.toLowerCase() === data.toLowerCase()}
/>
<div style={{ fontSize: "13px", fontWeight: "500" }}>
{data}
</div>
</div>
);
})}
</div>
</>
)}
{props.type !== "checkbox" && (
<>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Default value
</label>
<input
// defaultValue={dropdownName}
value={defaultValue}
onChange={(e) => setDefaultValue(e.target.value)}
className="drodown-input"
/>
</>
)}
{props.type === "checkbox" && !props.isSignYourself && (
<>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Minimun required count
Minimun check
</label>
<input
required
@@ -215,7 +166,7 @@ function DropdownWidgetOption(props) {
className="drodown-input"
/>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Maximum required count
Maximum check
</label>
<input
required
@@ -251,6 +202,26 @@ function DropdownWidgetOption(props) {
alignItems: "center"
}}
>
{props.type === "checkbox" && !props.isSignYourself && (
<input type="checkbox"
checked={handleDefaultCheck(index)}
onChange={(e) => {
if (e.target.checked) {
const getDefaultCheck =
defaultCheckbox?.includes(index);
if (!getDefaultCheck) {
setDefaultCheckbox((prev) => [...prev, index]);
}
} else {
const removeOption = defaultCheckbox.filter(
(data) => data !== index
);
setDefaultCheckbox(removeOption);
}
}}
style={{width:"23px",height:"19px",marginRight:"5px"}} />
)}
<input
required
className="drodown-input"
@@ -258,30 +229,7 @@ function DropdownWidgetOption(props) {
value={option}
onChange={(e) => handleInputChange(index, e.target.value)}
/>
{props.type === "checkbox" && !props.isSignYourself && (
<select
// defaultValue={handleDefaultCheck(index)}
className="defaultOptions"
onChange={(e) => {
if (e.target.value === "check") {
const getDefaultCheck =
defaultCheckbox?.includes(index);
if (!getDefaultCheck) {
setDefaultCheckbox((prev) => [...prev, index]);
}
} else {
const removeOption = defaultCheckbox.filter(
(data) => data !== index
);
setDefaultCheckbox(removeOption);
}
}}
>
{" "}
<option>check</option>
<option>uncheck</option>
</select>
)}
<i
className="fa-solid fa-rectangle-xmark"
onClick={() => handleDeleteInput(index)}
@@ -305,6 +253,72 @@ function DropdownWidgetOption(props) {
className="fa-solid fa-square-plus"
></i>
</div>
{["dropdown","radio"].includes(props.type) && (
<>
<label style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}>Default value</label>
<select
onChange={(e) => setDefaultValue(e.target.value)}
className="drodown-input"
name="defaultvalue"
value={defaultValue}
placeholder="select default value"
>
<option value="" disabled hidden style={{ fontSize: "13px" }}>
Select...
</option>
{dropdownOptionList.map((data, ind) => {
return (
<option
style={{ fontSize: "13px" }}
key={ind}
value={data}
>
{data}
</option>
);
})}
</select>
</>
)}
{props.type !== "checkbox" && props.type !== 'radio' && (
<>
<div
style={{
display: "flex",
flexDirection: "row",
gap: 10,
marginTop: "0.5rem"
}}
>
{statusArr.map((data, ind) => {
return (
<div
key={ind}
style={{
display: "flex",
flexDirection: "row",
gap: 5,
alignItems: "center"
}}
>
<input
style={{ accentColor: "red" }}
type="radio"
name="status"
onChange={(e) => setStatus(data.toLowerCase())}
checked={status.toLowerCase() === data.toLowerCase()}
/>
<div style={{ fontSize: "13px", fontWeight: "500" }}>
{data}
</div>
</div>
);
})}
</div>
</>
)}
</div>
<div
@@ -338,6 +352,7 @@ function DropdownWidgetOption(props) {
props.setCurrWidgetsDetails([]);
props.setShowDropdown(false);
setDefaultCheckbox([]);
setDefaultValue("")
}}
>
Cancel
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+56 -38
View File
@@ -176,8 +176,11 @@ function Placeholder(props) {
} else {
props?.handleNameModal(true);
}
if(props.isPlaceholder){
props.setUniqueId(props.data.Id);
}
props.setSignKey(props.pos.key);
props.setUniqueId(props.data.Id);
props.setWidgetType(props.pos.type);
props.setCurrWidgetsDetails(props.pos);
};
@@ -185,31 +188,51 @@ function Placeholder(props) {
return (
props.isShowBorder && (
<>
{props.isPlaceholder && (
{(props.isPlaceholder || props.isSignYourself) && (
<>
{props.type !== "date" && (
{props.pos.type === 'checkbox' && props.isSignYourself ?
(
<i
onClick={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
}}
onTouchEnd={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
}}
className="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2",
right:'9px',
top: "-28px"
}}
></i>): props.pos.type !== "date" && props.pos.type !== 'label' && props.pos.type !== 'signature' && !props.isSignYourself &&(
<i
onClick={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
}}
onTouchEnd={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
}}
className="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2",
right: ["checkbox", "radio"].includes(props.pos.type)
? "24px"
: "47px",
top: ["checkbox", "radio"].includes(props.pos.type)
? "-28px"
: "-19px"
}}
></i>
)}
{props.pos.type !== "label" && (
onClick={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
}}
onTouchEnd={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
}}
className="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2",
right: ["checkbox", "radio"].includes(props.pos.type)
? "24px"
: "47px",
top: ["checkbox", "radio"].includes(props.pos.type)
? "-28px"
: "-19px"
}}
></i>
)
}
{props.pos.type !== "label" && !props.isSignYourself && (
<i
data-tut="reactourLinkUser"
className="fa-regular fa-user signUserIcon"
@@ -237,6 +260,7 @@ function Placeholder(props) {
: "-18px"
}}
></i>
)}
</>
)}
@@ -330,13 +354,11 @@ function Placeholder(props) {
style={{
color: "#188ae2",
right:
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
props.isPlaceholder
(props.pos.type === "checkbox" || props.pos.type === "radio")
? "-9px"
: "12px",
top:
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
props.isPlaceholder
(props.pos.type === "checkbox" || props.pos.type === "radio")
? "-28px"
: "-18px"
}}
@@ -365,13 +387,11 @@ function Placeholder(props) {
style={{
color: "#188ae2",
right:
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
props.isPlaceholder
(props.pos.type === "checkbox" || props.pos.type === "radio")
? "-27px"
: "-8px",
top:
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
props.isPlaceholder
(props.pos.type === "checkbox" || props.pos.type === "radio")
? "-28px"
: "-18px"
}}
@@ -495,15 +515,13 @@ function Placeholder(props) {
props.pos.key === props.selectWidgetId ? (
<BorderResize
right={
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
props.isPlaceholder
(props.pos.type === "checkbox" || props.pos.type === "radio")
? -21
: -12
}
top={
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
props.isPlaceholder
? -21
(props.pos.type === "checkbox" || props.pos.type === "radio")
? -21
: -11
}
/>
@@ -534,7 +552,7 @@ function Placeholder(props) {
left: props.xPos(props.pos, props.isSignYourself),
top: props.yPos(props.pos, props.isSignYourself),
width: props.posWidth(props.pos, props.isSignYourself),
height: props.posHeight(props.pos, props.isSignYourself),
// height: props.posHeight(props.pos, props.isSignYourself),
zIndex: "10"
}}
onTouchEnd={() => {
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js
+2 -3
View File
@@ -3,9 +3,8 @@ import { themeColor } from "../../utils/ThemeColor/backColor";
import { defaultWidthHeight, resizeBorderExtraWidth } from "../../utils/Utils";
function PlaceholderBorder(props) {
const getResizeBorderExtraWidth =
(props.pos.type === "checkbox" || props.pos.type === "radio") &&
props.isPlaceholder
? 38
(props.pos.type === "checkbox" || props.pos.type === "radio")
? 38
: resizeBorderExtraWidth();
const defaultWidth = defaultWidthHeight(props.pos.type).width;
const defaultHeight = defaultWidthHeight(props.pos.type).height;
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
+113 -108
View File
@@ -7,16 +7,15 @@ import RegexParser from "regex-parser";
function PlaceholderType(props) {
const type = props.pos.type;
const [selectOption, setSelectOption] = useState("");
const [selectOption, setSelectOption] = useState(props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue :"");
const [startDate, setStartDate] = useState(new Date());
const [validatePlaceholder, setValidatePlaceholder] = useState("");
const inputRef = useRef(null);
const [textValue, setTextValue] = useState("");
const [isCheckedRadio, setIsCheckedRadio] = useState({
isChecked: false,
selectValue: ""
});
const [selectedCheckbox, setSelectedCheckbox] = useState([]);
const [textValue, setTextValue] = useState();
const [selectedCheckbox, setSelectedCheckbox] = useState([]);
const validateExpression = (regexValidation) => {
let regexObject = regexValidation;
@@ -31,6 +30,7 @@ function PlaceholderType(props) {
}
};
const handleInputBlur = () => {
props.setDraggingEnabled(true);
const validateType = props.pos?.options?.validation?.type;
@@ -89,58 +89,10 @@ function PlaceholderType(props) {
const updateDate = new Date();
setStartDate(updateDate);
}
setTextValue(props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue :"")
}, []);
useEffect(() => {
const isCheckedValue = isCheckedRadio?.selectValue
? isCheckedRadio.selectValue
: selectedCheckbox;
if (props.pos?.type && props.pos.type === "checkbox") {
let isDefaultValue;
if (props.isNeedSign) {
isDefaultValue = props.pos.options?.defaultValue;
}
if (isDefaultValue && isDefaultValue.length > 0) {
onChangeInput(
isCheckedValue,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
null,
null,
null,
true
);
} else {
onChangeInput(
isCheckedValue,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
null,
props.isPlaceholder,
isCheckedRadio.selectedKey
);
}
} else if (props.pos?.type && props.pos.type === "radio") {
onChangeInput(
isCheckedValue,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
null
);
}
}, [isCheckedRadio]);
//for handle default checked options
useEffect(() => {
@@ -157,7 +109,7 @@ function PlaceholderType(props) {
const [day, month, year] = props.saveDateFormat.split("-");
updateDate = new Date(`${year}-${month}-${day}`);
} else {
updateDate = new Date(props.saveDateFormat);
updateDate = new Date();
}
// const updateDate = new Date(props.saveDateFormat);
setStartDate(updateDate);
@@ -201,7 +153,7 @@ function PlaceholderType(props) {
ref={ref}
>
{dateValue(value)}
<i className="fa-solid fa-calendar" style={{ marginLeft: "5px" }}></i>
<i className="fa-regular fa-calendar" style={{ marginLeft: "5px" }}></i>
</div>
));
@@ -233,7 +185,7 @@ function PlaceholderType(props) {
const selectCheckbox = (ind) => {
const res = props.pos.options?.response;
const defaultCheck = props.pos.options?.defaultValue;
if (res) {
if (res && res?.length>0) {
const isSelectIndex = res.indexOf(ind);
if (isSelectIndex > -1) {
return true;
@@ -253,6 +205,83 @@ function PlaceholderType(props) {
}
};
const handleRadioCheck =(data)=>{
const defaultData = props.pos.options?.defaultValue;
if(textValue === data){
return true;
}else if(defaultData ===data)
{
return true;
}
else{
return false;
}
}
//function for set checked and unchecked value of checkbox
const handleCheckboxValue =(isChecked,ind)=>{
let updateSelectedCheckbox =[], checkedList;
let isDefaultValue,isDefaultEmpty;
if (props.pos?.type && ["checkbox","radio"].includes(props.pos.type) ) {
updateSelectedCheckbox = selectedCheckbox
if(isChecked){
updateSelectedCheckbox.push(ind)
setSelectedCheckbox(updateSelectedCheckbox)
}else{
checkedList = selectedCheckbox.filter((data)=> data!==ind)
setSelectedCheckbox(checkedList)
}
if (props.isNeedSign) {
isDefaultValue = props.pos.options?.defaultValue;
}
if (isDefaultValue && isDefaultValue.length > 0) {
isDefaultEmpty = true;
}
onChangeInput(
checkedList ? checkedList :updateSelectedCheckbox,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
null,
null,
null,
isDefaultEmpty
);
}
}
//function to handle select radio widget and set value seletced by user
const handleCheckRadio =(isChecked,data)=>{
let isDefaultValue,isDefaultEmpty;
if (props.isNeedSign) {
isDefaultValue = props.pos.options?.defaultValue;
}
if (isDefaultValue ) {
isDefaultEmpty = true;
}
if(isChecked){
setTextValue(data)
}else{
setTextValue("")
}
onChangeInput(
textValue,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
null,
null,
null,
isDefaultEmpty
);
}
switch (props.pos.type) {
case "signature":
return props.pos.SignUrl ? (
@@ -325,26 +354,16 @@ function PlaceholderType(props) {
const maxCountInt = maxRequired && parseInt(maxRequired);
if (maxCountInt > 0) {
if (selectedCheckbox.length <= maxCountInt - 1) {
setSelectedCheckbox((prev) => [...prev, ind]);
handleCheckboxValue(e.target.checked,ind)
}
} else {
setSelectedCheckbox((prev) => [...prev, ind]);
handleCheckboxValue(e.target.checked,ind)
}
} else {
const removeOption = selectedCheckbox.filter(
(data) => data !== ind
);
setSelectedCheckbox(removeOption);
handleCheckboxValue(e.target.checked,ind)
}
}}
onClick={() => {
!props.isPlaceholder &&
setIsCheckedRadio({
isChecked: !isCheckedRadio,
selectValue: "",
selectedKey: ind
});
}}
/>
);
})}
@@ -358,13 +377,7 @@ function PlaceholderType(props) {
ref={inputRef}
placeholder={validatePlaceholder}
style={{ fontSize: calculateFontSize() }}
value={
props.pos?.options?.validation
? textValue
? textValue
: props.pos.options?.response && props.pos.options.response
: textValue
}
value={textValue}
type="text"
tabIndex="0"
disabled={
@@ -374,6 +387,7 @@ function PlaceholderType(props) {
}
onBlur={handleInputBlur}
onChange={(e) => {
setTextValue(e.target.value);
onChangeInput(
e.target.value,
@@ -468,11 +482,7 @@ function PlaceholderType(props) {
style={{ fontSize: calculateFontSize() }}
className="inputPlaceholder"
type="text"
value={
textValue
? textValue
: props.pos.options.response && props.pos.options.response
}
value={textValue}
onBlur={handleInputBlur}
onChange={(e) => {
handleTextValid(e);
@@ -506,11 +516,7 @@ function PlaceholderType(props) {
ref={inputRef}
placeholder={"company"}
style={{ fontSize: calculateFontSize() }}
value={
textValue
? textValue
: props.pos.options.response && props.pos.options.response
}
value={textValue}
onBlur={handleInputBlur}
onChange={(e) => {
handleTextValid(e);
@@ -544,11 +550,7 @@ function PlaceholderType(props) {
ref={inputRef}
placeholder={"job title"}
style={{ fontSize: calculateFontSize() }}
value={
textValue
? textValue
: props.pos.options.response && props.pos.options.response
}
value={textValue}
onBlur={handleInputBlur}
onChange={(e) => {
handleTextValid(e);
@@ -635,11 +637,7 @@ function PlaceholderType(props) {
ref={inputRef}
placeholder={"email"}
style={{ fontSize: calculateFontSize() }}
value={
textValue
? textValue
: props.pos.options?.response && props.pos.options.response
}
value={textValue}
onBlur={handleInputBlur}
onChange={(e) => {
handleTextValid(e);
@@ -679,15 +677,22 @@ function PlaceholderType(props) {
marginTop: "5px"
}}
type="radio"
disabled={props.isPlaceholder}
checked={isCheckedRadio.selectValue === data}
disabled={
props.isNeedSign &&
props.pos.options?.isReadOnly &&
props.pos.options?.isReadOnly
}
// disabled={props.isPlaceholder}
checked={handleRadioCheck(data)}
// checked={isCheckedRadio.isChecked}
onClick={() => {
setIsCheckedRadio({
isChecked: !isCheckedRadio,
selectValue: data
});
onChange={(e)=>{
if(!props.isPlaceholder){
handleCheckRadio(e.target.checked,data)
}
}}
/>
);
})}
microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+8 -8
View File
@@ -204,18 +204,18 @@ function FieldsComponent({
const widgetRef = [
dragSignature,
dragStamp,
dropdown,
checkbox,
text,
initials,
label,
text,
checkbox,
dropdown,
radio,
image,
date,
name,
email,
company,
jobTitle,
date,
image,
email,
radio,
label
];
const getWidgetArray = widgets;
const newUpdateSigner = getWidgetArray.map((obj, ind) => {
microfrontends/SignDocuments/src/Component/component/header.js
+6 -6
View File
@@ -21,7 +21,7 @@ function Header({
changePage,
pdfUrl,
documentStatus,
embedImages,
embedWidgetsData,
pdfDetails,
signerPos,
signersdata,
@@ -423,9 +423,9 @@ function Header({
data-tut="reactourThird"
onClick={() => {
if (!pdfUrl) {
embedImages();
embedWidgetsData();
} else if (isPdfRequestFiles) {
embedImages();
embedWidgetsData();
}
}}
style={{
@@ -523,7 +523,7 @@ function Header({
className="finishBtn sendHover"
onClick={() => {
if (!pdfUrl) {
embedImages();
embedWidgetsData();
}
}}
>
@@ -669,7 +669,7 @@ function Header({
type="button"
className="finishBtn sendHover"
onClick={() => {
embedImages();
embedWidgetsData();
}}
>
Finish
@@ -767,7 +767,7 @@ function Header({
className="finishBtn sendHover"
onClick={() => {
if (!pdfUrl) {
embedImages();
embedWidgetsData();
}
}}
>
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+8
View File
@@ -442,6 +442,10 @@ function RenderPdf({
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleUserName={handleUserName}
setIsCheckbox={setIsCheckbox}
setCurrWidgetsDetails={
setCurrWidgetsDetails
}
/>
)
);
@@ -624,6 +628,10 @@ function RenderPdf({
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleUserName={handleUserName}
setIsCheckbox={setIsCheckbox}
setCurrWidgetsDetails={
setCurrWidgetsDetails
}
/>
</React.Fragment>
)
microfrontends/SignDocuments/src/Component/component/signedby.js
+6 -4
View File
@@ -8,18 +8,17 @@ function Signedby({ pdfDetails }) {
};
return (
<div className="signerComponent">
<div className="signerComponent">
<div
style={{
background: themeColor(),
// color:"white"
color:"white"
}}
className="signedStyle"
>
Signed By
</div>
<div style={{ marginTop: "2px" }}>
<div style={{ marginTop: "2px",background:"white" }}>
<div
style={{
display: "flex",
@@ -61,6 +60,9 @@ function Signedby({ pdfDetails }) {
</div>
</div>
</div>
);
}
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+14 -8
View File
@@ -488,7 +488,7 @@ function PlaceHolderSign() {
setIsCheckbox(true);
} else if (dragTypeValue === "radio") {
setIsRadio(true);
} else {
} else if(dragTypeValue !== 'label' && dragTypeValue !== 'signature') {
setIsNameModal(true);
}
setWidgetType(dragTypeValue);
@@ -704,7 +704,7 @@ function PlaceHolderSign() {
flag,
containerWH
);
const parseBaseUrl = localStorage.getItem("baseUrl");
const parseAppId = localStorage.getItem("parseAppId");
Parse.initialize(parseAppId);
@@ -746,7 +746,7 @@ function PlaceHolderSign() {
setIsSendAlert(alert);
}
};
const sendEmailToSigners = async () => {
setIsUiLoading(true);
const pdfUrl = await embedPrefilllData();
@@ -839,12 +839,15 @@ function PlaceHolderSign() {
let updateExpiryDate, data;
updateExpiryDate = new Date();
updateExpiryDate.setDate(updateExpiryDate.getDate() + addExtraDays);
//filter label widgets after add label widgets data on pdf
const filterPrefill = signerPos.filter((data) => data.Role !== "prefill");
try {
if (updateExpiryDate) {
data = {
Placeholders: signerPos,
SignedUrl: pdfDetails[0].URL,
Placeholders: filterPrefill,
SignedUrl: pdfUrl,
Signers: signers,
ExpiryDate: {
iso: updateExpiryDate,
@@ -853,8 +856,8 @@ function PlaceHolderSign() {
};
} else {
data = {
Placeholders: signerPos,
SignedUrl: pdfDetails[0].URL,
Placeholders: filterPrefill,
SignedUrl: pdfUrl,
Signers: signers
};
}
@@ -880,6 +883,7 @@ function PlaceHolderSign() {
isLoad: false
};
setIsLoading(loadObj);
setIsUiLoading(false);
})
.catch((err) => {
console.log("axois err ", err);
@@ -1062,7 +1066,7 @@ function PlaceHolderSign() {
...position.options,
name: dropdownName,
values: dropdownOptions,
status: status,
isReadOnly: isReadOnly,
defaultValue: defaultValue
}
};
@@ -1093,6 +1097,7 @@ function PlaceHolderSign() {
minRequiredCount: minCount,
maxRequiredCount: maxCount
},
defaultValue: defaultValue,
isReadOnly: isReadOnly
}
};
@@ -1207,6 +1212,7 @@ function PlaceHolderSign() {
const handleNameModal = () => {
setIsNameModal(!isNameModal);
setCurrWidgetsDetails({})
};
//function for update TourStatus
const closeTour = async () => {
microfrontends/SignDocuments/src/premitives/GuestSign.js
+2 -2
View File
@@ -284,7 +284,7 @@ if(jsonSender?.objectId){ await axios
};
//function for embed signature or image url in pdf
async function embedImages() {
async function embedWidgetsData() {
const checkUser = signerPos.filter(
(data) => data.signerObjId === signerObjectId
);
@@ -808,7 +808,7 @@ if(jsonSender?.objectId){ await axios
signerPos={signerPos}
isSigned={isSigned}
isCompleted={isCompleted}
embedImages={embedImages}
embedWidgetsData={embedWidgetsData}
isShowHeader={true}
setIsDecline={setIsDecline}
decline={true}
microfrontends/SignDocuments/src/utils/Utils.js
+162 -77
View File
@@ -82,10 +82,8 @@ export const addInitialData = (signerPos, setXyPostion, value, userId) => {
}
});
};
const handleDefaultValue = (ind, defaultValue) => {
const updateDefault = defaultValue.filter((data) => data !== ind);
return updateDefault;
};
//function for save widgets value on onchange function
export const onChangeInput = (
value,
signKey,
@@ -130,27 +128,8 @@ export const onChangeInput = (
}
}
};
} else if (isPlaceholder) {
return {
...position,
options: {
...position.options,
defaultValue: value
}
};
} else if (selectedKey) {
return {
...position,
options: {
...position.options,
response: value,
defaultValue: handleDefaultValue(
selectedKey,
position.options.defaultValue
)
}
};
} else if (isDefaultEmpty) {
}
else if (isDefaultEmpty) {
return {
...position,
options: {
@@ -214,6 +193,79 @@ export const onChangeInput = (
}
};
// export const widgets = [
// {
// type: "signature",
// icon: "fa-solid fa-pen-nib",
// iconSize: "20px"
// },
// {
// type: "stamp",
// icon: "fa-solid fa-stamp",
// iconSize: "19px"
// },
// {
// type: "dropdown",
// icon: "fa-solid fa-circle-chevron-down",
// iconSize: "19px"
// },
// {
// type: "checkbox",
// icon: "fa-solid fa-square-check",
// iconSize: "22px"
// },
// {
// type: "text",
// icon: "fa-solid fa-font",
// iconSize: "21px"
// },
// {
// type: "initials",
// icon: "fa-solid fa-signature",
// iconSize: "15px"
// },
// {
// type: "name",
// icon: "fa-solid fa-user",
// iconSize: "21px"
// },
// {
// type: "company",
// icon: "fa-solid fa-building",
// iconSize: "25px"
// },
// {
// type: "job title",
// icon: "fa-solid fa-address-card",
// iconSize: "17px"
// },
// {
// type: "date",
// icon: "fa-solid fa-calendar-days",
// iconSize: "20px"
// },
// {
// type: "image",
// icon: "fa-solid fa-image",
// iconSize: "20px"
// },
// {
// type: "email",
// icon: "fa-solid fa-envelope",
// iconSize: "20px"
// },
// {
// type: "radio",
// icon: "fa-regular fa-circle-dot",
// iconSize: "20px"
// },
// {
// type: "label",
// icon: "fa-solid fa-text-width",
// iconSize: "20px"
// }
// ];
export const widgets = [
{
type: "signature",
@@ -226,14 +278,14 @@ export const widgets = [
iconSize: "19px"
},
{
type: "dropdown",
icon: "fa-solid fa-circle-chevron-down",
iconSize: "19px"
type: "initials",
icon: "fa-solid fa-signature",
iconSize: "15px"
},
{
type: "checkbox",
icon: "fa-solid fa-square-check",
iconSize: "22px"
type: "label",
icon: "fa-solid fa-text-width",
iconSize: "20px"
},
{
type: "text",
@@ -241,15 +293,40 @@ export const widgets = [
iconSize: "21px"
},
{
type: "initials",
icon: "fa-solid fa-signature",
iconSize: "15px"
type: "checkbox",
icon: "fa-solid fa-square-check",
iconSize: "22px"
},
{
type: "dropdown",
icon: "fa-solid fa-circle-chevron-down",
iconSize: "19px"
},
{
type: "radio",
icon: "fa-regular fa-circle-dot",
iconSize: "20px"
},
{
type: "image",
icon: "fa-solid fa-image",
iconSize: "20px"
},
{
type: "date",
icon: "fa-solid fa-calendar-days",
iconSize: "20px"
},
{
type: "name",
icon: "fa-solid fa-user",
iconSize: "21px"
},
{
type: "email",
icon: "fa-solid fa-envelope",
iconSize: "20px"
},
{
type: "company",
icon: "fa-solid fa-building",
@@ -260,31 +337,6 @@ export const widgets = [
icon: "fa-solid fa-address-card",
iconSize: "17px"
},
{
type: "date",
icon: "fa-solid fa-calendar-days",
iconSize: "20px"
},
{
type: "image",
icon: "fa-solid fa-image",
iconSize: "20px"
},
{
type: "email",
icon: "fa-solid fa-envelope",
iconSize: "20px"
},
{
type: "radio",
icon: "fa-regular fa-circle-dot",
iconSize: "20px"
},
{
type: "label",
icon: "fa-solid fa-text-width",
iconSize: "20px"
}
];
const getDate = () => {
@@ -1031,11 +1083,39 @@ export const multiSignEmbed = async (
const yPos = (pos, ind) => {
const resizePos = pos.yPosition;
const widgetHeight =
position.type === "radio"
? 10
: position.type === "checkbox"
? 10
: scaleHeight;
const newHeight = ind
? ind > 0
? widgetHeight
: 0
: widgetHeight;
if (signyourself) {
if (isMobile) {
return page.getHeight() - resizePos * scale - scaleHeight;
if (ind && ind > 0 && position.type === "checkbox") {
return page.getHeight() - resizePos * scale - newHeight;
} else if (!ind && position.type === "checkbox") {
return page.getHeight() - resizePos * scale;
} else {
return page.getHeight() - resizePos * scale - newHeight;
}
// return page.getHeight() - resizePos * scale - scaleHeight;
} else {
return page.getHeight() - resizePos - scaleHeight;
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;
}
// return page.getHeight() - resizePos - scaleHeight;
}
} else {
//checking both condition mobile and desktop view
@@ -1063,17 +1143,7 @@ export const multiSignEmbed = async (
return page.getHeight() - y - scaleHeight;
}
} else {
const widgetHeight =
position.type === "radio"
? 10
: position.type === "checkbox"
? 10
: scaleHeight;
const newHeight = ind
? ind > 0
? widgetHeight
: 0
: widgetHeight;
if (ind && ind > 0 && position.type === "checkbox") {
return page.getHeight() - resizePos - newHeight;
@@ -1104,7 +1174,7 @@ export const multiSignEmbed = async (
const checkboxRandomId = "checkbox" + randomId();
let yPosition;
const height = 10;
if (position?.options?.response) {
if (position?.options?.response && position?.options?.response?.length >0) {
isCheck = position?.options?.response?.includes(ind);
} else if (position?.options?.defaultValue) {
isCheck = position?.options?.defaultValue?.includes(ind);
@@ -1135,7 +1205,12 @@ export const multiSignEmbed = async (
} else if (widgetTypeExist) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 12;
const textContent = position.options?.response;
let textContent;
if (position?.options?.response) {
textContent = position.options?.response;
} else if (position?.options?.defaultValue) {
textContent = position?.options?.defaultValue;
}
page.drawText(textContent, {
x: xPos(position),
y: yPos(position) + 10,
@@ -1146,7 +1221,13 @@ export const multiSignEmbed = async (
} else if (position.type === "dropdown") {
const dropdown = form.createDropdown(randomboxId);
dropdown.addOptions(position?.options?.values);
dropdown.select(position.options?.response);
if (position?.options?.response) {
dropdown.select(position.options?.response);
} else if (position?.options?.defaultValue) {
dropdown.select( position?.options?.defaultValue);
}
dropdown.addToPage(page, {
x: xPos(position),
y: yPos(position),
@@ -1177,8 +1258,12 @@ export const multiSignEmbed = async (
addYPosition = addYPosition + 18;
}
}
radioGroup.select(position.options?.response);
if (position?.options?.response) {
radioGroup.select(position.options?.response);
} else if (position?.options?.defaultValue) {
radioGroup.select(position?.options?.defaultValue);
}
radioGroup.enableReadOnly();
} else {
page.drawImage(img, {