fix: minor bug fix in template compoent

This commit is contained in:
prafull-opensignlabs
2023-12-28 14:39:52 +05:30
parent 4fe4ca638c
commit dc40b04a18
7 changed files with 121 additions and 88 deletions
@@ -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>