mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-28 10:49:41 +02:00
add functionality of add placholder in template
This commit is contained in:
prafull-opensignlabs
@@ -1,6 +1,5 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Parse from "parse";
|
||||
import { templateCls } from "../../constant/const";
|
||||
import Alert from "../../primitives/Alert";
|
||||
|
||||
const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
|
||||
@@ -45,7 +44,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
|
||||
event.preventDefault();
|
||||
if (name) {
|
||||
const currentUser = Parse.User.current();
|
||||
const exsitQuery = new Parse.Query(templateCls);
|
||||
const exsitQuery = new Parse.Query(folderCls);
|
||||
exsitQuery.equalTo("Name", name);
|
||||
exsitQuery.equalTo("Type", "Folder");
|
||||
if (parentFolderId) {
|
||||
@@ -59,7 +58,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
|
||||
setIsAlert(false);
|
||||
}, 1000);
|
||||
} else {
|
||||
const template = new Parse.Object(templateCls);
|
||||
const template = new Parse.Object(folderCls);
|
||||
template.set("Name", name);
|
||||
template.set("Type", "Folder");
|
||||
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Parse from "parse";
|
||||
import CreateFolder from "./CreateFolder";
|
||||
import { templateCls } from "../../constant/const";
|
||||
|
||||
const SelectFolder = ({ required, onSuccess }) => {
|
||||
const SelectFolder = ({ required, onSuccess, folderCls }) => {
|
||||
const [isOpen, SetIsOpen] = useState(false);
|
||||
const [clickFolder, setClickFolder] = useState("");
|
||||
const [selectFolder, setSelectedFolder] = useState({});
|
||||
@@ -24,7 +23,7 @@ const SelectFolder = ({ required, onSuccess }) => {
|
||||
const fetchFolder = async (folderPtr) => {
|
||||
setIsLoader(true);
|
||||
try {
|
||||
const fetchFolder = new Parse.Query(templateCls);
|
||||
const fetchFolder = new Parse.Query(folderCls);
|
||||
if (folderPtr) {
|
||||
fetchFolder.equalTo("Folder", folderPtr);
|
||||
fetchFolder.equalTo("Type", "Folder");
|
||||
@@ -55,7 +54,7 @@ const SelectFolder = ({ required, onSuccess }) => {
|
||||
setTabList((tabs) => [...tabs, item]);
|
||||
const folderPtr = {
|
||||
__type: "Pointer",
|
||||
className: templateCls,
|
||||
className: folderCls,
|
||||
objectId: item.objectId
|
||||
};
|
||||
fetchFolder(folderPtr);
|
||||
@@ -64,7 +63,7 @@ const SelectFolder = ({ required, onSuccess }) => {
|
||||
setTabList((tabs) => [...tabs, item]);
|
||||
const folderPtr = {
|
||||
__type: "Pointer",
|
||||
className: templateCls,
|
||||
className: folderCls,
|
||||
objectId: item.objectId
|
||||
};
|
||||
|
||||
@@ -107,7 +106,7 @@ const SelectFolder = ({ required, onSuccess }) => {
|
||||
let _len = list.length - 1;
|
||||
folderPtr = {
|
||||
__type: "Pointer",
|
||||
className: templateCls,
|
||||
className: folderCls,
|
||||
objectId: list[_len].objectId
|
||||
};
|
||||
setTabList(list);
|
||||
@@ -128,7 +127,7 @@ const SelectFolder = ({ required, onSuccess }) => {
|
||||
if (clickFolder && clickFolder.ObjectId) {
|
||||
fetchFolder({
|
||||
__type: "Pointer",
|
||||
className: templateCls,
|
||||
className: folderCls,
|
||||
objectId: clickFolder.ObjectId
|
||||
});
|
||||
} else {
|
||||
@@ -230,7 +229,7 @@ const SelectFolder = ({ required, onSuccess }) => {
|
||||
{isAdd && (
|
||||
<CreateFolder
|
||||
parentFolderId={clickFolder && clickFolder.ObjectId}
|
||||
folderCls={templateCls}
|
||||
folderCls={folderCls}
|
||||
onSuccess={handleAddFolder}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export const contactCls = "contracts_Contactbook"
|
||||
export const templateCls = "contracts_Template"
|
||||
export const contactCls = "contracts_Contactbook";
|
||||
export const templateCls = "contracts_Template";
|
||||
|
||||
@@ -163,6 +163,20 @@ export default function reportJson(id) {
|
||||
}
|
||||
]
|
||||
};
|
||||
// template report
|
||||
case "23jk45slhj":
|
||||
return {
|
||||
reportName: "Templates",
|
||||
heading: contactbook,
|
||||
actions: [
|
||||
{
|
||||
btnLabel: "",
|
||||
btnColor: "#f55a42",
|
||||
textColor: "white",
|
||||
btnIcon: "fa-solid fa-trash"
|
||||
}
|
||||
]
|
||||
};
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,11 @@ import Alert from "./Alert";
|
||||
import SelectFolder from "../components/fields/SelectFolder";
|
||||
import SignersInput from "../components/fields/SignersInput";
|
||||
import Title from "../components/Title";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { templateCls } from '../constant/const'
|
||||
|
||||
const TemplateForm = () => {
|
||||
const navigate = useNavigate()
|
||||
const [signers, setSigners] = useState([]);
|
||||
const [folder, setFolder] = useState({ ObjectId: "", Name: "" });
|
||||
const [formData, setFormData] = useState({
|
||||
@@ -126,7 +130,7 @@ const TemplateForm = () => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const currentUser = Parse.User.current();
|
||||
const template = new Parse.Object("contracts_Template");
|
||||
const template = new Parse.Object(templateCls);
|
||||
Object.entries(formData).forEach((item) =>
|
||||
template.set(item[0], item[1])
|
||||
);
|
||||
@@ -135,13 +139,20 @@ const TemplateForm = () => {
|
||||
if (folder && folder.ObjectId) {
|
||||
template.set("Folder", {
|
||||
__type: "Pointer",
|
||||
className: "contracts_Template",
|
||||
className: templateCls,
|
||||
objectId: folder.ObjectId
|
||||
});
|
||||
}
|
||||
if (signers && signers.length > 0) {
|
||||
template.set("Signers", signers);
|
||||
}
|
||||
const ExtCls = JSON.parse(localStorage.getItem("Extand_Class"));
|
||||
template.set("ExtUserPtr", {
|
||||
__type: "Pointer",
|
||||
className: "contracts_Users",
|
||||
objectId: ExtCls[0].objectId
|
||||
});
|
||||
|
||||
const res = await template.save();
|
||||
if (res) {
|
||||
setIsAlert(true);
|
||||
@@ -157,6 +168,7 @@ const TemplateForm = () => {
|
||||
});
|
||||
setFileUpload([]);
|
||||
setpercentage(0);
|
||||
navigate('/asmf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/template/' +res.id)
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("err ", err);
|
||||
@@ -281,7 +293,7 @@ const TemplateForm = () => {
|
||||
/>
|
||||
</div>
|
||||
<SignersInput onChange={handleSigners} />
|
||||
<SelectFolder onSuccess={handleFolder} />
|
||||
<SelectFolder onSuccess={handleFolder} folderCls={templateCls}/>
|
||||
<div className="flex items-center mt-3 gap-2 text-white">
|
||||
<button
|
||||
className="px-2 py-2 uppercase rounded shadow-md bg-sky-300 text-xs font-semibold"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -32,12 +32,12 @@ function FieldsComponent({
|
||||
setIsShowEmail,
|
||||
isMailSend,
|
||||
selectedEmail,
|
||||
setSelectedEmail,
|
||||
setSelectedEmail
|
||||
}) {
|
||||
const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
|
||||
|
||||
const isMobile = window.innerWidth <767;
|
||||
|
||||
const isMobile = window.innerWidth < 767;
|
||||
|
||||
const SelectItem = React.forwardRef(
|
||||
({ children, className, ...props }, forwardedRef) => {
|
||||
return (
|
||||
@@ -65,7 +65,7 @@ function FieldsComponent({
|
||||
"#cc99ff",
|
||||
"#ffcc99",
|
||||
"#66ccff",
|
||||
"#ffffcc",
|
||||
"#ffffcc"
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -88,7 +88,7 @@ function FieldsComponent({
|
||||
padding: "10px 20px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "18px", fontWeight: "500" }}>
|
||||
@@ -107,30 +107,29 @@ function FieldsComponent({
|
||||
}}
|
||||
>
|
||||
<Select.Trigger
|
||||
className={selectedEmail ? "selectEmail": "SelectTrigger"}
|
||||
className={selectedEmail ? "selectEmail" : "SelectTrigger"}
|
||||
style={{
|
||||
background: isSelectListId
|
||||
? color[isSelectListId % color.length]
|
||||
: color[0],
|
||||
: color[0]
|
||||
}}
|
||||
aria-label="Food"
|
||||
>
|
||||
<Select.Value
|
||||
|
||||
placeholder="Select signer.." />
|
||||
{!selectedEmail &&
|
||||
<Select.Icon className="SelectIcon">
|
||||
<i
|
||||
style={{
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px",
|
||||
}}
|
||||
className="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</Select.Icon>}
|
||||
<Select.Value placeholder="Select signer.." />
|
||||
{!selectedEmail && (
|
||||
<Select.Icon className="SelectIcon">
|
||||
<i
|
||||
style={{
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px"
|
||||
}}
|
||||
className="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</Select.Icon>
|
||||
)}
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content
|
||||
@@ -143,7 +142,7 @@ function FieldsComponent({
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px",
|
||||
fontSize: "20px"
|
||||
}}
|
||||
className="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
@@ -151,7 +150,7 @@ function FieldsComponent({
|
||||
</Select.ScrollUpButton>
|
||||
<Select.Viewport className="SelectViewport">
|
||||
<Select.Group>
|
||||
{signersdata.Signers.map((obj, ind) => {
|
||||
{signersdata.map((obj, ind) => {
|
||||
return (
|
||||
<SelectItem
|
||||
selected
|
||||
@@ -175,7 +174,7 @@ function FieldsComponent({
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px",
|
||||
fontSize: "20px"
|
||||
}}
|
||||
className="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
@@ -221,7 +220,7 @@ function FieldsComponent({
|
||||
backgroundSize: "70% 70%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center center",
|
||||
paddingBottom: "2.2rem",
|
||||
paddingBottom: "2.2rem"
|
||||
}}
|
||||
>
|
||||
{/* <img
|
||||
@@ -238,7 +237,7 @@ function FieldsComponent({
|
||||
color: "white",
|
||||
fontSize: "12px",
|
||||
position: "relative",
|
||||
top: "2.6rem",
|
||||
top: "2.6rem"
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
@@ -261,7 +260,7 @@ function FieldsComponent({
|
||||
backgroundSize: "32px 33px",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center center",
|
||||
paddingBottom: "2.2rem",
|
||||
paddingBottom: "2.2rem"
|
||||
}}
|
||||
>
|
||||
<span
|
||||
@@ -269,7 +268,7 @@ function FieldsComponent({
|
||||
color: "white",
|
||||
fontSize: "12px",
|
||||
position: "relative",
|
||||
top: "2.6rem",
|
||||
top: "2.6rem"
|
||||
}}
|
||||
>
|
||||
Stamp
|
||||
@@ -283,8 +282,7 @@ function FieldsComponent({
|
||||
<div
|
||||
style={{
|
||||
background: themeColor(),
|
||||
|
||||
padding: "5px",
|
||||
padding: "5px"
|
||||
}}
|
||||
>
|
||||
<span className="signedStyle">Fields</span>
|
||||
@@ -299,7 +297,7 @@ function FieldsComponent({
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 20px 0px 20px",
|
||||
color: "#bfbfbf",
|
||||
color: "#bfbfbf"
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
@@ -310,7 +308,7 @@ function FieldsComponent({
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "28px",
|
||||
background: "#d3edeb",
|
||||
background: "#d3edeb"
|
||||
}}
|
||||
src={sign}
|
||||
/>
|
||||
@@ -321,7 +319,7 @@ function FieldsComponent({
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 0px 0px 35px",
|
||||
color: "#bfbfbf",
|
||||
color: "#bfbfbf"
|
||||
}}
|
||||
>
|
||||
Stamp
|
||||
@@ -332,7 +330,7 @@ function FieldsComponent({
|
||||
style={{
|
||||
width: "25px",
|
||||
height: "28px",
|
||||
background: "#d3edeb",
|
||||
background: "#d3edeb"
|
||||
}}
|
||||
src={stamp}
|
||||
/>
|
||||
@@ -355,7 +353,7 @@ function FieldsComponent({
|
||||
style={{
|
||||
opacity: isDragSign ? 0.5 : 1,
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
|
||||
}}
|
||||
>
|
||||
<span
|
||||
@@ -363,7 +361,7 @@ function FieldsComponent({
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 20px 0px 20px",
|
||||
color: "black",
|
||||
color: "black"
|
||||
}}
|
||||
>
|
||||
Signature
|
||||
@@ -373,7 +371,7 @@ function FieldsComponent({
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "28px",
|
||||
background: themeColor(),
|
||||
background: themeColor()
|
||||
}}
|
||||
src={sign}
|
||||
/>
|
||||
@@ -393,7 +391,7 @@ function FieldsComponent({
|
||||
style={{
|
||||
opacity: isDragStamp ? 0.5 : 1,
|
||||
boxShadow:
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
|
||||
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
|
||||
}}
|
||||
>
|
||||
<span
|
||||
@@ -401,7 +399,7 @@ function FieldsComponent({
|
||||
fontWeight: "400",
|
||||
fontSize: "15px",
|
||||
padding: "3px 0px 0px 35px",
|
||||
color: !pdfUrl ? "black" : "#bfbfbf",
|
||||
color: !pdfUrl ? "black" : "#bfbfbf"
|
||||
}}
|
||||
>
|
||||
Stamp
|
||||
@@ -412,7 +410,7 @@ function FieldsComponent({
|
||||
style={{
|
||||
width: "25px",
|
||||
height: "28px",
|
||||
background: themeColor(),
|
||||
background: themeColor()
|
||||
}}
|
||||
src={stamp}
|
||||
/>
|
||||
|
||||
@@ -533,17 +533,17 @@ function Header({
|
||||
) : isPlaceholder ? (
|
||||
<>
|
||||
{!isMailSend &&
|
||||
signersdata.Signers &&
|
||||
signersdata.Signers.length !== signerPos.length && (
|
||||
signersdata.length > 0 &&
|
||||
signersdata.length !== signerPos.length && (
|
||||
<div>
|
||||
{signerPos.length === 0 ? (
|
||||
<span style={{ fontSize: "13px", color: "#f5405e" }}>
|
||||
Add all {signersdata.Signers.length - signerPos.length}{" "}
|
||||
Add all {signersdata.length - signerPos.length}{" "}
|
||||
recipients signature
|
||||
</span>
|
||||
) : (
|
||||
<span style={{ fontSize: "13px", color: "#f5405e" }}>
|
||||
Add {signersdata.Signers.length - signerPos.length} more
|
||||
Add {signersdata.length - signerPos.length} more
|
||||
recipients signature
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -9,7 +9,7 @@ function RenderAllPdfPage({
|
||||
allPages,
|
||||
setAllPages,
|
||||
setPageNumber,
|
||||
setSignBtnPosition,
|
||||
setSignBtnPosition
|
||||
}) {
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
|
||||
|
||||
@@ -20,75 +20,77 @@ function RenderAllPdfPage({
|
||||
|
||||
return (
|
||||
<div className="showPages">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
|
||||
backgroundColor: "white",
|
||||
height:"100%"
|
||||
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "140px" }}>
|
||||
<div
|
||||
style={{
|
||||
background: themeColor(),
|
||||
// color:"white"
|
||||
}}
|
||||
className="signedStyle"
|
||||
>
|
||||
Pages
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
|
||||
backgroundColor: "white",
|
||||
height: "100%"
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "140px" }}>
|
||||
<div
|
||||
style={{
|
||||
background: themeColor()
|
||||
// color:"white"
|
||||
}}
|
||||
className="signedStyle"
|
||||
>
|
||||
Pages
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<RSC id="RSC-Example" style={{width:"135px",height:window.innerHeight-130+'px'}} >
|
||||
<Document
|
||||
onLoadSuccess={onDocumentLoad}
|
||||
file={pdfUrl ? pdfUrl : signPdfUrl}
|
||||
// file="https://api.printnode.com/static/test/pdf/multipage.pdf"
|
||||
<div>
|
||||
<RSC
|
||||
id="RSC-Example"
|
||||
style={{
|
||||
width: "135px",
|
||||
height: window.innerHeight - 130 + "px"
|
||||
}}
|
||||
>
|
||||
{Array.from(new Array(allPages), (el, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
width: "100px",
|
||||
border: "2px solid #878787",
|
||||
// padding: "5px",
|
||||
margin: "10px",
|
||||
<Document
|
||||
onLoadSuccess={onDocumentLoad}
|
||||
file={pdfUrl ? pdfUrl : signPdfUrl}
|
||||
// file="https://api.printnode.com/static/test/pdf/multipage.pdf"
|
||||
>
|
||||
{Array.from(new Array(allPages), (el, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
width: "100px",
|
||||
border: "2px solid #878787",
|
||||
// padding: "5px",
|
||||
margin: "10px",
|
||||
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
contain: "content",
|
||||
}}
|
||||
onClick={() => {
|
||||
setPageNumber(index + 1);
|
||||
if (setSignBtnPosition) {
|
||||
setSignBtnPosition([]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Page
|
||||
key={`page_${index + 1}`}
|
||||
pageNumber={index + 1}
|
||||
width={100}
|
||||
height={100}
|
||||
scale={1}
|
||||
renderAnnotationLayer={false}
|
||||
renderTextLayer={false}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Document>
|
||||
</RSC>
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
contain: "content"
|
||||
}}
|
||||
onClick={() => {
|
||||
setPageNumber(index + 1);
|
||||
if (setSignBtnPosition) {
|
||||
setSignBtnPosition([]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Page
|
||||
key={`page_${index + 1}`}
|
||||
pageNumber={index + 1}
|
||||
width={100}
|
||||
height={100}
|
||||
scale={1}
|
||||
renderAnnotationLayer={false}
|
||||
renderTextLayer={false}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Document>
|
||||
</RSC>
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
import React from "react";
|
||||
import RSC from "react-scrollbars-custom";
|
||||
import { Rnd } from "react-rnd";
|
||||
@@ -459,9 +460,13 @@ function RenderPdf({
|
||||
className="placeholderBlock"
|
||||
onDrag={() => handleTabDrag(pos.key)}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
height: pos.Height ? pos.Height : 60
|
||||
width: posWidth(pos),
|
||||
height: posHeight(pos)
|
||||
}}
|
||||
// size={{
|
||||
// width: pos.Width ? pos.Width : 150,
|
||||
// height: pos.Height ? pos.Height : 60
|
||||
// }}
|
||||
lockAspectRatio={
|
||||
pos.Width
|
||||
? pos.Width / pos.Height
|
||||
@@ -471,14 +476,21 @@ function RenderPdf({
|
||||
handleStop(
|
||||
event,
|
||||
dragElement,
|
||||
data.signerObjId,
|
||||
data.Id,
|
||||
pos.key
|
||||
)
|
||||
// data.signerObjId,
|
||||
}
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
y: pos.yPosition
|
||||
x: xPos(pos),
|
||||
y: !pos.isMobile
|
||||
? pos.yPosition / scale
|
||||
: pos.yPosition * (pos.scale / scale)
|
||||
}}
|
||||
// default={{
|
||||
// x: pos.xPosition,
|
||||
// y: pos.yPosition
|
||||
// }}
|
||||
onResizeStart={() => {
|
||||
setIsResize(true);
|
||||
}}
|
||||
@@ -492,6 +504,7 @@ function RenderPdf({
|
||||
delta,
|
||||
position
|
||||
) => {
|
||||
e.stopPropagation();
|
||||
handleImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
@@ -541,8 +554,9 @@ function RenderPdf({
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(
|
||||
pos.key,
|
||||
data.signerObjId
|
||||
data.Id
|
||||
);
|
||||
// data.signerObjId
|
||||
}}
|
||||
style={{
|
||||
background: themeColor()
|
||||
@@ -920,7 +934,7 @@ function RenderPdf({
|
||||
cursor: "all-scroll",
|
||||
background: data.blockColor,
|
||||
borderColor: themeColor(),
|
||||
zIndex: pos.zIndex
|
||||
zIndex: pos.zIndex ? pos.zIndex : "1"
|
||||
}}
|
||||
className="placeholderBlock"
|
||||
onDrag={() => handleTabDrag(pos.key)}
|
||||
@@ -937,9 +951,10 @@ function RenderPdf({
|
||||
handleStop(
|
||||
event,
|
||||
dragElement,
|
||||
data.signerObjId,
|
||||
data.Id,
|
||||
pos.key
|
||||
)
|
||||
// data.signerObjId,
|
||||
}
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
@@ -978,8 +993,9 @@ function RenderPdf({
|
||||
e.stopPropagation();
|
||||
handleDeleteSign(
|
||||
pos.key,
|
||||
data.signerObjId
|
||||
data.Id
|
||||
);
|
||||
// data.signerObjId
|
||||
}}
|
||||
style={{
|
||||
background: themeColor()
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import check from "../../assests/checkBox.png";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
import "../../css/signerListPlace.css";
|
||||
|
||||
function SignerListPlace({
|
||||
signerPos,
|
||||
@@ -8,7 +9,10 @@ function SignerListPlace({
|
||||
isSelectListId,
|
||||
setSignerObjId,
|
||||
setIsSelectId,
|
||||
setContractName
|
||||
setContractName,
|
||||
handleAddSigner,
|
||||
setUniqueId,
|
||||
setRoleName
|
||||
}) {
|
||||
const color = [
|
||||
"#93a3db",
|
||||
@@ -22,7 +26,7 @@ function SignerListPlace({
|
||||
"#cc99ff",
|
||||
"#ffcc99",
|
||||
"#66ccff",
|
||||
"#ffffcc",
|
||||
"#ffffcc"
|
||||
];
|
||||
|
||||
const nameColor = [
|
||||
@@ -37,10 +41,11 @@ function SignerListPlace({
|
||||
"#cc00ff",
|
||||
"#ff9900",
|
||||
"#336699",
|
||||
"#cc9900",
|
||||
"#cc9900"
|
||||
];
|
||||
const [isHover, setIsHover] = useState();
|
||||
|
||||
console.log("signerPos", signerPos);
|
||||
//function for onhover signer name change background color
|
||||
const onHoverStyle = (ind) => {
|
||||
const style = {
|
||||
@@ -49,7 +54,7 @@ function SignerListPlace({
|
||||
marginTop: "2px",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
borderBottom: "1px solid #e3e1e1",
|
||||
borderBottom: "1px solid #e3e1e1"
|
||||
};
|
||||
return style;
|
||||
};
|
||||
@@ -61,101 +66,128 @@ function SignerListPlace({
|
||||
marginTop: "2px",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
|
||||
justifyContent: "space-between",
|
||||
borderBottom: "1px solid #e3e1e1",
|
||||
justifyContent: "space-between"
|
||||
};
|
||||
return style;
|
||||
};
|
||||
|
||||
const getFirstLetter = (name) => {
|
||||
const firstLetter = name.charAt(0);
|
||||
const firstLetter = name?.charAt(0);
|
||||
return firstLetter;
|
||||
};
|
||||
|
||||
return (
|
||||
<div >
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
background: themeColor(),
|
||||
|
||||
padding: "5px",
|
||||
padding: "5px"
|
||||
}}
|
||||
>
|
||||
<span className="signedStyle">Reicipents</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="signerList">
|
||||
{signersdata.Signers &&
|
||||
signersdata.Signers.map((obj, ind) => {
|
||||
return (
|
||||
<div
|
||||
data-tut="reactourFirst"
|
||||
onMouseEnter={() => setIsHover(ind)}
|
||||
onMouseLeave={() => setIsHover(null)}
|
||||
key={ind}
|
||||
style={
|
||||
isHover === ind || isSelectListId === ind
|
||||
? onHoverStyle(ind)
|
||||
: nonHoverStyle(ind)
|
||||
}
|
||||
onClick={() => {
|
||||
setSignerObjId(obj.objectId);
|
||||
setIsSelectId(ind);
|
||||
setContractName(obj.className)
|
||||
}}
|
||||
>
|
||||
<>
|
||||
{signersdata.length > 0 &&
|
||||
signersdata.map((obj, ind) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
data-tut="reactourFirst"
|
||||
onMouseEnter={() => setIsHover(ind)}
|
||||
onMouseLeave={() => setIsHover(null)}
|
||||
key={ind}
|
||||
style={
|
||||
isHover === ind || isSelectListId === ind
|
||||
? onHoverStyle(ind)
|
||||
: nonHoverStyle(ind)
|
||||
}
|
||||
onClick={() => {
|
||||
setSignerObjId(obj?.objectId);
|
||||
setIsSelectId(ind);
|
||||
setContractName(obj?.className);
|
||||
setUniqueId(obj.Id);
|
||||
setRoleName(obj.Role)
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="signerStyle"
|
||||
style={{
|
||||
background: nameColor[ind % nameColor.length],
|
||||
width: 20,
|
||||
height: 20,
|
||||
display: "flex",
|
||||
borderRadius: 30 / 2,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: "20px",
|
||||
marginTop: "5px",
|
||||
flexDirection: "row"
|
||||
}}
|
||||
>
|
||||
<span
|
||||
<div
|
||||
className="signerStyle"
|
||||
style={{
|
||||
fontSize: "8px",
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
background: nameColor[ind % nameColor.length],
|
||||
width: 20,
|
||||
height: 20,
|
||||
display: "flex",
|
||||
borderRadius: 30 / 2,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: "20px",
|
||||
marginTop: "5px"
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
{getFirstLetter(obj.Name)}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
<span className="userName">{obj.Name}</span>
|
||||
<span className="useEmail">{obj.Email}</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "8px",
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
textTransform: "uppercase"
|
||||
}}
|
||||
>
|
||||
{obj.Name
|
||||
? getFirstLetter(obj.Name)
|
||||
: getFirstLetter(obj.Role)}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: obj.Name ? "column" : "row",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
{obj.Name ? (
|
||||
<span className="userName">{obj.Name}</span>
|
||||
) : (
|
||||
<span className="userName">{obj.Role}</span>
|
||||
)}
|
||||
{obj.Email && (
|
||||
<span className="useEmail">{obj.Email}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{signerPos.map((data, key) => {
|
||||
return (
|
||||
data.Id === obj.Id && (
|
||||
<div key={key}>
|
||||
<img
|
||||
alt="no img"
|
||||
src={check}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
<hr />
|
||||
</div>
|
||||
{signerPos.map((data, key) => {
|
||||
return (
|
||||
data.signerObjId === obj.objectId && (
|
||||
<div key={key}>
|
||||
<img alt="no img" src={check} width={20} height={20} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
})}
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})}
|
||||
</>
|
||||
</div>
|
||||
|
||||
{handleAddSigner && (
|
||||
<div className="addSignerBtn" onClick={() => handleAddSigner()}>
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
<span style={{ marginLeft: 2 }}>Add</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import DraftDocument from "./Component/DraftDocument";
|
||||
import PdfRequestFiles from "./Component/PdfRequestFiles";
|
||||
import LegaDrive from "./Component/LegaDrive/LegaDrive";
|
||||
import PageNotFound from "./Component/PageNotFound";
|
||||
import TemplatePlaceHolder from "./Component/TemplatePlaceholder";
|
||||
|
||||
// `AppRoutes` is used to define route path of app and
|
||||
// it expose to host app, check moduleFederation.config.js for more
|
||||
@@ -47,6 +48,7 @@ function AppRoutes() {
|
||||
{/* lega drive route */}
|
||||
<Route path="/legadrive" element={<LegaDrive />} />
|
||||
{/* Page Not Found */}
|
||||
<Route path="/template/:templateId" element={<TemplatePlaceHolder />} />
|
||||
<Route path="*" element={<PageNotFound />} />
|
||||
</Routes>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
.addSignerBtn{
|
||||
padding: 10px;
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #47a3ad;
|
||||
margin: 1px;
|
||||
color: #47a3ad;
|
||||
cursor: pointer
|
||||
}
|
||||
.addSignerBtn:hover{
|
||||
background: #47a3ad;
|
||||
color: #ffffff;
|
||||
}
|
||||
@@ -1001,3 +1001,5 @@ export const signPdfFun = async (
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
export const randomId = () => Math.floor(1000 + Math.random() * 9000);
|
||||
Reference in New Issue
Block a user