mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-09-06 09:47:39 +02:00
add/Choose form to link user and ui changes
This commit is contained in:
prafull-opensignlabs
@@ -30,6 +30,9 @@ import ModalComponent from "./component/modalComponent";
|
||||
import "../css/AddUser.css";
|
||||
import Title from "./component/Title";
|
||||
import LinkUserModal from "./component/LinkUserModal";
|
||||
import EditTemplate from "./component/EditTemplate";
|
||||
import ModalUi from "../premitives/ModalUi";
|
||||
import AddRoleModal from "./component/AddRoleModal";
|
||||
const TemplatePlaceholder = () => {
|
||||
const navigate = useNavigate();
|
||||
const { templateId } = useParams();
|
||||
@@ -152,7 +155,7 @@ const TemplatePlaceholder = () => {
|
||||
const [roleName, setRoleName] = useState("");
|
||||
const [isAddUser, setIsAddUser] = useState({});
|
||||
const [isCreateDoc, setIsCreateDoc] = useState(false);
|
||||
|
||||
const [isEditTemplate, setIsEditTemplate] = useState(false);
|
||||
const senderUser =
|
||||
localStorage.getItem(
|
||||
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
|
||||
@@ -176,6 +179,8 @@ const TemplatePlaceholder = () => {
|
||||
});
|
||||
}
|
||||
}, [divRef.current]);
|
||||
|
||||
// `fetchTemplate` function in used to get Template from server and setPlaceholder ,setSigner if present
|
||||
const fetchTemplate = async () => {
|
||||
// const params = { templateId: templateId };
|
||||
// const templateDeatils = await axios.post(
|
||||
@@ -338,6 +343,7 @@ const TemplatePlaceholder = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// `getSignerPos` is used to get placeholder position when user place it and save it in array
|
||||
const getSignerPos = (item, monitor) => {
|
||||
const posZIndex = zIndex + 1;
|
||||
setZIndex(posZIndex);
|
||||
@@ -831,6 +837,8 @@ const TemplatePlaceholder = () => {
|
||||
console.log("axois err ", err);
|
||||
});
|
||||
};
|
||||
|
||||
// `handleCreateDocModal` is used to create Document from template when user click on yes from modal
|
||||
const handleCreateDocModal = async () => {
|
||||
setIsCreateDocModal(false);
|
||||
setIsCreateDoc(true);
|
||||
@@ -846,10 +854,14 @@ const TemplatePlaceholder = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// `handleAddSigner` is used to open Add Role Modal
|
||||
const handleAddSigner = () => {
|
||||
setIsModalRole(true);
|
||||
setRoleName("");
|
||||
};
|
||||
|
||||
// `handleAddRole` function is called when use click on add button in addRole modal
|
||||
// save Role in entry in signerList and user
|
||||
const handleAddRole = (e) => {
|
||||
e.preventDefault();
|
||||
const count = signersdata.length > 0 ? signersdata.length + 1 : 1;
|
||||
@@ -861,14 +873,20 @@ const TemplatePlaceholder = () => {
|
||||
setSignersData((prevArr) => [...prevArr, obj]);
|
||||
setIsModalRole(false);
|
||||
setRoleName("");
|
||||
setUniqueId(Id);
|
||||
setIsMailSend(false);
|
||||
};
|
||||
// `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 removeUser = signersdata.filter((x) => x.Id !== Id);
|
||||
setSignersData(removeUser);
|
||||
const removePlaceholderUser = signerPos.filter((x) => x.Id !== Id);
|
||||
setSignerPos(removePlaceholderUser);
|
||||
setIsMailSend(false);
|
||||
};
|
||||
|
||||
// `handleLinkUser` is used to open Add/Choose Signer Modal when user can link existing or new User with placeholder
|
||||
// and update entry in signersList
|
||||
const handleLinkUser = (id) => {
|
||||
setIsAddUser({ [id]: true });
|
||||
};
|
||||
@@ -893,19 +911,56 @@ const TemplatePlaceholder = () => {
|
||||
return { ...x };
|
||||
});
|
||||
setSignersData(updateSigner);
|
||||
setIsMailSend(false);
|
||||
};
|
||||
|
||||
// `closePopup` is used to close Add/Choose signer modal
|
||||
const closePopup = () => {
|
||||
setIsAddUser({});
|
||||
};
|
||||
|
||||
// `handleRoleChange` function is call when user update Role name from recipients list
|
||||
const handleRoleChange = (event, roleId) => {
|
||||
// Update the role when the content changes
|
||||
const updatedRoles = signersdata.map((role) =>
|
||||
role.Id === roleId ? { ...role, Role: event.target.textContent } : role
|
||||
role.Id === roleId ? { ...role, Role: event.target.value } : role
|
||||
);
|
||||
setSignersData(updatedRoles);
|
||||
setIsMailSend(false);
|
||||
};
|
||||
|
||||
// `handleOnBlur` function is call when user click outside input box
|
||||
const handleOnBlur = (updateRole, roleId) => {
|
||||
// Update the role when the content changes
|
||||
if (!updateRole) {
|
||||
const updatedRoles = signersdata.map((role) =>
|
||||
role.Id === roleId ? { ...role, Role: roleName } : role
|
||||
);
|
||||
setSignersData(updatedRoles);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditTemplateModal = () => {
|
||||
setIsEditTemplate(!isEditTemplate);
|
||||
};
|
||||
|
||||
const handleEditTemplateForm = (data) => {
|
||||
console.log("data", data);
|
||||
setIsEditTemplate(false);
|
||||
const updateTemplate = pdfDetails.map((x) => {
|
||||
return { ...x, ...data };
|
||||
});
|
||||
console.log("updateTemplate ", updateTemplate);
|
||||
setPdfDetails(updateTemplate);
|
||||
setIsMailSend(false);
|
||||
};
|
||||
|
||||
const handleCloseRoleModal = () => {
|
||||
setIsModalRole(false);
|
||||
};
|
||||
|
||||
console.log("pdfDetails ", pdfDetails)
|
||||
console.log("signerPos ", signerPos)
|
||||
return (
|
||||
<div>
|
||||
<Title title={"Template"} />
|
||||
@@ -949,52 +1004,34 @@ const TemplatePlaceholder = () => {
|
||||
}}
|
||||
>
|
||||
{/* this modal is used show alert set placeholder for all signers before send mail */}
|
||||
|
||||
<Modal show={isSendAlert}>
|
||||
<Modal.Header className="bg-danger">
|
||||
<span style={{ color: "white" }}>Fields required</span>
|
||||
</Modal.Header>
|
||||
|
||||
{/* signature modal */}
|
||||
<Modal.Body>
|
||||
<ModalUi
|
||||
headerColor={"#dc3545"}
|
||||
isOpen={isSendAlert}
|
||||
title={"Fields required"}
|
||||
handleClose={() => setIsSendAlert(false)}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<p>Please add field for all recipients.</p>
|
||||
</Modal.Body>
|
||||
|
||||
<Modal.Footer>
|
||||
<button
|
||||
onClick={() => setIsSendAlert(false)}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
</div>
|
||||
</ModalUi>
|
||||
{/* this modal is used show send mail message and after send mail success message */}
|
||||
<Modal show={isCreateDocModal}>
|
||||
{/* signature modal */}
|
||||
<Modal.Body>
|
||||
<ModalUi
|
||||
isOpen={isCreateDocModal}
|
||||
title={"Create Document"}
|
||||
handleClose={() => setIsCreateDocModal(false)}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<p>Do you want to create document right now ?</p>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
{currentEmail.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsCreateDocModal(false);
|
||||
}}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
handleCreateDocModal();
|
||||
@@ -1008,16 +1045,22 @@ const TemplatePlaceholder = () => {
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsCreateDocModal(false);
|
||||
}}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
{isCreateDoc && <Loader isLoading={isLoading} />}
|
||||
<ModalComponent
|
||||
isShow={isShowEmail}
|
||||
type={"signersAlert"}
|
||||
setIsShowEmail={setIsShowEmail}
|
||||
/>
|
||||
</div>
|
||||
</ModalUi>
|
||||
{/* pdf header which contain funish back button */}
|
||||
<Header
|
||||
completeBtnTitle={"Save"}
|
||||
@@ -1032,6 +1075,7 @@ const TemplatePlaceholder = () => {
|
||||
alertSendEmail={alertSendEmail}
|
||||
isShowHeader={true}
|
||||
currentSigner={true}
|
||||
setIsEditTemplate={handleEditTemplateModal}
|
||||
dataTut4="reactourFour"
|
||||
/>
|
||||
<div data-tut="reactourThird">
|
||||
@@ -1115,6 +1159,7 @@ const TemplatePlaceholder = () => {
|
||||
setUniqueId={setUniqueId}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
handleRoleChange={handleRoleChange}
|
||||
handleOnBlur={handleOnBlur}
|
||||
/>
|
||||
<div data-tut="reactourSecond">
|
||||
<FieldsComponent
|
||||
@@ -1141,66 +1186,14 @@ const TemplatePlaceholder = () => {
|
||||
)}
|
||||
</DndProvider>
|
||||
<div>
|
||||
<Modal show={isModalRole}>
|
||||
<Modal.Header className={"bg-info"}>
|
||||
<span style={{ color: "white" }}>Add Role</span>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<form
|
||||
style={{ display: "flex", flexDirection: "column" }}
|
||||
onSubmit={handleAddRole}
|
||||
>
|
||||
<input
|
||||
value={roleName}
|
||||
onChange={(e) => setRoleName(e.target.value)}
|
||||
placeholder={
|
||||
signersdata.length > 0
|
||||
? "User " + (signersdata.length + 1)
|
||||
: "User 1"
|
||||
}
|
||||
className="addUserInput"
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
color: "grey",
|
||||
fontSize: 11,
|
||||
margin: "2px 0 10px 5px"
|
||||
}}
|
||||
>
|
||||
e.g: Account, Hr, Director, Manager, New joinee etc...
|
||||
</p>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
background: "#00a2b7"
|
||||
}}
|
||||
className="finishBtn"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsModalRole(false)}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
<AddRoleModal
|
||||
isModalRole={isModalRole}
|
||||
roleName={roleName}
|
||||
signersdata={signersdata}
|
||||
setRoleName={setRoleName}
|
||||
handleAddRole={handleAddRole}
|
||||
handleCloseRoleModal={handleCloseRoleModal}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<LinkUserModal
|
||||
@@ -1210,6 +1203,16 @@ const TemplatePlaceholder = () => {
|
||||
closePopup={closePopup}
|
||||
/>
|
||||
</div>
|
||||
<ModalUi
|
||||
title={"Edit Template"}
|
||||
isOpen={isEditTemplate}
|
||||
handleClose={handleEditTemplateModal}
|
||||
>
|
||||
<EditTemplate
|
||||
template={pdfDetails?.[0]}
|
||||
onSuccess={handleEditTemplateForm}
|
||||
/>
|
||||
</ModalUi>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
import React from "react";
|
||||
import ModalUi from "../../premitives/ModalUi";
|
||||
|
||||
const AddRoleModal = (props) => {
|
||||
return (
|
||||
<ModalUi
|
||||
title={"Add Role"}
|
||||
isOpen={props.isModalRole}
|
||||
handleClose={props.handleCloseRoleModal}
|
||||
>
|
||||
<div className="addusercontainer">
|
||||
<form
|
||||
style={{ display: "flex", flexDirection: "column" }}
|
||||
onSubmit={props.handleAddRole}
|
||||
>
|
||||
<input
|
||||
value={props.roleName}
|
||||
onChange={(e) => props.setRoleName(e.target.value)}
|
||||
placeholder={
|
||||
props.signersdata.length > 0
|
||||
? "User " + (props.signersdata.length + 1)
|
||||
: "User 1"
|
||||
}
|
||||
className="addUserInput"
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
color: "grey",
|
||||
fontSize: 11,
|
||||
margin: "2px 0 10px 5px"
|
||||
}}
|
||||
>
|
||||
e.g: Account, Hr, Director, Manager, New joinee etc...
|
||||
</p>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
background: "#00a2b7"
|
||||
}}
|
||||
className="finishBtn"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
<button
|
||||
onClick={props.handleCloseRoleModal}
|
||||
style={{
|
||||
color: "black"
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ModalUi>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddRoleModal;
|
||||
@@ -1,293 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Parse from "parse";
|
||||
import axios from "axios";
|
||||
import "../../css/AddUser.css";
|
||||
const AddUser = (props) => {
|
||||
const [name, setName] = useState("");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [addYourself, setAddYourself] = useState(false);
|
||||
const [isLoader, setIsLoader] = useState(false);
|
||||
const [isUserExist, setIsUserExist] = useState(false);
|
||||
const parseBaseUrl = localStorage.getItem("baseUrl");
|
||||
const parseAppId = localStorage.getItem("parseAppId");
|
||||
Parse.serverURL = parseBaseUrl;
|
||||
Parse.initialize(parseAppId);
|
||||
|
||||
useEffect(() => {
|
||||
checkUserExist();
|
||||
}, []);
|
||||
// Load user details from localStorage when the component mounts
|
||||
useEffect(() => {
|
||||
const savedUserDetails = JSON.parse(
|
||||
localStorage.getItem("UserInformation")
|
||||
);
|
||||
if (savedUserDetails && addYourself) {
|
||||
setName(savedUserDetails.name);
|
||||
setPhone(savedUserDetails.phone);
|
||||
setEmail(savedUserDetails.email);
|
||||
}
|
||||
}, [addYourself]);
|
||||
|
||||
const checkUserExist = async () => {
|
||||
const user = Parse.User.current();
|
||||
try {
|
||||
const query = new Parse.Query("contracts_Contactbook");
|
||||
query.equalTo("CreatedBy", user);
|
||||
query.notEqualTo("IsDeleted", true);
|
||||
query.equalTo("Email", user.getEmail());
|
||||
const res = await query.first();
|
||||
// console.log(res);
|
||||
if (!res) {
|
||||
setIsUserExist(true);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("err", err);
|
||||
}
|
||||
};
|
||||
// Define a function to handle form submission
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsLoader(true);
|
||||
Parse.serverURL = parseBaseUrl;
|
||||
Parse.initialize(parseAppId);
|
||||
try {
|
||||
const contactQuery = new Parse.Object("contracts_Contactbook");
|
||||
contactQuery.set("Name", name);
|
||||
contactQuery.set("Phone", phone);
|
||||
contactQuery.set("Email", email);
|
||||
contactQuery.set("UserRole", "contracts_Guest");
|
||||
|
||||
if (localStorage.getItem("TenetId")) {
|
||||
contactQuery.set("TenantId", {
|
||||
__type: "Pointer",
|
||||
className: "partners_Tenant",
|
||||
objectId: localStorage.getItem("TenetId")
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
const _users = Parse.Object.extend("User");
|
||||
const _user = new _users();
|
||||
_user.set("name", name);
|
||||
_user.set("username", email);
|
||||
_user.set("email", email);
|
||||
_user.set("phone", phone);
|
||||
_user.set("password", phone);
|
||||
|
||||
const user = await _user.save();
|
||||
if (user) {
|
||||
const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": parseAppId,
|
||||
sessionToken: localStorage.getItem("accesstoken")
|
||||
};
|
||||
const body = {
|
||||
appName: localStorage.getItem("_appName"),
|
||||
roleName: "contracts_Guest",
|
||||
userId: user.id
|
||||
};
|
||||
await axios.post(roleurl, body, { headers: headers });
|
||||
const currentUser = Parse.User.current();
|
||||
contactQuery.set(
|
||||
"CreatedBy",
|
||||
Parse.User.createWithoutData(currentUser.id)
|
||||
);
|
||||
|
||||
contactQuery.set("UserId", user);
|
||||
const acl = new Parse.ACL();
|
||||
acl.setPublicReadAccess(true);
|
||||
acl.setPublicWriteAccess(true);
|
||||
acl.setReadAccess(currentUser.id, true);
|
||||
acl.setWriteAccess(currentUser.id, true);
|
||||
|
||||
contactQuery.setACL(acl);
|
||||
|
||||
const res = await contactQuery.save();
|
||||
|
||||
const parseData = JSON.parse(JSON.stringify(res));
|
||||
props.details(parseData);
|
||||
if (props.closePopup) {
|
||||
props.closePopup();
|
||||
}
|
||||
|
||||
setIsLoader(false);
|
||||
// Reset the form fields
|
||||
setAddYourself(false);
|
||||
setName("");
|
||||
setPhone("");
|
||||
setEmail("");
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("err ", err);
|
||||
if (err.code === 202) {
|
||||
const params = { email: email };
|
||||
const userRes = await Parse.Cloud.run("getUserId", params);
|
||||
const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": parseAppId,
|
||||
sessionToken: localStorage.getItem("accesstoken")
|
||||
};
|
||||
const body = {
|
||||
appName: localStorage.getItem("_appName"),
|
||||
roleName: "contracts_Guest",
|
||||
userId: userRes.id
|
||||
};
|
||||
await axios.post(roleurl, body, { headers: headers });
|
||||
const currentUser = Parse.User.current();
|
||||
contactQuery.set(
|
||||
"CreatedBy",
|
||||
Parse.User.createWithoutData(currentUser.id)
|
||||
);
|
||||
|
||||
contactQuery.set("UserId", {
|
||||
__type: "Pointer",
|
||||
className: "_User",
|
||||
objectId: userRes.id
|
||||
});
|
||||
const acl = new Parse.ACL();
|
||||
acl.setPublicReadAccess(true);
|
||||
acl.setPublicWriteAccess(true);
|
||||
acl.setReadAccess(currentUser.id, true);
|
||||
acl.setWriteAccess(currentUser.id, true);
|
||||
|
||||
contactQuery.setACL(acl);
|
||||
const res = await contactQuery.save();
|
||||
|
||||
const parseData = JSON.parse(JSON.stringify(res));
|
||||
props.details({
|
||||
value: parseData[props.valueKey],
|
||||
label: parseData[props.displayKey]
|
||||
});
|
||||
if (props.closePopup) {
|
||||
props.closePopup();
|
||||
}
|
||||
setIsLoader(false);
|
||||
// Reset the form fields
|
||||
setAddYourself(false);
|
||||
setName("");
|
||||
setPhone("");
|
||||
setEmail("");
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
// console.log("err", err);
|
||||
setIsLoader(false);
|
||||
alert("something went wrong!");
|
||||
}
|
||||
};
|
||||
|
||||
// Define a function to handle the "add yourself" checkbox
|
||||
const handleAddYourselfChange = () => {
|
||||
if (addYourself) {
|
||||
setAddYourself(false);
|
||||
setName("");
|
||||
setPhone("");
|
||||
setEmail("");
|
||||
} else {
|
||||
setAddYourself(true);
|
||||
}
|
||||
};
|
||||
const handleReset = () => {
|
||||
setAddYourself(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="addusercontainer">
|
||||
{isLoader && (
|
||||
<div className="loaderdiv">
|
||||
<div
|
||||
style={{
|
||||
fontSize: "45px",
|
||||
color: "#3dd3e0"
|
||||
}}
|
||||
className="loader-37"
|
||||
></div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-wrapper">
|
||||
<div style={{ fontSize: 14 }}>Add User</div>
|
||||
|
||||
{isUserExist && (
|
||||
<div className="form-section">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="addYourself"
|
||||
checked={addYourself}
|
||||
onChange={handleAddYourselfChange}
|
||||
className="form-checkbox"
|
||||
/>
|
||||
<label htmlFor="addYourself" className="checkbox-label ">
|
||||
Add Yourself
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-section">
|
||||
<label htmlFor="name" style={{ fontSize: 13 }}>
|
||||
Name
|
||||
<span style={{ color: "red", fontSize: 13 }}> *</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
disabled={addYourself}
|
||||
className="addUserInput"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-section">
|
||||
<label htmlFor="email" style={{ fontSize: 13 }}>
|
||||
Email
|
||||
<span style={{ color: "red", fontSize: 13 }}> *</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
disabled={addYourself}
|
||||
className="addUserInput"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-section">
|
||||
<label htmlFor="phone" style={{ fontSize: 13 }}>
|
||||
Phone
|
||||
<span style={{ color: "red", fontSize: 13 }}> *</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="phone"
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
required
|
||||
disabled={addYourself}
|
||||
className="addUserInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="buttoncontainer">
|
||||
<button type="submit" className="submitbutton">
|
||||
Submit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleReset()}
|
||||
className="resetbutton"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddUser;
|
||||
@@ -0,0 +1,102 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import "../../css/AddUser.css";
|
||||
// import SelectFolder from "../../premitives/SelectFolder";
|
||||
|
||||
const EditTemplate = ({ template, onSuccess }) => {
|
||||
const [folder, setFolder] = useState({ ObjectId: "", Name: "" });
|
||||
const [formData, setFormData] = useState({
|
||||
Name: template?.Name || "",
|
||||
Note: template?.Note || "",
|
||||
Description: template?.Description || ""
|
||||
});
|
||||
|
||||
console.log("template", template);
|
||||
const handleStrInput = (e) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
const handleFolder = (data) => {
|
||||
console.log("handleFolder ", data)
|
||||
setFolder(data);
|
||||
};
|
||||
|
||||
// Define a function to handle form submission
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const data = {...formData }
|
||||
onSuccess(data);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="addusercontainer">
|
||||
<div className="form-wrapper">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label htmlFor="name" style={{ fontSize: 13 }}>
|
||||
File
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
padding: "0.5rem 0.75rem",
|
||||
border: "1px solid #d1d5db",
|
||||
borderRadius: "0.375rem",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: "700"
|
||||
}}
|
||||
>
|
||||
file selected : {template.URL?.split("/")[3]?.split("_")[1]}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-section">
|
||||
<label htmlFor="name" style={{ fontSize: 13 }}>
|
||||
Name
|
||||
<span style={{ color: "red", fontSize: 13 }}> *</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="Name"
|
||||
value={formData.Name}
|
||||
onChange={(e) => handleStrInput(e)}
|
||||
required
|
||||
className="addUserInput"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-section">
|
||||
<label htmlFor="Note" style={{ fontSize: 13 }}>
|
||||
Note
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="Note"
|
||||
id="Note"
|
||||
value={formData.Note}
|
||||
onChange={(e) => handleStrInput(e)}
|
||||
className="addUserInput"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-section">
|
||||
<label htmlFor="Description" style={{ fontSize: 13 }}>
|
||||
Description
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="Description"
|
||||
id="Description"
|
||||
value={formData.Description}
|
||||
onChange={(e) => handleStrInput(e)}
|
||||
className="addUserInput"
|
||||
/>
|
||||
</div>
|
||||
{/* <SelectFolder onSuccess={handleFolder} folderCls={"contracts_Template"} /> */}
|
||||
<div className="buttoncontainer">
|
||||
<button type="submit" className="submitbutton">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditTemplate;
|
||||
@@ -1,33 +1,16 @@
|
||||
import React from "react";
|
||||
import Modal from "react-bootstrap/Modal";
|
||||
import SelectSigners from "./SelectSigners";
|
||||
import AddUser from "./AddUser";
|
||||
import SelectSigners from "../../premitives/SelectSigners";
|
||||
import AddUser from "../../premitives/AddUser";
|
||||
import ModalUi from "../../premitives/ModalUi";
|
||||
|
||||
const LinkUserModal = (props) => {
|
||||
return (
|
||||
<Modal show={props.isAddUser[props.uniqueId]}>
|
||||
<Modal.Header
|
||||
className={"bg-info"}
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<span style={{ color: "white" }}>Add/Choose Signer</span>
|
||||
<span
|
||||
style={{ color: "white", cursor: "pointer" }}
|
||||
onClick={() => props.closePopup()}
|
||||
>
|
||||
X
|
||||
</span>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<SelectSigners
|
||||
<ModalUi title={"Add/Choose Signer"} isOpen={props.isAddUser[props.uniqueId]} handleClose={props.closePopup}>
|
||||
<SelectSigners
|
||||
details={props.handleAddUser}
|
||||
closePopup={props.closePopup}
|
||||
/>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 5 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 5 }}>
|
||||
<span
|
||||
style={{
|
||||
height: 1,
|
||||
@@ -45,8 +28,7 @@ const LinkUserModal = (props) => {
|
||||
></span>
|
||||
</div>
|
||||
<AddUser details={props.handleAddUser} closePopup={props.closePopup} />
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</ModalUi>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import Parse from "parse";
|
||||
import "../../css/AddUser.css";
|
||||
import AsyncSelect from "react-select/async";
|
||||
|
||||
const customStyles = {
|
||||
control: (provided) => ({
|
||||
...provided,
|
||||
fontSize: "13px" // Font size for the control
|
||||
}),
|
||||
option: (provided) => ({
|
||||
...provided,
|
||||
fontSize: "13px" // Font size for the options
|
||||
})
|
||||
};
|
||||
const SelectSigners = (props) => {
|
||||
const [userList, setUserList] = useState([]);
|
||||
const [selected, setSelected] = useState();
|
||||
const [userData, setUserData] = useState({});
|
||||
const parseBaseUrl = localStorage.getItem("baseUrl");
|
||||
const parseAppId = localStorage.getItem("parseAppId");
|
||||
Parse.serverURL = parseBaseUrl;
|
||||
Parse.initialize(parseAppId);
|
||||
|
||||
// `handleOptions` is used to set just save from quick form to selected option in dropdown
|
||||
const handleOptions = (item) => {
|
||||
setSelected(item);
|
||||
const userData = userList.filter((x) => x.objectId === item.value);
|
||||
if (userData.length > 0) {
|
||||
setUserData(userData[0]);
|
||||
}
|
||||
};
|
||||
const handleAdd = () => {
|
||||
props.details(userData);
|
||||
if (props.closePopup) {
|
||||
props.closePopup();
|
||||
}
|
||||
};
|
||||
|
||||
const loadOptions = async (inputValue) => {
|
||||
try {
|
||||
const currentUser = Parse.User.current();
|
||||
const contactbook = new Parse.Query("contracts_Contactbook");
|
||||
contactbook.equalTo(
|
||||
"CreatedBy",
|
||||
Parse.User.createWithoutData(currentUser.id)
|
||||
);
|
||||
if (inputValue.length > 1) {
|
||||
contactbook.matches("Name", new RegExp(inputValue, "i"));
|
||||
}
|
||||
contactbook.notEqualTo("IsDeleted", true);
|
||||
const contactRes = await contactbook.find();
|
||||
if (contactRes) {
|
||||
const res = JSON.parse(JSON.stringify(contactRes));
|
||||
// console.log("userList ", res);
|
||||
setUserList(res);
|
||||
return await res.map((item) => ({
|
||||
label: item.Name,
|
||||
value: item.objectId
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("err", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="addusercontainer">
|
||||
<div className="form-wrapper">
|
||||
<div className="form-section">
|
||||
<label style={{ fontSize: 14 }}>Choose User</label>
|
||||
<AsyncSelect
|
||||
cacheOptions
|
||||
defaultOptions
|
||||
value={selected}
|
||||
loadingMessage={() => "Loading..."}
|
||||
noOptionsMessage={() => "User not Found"}
|
||||
loadOptions={loadOptions}
|
||||
onChange={handleOptions}
|
||||
styles={customStyles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="buttoncontainer">
|
||||
<button className="submitbutton" onClick={() => handleAdd()}>
|
||||
Add Signer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectSigners;
|
||||
@@ -35,7 +35,8 @@ function Header({
|
||||
alreadySign,
|
||||
isSignYourself,
|
||||
setIsEmail,
|
||||
completeBtnTitle
|
||||
completeBtnTitle,
|
||||
setIsEditTemplate
|
||||
}) {
|
||||
const isMobile = window.innerWidth < 767;
|
||||
const navigate = useNavigate();
|
||||
@@ -346,7 +347,7 @@ function Header({
|
||||
}}
|
||||
>
|
||||
<i
|
||||
class="fa fa-envelope"
|
||||
className="fa fa-envelope"
|
||||
style={{ marginRight: "2px" }}
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
@@ -552,6 +553,11 @@ function Header({
|
||||
)}
|
||||
|
||||
<div>
|
||||
{setIsEditTemplate && (
|
||||
<button onClick={() => setIsEditTemplate(true)} style={{border:"none", outline:"none", textAlign:"center"}}>
|
||||
<i className="fa-solid fa-gear fa-lg"></i>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate(-1);
|
||||
@@ -724,7 +730,7 @@ function Header({
|
||||
onClick={() => setIsEmail(true)}
|
||||
>
|
||||
<i
|
||||
class="fa fa-envelope"
|
||||
className="fa fa-envelope"
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: "15px",
|
||||
|
||||
@@ -13,7 +13,8 @@ function SignerListPlace({
|
||||
setUniqueId,
|
||||
setRoleName,
|
||||
handleDeleteUser,
|
||||
handleRoleChange
|
||||
handleRoleChange,
|
||||
handleOnBlur
|
||||
}) {
|
||||
const color = [
|
||||
"#93a3db",
|
||||
@@ -45,7 +46,7 @@ function SignerListPlace({
|
||||
"#cc9900"
|
||||
];
|
||||
const [isHover, setIsHover] = useState();
|
||||
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
//function for onhover signer name change background color
|
||||
const onHoverStyle = (ind, blockColor) => {
|
||||
const style = {
|
||||
@@ -107,7 +108,7 @@ function SignerListPlace({
|
||||
padding: "5px"
|
||||
}}
|
||||
>
|
||||
<span className="signedStyle">Reicipents</span>
|
||||
<span className="signedStyle">Recipients</span>
|
||||
</div>
|
||||
|
||||
<div className="signerList">
|
||||
@@ -183,24 +184,47 @@ function SignerListPlace({
|
||||
}}
|
||||
>
|
||||
{obj.Name ? (
|
||||
<span className="userName">{obj.Name}</span>
|
||||
<span
|
||||
className="userName"
|
||||
style={{ cursor: "default" }}
|
||||
>
|
||||
{obj.Name}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
{handleRoleChange ? (
|
||||
<span
|
||||
className="userName"
|
||||
contentEditable
|
||||
onBlur={(e) => handleRoleChange(e, obj.Id)}
|
||||
>
|
||||
{obj.Role}
|
||||
</span>
|
||||
) : (
|
||||
<span className="userName">{obj.Role}</span>
|
||||
)}
|
||||
<span
|
||||
className="userName"
|
||||
onClick={() => {
|
||||
setIsEdit({ [obj.Id]: true });
|
||||
setRoleName(obj.Role);
|
||||
}}
|
||||
>
|
||||
{isEdit?.[obj.Id] && handleRoleChange ? (
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
width: "inherit"
|
||||
}}
|
||||
value={obj.Role}
|
||||
onChange={(e) => handleRoleChange(e, obj.Id)}
|
||||
onBlur={() => {
|
||||
setIsEdit({});
|
||||
handleOnBlur(obj.Role, obj.Id);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
obj.Role
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{obj.Email && (
|
||||
<span className="useEmail">{obj.Email}</span>
|
||||
<span
|
||||
className="useEmail"
|
||||
style={{ cursor: "default" }}
|
||||
>
|
||||
{obj.Email}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user