mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-22 15:42:31 +02:00
Merge pull request #294 from OpenSignLabs/feat_template
fix: minor template issues, resize issue in mobile, change recipient list Ui in mobile
This commit is contained in:
prafull-opensignlabs
@@ -327,21 +327,13 @@ const TemplatePlaceholder = () => {
|
||||
|
||||
//function for setting position after drop signature button over pdf
|
||||
const addPositionOfSignature = (item, monitor) => {
|
||||
if (isMobile) {
|
||||
if (selectedEmail) {
|
||||
getSignerPos(item, monitor);
|
||||
} else {
|
||||
setIsShowEmail(true);
|
||||
}
|
||||
} else {
|
||||
getSignerPos(item, monitor);
|
||||
}
|
||||
};
|
||||
|
||||
// `getSignerPos` is used to get placeholder position when user place it and save it in array
|
||||
const getSignerPos = (item, monitor) => {
|
||||
const singer = signersdata.find((x) => x.Id === uniqueId);
|
||||
if (singer) {
|
||||
const signer = signersdata.find((x) => x.Id === uniqueId);
|
||||
if (signer) {
|
||||
const posZIndex = zIndex + 1;
|
||||
setZIndex(posZIndex);
|
||||
const newWidth = containerWH.width;
|
||||
@@ -709,8 +701,7 @@ const TemplatePlaceholder = () => {
|
||||
}
|
||||
};
|
||||
const handleSaveTemplate = async () => {
|
||||
const singer = signersdata.find((x) => x.Id === uniqueId);
|
||||
if (singer) {
|
||||
if (signersdata?.length) {
|
||||
const loadObj = {
|
||||
isLoad: true,
|
||||
message: "This might take some time"
|
||||
@@ -899,12 +890,14 @@ const TemplatePlaceholder = () => {
|
||||
const updatePlaceholderUser = signerPos
|
||||
.filter((x) => x.Id !== Id)
|
||||
.map((x, i) => ({ ...x, blockColor: color[i] }));
|
||||
// console.log("removePlaceholderUser ", removePlaceholderUser)
|
||||
|
||||
const index = signersdata.findIndex((x)=> x.Id === Id)
|
||||
setUniqueId(updateSigner[index]?.Id ||"");
|
||||
// setIsSelectId(index === -1 ? 0: index);
|
||||
setIsSelectId(0);
|
||||
if(index === signersdata.length - 1){
|
||||
setUniqueId(updateSigner[updateSigner.length - 1]?.Id ||"");
|
||||
setIsSelectId(0);
|
||||
}else{
|
||||
setUniqueId(updateSigner[index]?.Id ||"");
|
||||
setIsSelectId(index);
|
||||
}
|
||||
|
||||
setSignerPos(updatePlaceholderUser);
|
||||
setIsMailSend(false);
|
||||
@@ -1205,6 +1198,9 @@ const TemplatePlaceholder = () => {
|
||||
handleAddSigner={handleAddSigner}
|
||||
setUniqueId={setUniqueId}
|
||||
setRoleName={setRoleName}
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
handleRoleChange={handleRoleChange}
|
||||
handleOnBlur={handleOnBlur}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -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>
|
||||
) : (
|
||||
|
||||
@@ -16,8 +16,12 @@ function PlaceholderBorder(props) {
|
||||
// height: props.pos.Height
|
||||
// ? props.pos.Height + getResizeBorderExtraWidth
|
||||
// : 60 + getResizeBorderExtraWidth,
|
||||
width: props?.posWidth(props.pos) + getResizeBorderExtraWidth,
|
||||
height: props?.posHeight(props.pos) + getResizeBorderExtraWidth,
|
||||
width:
|
||||
props?.posWidth(props.pos, props?.isSignYourself) +
|
||||
getResizeBorderExtraWidth,
|
||||
height:
|
||||
props?.posHeight(props.pos, props?.isSignYourself) +
|
||||
getResizeBorderExtraWidth,
|
||||
borderWidth: "0.2px",
|
||||
overflow: "hidden"
|
||||
}}
|
||||
|
||||
@@ -63,116 +63,134 @@ function RenderPdf({
|
||||
const isGuestSigner = localStorage.getItem("isGuestSigner");
|
||||
|
||||
// handle signature block width and height according to screen
|
||||
const posWidth = (pos) => {
|
||||
const posWidth = (pos, signYourself) => {
|
||||
const defaultWidth = 150;
|
||||
const posWidth = pos.Width ? pos.Width : defaultWidth;
|
||||
let width;
|
||||
if (isMobile) {
|
||||
if (!pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
} else {
|
||||
width = (posWidth || defaultWidth) / scale;
|
||||
return width;
|
||||
}
|
||||
} else {
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
}
|
||||
if (signYourself) {
|
||||
width = posWidth;
|
||||
return width;
|
||||
} else {
|
||||
if (pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
if (isMobile) {
|
||||
if (!pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
} else {
|
||||
width = (posWidth || defaultWidth) / scale;
|
||||
return width;
|
||||
}
|
||||
} else {
|
||||
width = (posWidth || defaultWidth) * pos.scale;
|
||||
width = posWidth;
|
||||
return width;
|
||||
}
|
||||
} else {
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
if (pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
} else {
|
||||
width = (posWidth || defaultWidth) * pos.scale;
|
||||
return width;
|
||||
}
|
||||
} else {
|
||||
width = posWidth ? posWidth : defaultWidth;
|
||||
return width;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const posHeight = (pos) => {
|
||||
const posHeight = (pos, signYourself) => {
|
||||
let height;
|
||||
const posHeight = pos.Height;
|
||||
const defaultHeight = 60;
|
||||
if (isMobile) {
|
||||
if (!pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
} else {
|
||||
height = (posHeight || defaultHeight) / scale;
|
||||
return height;
|
||||
}
|
||||
} else {
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
}
|
||||
if (signYourself) {
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
} else {
|
||||
if (pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
if (isMobile) {
|
||||
if (!pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
} else {
|
||||
height = (posHeight || defaultHeight) / scale;
|
||||
return height;
|
||||
}
|
||||
} else {
|
||||
height = (posHeight || defaultHeight) * pos.scale;
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
}
|
||||
} else {
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
if (pos.isMobile) {
|
||||
if (pos.IsResize) {
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
} else {
|
||||
height = (posHeight || defaultHeight) * pos.scale;
|
||||
return height;
|
||||
}
|
||||
} else {
|
||||
height = posHeight ? posHeight : defaultHeight;
|
||||
return height;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const xPos = (pos) => {
|
||||
const xPos = (pos, signYourself) => {
|
||||
const resizePos = pos.xPosition;
|
||||
//checking both condition mobile and desktop view
|
||||
if (isMobile) {
|
||||
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
|
||||
if (!pos.isMobile) {
|
||||
return resizePos / scale;
|
||||
}
|
||||
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
|
||||
else {
|
||||
return resizePos * (pos.scale / scale);
|
||||
}
|
||||
if (signYourself) {
|
||||
return resizePos;
|
||||
} else {
|
||||
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
|
||||
//checking both condition mobile and desktop view
|
||||
if (isMobile) {
|
||||
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
|
||||
if (!pos.isMobile) {
|
||||
return resizePos / scale;
|
||||
}
|
||||
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
|
||||
else {
|
||||
return resizePos * (pos.scale / scale);
|
||||
}
|
||||
} else {
|
||||
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
|
||||
|
||||
if (pos.isMobile) {
|
||||
return pos.scale && resizePos * pos.scale;
|
||||
}
|
||||
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
|
||||
else {
|
||||
return resizePos;
|
||||
if (pos.isMobile) {
|
||||
return pos.scale && resizePos * pos.scale;
|
||||
}
|
||||
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
|
||||
else {
|
||||
return resizePos;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const yPos = (pos) => {
|
||||
const yPos = (pos, signYourself) => {
|
||||
const resizePos = pos.yPosition;
|
||||
//checking both condition mobile and desktop view
|
||||
if (isMobile) {
|
||||
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
|
||||
if (!pos.isMobile) {
|
||||
return resizePos / scale;
|
||||
}
|
||||
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
|
||||
else {
|
||||
return resizePos * (pos.scale / scale);
|
||||
}
|
||||
if (signYourself) {
|
||||
return resizePos;
|
||||
} else {
|
||||
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
|
||||
//checking both condition mobile and desktop view
|
||||
if (isMobile) {
|
||||
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
|
||||
if (!pos.isMobile) {
|
||||
return resizePos / scale;
|
||||
}
|
||||
//pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale
|
||||
else {
|
||||
return resizePos * (pos.scale / scale);
|
||||
}
|
||||
} else {
|
||||
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
|
||||
|
||||
if (pos.isMobile) {
|
||||
return pos.scale && resizePos * pos.scale;
|
||||
}
|
||||
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
|
||||
else {
|
||||
return resizePos;
|
||||
if (pos.isMobile) {
|
||||
return pos.scale && resizePos * pos.scale;
|
||||
}
|
||||
//else placeholder save from desktop(bigscreen) and show in desktop(bigscreen)
|
||||
else {
|
||||
return resizePos;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -225,11 +243,19 @@ function RenderPdf({
|
||||
width: posWidth(pos),
|
||||
height: posHeight(pos)
|
||||
}}
|
||||
onClick={() => {
|
||||
if (data.signerObjId === signerObjectId) {
|
||||
setIsSignPad(true);
|
||||
setSignKey(pos.key);
|
||||
setIsStamp(pos.isStamp);
|
||||
}
|
||||
}}
|
||||
onResize={(e, direction, ref, delta, position) => {
|
||||
e.stopPropagation();
|
||||
handleImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
data.signerObjId,
|
||||
data.Id,
|
||||
position,
|
||||
signerPos,
|
||||
pageNumber,
|
||||
@@ -246,13 +272,6 @@ function RenderPdf({
|
||||
x: xPos(pos),
|
||||
y: yPos(pos)
|
||||
}}
|
||||
onClick={() => {
|
||||
if (data.signerObjId === signerObjectId) {
|
||||
setIsSignPad(true);
|
||||
setSignKey(pos.key);
|
||||
setIsStamp(pos.isStamp);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div style={{ pointerEvents: "none" }}>
|
||||
{data.signerObjId === signerObjectId && (
|
||||
@@ -366,12 +385,19 @@ function RenderPdf({
|
||||
(sign) => sign.objectId === signerId
|
||||
);
|
||||
if (checkSign.length > 0) {
|
||||
return <p style={{ color: "black", fontSize: 11 }}> {checkSign[0].Name} </p>;
|
||||
return (
|
||||
<>
|
||||
<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 (
|
||||
@@ -434,13 +460,9 @@ function RenderPdf({
|
||||
handleSignYourselfImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
direction,
|
||||
position,
|
||||
xyPostion,
|
||||
index,
|
||||
setXyPostion,
|
||||
pdfOriginalWidth,
|
||||
containerWH
|
||||
setXyPostion
|
||||
);
|
||||
}}
|
||||
size={{
|
||||
@@ -450,8 +472,6 @@ function RenderPdf({
|
||||
lockAspectRatio={
|
||||
pos.Width ? pos.Width / pos.Height : 2.5
|
||||
}
|
||||
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
|
||||
//else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
|
||||
default={{
|
||||
x: xPos(pos),
|
||||
y: yPos(pos)
|
||||
@@ -487,7 +507,11 @@ function RenderPdf({
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp ? "stamp" : "signature"}
|
||||
{pos.isStamp ? (
|
||||
<div>stamp</div>
|
||||
) : (
|
||||
<div>signature</div>
|
||||
)}
|
||||
{handleUserName(
|
||||
data.signerObjId,
|
||||
data.Role
|
||||
@@ -520,6 +544,7 @@ function RenderPdf({
|
||||
placeData.pos.map((pos) => {
|
||||
return (
|
||||
<Rnd
|
||||
bounds="parent"
|
||||
enableResizing={{
|
||||
top: false,
|
||||
right: false,
|
||||
@@ -586,19 +611,23 @@ function RenderPdf({
|
||||
handleImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
data.signerObjId,
|
||||
data.Id,
|
||||
position,
|
||||
signerPos,
|
||||
pageNumber,
|
||||
setSignerPos,
|
||||
pdfOriginalWidth,
|
||||
containerWH,
|
||||
false
|
||||
true
|
||||
);
|
||||
}}
|
||||
>
|
||||
<BorderResize right={-12} top={-11} />
|
||||
<PlaceholderBorder pos={pos} posWidth={posWidth} posHeight={posHeight}/>
|
||||
<PlaceholderBorder
|
||||
pos={pos}
|
||||
posWidth={posWidth}
|
||||
posHeight={posHeight}
|
||||
/>
|
||||
<div
|
||||
onTouchEnd={() => {
|
||||
const dataNewPlace = addZIndex(
|
||||
@@ -618,21 +647,21 @@ function RenderPdf({
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className="fa-regular fa-user signUserIcon"
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
handleLinkUser(data.Id);
|
||||
setUniqueId(data.Id);
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleLinkUser(data.Id);
|
||||
setUniqueId(data.Id);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
className="fa-regular fa-user signUserIcon"
|
||||
onTouchEnd={(e) => {
|
||||
e.stopPropagation();
|
||||
handleLinkUser(data.Id);
|
||||
setUniqueId(data.Id);
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleLinkUser(data.Id);
|
||||
setUniqueId(data.Id);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
<i
|
||||
className="fa-regular fa-copy signCopy"
|
||||
onTouchEnd={(e) => {
|
||||
@@ -640,14 +669,14 @@ function RenderPdf({
|
||||
setIsPageCopy(true);
|
||||
setSignKey(pos.key);
|
||||
setSignerObjId(data.signerObjId);
|
||||
setUniqueId(data.Id)
|
||||
setUniqueId(data.Id);
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsPageCopy(true);
|
||||
setSignKey(pos.key);
|
||||
setSignerObjId(data.signerObjId);
|
||||
setUniqueId(data.Id)
|
||||
setUniqueId(data.Id);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
@@ -684,9 +713,11 @@ function RenderPdf({
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp
|
||||
? "stamp"
|
||||
: "signature"}
|
||||
{pos.isStamp ? (
|
||||
<div>stamp</div>
|
||||
) : (
|
||||
<div>signature</div>
|
||||
)}
|
||||
{handleUserName(
|
||||
data.signerObjId,
|
||||
data.Role
|
||||
@@ -735,12 +766,12 @@ function RenderPdf({
|
||||
background: "#daebe0"
|
||||
}}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
height: pos.Height ? pos.Height : 60
|
||||
width: posWidth(pos, true),
|
||||
height: posHeight(pos, true)
|
||||
}}
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
y: pos.yPosition
|
||||
x: xPos(pos, true),
|
||||
y: yPos(pos, true)
|
||||
}}
|
||||
onDrag={() => handleTabDrag(pos.key)}
|
||||
onDragStop={handleStop}
|
||||
@@ -754,29 +785,28 @@ 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 pos={pos} posWidth={posWidth} posHeight={posHeight}/>
|
||||
<PlaceholderBorder
|
||||
pos={pos}
|
||||
posWidth={posWidth}
|
||||
isSignYourself={true}
|
||||
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(() => {
|
||||
@@ -839,10 +869,6 @@ function RenderPdf({
|
||||
}}
|
||||
>
|
||||
{pos.isStamp ? "stamp" : "signature"}
|
||||
{handleUserName(
|
||||
data.signerObjId,
|
||||
data.Role
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -950,13 +976,9 @@ function RenderPdf({
|
||||
handleSignYourselfImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
direction,
|
||||
position,
|
||||
xyPostion,
|
||||
index,
|
||||
setXyPostion,
|
||||
pdfOriginalWidth,
|
||||
containerWH
|
||||
setXyPostion
|
||||
);
|
||||
}}
|
||||
key={pos.key}
|
||||
@@ -1015,7 +1037,11 @@ function RenderPdf({
|
||||
marginTop: "0px"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp ? "stamp" : "signature"}
|
||||
{pos.isStamp ? (
|
||||
<div>stamp</div>
|
||||
) : (
|
||||
<div>signature</div>
|
||||
)}
|
||||
{handleUserName(
|
||||
data.signerObjId,
|
||||
data.Role
|
||||
@@ -1085,8 +1111,8 @@ function RenderPdf({
|
||||
className="signYourselfBlock"
|
||||
onDrag={() => handleTabDrag(pos.key)}
|
||||
size={{
|
||||
width: pos.Width ? pos.Width : 150,
|
||||
height: pos.Height ? pos.Height : 60
|
||||
width: posWidth(pos),
|
||||
height: posHeight(pos)
|
||||
}}
|
||||
lockAspectRatio={
|
||||
pos.Width
|
||||
@@ -1095,17 +1121,21 @@ function RenderPdf({
|
||||
}
|
||||
onDragStop={
|
||||
(event, dragElement) =>
|
||||
handleStop(
|
||||
event,
|
||||
dragElement,
|
||||
data.Id,
|
||||
pos.key
|
||||
)
|
||||
// data.signerObjId,
|
||||
handleStop(
|
||||
event,
|
||||
dragElement,
|
||||
data.Id,
|
||||
pos.key
|
||||
)
|
||||
// data.signerObjId,
|
||||
}
|
||||
// default={{
|
||||
// x: pos.xPosition,
|
||||
// y: pos.yPosition
|
||||
// }}
|
||||
default={{
|
||||
x: pos.xPosition,
|
||||
y: pos.yPosition
|
||||
x: xPos(pos),
|
||||
y: yPos(pos)
|
||||
}}
|
||||
onResizeStart={() => {
|
||||
setIsResize(true);
|
||||
@@ -1120,11 +1150,11 @@ function RenderPdf({
|
||||
delta,
|
||||
position
|
||||
) => {
|
||||
e.stopPropagation()
|
||||
e.stopPropagation();
|
||||
handleImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
data.Id,//data.signerObjId,
|
||||
data.Id, //data.signerObjId,
|
||||
position,
|
||||
signerPos,
|
||||
pageNumber,
|
||||
@@ -1136,9 +1166,13 @@ function RenderPdf({
|
||||
}}
|
||||
>
|
||||
<BorderResize right={-12} top={-11} />
|
||||
<PlaceholderBorder pos={pos} posWidth={posWidth} posHeight={posHeight}/>
|
||||
<PlaceholderBorder
|
||||
pos={pos}
|
||||
posWidth={posWidth}
|
||||
posHeight={posHeight}
|
||||
/>
|
||||
<div>
|
||||
<i
|
||||
<i
|
||||
className="fa-regular fa-user signUserIcon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -1146,7 +1180,7 @@ function RenderPdf({
|
||||
setUniqueId(data.Id);
|
||||
}}
|
||||
style={{
|
||||
color: "#188ae2"
|
||||
color: "#188ae2"
|
||||
}}
|
||||
></i>
|
||||
<i
|
||||
@@ -1155,7 +1189,7 @@ function RenderPdf({
|
||||
e.stopPropagation();
|
||||
setIsPageCopy(true);
|
||||
setSignKey(pos.key);
|
||||
setUniqueId(data.Id)
|
||||
setUniqueId(data.Id);
|
||||
setSignerObjId(
|
||||
data.signerObjId
|
||||
);
|
||||
@@ -1186,9 +1220,11 @@ function RenderPdf({
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
{pos.isStamp
|
||||
? "stamp"
|
||||
: "signature"}
|
||||
{pos.isStamp ? (
|
||||
<div>stamp</div>
|
||||
) : (
|
||||
<div>signature</div>
|
||||
)}
|
||||
{handleUserName(
|
||||
data.signerObjId,
|
||||
data.Role
|
||||
@@ -1245,25 +1281,6 @@ function RenderPdf({
|
||||
x: pos.xPosition,
|
||||
y: pos.yPosition
|
||||
}}
|
||||
onResize={(
|
||||
e,
|
||||
direction,
|
||||
ref,
|
||||
delta,
|
||||
position
|
||||
) => {
|
||||
handleSignYourselfImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
direction,
|
||||
position,
|
||||
xyPostion,
|
||||
index,
|
||||
setXyPostion,
|
||||
pdfOriginalWidth,
|
||||
containerWH
|
||||
);
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!isDragging) {
|
||||
setIsSignPad(true);
|
||||
@@ -1271,9 +1288,29 @@ function RenderPdf({
|
||||
setIsStamp(pos.isStamp);
|
||||
}
|
||||
}}
|
||||
onResize={(
|
||||
e,
|
||||
direction,
|
||||
ref,
|
||||
delta,
|
||||
position
|
||||
) => {
|
||||
e.stopPropagation();
|
||||
handleSignYourselfImageResize(
|
||||
ref,
|
||||
pos.key,
|
||||
xyPostion,
|
||||
index,
|
||||
setXyPostion
|
||||
);
|
||||
}}
|
||||
>
|
||||
<BorderResize right={-12} top={-11} />
|
||||
<PlaceholderBorder pos={pos} posWidth={posWidth} posHeight={posHeight}/>
|
||||
<PlaceholderBorder
|
||||
pos={pos}
|
||||
posWidth={posWidth}
|
||||
posHeight={posHeight}
|
||||
/>
|
||||
<PlaceholderDesign pos={pos} />
|
||||
</Rnd>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,205 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import "../css/signerListPlace.css";
|
||||
import { darkenColor, getFirstLetter } from "../utils/Utils";
|
||||
|
||||
const RecipientList = (props) => {
|
||||
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 isWidgetExist = (Id) => {
|
||||
return props.signerPos.some((x) => x.Id === Id);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{props.signersdata.length > 0 &&
|
||||
props.signersdata.map((obj, ind) => {
|
||||
return (
|
||||
<div
|
||||
data-tut="reactourFirst"
|
||||
onMouseEnter={() => setIsHover(ind)}
|
||||
onMouseLeave={() => setIsHover(null)}
|
||||
key={ind}
|
||||
style={
|
||||
isHover === ind || props.isSelectListId === ind
|
||||
? onHoverStyle(ind, obj.blockColor)
|
||||
: nonHoverStyle(ind)
|
||||
}
|
||||
onClick={() => {
|
||||
props.setSignerObjId(obj?.objectId);
|
||||
props.setIsSelectId(ind);
|
||||
props.setContractName(obj?.className);
|
||||
props.setUniqueId(obj.Id);
|
||||
props.setRoleName(obj.Role);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
width: "100%"
|
||||
}}
|
||||
>
|
||||
<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 });
|
||||
props.setRoleName(obj.Role);
|
||||
}}
|
||||
>
|
||||
{isEdit?.[obj.Id] && props.handleRoleChange ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
width: "inherit"
|
||||
}}
|
||||
value={obj.Role}
|
||||
onChange={(e) => props.handleRoleChange(e, obj.Id)}
|
||||
onBlur={() => {
|
||||
setIsEdit({});
|
||||
props.handleOnBlur(obj.Role, obj.Id);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
inputRef.current.blur();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
obj.Role
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{obj.Name && (
|
||||
<span className="useEmail" style={{ cursor: "default" }}>
|
||||
{obj.Role}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{props.handleDeleteUser && (
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
props.handleDeleteUser(obj.Id);
|
||||
}}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
<i className="fa-regular fa-trash-can"></i>
|
||||
</div>
|
||||
)}
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecipientList;
|
||||
@@ -61,7 +61,7 @@ const SelectSigners = (props) => {
|
||||
// console.log("userList ", res);
|
||||
setUserList(res);
|
||||
return await res.map((item) => ({
|
||||
label: item.Name,
|
||||
label: item.Email,
|
||||
value: item.objectId
|
||||
}));
|
||||
}
|
||||
|
||||
@@ -673,92 +673,91 @@ export const handleImageResize = (
|
||||
// (data) => data.signerObjId === signerId
|
||||
// );
|
||||
|
||||
const filterSignerPos = signerPos.filter(
|
||||
(data) => data.Id === signerId
|
||||
);
|
||||
const filterSignerPos = signerPos.filter((data) => data.Id === signerId);
|
||||
|
||||
if (filterSignerPos.length > 0) {
|
||||
const getPlaceHolder = filterSignerPos[0].placeHolder;
|
||||
const getPageNumer = getPlaceHolder.filter(
|
||||
(data) => data.pageNumber === pageNumber
|
||||
);
|
||||
if (getPageNumer.length > 0) {
|
||||
const getXYdata = getPageNumer[0].pos.filter(
|
||||
(data, ind) => data.key === key && data.Width && data.Height
|
||||
);
|
||||
if (getXYdata.length > 0) {
|
||||
const getXYdata = getPageNumer[0].pos;
|
||||
const getPosData = getXYdata;
|
||||
const addSignPos = getPosData.map((url, ind) => {
|
||||
if (url.key === key) {
|
||||
return {
|
||||
...url,
|
||||
Width: ref.offsetWidth,
|
||||
Height: ref.offsetHeight,
|
||||
IsResize: showResize ? true : false
|
||||
};
|
||||
}
|
||||
return url;
|
||||
});
|
||||
// const getXYdata = getPageNumer[0].pos.filter(
|
||||
// (data, ind) => data.key === key && data.Width && data.Height
|
||||
// );
|
||||
// if (getXYdata.length > 0) {
|
||||
// const getXYdata = getPageNumer[0].pos;
|
||||
// const getPosData = getXYdata;
|
||||
// const addSignPos = getPosData.map((url, ind) => {
|
||||
// if (url.key === key) {
|
||||
// return {
|
||||
// ...url,
|
||||
// Width: ref.offsetWidth,
|
||||
// Height: ref.offsetHeight,
|
||||
// IsResize: showResize ? true : false
|
||||
// };
|
||||
// }
|
||||
// return url;
|
||||
// });
|
||||
|
||||
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
|
||||
if (obj.pageNumber === pageNumber) {
|
||||
return { ...obj, pos: addSignPos };
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
// const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
|
||||
// if (obj.pageNumber === pageNumber) {
|
||||
// return { ...obj, pos: addSignPos };
|
||||
// }
|
||||
// return obj;
|
||||
// });
|
||||
|
||||
// const newUpdateSigner = signerPos.map((obj, ind) => {
|
||||
// if (obj.signerObjId === signerId) {
|
||||
// return { ...obj, placeHolder: newUpdateSignPos };
|
||||
// }
|
||||
// return obj;
|
||||
// });
|
||||
// // const newUpdateSigner = signerPos.map((obj, ind) => {
|
||||
// // if (obj.signerObjId === signerId) {
|
||||
// // return { ...obj, placeHolder: newUpdateSignPos };
|
||||
// // }
|
||||
// // return obj;
|
||||
// // });
|
||||
|
||||
const newUpdateSigner = signerPos.map((obj, ind) => {
|
||||
if (obj.Id === signerId) {
|
||||
return { ...obj, placeHolder: newUpdateSignPos };
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
setSignerPos(newUpdateSigner);
|
||||
} else {
|
||||
const getXYdata = getPageNumer[0].pos;
|
||||
const getPosData = getXYdata;
|
||||
const addSignPos = getPosData.map((url, ind) => {
|
||||
if (url.key === key) {
|
||||
return {
|
||||
...url,
|
||||
Width: ref.offsetWidth,
|
||||
Height: ref.offsetHeight,
|
||||
IsResize: showResize ? true : false
|
||||
};
|
||||
}
|
||||
return url;
|
||||
});
|
||||
// const newUpdateSigner = signerPos.map((obj, ind) => {
|
||||
// if (obj.Id === signerId) {
|
||||
// return { ...obj, placeHolder: newUpdateSignPos };
|
||||
// }
|
||||
// return obj;
|
||||
// });
|
||||
// setSignerPos(newUpdateSigner);
|
||||
// } else {
|
||||
const getXYdata = getPageNumer[0].pos;
|
||||
const getPosData = getXYdata;
|
||||
const addSignPos = getPosData.map((url, ind) => {
|
||||
if (url.key === key) {
|
||||
return {
|
||||
...url,
|
||||
Width: ref.offsetWidth,
|
||||
Height: ref.offsetHeight,
|
||||
IsResize: showResize ? true : false
|
||||
};
|
||||
}
|
||||
return url;
|
||||
});
|
||||
|
||||
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
|
||||
if (obj.pageNumber === pageNumber) {
|
||||
return { ...obj, pos: addSignPos };
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
|
||||
if (obj.pageNumber === pageNumber) {
|
||||
return { ...obj, pos: addSignPos };
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
|
||||
// const newUpdateSigner = signerPos.map((obj, ind) => {
|
||||
// if (obj.signerObjId === signerId) {
|
||||
// return { ...obj, placeHolder: newUpdateSignPos };
|
||||
// }
|
||||
// return obj;
|
||||
// });
|
||||
const newUpdateSigner = signerPos.map((obj, ind) => {
|
||||
if (obj.Id === signerId) {
|
||||
return { ...obj, placeHolder: newUpdateSignPos };
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
// const newUpdateSigner = signerPos.map((obj, ind) => {
|
||||
// if (obj.signerObjId === signerId) {
|
||||
// return { ...obj, placeHolder: newUpdateSignPos };
|
||||
// }
|
||||
// return obj;
|
||||
// });
|
||||
const newUpdateSigner = signerPos.map((obj, ind) => {
|
||||
if (obj.Id === signerId) {
|
||||
return { ...obj, placeHolder: newUpdateSignPos };
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
|
||||
setSignerPos(newUpdateSigner);
|
||||
}
|
||||
setSignerPos(newUpdateSigner);
|
||||
}
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
@@ -987,20 +986,20 @@ export const createDocument = async (template, placeholders, signerData) => {
|
||||
if (template && template.length > 0) {
|
||||
const Doc = template[0];
|
||||
|
||||
let placeholdersArr = []
|
||||
if(placeholders?.length > 0 ){
|
||||
placeholdersArr= placeholders
|
||||
let placeholdersArr = [];
|
||||
if (placeholders?.length > 0) {
|
||||
placeholdersArr = placeholders;
|
||||
}
|
||||
let signers = []
|
||||
if(signerData?.length > 0){
|
||||
signerData.forEach((x) => {
|
||||
if(x.objectId){
|
||||
const obj = {
|
||||
let signers = [];
|
||||
if (signerData?.length > 0) {
|
||||
signerData.forEach((x) => {
|
||||
if (x.objectId) {
|
||||
const obj = {
|
||||
__type: "Pointer",
|
||||
className: "contracts_Contactbook",
|
||||
objectId: x.objectId
|
||||
};
|
||||
signers.push(obj)
|
||||
signers.push(obj);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1047,3 +1046,29 @@ export const createDocument = async (template, placeholders, signerData) => {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const getFirstLetter = (name) => {
|
||||
const firstLetter = name?.charAt(0);
|
||||
return firstLetter;
|
||||
};
|
||||
|
||||
|
||||
export 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")}`;
|
||||
};
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user