mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-23 08:02:30 +02:00
fix: signyourself flow, add validtion in template flow, change UI recipientlist in mobile view
This commit is contained in:
prafull-opensignlabs
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import * as Select from "@radix-ui/react-select";
|
||||
import classnames from "classnames";
|
||||
import React, { useState } from "react";
|
||||
import ModalUi from "../../premitives/ModalUi";
|
||||
import RecipientList from "../../premitives/RecipientList";
|
||||
|
||||
function FieldsComponent({
|
||||
pdfUrl,
|
||||
@@ -28,33 +28,20 @@ function FieldsComponent({
|
||||
isSigners,
|
||||
dataTut,
|
||||
dataTut2,
|
||||
setIsShowEmail,
|
||||
isMailSend,
|
||||
selectedEmail,
|
||||
setSelectedEmail,
|
||||
handleAddSigner,
|
||||
setUniqueId,
|
||||
setRoleName
|
||||
setRoleName,
|
||||
handleDeleteUser,
|
||||
signerPos,
|
||||
handleRoleChange,
|
||||
handleOnBlur
|
||||
}) {
|
||||
const [isSignersModal, setIsSignersModal] = useState(false);
|
||||
const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
|
||||
|
||||
const isMobile = window.innerWidth < 767;
|
||||
|
||||
const SelectItem = React.forwardRef(
|
||||
({ children, className, ...props }, forwardedRef) => {
|
||||
return (
|
||||
<Select.Item
|
||||
className={classnames("SelectItem", className)}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<Select.ItemText>{children}</Select.ItemText>
|
||||
<Select.ItemIndicator className="SelectItemIndicator"></Select.ItemIndicator>
|
||||
</Select.Item>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
const color = [
|
||||
"#93a3db",
|
||||
"#e6c3db",
|
||||
@@ -70,6 +57,9 @@ function FieldsComponent({
|
||||
"#ffffcc"
|
||||
];
|
||||
|
||||
const handleModal = () => {
|
||||
setIsSignersModal(!isSignersModal);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{isMobile && isSignYourself ? (
|
||||
@@ -92,97 +82,24 @@ function FieldsComponent({
|
||||
alignItems: "center",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
onClick={() => {
|
||||
if (signersdata?.length) {
|
||||
handleModal();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "13px", fontWeight: "700" }}>
|
||||
Signer :
|
||||
Recipient
|
||||
</span>
|
||||
<span style={{ fontSize: "13px", fontWeight: "700" }}>
|
||||
{signersdata[isSelectListId]?.Role && (
|
||||
<div>
|
||||
{signersdata[isSelectListId]?.Name
|
||||
? ` : ${signersdata[isSelectListId]?.Name}`
|
||||
: ` : ${signersdata[isSelectListId]?.Role}`}
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
|
||||
<Select.Root
|
||||
onValueChange={(obj) => {
|
||||
const [selectedKey, selectedData] = obj.split("|");
|
||||
const parseData = JSON.parse(selectedData);
|
||||
|
||||
setSignerObjId(parseData.objectId);
|
||||
setIsSelectId(selectedKey);
|
||||
setContractName(parseData.className);
|
||||
setSelectedEmail(true);
|
||||
setUniqueId(parseData.Id);
|
||||
setRoleName(parseData.Role);
|
||||
}}
|
||||
>
|
||||
<Select.Trigger
|
||||
className={selectedEmail ? "selectEmail" : "SelectTrigger"}
|
||||
style={{
|
||||
background: isSelectListId
|
||||
? color[isSelectListId % color.length]
|
||||
: 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.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content
|
||||
className="SelectContent"
|
||||
style={{ zIndex: "5000" }}
|
||||
>
|
||||
<Select.ScrollUpButton className="SelectScrollButton">
|
||||
<i
|
||||
style={{
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px"
|
||||
}}
|
||||
className="fa fa-angle-down"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</Select.ScrollUpButton>
|
||||
<Select.Viewport className="SelectViewport">
|
||||
<Select.Group>
|
||||
{signersdata.map((obj, ind) => {
|
||||
return (
|
||||
<SelectItem
|
||||
selected
|
||||
key={ind}
|
||||
value={`${ind}|${JSON.stringify(obj)}`}
|
||||
// value={(obj)}
|
||||
>
|
||||
{obj.Email ? obj.Email : obj.Role }
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</Select.Group>
|
||||
</Select.Viewport>
|
||||
<Select.ScrollDownButton className="SelectScrollButton">
|
||||
<i
|
||||
style={{
|
||||
marginTop: "5px",
|
||||
marginLeft: "5px",
|
||||
color: "#3b15d1",
|
||||
fontSize: "20px"
|
||||
}}
|
||||
className="fa fa-angle-down"
|
||||
aria-hidden="false"
|
||||
></i>
|
||||
</Select.ScrollDownButton>
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
</div>
|
||||
)}
|
||||
{handleAddSigner && (
|
||||
@@ -206,17 +123,7 @@ function FieldsComponent({
|
||||
style={{ backgroundColor: themeColor() }}
|
||||
>
|
||||
<div
|
||||
onClick={() => {
|
||||
if (isSigners) {
|
||||
if (selectedEmail) {
|
||||
addPositionOfSignature("onclick", false);
|
||||
} else {
|
||||
setIsShowEmail(true);
|
||||
}
|
||||
} else {
|
||||
addPositionOfSignature("onclick", false);
|
||||
}
|
||||
}}
|
||||
onClick={() => addPositionOfSignature("onclick", false)}
|
||||
ref={(element) => {
|
||||
dragSignatureSS(element);
|
||||
if (element) {
|
||||
@@ -426,6 +333,25 @@ function FieldsComponent({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<ModalUi
|
||||
title={"Recipients"}
|
||||
isOpen={isSignersModal}
|
||||
handleClose={handleModal}
|
||||
>
|
||||
<RecipientList
|
||||
signerPos={signerPos}
|
||||
signersdata={signersdata}
|
||||
isSelectListId={isSelectListId}
|
||||
setSignerObjId={setSignerObjId}
|
||||
setIsSelectId={setIsSelectId}
|
||||
setContractName={setContractName}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
handleRoleChange={handleRoleChange}
|
||||
handleOnBlur={handleOnBlur}
|
||||
/>
|
||||
</ModalUi>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -540,7 +540,7 @@ function Header({
|
||||
<div>
|
||||
{signerPos.length === 0 ? (
|
||||
<span style={{ fontSize: "13px", color: "#f5405e" }}>
|
||||
Add all {signersdata.length - signerPos.length}{" "}
|
||||
Add {signersdata.length - signerPos.length}{" "}
|
||||
recipients signature
|
||||
</span>
|
||||
) : (
|
||||
|
||||
@@ -386,13 +386,18 @@ function RenderPdf({
|
||||
);
|
||||
if (checkSign.length > 0) {
|
||||
return (
|
||||
<p style={{ color: "black", fontSize: 11 }}> {checkSign[0].Name} </p>
|
||||
<>
|
||||
<div style={{ color: "black", fontSize: 11 }}>
|
||||
{checkSign[0].Name}
|
||||
</div>
|
||||
<div style={{ color: "black", fontSize: 11 }}> {`(${Role})`} </div>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return <p style={{ color: "black", fontSize: 11 }}> {Role} </p>;
|
||||
return <div style={{ color: "black", fontSize: 11 }}> {Role} </div>;
|
||||
}
|
||||
} else {
|
||||
return <p style={{ color: "black", fontSize: 11 }}> {Role} </p>;
|
||||
return <div style={{ color: "black", fontSize: 11 }}> {Role} </div>;
|
||||
}
|
||||
};
|
||||
return (
|
||||
@@ -455,13 +460,9 @@ function RenderPdf({
|
||||
handleSignYourselfImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
direction,
|
||||
position,
|
||||
xyPostion,
|
||||
index,
|
||||
setXyPostion,
|
||||
pdfOriginalWidth,
|
||||
containerWH
|
||||
setXyPostion
|
||||
);
|
||||
}}
|
||||
size={{
|
||||
@@ -506,7 +507,11 @@ function RenderPdf({
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp ? "stamp" : "signature"}
|
||||
{pos.isStamp ? (
|
||||
<div>stamp</div>
|
||||
) : (
|
||||
<div>signature</div>
|
||||
)}
|
||||
{handleUserName(
|
||||
data.signerObjId,
|
||||
data.Role
|
||||
@@ -708,9 +713,11 @@ function RenderPdf({
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp
|
||||
? "stamp"
|
||||
: "signature"}
|
||||
{pos.isStamp ? (
|
||||
<div>stamp</div>
|
||||
) : (
|
||||
<div>signature</div>
|
||||
)}
|
||||
{handleUserName(
|
||||
data.signerObjId,
|
||||
data.Role
|
||||
@@ -778,25 +785,12 @@ function RenderPdf({
|
||||
handleSignYourselfImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
direction,
|
||||
position,
|
||||
xyPostion,
|
||||
index,
|
||||
setXyPostion,
|
||||
pdfOriginalWidth,
|
||||
containerWH
|
||||
setXyPostion
|
||||
|
||||
);
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
if (!isDragging && isMobile) {
|
||||
setTimeout(() => {
|
||||
e.stopPropagation();
|
||||
setIsSignPad(true);
|
||||
setSignKey(pos.key);
|
||||
setIsStamp(pos.isStamp);
|
||||
}, 500);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<BorderResize right={-12} top={-11} />
|
||||
<PlaceholderBorder
|
||||
@@ -806,6 +800,13 @@ function RenderPdf({
|
||||
posHeight={posHeight}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
left: xPos(pos, true),
|
||||
top: yPos(pos, true),
|
||||
width: posWidth(pos, true),
|
||||
height: posHeight(pos, true),
|
||||
zIndex: "10"
|
||||
}}
|
||||
onTouchEnd={(e) => {
|
||||
if (!isDragging && isMobile) {
|
||||
setTimeout(() => {
|
||||
@@ -868,10 +869,6 @@ function RenderPdf({
|
||||
}}
|
||||
>
|
||||
{pos.isStamp ? "stamp" : "signature"}
|
||||
{handleUserName(
|
||||
data.signerObjId,
|
||||
data.Role
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -979,13 +976,9 @@ function RenderPdf({
|
||||
handleSignYourselfImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
direction,
|
||||
position,
|
||||
xyPostion,
|
||||
index,
|
||||
setXyPostion,
|
||||
pdfOriginalWidth,
|
||||
containerWH
|
||||
setXyPostion
|
||||
);
|
||||
}}
|
||||
key={pos.key}
|
||||
@@ -1044,7 +1037,11 @@ function RenderPdf({
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp ? "stamp" : "signature"}
|
||||
{pos.isStamp ? (
|
||||
<div>stamp</div>
|
||||
) : (
|
||||
<div>signature</div>
|
||||
)}
|
||||
{handleUserName(
|
||||
data.signerObjId,
|
||||
data.Role
|
||||
@@ -1223,9 +1220,11 @@ function RenderPdf({
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp
|
||||
? "stamp"
|
||||
: "signature"}
|
||||
{pos.isStamp ? (
|
||||
<div>stamp</div>
|
||||
) : (
|
||||
<div>signature</div>
|
||||
)}
|
||||
{handleUserName(
|
||||
data.signerObjId,
|
||||
data.Role
|
||||
@@ -1300,13 +1299,9 @@ function RenderPdf({
|
||||
handleSignYourselfImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
direction,
|
||||
position,
|
||||
xyPostion,
|
||||
index,
|
||||
setXyPostion,
|
||||
pdfOriginalWidth,
|
||||
containerWH
|
||||
setXyPostion
|
||||
);
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,106 +1,9 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import React from "react";
|
||||
import { themeColor } from "../../utils/ThemeColor/backColor";
|
||||
import "../../css/signerListPlace.css";
|
||||
import RecipientList from "../../premitives/RecipientList";
|
||||
|
||||
function SignerListPlace({
|
||||
signerPos,
|
||||
signersdata,
|
||||
isSelectListId,
|
||||
setSignerObjId,
|
||||
setIsSelectId,
|
||||
setContractName,
|
||||
handleAddSigner,
|
||||
setUniqueId,
|
||||
setRoleName,
|
||||
handleDeleteUser,
|
||||
handleRoleChange,
|
||||
handleOnBlur
|
||||
}) {
|
||||
const color = [
|
||||
"#93a3db",
|
||||
"#e6c3db",
|
||||
"#c0e3bc",
|
||||
"#bce3db",
|
||||
"#b8ccdb",
|
||||
"#ceb8db",
|
||||
"#ffccff",
|
||||
"#99ffcc",
|
||||
"#cc99ff",
|
||||
"#ffcc99",
|
||||
"#66ccff",
|
||||
"#ffffcc"
|
||||
];
|
||||
|
||||
const nameColor = [
|
||||
"#304fbf",
|
||||
"#7d5270",
|
||||
"#5f825b",
|
||||
"#578077",
|
||||
"#576e80",
|
||||
"#6d527d",
|
||||
"#cc00cc",
|
||||
"#006666",
|
||||
"#cc00ff",
|
||||
"#ff9900",
|
||||
"#336699",
|
||||
"#cc9900"
|
||||
];
|
||||
const [isHover, setIsHover] = useState();
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
//function for onhover signer name change background color
|
||||
const inputRef = useRef(null);
|
||||
const onHoverStyle = (ind, blockColor) => {
|
||||
const style = {
|
||||
background: blockColor ? blockColor : color[ind % color.length],
|
||||
padding: "10px",
|
||||
marginTop: "2px",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
borderBottom: "1px solid #e3e1e1",
|
||||
alignItems: "center"
|
||||
};
|
||||
return style;
|
||||
};
|
||||
//function for onhover signer name remove background color
|
||||
const nonHoverStyle = (ind) => {
|
||||
const style = {
|
||||
padding: "10px",
|
||||
marginTop: "2px",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
borderBottom: "1px solid #e3e1e1",
|
||||
alignItems: "center"
|
||||
};
|
||||
return style;
|
||||
};
|
||||
|
||||
const getFirstLetter = (name) => {
|
||||
const firstLetter = name?.charAt(0);
|
||||
return firstLetter;
|
||||
};
|
||||
|
||||
const darkenColor = (color, factor) => {
|
||||
// Remove '#' from the color code and parse it to get RGB values
|
||||
const hex = color.replace("#", "");
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
|
||||
// Darken the color by reducing each RGB component
|
||||
const darkerR = Math.floor(r * (1 - factor));
|
||||
const darkerG = Math.floor(g * (1 - factor));
|
||||
const darkerB = Math.floor(b * (1 - factor));
|
||||
|
||||
// Convert the darkened RGB components back to hex
|
||||
return `#${((darkerR << 16) | (darkerG << 8) | darkerB)
|
||||
.toString(16)
|
||||
.padStart(6, "0")}`;
|
||||
};
|
||||
|
||||
const isWidgetExist = (Id) => {
|
||||
return signerPos.some((x) => x.Id === Id);
|
||||
};
|
||||
|
||||
function SignerListPlace(props) {
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
@@ -111,150 +14,15 @@ function SignerListPlace({
|
||||
>
|
||||
<span className="signedStyle">Recipients</span>
|
||||
</div>
|
||||
|
||||
<div className="signerList">
|
||||
<>
|
||||
{signersdata.length > 0 &&
|
||||
signersdata.map((obj, ind) => {
|
||||
return (
|
||||
<div
|
||||
data-tut="reactourFirst"
|
||||
onMouseEnter={() => setIsHover(ind)}
|
||||
onMouseLeave={() => setIsHover(null)}
|
||||
key={ind}
|
||||
style={
|
||||
isHover === ind || isSelectListId === ind
|
||||
? onHoverStyle(ind, obj.blockColor)
|
||||
: nonHoverStyle(ind)
|
||||
}
|
||||
onClick={() => {
|
||||
setSignerObjId(obj?.objectId);
|
||||
setIsSelectId(ind);
|
||||
setContractName(obj?.className);
|
||||
setUniqueId(obj.Id);
|
||||
setRoleName(obj.Role);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="signerStyle"
|
||||
style={{
|
||||
background: obj.blockColor
|
||||
? darkenColor(obj.blockColor, 0.4)
|
||||
: nameColor[ind % nameColor.length],
|
||||
width: 30,
|
||||
height: 30,
|
||||
display: "flex",
|
||||
borderRadius: 30 / 2,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginRight: "12px"
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
textTransform: "uppercase"
|
||||
}}
|
||||
>
|
||||
{isWidgetExist(obj.Id) ? (
|
||||
<i className="fa-solid fa-check"></i>
|
||||
) : (
|
||||
<>
|
||||
{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"
|
||||
style={{ cursor: "default" }}
|
||||
>
|
||||
{obj.Name}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
className="userName"
|
||||
onClick={() => {
|
||||
setIsEdit({ [obj.Id]: true });
|
||||
setRoleName(obj.Role);
|
||||
}}
|
||||
>
|
||||
{isEdit?.[obj.Id] && handleRoleChange ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
width: "inherit"
|
||||
}}
|
||||
value={obj.Role}
|
||||
onChange={(e) => handleRoleChange(e, obj.Id)}
|
||||
onBlur={() => {
|
||||
setIsEdit({});
|
||||
handleOnBlur(obj.Role, obj.Id);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
inputRef.current.blur();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
obj.Role
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{obj.Email && (
|
||||
<span
|
||||
className="useEmail"
|
||||
style={{ cursor: "default" }}
|
||||
>
|
||||
{obj.Email}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{handleDeleteUser && (
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteUser(obj.Id);
|
||||
}}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<i className="fa-regular fa-trash-can"></i>
|
||||
</div>
|
||||
)}
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
<RecipientList {...props} />
|
||||
</div>
|
||||
{handleAddSigner && (
|
||||
<div data-tut="reactourAddbtn" className="addSignerBtn" onClick={() => handleAddSigner()}>
|
||||
{props.handleAddSigner && (
|
||||
<div
|
||||
data-tut="reactourAddbtn"
|
||||
className="addSignerBtn"
|
||||
onClick={() => props.handleAddSigner()}
|
||||
>
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
<span style={{ marginLeft: 2 }}>Add role</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user