mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-17 21:25:54 +02:00
fix: minor bug fix in template compoent
This commit is contained in:
@@ -341,7 +341,6 @@ const TemplatePlaceholder = () => {
|
||||
// `getSignerPos` is used to get placeholder position when user place it and save it in array
|
||||
const getSignerPos = (item, monitor) => {
|
||||
const singer = signersdata.find((x) => x.Id === uniqueId);
|
||||
|
||||
if (singer) {
|
||||
const posZIndex = zIndex + 1;
|
||||
setZIndex(posZIndex);
|
||||
@@ -710,59 +709,64 @@ const TemplatePlaceholder = () => {
|
||||
}
|
||||
};
|
||||
const handleSaveTemplate = async () => {
|
||||
const loadObj = {
|
||||
isLoad: true,
|
||||
message: "This might take some time"
|
||||
};
|
||||
setIsLoading(loadObj);
|
||||
setIsSendAlert(false);
|
||||
let signers = [];
|
||||
if (signersdata?.length > 0) {
|
||||
signersdata.forEach((x) => {
|
||||
if (x.objectId) {
|
||||
const obj = {
|
||||
__type: "Pointer",
|
||||
className: "contracts_Contactbook",
|
||||
objectId: x.objectId
|
||||
};
|
||||
signers.push(obj);
|
||||
}
|
||||
});
|
||||
}
|
||||
try {
|
||||
const data = {
|
||||
Placeholders: signerPos,
|
||||
SignedUrl: pdfDetails[0].URL,
|
||||
Signers: signers
|
||||
const singer = signersdata.find((x) => x.Id === uniqueId);
|
||||
if (singer) {
|
||||
const loadObj = {
|
||||
isLoad: true,
|
||||
message: "This might take some time"
|
||||
};
|
||||
|
||||
await axios
|
||||
.put(
|
||||
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
|
||||
"_appName"
|
||||
)}_Template/${templateId}`,
|
||||
data,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
|
||||
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
|
||||
}
|
||||
setIsLoading(loadObj);
|
||||
setIsSendAlert(false);
|
||||
let signers = [];
|
||||
if (signersdata?.length > 0) {
|
||||
signersdata.forEach((x) => {
|
||||
if (x.objectId) {
|
||||
const obj = {
|
||||
__type: "Pointer",
|
||||
className: "contracts_Contactbook",
|
||||
objectId: x.objectId
|
||||
};
|
||||
signers.push(obj);
|
||||
}
|
||||
)
|
||||
.then((result) => {
|
||||
setIsCreateDocModal(true);
|
||||
setIsMailSend(true);
|
||||
const loadObj = {
|
||||
isLoad: false
|
||||
};
|
||||
setIsLoading(loadObj);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("axois err ", err);
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("error", e);
|
||||
}
|
||||
try {
|
||||
const data = {
|
||||
Placeholders: signerPos,
|
||||
SignedUrl: pdfDetails[0].URL,
|
||||
Signers: signers
|
||||
};
|
||||
|
||||
await axios
|
||||
.put(
|
||||
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
|
||||
"_appName"
|
||||
)}_Template/${templateId}`,
|
||||
data,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
|
||||
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
|
||||
}
|
||||
}
|
||||
)
|
||||
.then((result) => {
|
||||
setIsCreateDocModal(true);
|
||||
setIsMailSend(true);
|
||||
const loadObj = {
|
||||
isLoad: false
|
||||
};
|
||||
setIsLoading(loadObj);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("axois err ", err);
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("error", e);
|
||||
}
|
||||
} else {
|
||||
setIsReceipent(false);
|
||||
}
|
||||
};
|
||||
//here you can add your messages in content and selector is key of particular steps
|
||||
@@ -770,7 +774,7 @@ const TemplatePlaceholder = () => {
|
||||
const tourConfig = [
|
||||
{
|
||||
selector: '[data-tut="reactourAddbtn"]',
|
||||
content: `Clicking "Add" button will show you popup of Add Role, fill role name or it will take by default name and create new receipent.`,
|
||||
content: `Clicking "Add role" button will allow you to add various signer roles. You can attach users to each role in subsequent steps.`,
|
||||
position: "top",
|
||||
observe: '[data-tut="reactourAddbtn--observe"]',
|
||||
style: { fontSize: "13px" }
|
||||
@@ -873,7 +877,7 @@ const TemplatePlaceholder = () => {
|
||||
e.preventDefault();
|
||||
const count = signersdata.length > 0 ? signersdata.length + 1 : 1;
|
||||
const Id = randomId();
|
||||
const index = signersdata?.length || 0;
|
||||
const index = signersdata.length;
|
||||
const obj = {
|
||||
Role: roleName || "User " + count,
|
||||
Id: Id,
|
||||
@@ -889,13 +893,19 @@ const TemplatePlaceholder = () => {
|
||||
// `handleDeleteUser` function is used to delete record and placeholder when user click on delete which is place next user name in recipients list
|
||||
const handleDeleteUser = (Id) => {
|
||||
const updateSigner = signersdata
|
||||
.filter((x) => x.Id !== Id)
|
||||
.map((x, i) => ({ ...x, blockColor: color[i] }));
|
||||
.filter((x) => x.Id !== Id)
|
||||
.map((x, i) => ({ ...x, blockColor: color[i] }));
|
||||
setSignersData(updateSigner);
|
||||
const updatePlaceholderUser = signerPos
|
||||
.filter((x) => x.Id !== Id)
|
||||
.map((x, i) => ({ ...x, blockColor: color[i] }));
|
||||
.filter((x) => x.Id !== Id)
|
||||
.map((x, i) => ({ ...x, blockColor: color[i] }));
|
||||
// console.log("removePlaceholderUser ", removePlaceholderUser)
|
||||
|
||||
const index = signersdata.findIndex((x)=> x.Id === Id)
|
||||
setUniqueId(updateSigner[index]?.Id ||"");
|
||||
// setIsSelectId(index === -1 ? 0: index);
|
||||
setIsSelectId(0);
|
||||
|
||||
setSignerPos(updatePlaceholderUser);
|
||||
setIsMailSend(false);
|
||||
};
|
||||
@@ -1051,7 +1061,7 @@ const TemplatePlaceholder = () => {
|
||||
handleClose={() => setIsCreateDocModal(false)}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<p>Do you want to create document right now ?</p>
|
||||
<p>Do you want to create a document using the template you just created ?</p>
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
@@ -1193,6 +1203,8 @@ const TemplatePlaceholder = () => {
|
||||
setSelectedEmail={setSelectedEmail}
|
||||
selectedEmail={selectedEmail}
|
||||
handleAddSigner={handleAddSigner}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -32,7 +32,9 @@ function FieldsComponent({
|
||||
isMailSend,
|
||||
selectedEmail,
|
||||
setSelectedEmail,
|
||||
handleAddSigner
|
||||
handleAddSigner,
|
||||
setUniqueId,
|
||||
setRoleName
|
||||
}) {
|
||||
const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
|
||||
|
||||
@@ -104,6 +106,8 @@ function FieldsComponent({
|
||||
setIsSelectId(selectedKey);
|
||||
setContractName(parseData.className);
|
||||
setSelectedEmail(true);
|
||||
setUniqueId(parseData.Id);
|
||||
setRoleName(parseData.Role);
|
||||
}}
|
||||
>
|
||||
<Select.Trigger
|
||||
@@ -158,7 +162,7 @@ function FieldsComponent({
|
||||
value={`${ind}|${JSON.stringify(obj)}`}
|
||||
// value={(obj)}
|
||||
>
|
||||
{obj.Role ? obj.Role : obj.Email}
|
||||
{obj.Email ? obj.Email : obj.Role }
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
@@ -193,7 +197,7 @@ function FieldsComponent({
|
||||
onClick={() => handleAddSigner()}
|
||||
>
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
<span style={{ marginLeft: 2 }}>Add</span>
|
||||
<span style={{ marginLeft: 2 }}>Add role</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
|
||||
@@ -349,7 +349,7 @@ function RenderPdf({
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
fontSize: "10px",
|
||||
color: "black",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
@@ -366,12 +366,12 @@ function RenderPdf({
|
||||
(sign) => sign.objectId === signerId
|
||||
);
|
||||
if (checkSign.length > 0) {
|
||||
return <p style={{ color: "black" }}> {checkSign[0].Name} </p>;
|
||||
return <p style={{ color: "black", fontSize: 11 }}> {checkSign[0].Name} </p>;
|
||||
} else {
|
||||
return <p style={{ color: "black" }}> {Role} </p>;
|
||||
return <p style={{ color: "black", fontSize: 11 }}> {Role} </p>;
|
||||
}
|
||||
} else {
|
||||
return <p style={{ color: "black" }}> {Role} </p>;
|
||||
return <p style={{ color: "black", fontSize: 11 }}> {Role} </p>;
|
||||
}
|
||||
};
|
||||
return (
|
||||
@@ -619,6 +619,11 @@ function RenderPdf({
|
||||
>
|
||||
<i
|
||||
className="fa-regular fa-user signUserIcon"
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
handleLinkUser(data.Id);
|
||||
setUniqueId(data.Id);
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleLinkUser(data.Id);
|
||||
@@ -635,11 +640,14 @@ function RenderPdf({
|
||||
setIsPageCopy(true);
|
||||
setSignKey(pos.key);
|
||||
setSignerObjId(data.signerObjId);
|
||||
setUniqueId(data.Id)
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsPageCopy(true);
|
||||
setSignKey(pos.key);
|
||||
setSignerObjId(data.signerObjId);
|
||||
setUniqueId(data.Id)
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
@@ -647,7 +655,15 @@ function RenderPdf({
|
||||
></i>
|
||||
<i
|
||||
className="fa-regular fa-circle-xmark signCloseBtn"
|
||||
onTouchStart={(e) => {
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(
|
||||
pos.key,
|
||||
data.Id
|
||||
);
|
||||
// data.signerObjId
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(
|
||||
pos.key,
|
||||
@@ -662,9 +678,9 @@ function RenderPdf({
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
fontSize: "10px",
|
||||
color: "black",
|
||||
fontWeight: "600",
|
||||
fontWeight: "500",
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
@@ -772,17 +788,6 @@ function RenderPdf({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className="fa-regular fa-user signUserIcon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleLinkUser(data.Id);
|
||||
setUniqueId(data.Id);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
<i
|
||||
className="fa-regular fa-copy signCopy"
|
||||
onTouchEnd={(e) => {
|
||||
@@ -828,7 +833,7 @@ function RenderPdf({
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
fontSize: "10px",
|
||||
color: "black",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
@@ -1003,7 +1008,7 @@ function RenderPdf({
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
fontSize: "10px",
|
||||
color: "black",
|
||||
fontWeight: "600",
|
||||
justifyContent: "center",
|
||||
@@ -1176,7 +1181,7 @@ function RenderPdf({
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
fontSize: "10px",
|
||||
color: "black",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
|
||||
@@ -256,7 +256,7 @@ function SignerListPlace({
|
||||
{handleAddSigner && (
|
||||
<div data-tut="reactourAddbtn" className="addSignerBtn" onClick={() => handleAddSigner()}>
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
<span style={{ marginLeft: 2 }}>Add</span>
|
||||
<span style={{ marginLeft: 2 }}>Add role</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -912,6 +912,7 @@ function PlaceHolderSign() {
|
||||
setIsAddUser({ [id]: true });
|
||||
};
|
||||
const handleAddUser = (data) => {
|
||||
if(data && data.objectId){
|
||||
const signerPtr = {
|
||||
__type: "Pointer",
|
||||
className: "contracts_Contactbook",
|
||||
@@ -935,6 +936,7 @@ function PlaceHolderSign() {
|
||||
// console.log("updateSigner ", updateSigner);
|
||||
|
||||
setSignersData(updateSigner);
|
||||
}
|
||||
};
|
||||
|
||||
const closePopup = () => {
|
||||
@@ -1206,6 +1208,8 @@ function PlaceHolderSign() {
|
||||
isMailSend={isMailSend}
|
||||
setSelectedEmail={setSelectedEmail}
|
||||
selectedEmail={selectedEmail}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -66,6 +66,7 @@
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
max-height: 80%;
|
||||
min-width: 90%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
@@ -17,6 +17,7 @@ const SelectSigners = (props) => {
|
||||
const [userList, setUserList] = useState([]);
|
||||
const [selected, setSelected] = useState();
|
||||
const [userData, setUserData] = useState({});
|
||||
const [isError, setIsError]= useState(false)
|
||||
const parseBaseUrl = localStorage.getItem("baseUrl");
|
||||
const parseAppId = localStorage.getItem("parseAppId");
|
||||
Parse.serverURL = parseBaseUrl;
|
||||
@@ -31,9 +32,14 @@ const SelectSigners = (props) => {
|
||||
}
|
||||
};
|
||||
const handleAdd = () => {
|
||||
props.details(userData);
|
||||
if (props.closePopup) {
|
||||
props.closePopup();
|
||||
if(userData && userData.objectId){
|
||||
props.details(userData);
|
||||
if (props.closePopup) {
|
||||
props.closePopup();
|
||||
}
|
||||
}else{
|
||||
setIsError(true)
|
||||
setTimeout(()=> setIsError(false), 1000)
|
||||
}
|
||||
};
|
||||
|
||||
@@ -67,7 +73,7 @@ const SelectSigners = (props) => {
|
||||
return (
|
||||
<div className="addusercontainer">
|
||||
<div className="form-wrapper">
|
||||
<div className="form-section">
|
||||
<div className="form-section" style={{marginBottom: 0}}>
|
||||
<label style={{ fontSize: 14 , fontWeight: "700"}}>Choose User</label>
|
||||
<AsyncSelect
|
||||
cacheOptions
|
||||
@@ -80,8 +86,9 @@ const SelectSigners = (props) => {
|
||||
styles={customStyles}
|
||||
/>
|
||||
</div>
|
||||
{isError ? <p style={{color:'red', fontSize: "12px", margin:"5px"}}>Please select signer</p>: <p style={{color:'transparent', fontSize: "12px", margin:"5px"}}>.</p>}
|
||||
|
||||
<div className="buttoncontainer">
|
||||
<div >
|
||||
<button className="submitbutton" onClick={() => handleAdd()}>
|
||||
Add Signer
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user