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 name, default value and status for widgets in placeholder and template flow

Browse Source
This commit is contained in:
RaktimaNXG
2024-02-29 17:53:30 +05:30
parent d5be7b8c57
commit c8ee455865
7 changed files with 397 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+70 -3
View File
@@ -15,6 +15,7 @@ import HandleError from "./component/HandleError";
import Nodata from "./component/Nodata";
import SignerListPlace from "./component/signerListPlace";
import Header from "./component/header";
import NameModal from "./WidgetComponent/NameModal";
import {
pdfNewWidthFun,
contractUsers,
@@ -84,6 +85,7 @@ const TemplatePlaceholder = () => {
const [isValidate, setIsValidate] = useState(false);
const [textValidate, setTextValidate] = useState("");
const [hint, setHint] = useState("");
const [isNameModal, setIsNameModal] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
@@ -448,6 +450,8 @@ const TemplatePlaceholder = () => {
setIsCheckbox(true);
} else if (dragTypeValue === "radio") {
setIsRadio(true);
} else {
setIsNameModal(true);
}
setCurrWidgetsDetails("");
setWidgetType(dragTypeValue);
@@ -1021,7 +1025,9 @@ const TemplatePlaceholder = () => {
maxCount,
isReadOnly,
addOption,
deleteOption
deleteOption,
status,
defaultValue
) => {
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
@@ -1059,7 +1065,9 @@ const TemplatePlaceholder = () => {
options: {
...position.options,
name: dropdownName,
values: dropdownOptions
values: dropdownOptions,
status: status,
defaultValue: defaultValue
}
};
}
@@ -1099,7 +1107,9 @@ const TemplatePlaceholder = () => {
options: {
...position.options,
name: dropdownName,
values: dropdownOptions
status: status,
values: dropdownOptions,
defaultValue: defaultValue
}
};
}
@@ -1125,6 +1135,54 @@ const TemplatePlaceholder = () => {
}
};
const handleWidgetdefaultdata = (defaultdata) => {
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,
name: defaultdata.name,
status: defaultdata.status,
defaultValue: defaultdata.defaultValue
}
};
}
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;
});
console.log("newUpdateSigner ", newUpdateSigner);
setSignerPos(newUpdateSigner);
}
}
handleNameModal();
};
const handleNameModal = () => {
setIsNameModal(!isNameModal);
};
const handleValidateInput = (e) => {
handleApplyWidgetsStatus(textValidate);
setIsValidate(false);
@@ -1254,6 +1312,8 @@ const TemplatePlaceholder = () => {
setHint={setHint}
setTextValidate={setTextValidate}
textValidate={textValidate}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
/>
<DropdownWidgetOption
type="radio"
@@ -1347,6 +1407,7 @@ const TemplatePlaceholder = () => {
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
setIsCheckbox={setIsCheckbox}
handleNameModal={handleNameModal}
/>
)}
</div>
@@ -1467,6 +1528,12 @@ const TemplatePlaceholder = () => {
onSuccess={handleEditTemplateForm}
/>
</ModalUi>
<NameModal
defaultdata={currWidgetsDetails}
isOpen={isNameModal}
handleClose={handleNameModal}
handleData={handleWidgetdefaultdata}
/>
</div>
);
};
microfrontends/SignDocuments/src/Component/WidgetComponent/NameModal.js
+129
View File
@@ -0,0 +1,129 @@
import React, { useEffect, useState } from "react";
import ModalUi from "../../premitives/ModalUi";
import "../../css/AddUser.css";
const NameModal = ({ isOpen, handleClose, handleData, defaultdata }) => {
console.log("defaultdata ", defaultdata?.options);
const [formdata, setFormdata] = useState({
name: defaultdata?.options?.name || "",
defaultValue: defaultdata?.options?.defaultValue || "",
status: defaultdata?.options?.status || "required"
});
const statusArr = ["Required", "Optional"];
useEffect(() => {
if (defaultdata) {
setFormdata({
name: defaultdata?.options?.name || "",
defaultValue: defaultdata?.options?.defaultValue || "",
status: defaultdata?.options?.status || "required"
});
}
}, [defaultdata]);
const handleSubmit = (e) => {
e.preventDefault();
if (handleData) {
handleData(formdata);
setFormdata({ name: "", status: "required", defaultValue: "" });
}
};
const handleChange = (e) => {
setFormdata({ ...formdata, [e.target.name]: e.target.value });
};
return (
<ModalUi
isOpen={isOpen}
handleClose={handleClose && handleClose}
title={"Widget info"}
>
<form onSubmit={handleSubmit} style={{ padding: 20 }}>
<div className="form-section">
<label htmlFor="name" style={{ fontSize: 13 }}>
Name
<span style={{ color: "red", fontSize: 13 }}> *</span>
</label>
<input
className="addUserInput"
name="name"
value={formdata.name}
onChange={(e) => handleChange(e)}
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>
<div className="form-section">
<label htmlFor="name" style={{ fontSize: 13 }}>
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", marginRight: "10px" }}
type="radio"
name="status"
onChange={(e) =>
setFormdata({ ...formdata, status: data.toLowerCase() })
}
checked={
formdata.status.toLowerCase() === data.toLowerCase()
}
/>
<div style={{ fontSize: "13px", fontWeight: "500" }}>
{data}
</div>
</div>
);
})}
</div>
</div>
<div
style={{
height: 1,
backgroundColor: "#b7b3b3",
width: "100%",
marginBottom: "16px"
}}
></div>
<button
style={{
color: "white",
padding: "5px 20px",
backgroundColor: "#32a3ac"
}}
type="submit"
className="finishBtn"
>
Add
</button>
</form>
</ModalUi>
);
};
export default NameModal;
microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js
+77 -11
View File
@@ -10,6 +10,9 @@ function DropdownWidgetOption(props) {
const [maxCount, setMaxCount] = useState(0);
const [dropdownName, setDropdownName] = useState(props.type);
const [isReadOnly, setIsReadOnly] = useState(false);
const [status, setStatus] = useState("required");
const [defaultValue, setDefaultValue] = useState("");
const statusArr = ["required", "optional"];
useEffect(() => {
if (
@@ -25,9 +28,12 @@ function DropdownWidgetOption(props) {
props.currWidgetsDetails?.options?.validation?.maxRequiredCount
);
setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
setStatus(props.currWidgetsDetails?.options?.status || "required");
setDefaultValue(props.currWidgetsDetails?.options?.defaultValue);
} else {
setStatus("required");
}
}, [props.currWidgetsDetails]);
const handleInputChange = (index, value) => {
setDropdownOptionList((prevInputs) => {
const newInputs = [...prevInputs];
@@ -56,7 +62,11 @@ function DropdownWidgetOption(props) {
dropdownOptionList,
minCount,
maxCount,
isReadOnly
isReadOnly,
null,
null,
status,
defaultValue
);
props.setShowDropdown(false);
setDropdownOptionList(["option-1", "option-2"]);
@@ -105,6 +115,71 @@ function DropdownWidgetOption(props) {
}}
>
<div className="dropdownContainer">
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Name<span style={{ color: "red", fontSize: 13 }}> *</span>
</label>
<input
required
defaultValue={dropdownName}
value={dropdownName}
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" }}>
@@ -135,15 +210,6 @@ function DropdownWidgetOption(props) {
/>
</>
)}
<label style={{ fontSize: "13px", fontWeight: "600" }}>Name</label>
<input
required
defaultValue={dropdownName}
value={dropdownName}
onChange={(e) => setDropdownName(e.target.value)}
className="drodown-input"
/>
<label
style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
>
microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js
+19
View File
@@ -4,6 +4,23 @@ import ModalUi from "../../premitives/ModalUi";
function InputValidation(props) {
const options = ["email", "number", "text"];
useEffect(() => {
if (
props.currWidgetsDetails?.options?.validation?.pattern ||
props.currWidgetsDetails.options?.validation?.type
) {
props.setHint(props.currWidgetsDetails?.options?.hint || "");
if (props.currWidgetsDetails.options?.validation.type === "regex") {
props.setTextValidate(
props.currWidgetsDetails.options?.validation?.pattern || "text"
);
} else {
props.setTextValidate(
props.currWidgetsDetails.options?.validation?.type || "text"
);
}
}
}, [props.currWidgetsDetails]);
return (
<ModalUi
isOpen={props.isValidate}
@@ -94,6 +111,8 @@ function InputValidation(props) {
<button
onClick={() => {
props.handleValidateInput();
props.setHint("");
props.setTextValidate("");
}}
style={{
background: themeColor()
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+25 -29
View File
@@ -188,13 +188,13 @@ function Placeholder(props) {
props.setIsRadio(true);
} else if (props.pos.type === "dropdown") {
props?.setShowDropdown(true);
}
if (props.pos.type === "checkbox") {
} else if (props.pos.type === "checkbox") {
props?.setIsCheckbox(true);
} else if (props.pos.type === "text") {
props.setIsValidate(true);
} else {
props?.handleNameModal(true);
}
props.setSignKey(props.pos.key);
props.setUniqueId(props.data.Id);
props.setWidgetType(props.pos.type);
@@ -206,32 +206,28 @@ function Placeholder(props) {
<>
{props.isPlaceholder && (
<>
{["checkbox", "text", "dropdown", "radio"].includes(
props.pos.type
) && (
<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>
)}
<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.pos.type !== "label" && (
<i
data-tut="reactourLinkUser"
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+4 -1
View File
@@ -57,7 +57,8 @@ function RenderPdf({
setSelectWidgetId,
selectWidgetId,
unSignedWidgetId,
setIsCheckbox
setIsCheckbox,
handleNameModal
}) {
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
@@ -393,6 +394,7 @@ function RenderPdf({
}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={handleNameModal}
/>
</React.Fragment>
);
@@ -570,6 +572,7 @@ function RenderPdf({
}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={handleNameModal}
/>
</React.Fragment>
);
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+73 -3
View File
@@ -37,6 +37,7 @@ 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() {
const navigate = useNavigate();
@@ -100,6 +101,7 @@ function PlaceHolderSign() {
const [selectWidgetId, setSelectWidgetId] = useState("");
const [isCheckbox, setIsCheckbox] = useState(false);
const [hint, setHint] = useState("");
const [isNameModal, setIsNameModal] = useState(false);
const color = [
"#93a3db",
"#e6c3db",
@@ -485,6 +487,8 @@ function PlaceHolderSign() {
setIsCheckbox(true);
} else if (dragTypeValue === "radio") {
setIsRadio(true);
} else {
setIsNameModal(true);
}
setWidgetType(dragTypeValue);
setSignKey(key);
@@ -949,7 +953,9 @@ function PlaceHolderSign() {
maxCount,
isReadOnly,
addOption,
deleteOption
deleteOption,
status,
defaultValue
) => {
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
@@ -986,7 +992,9 @@ function PlaceHolderSign() {
options: {
...position.options,
name: dropdownName,
values: dropdownOptions
values: dropdownOptions,
status: status,
defaultValue: defaultValue
}
};
}
@@ -1026,7 +1034,9 @@ function PlaceHolderSign() {
options: {
...position.options,
name: dropdownName,
values: dropdownOptions
status: status,
values: dropdownOptions,
defaultValue: defaultValue
}
};
}
@@ -1052,6 +1062,56 @@ function PlaceHolderSign() {
}
};
const handleWidgetdefaultdata = (defaultdata) => {
// console.log("data ", defaultdata);
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,
name: defaultdata.name,
status: defaultdata.status,
defaultValue: defaultdata.defaultValue
}
};
}
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;
});
console.log("newUpdateSigner ", newUpdateSigner);
setSignerPos(newUpdateSigner);
}
}
handleNameModal();
};
const handleNameModal = () => {
setIsNameModal(!isNameModal);
};
//function for update TourStatus
const closeTour = async () => {
setPlaceholderTour(false);
@@ -1442,6 +1502,8 @@ function PlaceHolderSign() {
setHint={setHint}
setTextValidate={setTextValidate}
textValidate={textValidate}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
/>
<PlaceholderCopy
isPageCopy={isPageCopy}
@@ -1481,6 +1543,7 @@ function PlaceHolderSign() {
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
/>
{/* pdf header which contain funish back button */}
<Header
isPlaceholder={true}
@@ -1533,6 +1596,7 @@ function PlaceHolderSign() {
setCurrWidgetsDetails={setCurrWidgetsDetails}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={handleNameModal}
/>
)}
</div>
@@ -1651,6 +1715,12 @@ function PlaceHolderSign() {
uniqueId={uniqueId}
closePopup={closePopup}
/>
<NameModal
defaultdata={currWidgetsDetails}
isOpen={isNameModal}
handleClose={handleNameModal}
handleData={handleWidgetdefaultdata}
/>
</div>
</>
);