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: add default value validation of regex

Browse Source
This commit is contained in:
RaktimaNXG
2024-03-01 17:04:08 +05:30
parent 4239e8d5fb
commit 4e39762b46
8 changed files with 362 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+40 -82
View File
@@ -2,7 +2,6 @@ import React, { useEffect, useState, useRef } from "react";
import RenderAllPdfPage from "./component/renderAllPdfPage";
import { useParams, useNavigate } from "react-router-dom";
import axios from "axios";
import moment from "moment";
import "../css/./signature.css";
import { themeColor } from "../utils/ThemeColor/backColor";
import { DndProvider } from "react-dnd";
@@ -37,7 +36,6 @@ import PlaceholderCopy from "./component/PlaceholderCopy";
import ModalComponent from "./component/modalComponent";
import TourContentWithBtn from "../premitives/TourContentWithBtn";
import DropdownWidgetOption from "./WidgetComponent/dropdownWidgetOption";
import InputValidation from "./WidgetComponent/inputValidation";
const TemplatePlaceholder = () => {
const navigate = useNavigate();
const { templateId } = useParams();
@@ -82,9 +80,6 @@ const TemplatePlaceholder = () => {
const [widgetType, setWidgetType] = useState("");
const [isRadio, setIsRadio] = useState(false);
const [selectWidgetId, setSelectWidgetId] = useState("");
const [isValidate, setIsValidate] = useState(false);
const [textValidate, setTextValidate] = useState("");
const [hint, setHint] = useState("");
const [isNameModal, setIsNameModal] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
@@ -105,7 +100,7 @@ const TemplatePlaceholder = () => {
"#ffffcc"
];
const isMobile = window.innerWidth < 767;
const [{ isOver }, drop] = useDrop({
const [, drop] = useDrop({
accept: "BOX",
drop: (item, monitor) => addPositionOfSignature(item, monitor),
collect: (monitor) => ({
@@ -967,57 +962,6 @@ const TemplatePlaceholder = () => {
setIsModalRole(false);
};
//function for base on condition to add checkbox widget status and input text validation in signerPos array
const handleApplyWidgetsStatus = (textValidate) => {
const options = ["email", "number", "text"];
const regexType = options.includes(textValidate);
let regularExpression = textValidate;
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
return {
...position,
options: {
...position.options,
hint: hint,
validation: {
type: regexType ? regularExpression : "regex",
pattern: !regexType ? regularExpression : ""
}
}
};
}
return position;
});
const newUpdateSignPos = getPlaceHolder.map((obj) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
const newUpdateSigner = signerPos.map((obj) => {
if (obj.Id === uniqueId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
}
}
};
const handleSaveWidgetsOptions = (
dropdownName,
dropdownOptions,
@@ -1136,6 +1080,16 @@ const TemplatePlaceholder = () => {
};
const handleWidgetdefaultdata = (defaultdata) => {
const options = ["email", "number", "text"];
let inputype;
if (defaultdata.textvalidate) {
inputype = options.includes(defaultdata.textvalidate)
? defaultdata.textvalidate
: "regex";
} else {
inputype = "text";
}
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -1149,15 +1103,33 @@ const TemplatePlaceholder = () => {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position, ind) => {
if (position.key === signKey) {
return {
...position,
options: {
...position.options,
name: defaultdata.name,
status: defaultdata.status,
defaultValue: defaultdata.defaultValue
}
};
if (position.type === "text") {
return {
...position,
options: {
...position.options,
name: defaultdata?.name || "text",
status: defaultdata?.status || "required",
hint: defaultdata?.hint || "",
defaultValue: defaultdata?.defaultValue || "",
validation: {
type: inputype,
pattern:
inputype === "regex" ? defaultdata.textvalidate : ""
}
}
};
} else {
return {
...position,
options: {
...position.options,
name: defaultdata.name,
status: defaultdata.status,
defaultValue: defaultdata.defaultValue
}
};
}
}
return position;
});
@@ -1174,19 +1146,16 @@ const TemplatePlaceholder = () => {
}
return obj;
});
console.log("newUpdateSigner ", newUpdateSigner);
setSignerPos(newUpdateSigner);
}
}
setCurrWidgetsDetails({});
handleNameModal();
};
const handleNameModal = () => {
setIsNameModal(!isNameModal);
};
const handleValidateInput = (e) => {
handleApplyWidgetsStatus(textValidate);
setIsValidate(false);
};
return (
<div>
<Title title={"Template"} />
@@ -1305,16 +1274,6 @@ const TemplatePlaceholder = () => {
type={"signersAlert"}
setIsShowEmail={setIsShowEmail}
/>
<InputValidation
setIsValidate={setIsValidate}
handleValidateInput={handleValidateInput}
isValidate={isValidate}
setHint={setHint}
setTextValidate={setTextValidate}
textValidate={textValidate}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
/>
<DropdownWidgetOption
type="radio"
title="Radio group"
@@ -1403,7 +1362,6 @@ const TemplatePlaceholder = () => {
setCurrWidgetsDetails={setCurrWidgetsDetails}
setWidgetType={setWidgetType}
setIsRadio={setIsRadio}
setIsValidate={setIsValidate}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
setIsCheckbox={setIsCheckbox}
microfrontends/SignDocuments/src/Component/WidgetComponent/NameModal.js
+171 -26
View File
@@ -1,38 +1,98 @@
import React, { useEffect, useState } from "react";
import ModalUi from "../../premitives/ModalUi";
import "../../css/AddUser.css";
import RegexParser from "regex-parser";
const NameModal = ({ isOpen, handleClose, handleData, defaultdata }) => {
console.log("defaultdata ", defaultdata?.options);
const NameModal = (props) => {
const [formdata, setFormdata] = useState({
name: defaultdata?.options?.name || "",
defaultValue: defaultdata?.options?.defaultValue || "",
status: defaultdata?.options?.status || "required"
name: "",
defaultValue: "",
status: "required",
hint: "",
textvalidate: "text"
});
const [isValid, setIsValid] = useState(true);
const statusArr = ["Required", "Optional"];
const inputOpt = ["email", "number", "text"];
useEffect(() => {
if (defaultdata) {
if (props.defaultdata) {
setFormdata({
name: defaultdata?.options?.name || "",
defaultValue: defaultdata?.options?.defaultValue || "",
status: defaultdata?.options?.status || "required"
name: props.defaultdata?.options?.name || props?.widgetName || "",
defaultValue: props.defaultdata?.options?.defaultValue || "",
status: props.defaultdata?.options?.status || "required",
hint: props.defaultdata?.options?.hint || "",
textvalidate:
props.defaultdata?.options?.validation?.type === "regex"
? props.defaultdata?.options?.validation?.pattern
: props.defaultdata?.options?.validation?.type || "text"
});
} else {
setFormdata({
name: props.defaultdata?.options?.name || props?.widgetName || ""
});
}
}, [defaultdata]);
}, [props.defaultdata, props.widgetName]);
const handleSubmit = (e) => {
e.preventDefault();
if (handleData) {
handleData(formdata);
setFormdata({ name: "", status: "required", defaultValue: "" });
if (props.handleData) {
props.handleData(formdata);
setFormdata({
name: "",
defaultValue: "",
status: "required",
hint: "",
textvalidate: "text"
});
}
};
const handleChange = (e) => {
setFormdata({ ...formdata, [e.target.name]: e.target.value });
};
const handledefaultChange = (e) => {
if (formdata.textvalidate) {
const regexObject = RegexParser(handleValidation(formdata.textvalidate));
const isValidate = regexObject?.test(e.target.value);
setIsValid(isValidate);
} else {
setIsValid(true);
}
setFormdata({ ...formdata, [e.target.name]: e.target.value });
};
function handleValidation(type) {
switch (type) {
case "email":
return "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/";
case "number":
return "/^\\d+$/";
case "text":
return "/^[a-zA-Zs]+$/";
default:
return type;
}
}
function handleBlurRegex() {
if (!formdata.textvalidate) {
setFormdata({ ...formdata, textvalidate: "text" });
} else {
if (formdata.defaultValue) {
const regexObject = RegexParser(
handleValidation(formdata.textvalidate)
);
const isValidate = regexObject?.test(formdata.defaultValue);
if (isValidate === false) {
setFormdata({ ...formdata, defaultValue: "" });
}
}
}
}
return (
<ModalUi
isOpen={isOpen}
handleClose={handleClose && handleClose}
isOpen={props.isOpen}
handleClose={props.handleClose && props.handleClose}
title={"Widget info"}
>
<form onSubmit={handleSubmit} style={{ padding: 20 }}>
@@ -49,17 +109,89 @@ const NameModal = ({ isOpen, handleClose, handleData, defaultdata }) => {
required
/>
</div>
<div className="form-section">
<label htmlFor="name" style={{ fontSize: 13 }}>
Default value
</label>
<input
className="addUserInput"
name="defaultValue"
value={formdata.defaultValue}
onChange={(e) => handleChange(e)}
/>
</div>
{props.widgetName === "text" && (
<>
<div className="form-section">
<label htmlFor="textvalidate" style={{ fontSize: 13 }}>
Regular expressions
</label>
<div
style={{
display: "flex",
flexDirection: "row",
gap: 10,
marginBottom: "0.5rem"
}}
>
<div style={{ width: "100%", position: "relative" }}>
<input
style={{
padding: "0.5rem 0.75rem",
width: "92%",
borderWidth: "1px",
borderColor: "#d1d5db",
borderTopLeftRadius: "0.375rem",
borderBottomLeftRadius: "0.375rem",
outline: "none",
fontSize: "0.75rem",
position: "relative",
zIndex: 2
}}
name="textvalidate"
value={formdata.textvalidate}
onChange={(e) => handleChange(e)}
onBlur={() => handleBlurRegex()}
/>
<select
style={{ position: "absolute", left: 0, zIndex: 1 }}
className="addUserInput"
name="textvalidate"
value={formdata.textvalidate}
onChange={(e) => handleChange(e)}
onBlur={() => handleBlurRegex()}
>
<option disabled style={{ fontSize: "13px" }}>
Select...
</option>
{inputOpt.map((data, ind) => {
return (
<option
style={{ fontSize: "13px" }}
key={ind}
value={data}
>
{data}
</option>
);
})}
</select>
</div>
</div>
</div>
<div className="form-section">
<label htmlFor="name" style={{ fontSize: 13 }}>
Default value
</label>
<input
className="addUserInput"
name="defaultValue"
value={formdata.defaultValue}
onChange={(e) => handledefaultChange(e)}
onBlur={() =>
isValid === false &&
setFormdata({ ...formdata, defaultValue: "" })
}
/>
{isValid === false ? (
<p style={{ color: "Red", fontSize: 8 }}>
invalid default value
</p>
) : (
<p style={{ color: "transparent", fontSize: 8 }}>.</p>
)}
</div>
</>
)}
<div className="form-section">
<label htmlFor="name" style={{ fontSize: 13 }}>
Status
@@ -102,6 +234,19 @@ const NameModal = ({ isOpen, handleClose, handleData, defaultdata }) => {
})}
</div>
</div>
{props.widgetName === "text" && (
<div className="form-section">
<label htmlFor="hint" style={{ fontSize: 13 }}>
Hint
</label>
<input
className="addUserInput"
name="hint"
value={formdata.hint}
onChange={(e) => handleChange(e)}
/>
</div>
)}
<div
style={{
height: 1,
microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js
+45 -2
View File
@@ -13,6 +13,7 @@ function DropdownWidgetOption(props) {
const [status, setStatus] = useState("required");
const [defaultValue, setDefaultValue] = useState("");
const statusArr = ["required", "optional"];
const [defaultCheckbox, setDefaultCheckbox] = useState([]);
useEffect(() => {
if (
@@ -30,6 +31,7 @@ function DropdownWidgetOption(props) {
setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
setStatus(props.currWidgetsDetails?.options?.status || "required");
setDefaultValue(props.currWidgetsDetails?.options?.defaultValue);
setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue);
} else {
setStatus("required");
}
@@ -56,7 +58,12 @@ 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,
@@ -66,7 +73,7 @@ function DropdownWidgetOption(props) {
null,
null,
status,
defaultValue
defaultData
);
props.setShowDropdown(false);
setDropdownOptionList(["option-1", "option-2"]);
@@ -75,6 +82,7 @@ function DropdownWidgetOption(props) {
setIsReadOnly(false);
setMinCount(0);
setMaxCount(0);
setDefaultCheckbox([]);
};
const handleSetMinMax = (e) => {
@@ -85,6 +93,17 @@ function DropdownWidgetOption(props) {
return minValue;
}
};
// const handleDefaultCheck = (index) => {
// const getDefaultCheck = defaultCheckbox.includes(index);
// if (getDefaultCheck[0] === index) {
// return "check";
// } else {
// return "uncheck";
// }
// // return "check";
// };
return (
//props.showDropdown
<ModalUi
@@ -239,7 +258,30 @@ 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)}
@@ -295,6 +337,7 @@ function DropdownWidgetOption(props) {
setDropdownName(props.type);
props.setCurrWidgetsDetails([]);
props.setShowDropdown(false);
setDefaultCheckbox([]);
}}
>
Cancel
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+27 -27
View File
@@ -155,8 +155,6 @@ function Placeholder(props) {
!props.isDragging &&
props.pos.type !== "label"
) {
// props.handleLinkUser(props.data.Id);
// props.setUniqueId(props.data.Id);
if (props.pos.key === props.selectWidgetId) {
props.handleLinkUser(props.data.Id);
props.setUniqueId(props.data.Id);
@@ -190,8 +188,6 @@ function Placeholder(props) {
props?.setShowDropdown(true);
} else if (props.pos.type === "checkbox") {
props?.setIsCheckbox(true);
} else if (props.pos.type === "text") {
props.setIsValidate(true);
} else {
props?.handleNameModal(true);
}
@@ -206,28 +202,28 @@ function Placeholder(props) {
<>
{props.isPlaceholder && (
<>
<i
onClick={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
}}
onTouchEnd={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
}}
className="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2",
right:
props.pos.type === "text" || props.pos.type === "dropdown"
? "49px"
: "23px",
top:
props.pos.type === "text" || props.pos.type === "dropdown"
? "-17px"
: "-28px"
}}
></i>
{props.type !== "date" && (
<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" && (
<i
data-tut="reactourLinkUser"
@@ -425,6 +421,7 @@ function Placeholder(props) {
? true
: false
: props.pos.type !== "radio" &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId &&
true,
bottomLeft: false,
@@ -509,6 +506,7 @@ function Placeholder(props) {
>
{props.isShowBorder &&
props.pos.type !== "radio" &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId ? (
<BorderResize
right={
@@ -526,13 +524,15 @@ function Placeholder(props) {
/>
) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
props.data?.signerObjId === props.signerObjId &&
props.pos.type !== "radio" ? (
props.pos.type !== "radio" &&
props.pos.type !== "checkbox" ? (
<BorderResize />
) : (
<></>
)
) : (
props.pos.type !== "radio" &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId && <BorderResize />
)}
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
+23 -42
View File
@@ -33,7 +33,7 @@ function PlaceholderType(props) {
const handleInputBlur = () => {
props.setDraggingEnabled(true);
const validateType = props.pos?.options.validation.type;
const validateType = props.pos?.options?.validation?.type;
let regexValidation;
if (validateType) {
@@ -269,9 +269,9 @@ function PlaceholderType(props) {
<div style={{ fontSize: 11, color: "black", justifyContent: "center" }}>
{props?.handleUserName &&
props?.handleUserName(
props?.data.Id,
props?.data.Role,
props.pos.type
props?.data?.Id,
props?.data?.Role,
props?.pos?.type
)}
</div>
);
@@ -290,15 +290,15 @@ function PlaceholderType(props) {
<div style={{ fontSize: 11, color: "black", justifyContent: "center" }}>
{props?.handleUserName &&
props?.handleUserName(
props?.data.Id,
props?.data.Role,
props.pos.type
props?.data?.Id,
props?.data?.Role,
props?.pos?.type
)}
</div>
);
case "checkbox":
return (
<div>
<div style={{ zIndex: props.isSignYourself && "99" }}>
{props.pos.options?.values?.map((data, ind) => {
return (
<input
@@ -310,6 +310,7 @@ function PlaceholderType(props) {
marginBottom: "6px",
marginTop: "5px"
}}
onBlur={handleInputBlur}
disabled={
props.isNeedSign &&
props.pos.options?.isReadOnly &&
@@ -318,7 +319,7 @@ function PlaceholderType(props) {
type="checkbox"
checked={selectCheckbox(ind)}
onChange={(e) => {
if (e.target.checked) {
if (e.target.checked && !props.isPlaceholder) {
const maxRequired =
props.pos.options?.validation?.maxRequiredCount;
const maxCountInt = maxRequired && parseInt(maxRequired);
@@ -337,11 +338,12 @@ function PlaceholderType(props) {
}
}}
onClick={() => {
setIsCheckedRadio({
isChecked: !isCheckedRadio,
selectValue: "",
selectedKey: ind
});
!props.isPlaceholder &&
setIsCheckedRadio({
isChecked: !isCheckedRadio,
selectValue: "",
selectedKey: ind
});
}}
/>
);
@@ -450,9 +452,9 @@ function PlaceholderType(props) {
<div style={{ fontSize: 11, color: "black", justifyContent: "center" }}>
{props?.handleUserName &&
props?.handleUserName(
props?.data.Id,
props?.data.Role,
props.pos.type
props?.data?.Id,
props?.data?.Role,
props?.pos?.type
)}
</div>
);
@@ -618,9 +620,9 @@ function PlaceholderType(props) {
<div style={{ fontSize: 11, color: "black", justifyContent: "center" }}>
{props?.handleUserName &&
props?.handleUserName(
props?.data.Id,
props?.data.Role,
props.pos.type
props?.data?.Id,
props?.data?.Role,
props?.pos?.type
)}
</div>
);
@@ -693,27 +695,6 @@ function PlaceholderType(props) {
);
case "label":
return (
// <textarea
// onChange={(e) => {
// onChangeInput(
// e.target.value,
// props.pos.key,
// props.xyPostion,
// props.index,
// props.setXyPostion,
// props.data && props.data?.Id,
// false
// );
// }}
// className="labelTextArea"
// cols="50"
// style={{
// zIndex: "99",
// height: "100%",
// width: "100%",
// resize: "none"
// }}
// />
<textarea
rows={1}
onChange={(e) => {
@@ -754,7 +735,7 @@ function PlaceholderType(props) {
>
{props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
{props?.handleUserName &&
props?.handleUserName(props?.data.Id, props?.data.Role)}
props?.handleUserName(props?.data?.Id, props?.data?.Role)}
</div>
);
}
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+2
View File
@@ -441,6 +441,7 @@ function RenderPdf({
setWidgetType={setWidgetType}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleUserName={handleUserName}
/>
)
);
@@ -622,6 +623,7 @@ function RenderPdf({
setWidgetType={setWidgetType}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleUserName={handleUserName}
/>
</React.Fragment>
)
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+44 -93
View File
@@ -36,7 +36,6 @@ import Title from "./component/Title";
import TourContentWithBtn from "../premitives/TourContentWithBtn";
import ModalUi from "../premitives/ModalUi";
import DropdownWidgetOption from "../Component/WidgetComponent/dropdownWidgetOption";
import InputValidation from "./WidgetComponent/inputValidation";
import NameModal from "./WidgetComponent/NameModal";
function PlaceHolderSign() {
@@ -92,16 +91,14 @@ function PlaceHolderSign() {
const [isDontShow, setIsDontShow] = useState(false);
const [isDragging, setIsDragging] = useState(false);
const [showDropdown, setShowDropdown] = useState(false);
const [isValidate, setIsValidate] = useState(false);
const [textValidate, setTextValidate] = useState("");
const [widgetType, setWidgetType] = useState("");
const [isUiLoading, setIsUiLoading] = useState(false);
const [isRadio, setIsRadio] = useState(false);
const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]);
const [selectWidgetId, setSelectWidgetId] = useState("");
const [isCheckbox, setIsCheckbox] = useState(false);
const [hint, setHint] = useState("");
const [isNameModal, setIsNameModal] = useState(false);
const [widgetName, setWidgetName] = useState(false);
const color = [
"#93a3db",
"#e6c3db",
@@ -118,7 +115,7 @@ function PlaceHolderSign() {
];
const isMobile = window.innerWidth < 767;
const [{ isOver }, drop] = useDrop({
const [, drop] = useDrop({
accept: "BOX",
drop: (item, monitor) => addPositionOfSignature(item, monitor),
collect: (monitor) => ({
@@ -317,6 +314,9 @@ function PlaceHolderSign() {
//function for setting position after drop signature button over pdf
const addPositionOfSignature = (item, monitor) => {
if (item && item.text) {
setWidgetName(item.text);
}
getSignerPos(item, monitor);
};
@@ -1063,7 +1063,16 @@ function PlaceHolderSign() {
};
const handleWidgetdefaultdata = (defaultdata) => {
// console.log("data ", defaultdata);
const options = ["email", "number", "text"];
let inputype;
if (defaultdata.textvalidate) {
inputype = options.includes(defaultdata.textvalidate)
? defaultdata.textvalidate
: "regex";
} else {
inputype = "text";
}
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -1077,15 +1086,33 @@ function PlaceHolderSign() {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position, ind) => {
if (position.key === signKey) {
return {
...position,
options: {
...position.options,
name: defaultdata.name,
status: defaultdata.status,
defaultValue: defaultdata.defaultValue
}
};
if (position.type === "text") {
return {
...position,
options: {
...position.options,
name: defaultdata?.name || "text",
status: defaultdata?.status || "required",
hint: defaultdata?.hint || "",
defaultValue: defaultdata?.defaultValue || "",
validation: {
type: inputype,
pattern:
inputype === "regex" ? defaultdata.textvalidate : ""
}
}
};
} else {
return {
...position,
options: {
...position.options,
name: defaultdata.name,
status: defaultdata.status,
defaultValue: defaultdata.defaultValue
}
};
}
}
return position;
});
@@ -1102,10 +1129,10 @@ function PlaceHolderSign() {
}
return obj;
});
console.log("newUpdateSigner ", newUpdateSigner);
setSignerPos(newUpdateSigner);
}
}
setCurrWidgetsDetails({});
handleNameModal();
};
@@ -1206,71 +1233,6 @@ function PlaceHolderSign() {
setIsAddUser({});
};
//function for base on condition to add checkbox widget status and input text validation in signerPos array
const handleApplyWidgetsStatus = (textValidate) => {
const options = ["email", "number", "text"];
let regularExpression, regexType;
if (textValidate) {
regexType = options.includes(textValidate);
regularExpression = textValidate;
}
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((position, ind) => {
if (position.key === signKey) {
return {
...position,
options: {
...position.options,
hint: hint,
validation: {
type: textValidate
? regexType
? regularExpression
: "regex"
: "text",
pattern: !regexType ? regularExpression : ""
}
}
};
}
return position;
});
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.Id === uniqueId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
setTextValidate("");
}
}
};
const handleValidateInput = (e) => {
handleApplyWidgetsStatus(textValidate);
setIsValidate(false);
};
return (
<>
<Title title={state?.title ? state.title : "New Document"} />
@@ -1494,17 +1456,6 @@ function PlaceHolderSign() {
</button>
</div>
</ModalUi>
<InputValidation
setIsValidate={setIsValidate}
handleValidateInput={handleValidateInput}
isValidate={isValidate}
hint={hint}
setHint={setHint}
setTextValidate={setTextValidate}
textValidate={textValidate}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
/>
<PlaceholderCopy
isPageCopy={isPageCopy}
setIsPageCopy={setIsPageCopy}
@@ -1589,7 +1540,6 @@ function PlaceHolderSign() {
setUniqueId={setUniqueId}
isDragging={isDragging}
setShowDropdown={setShowDropdown}
setIsValidate={setIsValidate}
setWidgetType={setWidgetType}
setIsRadio={setIsRadio}
setIsCheckbox={setIsCheckbox}
@@ -1716,6 +1666,7 @@ function PlaceHolderSign() {
closePopup={closePopup}
/>
<NameModal
widgetName={widgetName}
defaultdata={currWidgetsDetails}
isOpen={isNameModal}
handleClose={handleNameModal}
microfrontends/SignDocuments/src/css/ModalUi.css
+10 -1
View File
@@ -38,7 +38,7 @@
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 901;
max-height: 80%;
min-width: 30%;
min-width: 40%;
overflow-y: auto;
scrollbar-width: none;
/* Firefox */
@@ -79,6 +79,15 @@
cursor: pointer;
}
.defaultOptions {
font-size: 12px;
margin-left: 5px;
}
.defaultOptions:focus{
outline: none;
}
@media (max-width:767px) {
.modalcontainer {