mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-09-08 18:57:39 +02:00
add functionality of add placholder in template
This commit is contained in:
prafull-opensignlabs
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user