WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-30 11:49:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: change default value of send in order,dragging functionality to change sequence of signers list in mobile

Browse Source
This commit is contained in:
RaktimaNXG
2024-03-21 16:08:07 +05:30
parent af6cb4c17d
commit 365b074f62
8 changed files with 126 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/assets/images/dragIcon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 B

apps/OpenSign/src/components/pdf/RecipientList.js
+33 -64
View File
@@ -1,36 +1,14 @@
import React, { useRef, useState } from "react";
import { darkenColor, getFirstLetter } from "../../constant/Utils";
import {
color,
darkenColor,
getFirstLetter,
isMobile,
nameColor
} from "../../constant/Utils";
import dragIcon from "../../assets/images/dragIcon.png";
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
@@ -43,8 +21,7 @@ const RecipientList = (props) => {
display: "flex",
flexDirection: "row",
borderBottom: "1px solid #e3e1e1",
alignItems: "center",
cursor: props.sendInOrder && "move"
alignItems: "center"
};
return style;
};
@@ -56,8 +33,7 @@ const RecipientList = (props) => {
display: "flex",
flexDirection: "row",
borderBottom: "1px solid #e3e1e1",
alignItems: "center",
cursor: props.sendInOrder && "move"
alignItems: "center"
};
return style;
};
@@ -100,6 +76,7 @@ const RecipientList = (props) => {
props.setContractName(remainingItems[index]?.className || "");
props.setUniqueId(remainingItems[index]?.Id);
props.setRoleName(remainingItems[index]?.Role);
props.setBlockColor(remainingItems[index]?.blockColor);
};
return (
<>
@@ -117,6 +94,7 @@ const RecipientList = (props) => {
data-tut="reactourFirst"
onMouseEnter={() => setIsHover(ind)}
onMouseLeave={() => setIsHover(null)}
className={props.sendInOrder && "dragCursor"}
style={
isHover === ind || props.isSelectListId === ind
? onHoverStyle(ind, obj?.blockColor)
@@ -128,6 +106,7 @@ const RecipientList = (props) => {
props.setContractName(obj?.className || "");
props.setUniqueId(obj.Id);
props.setRoleName(obj.Role);
props.setBlockColor(obj?.blockColor);
if (props.handleModal) {
props.handleModal();
}
@@ -142,7 +121,6 @@ const RecipientList = (props) => {
}}
>
<div
className="signerStyle"
style={{
background: obj?.blockColor
? darkenColor(obj?.blockColor, 0.4)
@@ -153,18 +131,17 @@ const RecipientList = (props) => {
borderRadius: 30 / 2,
justifyContent: "center",
alignItems: "center",
marginRight: "12px",
cursor: props.sendInOrder && "move"
marginRight: "12px"
}}
>
<span
className={props.sendInOrder && "dragCursor"}
style={{
fontSize: "12px",
textAlign: "center",
fontWeight: "bold",
color: "white",
textTransform: "uppercase",
cursor: props.sendInOrder && "move"
textTransform: "uppercase"
}}
>
{isWidgetExist(obj.Id) ? (
@@ -182,21 +159,16 @@ const RecipientList = (props) => {
style={{
display: "flex",
flexDirection: obj.Name ? "column" : "row",
alignItems: "center",
cursor: props.sendInOrder && "move"
alignItems: "center"
}}
>
{obj.Name ? (
<span
className="userName"
style={{ cursor: props.sendInOrder ? "move" : "default" }}
>
{obj.Name}
</span>
<span className={"userName"}>{obj.Name}</span>
) : (
<>
<span
className="userName"
style={{ cursor: "pointer" }}
onClick={() => {
setIsEdit({ [obj.Id]: true });
props.setRoleName(obj.Role);
@@ -207,7 +179,8 @@ const RecipientList = (props) => {
ref={inputRef}
style={{
backgroundColor: "transparent",
width: "inherit"
width: "inherit",
padding: "3px"
}}
value={obj.Role}
onChange={(e) => props.handleRoleChange(e, obj.Id)}
@@ -228,32 +201,28 @@ const RecipientList = (props) => {
</span>
</>
)}
{obj.Name && (
<span
className="useEmail"
style={{ cursor: props.sendInOrder ? "move" : "default" }}
>
{obj.Role}
</span>
)}
{obj.Name && <span className={"useEmail"}>{obj.Role}</span>}
</div>
</div>
{props.handleDeleteUser ? (
{isMobile && props.sendInOrder && (
<div>
<img
alt="loader img"
src={dragIcon}
style={{ width: 20, height: 20 }}
/>
</div>
)}
{props.handleDeleteUser && (
<div
onClick={(e) => {
e.stopPropagation();
props.handleDeleteUser(obj.Id);
}}
style={{ cursor: "pointer" }}
style={{ cursor: "pointer", marginLeft: "5px" }}
>
<i className="fa-regular fa-trash-can"></i>
</div>
) : (
props.sendInOrder && (
<div style={{ cursor: "pointer" }}>
<i className="fa-solid fa-ellipsis-vertical"></i>
</div>
)
)}
<hr />
</div>
apps/OpenSign/src/components/pdf/WidgetComponent.js
+31 -21
View File
@@ -34,8 +34,11 @@ function WidgetComponent({
handleRoleChange,
handleOnBlur,
title,
isTemplateFlow
setSignersData,
sendInOrder,
isTemplateFlow,
setBlockColor,
blockColor
}) {
const [isSignersModal, setIsSignersModal] = useState(false);
@@ -239,8 +242,8 @@ function WidgetComponent({
const updateWidgets = isSignYourself
? filterWidgets
: isTemplateFlow
? textWidgetData
: widget;
? textWidgetData
: widget;
return (
<>
@@ -256,9 +259,11 @@ function WidgetComponent({
<div
data-tut={dataTut}
style={{
background: isSelectListId
? color[isSelectListId % color.length]
: color[0],
background: blockColor
? blockColor
: isSelectListId
? color[isSelectListId % color.length]
: color[0],
padding: "10px 20px",
display: "flex",
alignItems: "center",
@@ -386,20 +391,25 @@ function WidgetComponent({
handleClose={handleModal}
>
{signersdata.length > 0 ? (
<RecipientList
signerPos={signerPos}
signersdata={signersdata}
isSelectListId={isSelectListId}
setSignerObjId={setSignerObjId}
setIsSelectId={setIsSelectId}
setContractName={setContractName}
setUniqueId={setUniqueId}
setRoleName={setRoleName}
handleDeleteUser={handleDeleteUser}
handleRoleChange={handleRoleChange}
handleOnBlur={handleOnBlur}
handleModal={handleModal}
/>
<div style={{ maxHeight: "600px", overflow: "auto" }}>
<RecipientList
signerPos={signerPos}
signersdata={signersdata}
isSelectListId={isSelectListId}
setSignerObjId={setSignerObjId}
setIsSelectId={setIsSelectId}
setContractName={setContractName}
setUniqueId={setUniqueId}
setRoleName={setRoleName}
handleDeleteUser={handleDeleteUser}
handleRoleChange={handleRoleChange}
handleOnBlur={handleOnBlur}
handleModal={handleModal}
sendInOrder={sendInOrder}
setSignersData={setSignersData}
setBlockColor={setBlockColor}
/>
</div>
) : (
<div
style={{
apps/OpenSign/src/constant/Utils.js
+29
View File
@@ -12,6 +12,35 @@ export const openInNewTab = (url) => {
window.open(url, "_blank", "noopener,noreferrer");
};
export const color = [
"#93a3db",
"#e6c3db",
"#c0e3bc",
"#bce3db",
"#b8ccdb",
"#ceb8db",
"#ffccff",
"#99ffcc",
"#cc99ff",
"#ffcc99",
"#66ccff",
"#ffffcc"
];
export const nameColor = [
"#304fbf",
"#7d5270",
"#5f825b",
"#578077",
"#576e80",
"#6d527d",
"#cc00cc",
"#006666",
"#cc00ff",
"#ff9900",
"#336699",
"#cc9900"
];
export const toDataUrl = (file) => {
return new Promise((resolve) => {
const reader = new FileReader();
apps/OpenSign/src/pages/Form.js
+2 -2
View File
@@ -167,7 +167,7 @@ const Forms = (props) => {
);
}
if (props.title !== "Sign Yourself") {
const isChecked = formData.SendinOrder === "true" ? true : false;
const isChecked = formData.SendinOrder === "false" ? false : true;
object.set("SendinOrder", isChecked);
}
object.set("URL", fileupload);
@@ -237,7 +237,7 @@ const Forms = (props) => {
Description: "",
Note: "Please review and sign this document",
TimeToCompleteDays: 15,
SendinOrder: "false"
SendinOrder: "true"
});
setFileUpload([]);
setpercentage(0);
apps/OpenSign/src/pages/PlaceHolderSign.js
+14 -16
View File
@@ -27,7 +27,8 @@ import {
addWidgetOptions,
textInputWidget,
textWidget,
radioButtonWidget
radioButtonWidget,
color
} from "../constant/Utils";
import RenderPdf from "../components/pdf/RenderPdf";
import { useNavigate } from "react-router-dom";
@@ -80,6 +81,7 @@ function PlaceHolderSign() {
const [zIndex, setZIndex] = useState(1);
const [signKey, setSignKey] = useState();
const [tempSignerId, setTempSignerId] = useState("");
const [blockColor, setBlockColor] = useState("");
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
@@ -106,20 +108,6 @@ function PlaceHolderSign() {
status: false,
message: ""
});
const color = [
"#93a3db",
"#e6c3db",
"#c0e3bc",
"#bce3db",
"#b8ccdb",
"#ceb8db",
"#ffccff",
"#99ffcc",
"#cc99ff",
"#ffcc99",
"#66ccff",
"#ffffcc"
];
const isMobile = window.innerWidth < 767;
const [, drop] = useDrop({
@@ -276,14 +264,17 @@ function PlaceHolderSign() {
});
setSignersData(updatedSigners);
setUniqueId(updatedSigners[0].Id);
setBlockColor(updatedSigners[0].blockColor);
} else {
const updatedSigners = documentData[0].Signers.map((x, index) => ({
...x,
Id: randomId(),
Role: "User " + (index + 1)
Role: "User " + (index + 1),
blockColor: color[index % color.length]
}));
setSignersData(updatedSigners);
setUniqueId(updatedSigners[0].Id);
setBlockColor(updatedSigners[0].blockColor);
}
} else {
setRoleName("User 1");
@@ -303,6 +294,7 @@ function PlaceHolderSign() {
setSignersData(updatedSigners);
setIsSelectId(0);
setUniqueId(updatedSigners[0].Id);
setBlockColor(updatedSigners[0].blockColor);
}
}
} else if (
@@ -1716,6 +1708,10 @@ function PlaceHolderSign() {
setUniqueId={setUniqueId}
setRoleName={setRoleName}
initial={true}
sendInOrder={pdfDetails[0].SendinOrder}
setSignersData={setSignersData}
blockColor={blockColor}
setBlockColor={setBlockColor}
/>
</div>
) : (
@@ -1736,6 +1732,8 @@ function PlaceHolderSign() {
setRoleName={setRoleName}
sendInOrder={pdfDetails[0].SendinOrder}
setSignersData={setSignersData}
blockColor={blockColor}
setBlockColor={setBlockColor}
// handleAddSigner={handleAddSigner}
/>
<div data-tut="reactourSecond">
apps/OpenSign/src/pages/TemplatePlaceholder.js
+13
View File
@@ -77,6 +77,7 @@ const TemplatePlaceholder = () => {
const [showDropdown, setShowDropdown] = useState(false);
const [widgetType, setWidgetType] = useState("");
const [isRadio, setIsRadio] = useState(false);
const [blockColor, setBlockColor] = useState("");
const [selectWidgetId, setSelectWidgetId] = useState("");
const [isNameModal, setIsNameModal] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
@@ -223,6 +224,7 @@ const TemplatePlaceholder = () => {
});
setSignersData(updatedSigners);
setUniqueId(updatedSigners[0].Id);
setBlockColor(updatedSigners[0].blockColor);
} else {
const updatedSigners = documentData[0].Signers.map((x, index) => ({
...x,
@@ -231,6 +233,7 @@ const TemplatePlaceholder = () => {
}));
setSignersData(updatedSigners);
setUniqueId(updatedSigners[0].Id);
setBlockColor(updatedSigners[0].blockColor);
}
} else {
setRoleName("User 1");
@@ -249,6 +252,7 @@ const TemplatePlaceholder = () => {
setUniqueId(updatedSigners[0].Id);
setSignersData(updatedSigners);
setIsSelectId(0);
setBlockColor(updatedSigners[0].blockColor);
}
}
} else if (
@@ -854,6 +858,7 @@ const TemplatePlaceholder = () => {
setIsModalRole(false);
setRoleName("");
setUniqueId(Id);
setBlockColor(color[index]);
setIsSelectId(index);
setIsMailSend(false);
};
@@ -870,9 +875,11 @@ const TemplatePlaceholder = () => {
if (index === signersdata.length - 1) {
setUniqueId(updateSigner[updateSigner.length - 1]?.Id || "");
setIsSelectId(index - 1 || 0);
setBlockColor(color[index - 1 || 0]);
} else {
setUniqueId(updateSigner[index]?.Id || "");
setIsSelectId(index);
setBlockColor(color[index]);
}
setSignerPos(updatePlaceholderUser);
@@ -1443,6 +1450,10 @@ const TemplatePlaceholder = () => {
title={"Roles"}
initial={true}
isTemplateFlow={true}
sendInOrder={pdfDetails[0].SendinOrder}
setSignersData={setSignersData}
blockColor={blockColor}
setBlockColor={setBlockColor}
/>
</div>
) : (
@@ -1468,6 +1479,8 @@ const TemplatePlaceholder = () => {
title={"Roles"}
sendInOrder={pdfDetails[0]?.SendinOrder}
setSignersData={setSignersData}
blockColor={blockColor}
setBlockColor={setBlockColor}
/>
<div data-tut="reactourSecond">
<WidgetComponent
apps/OpenSign/src/styles/signature.css
+4 -1
View File
@@ -14,6 +14,9 @@
justify-content: center;
border-width: 0.2px;
}
.dragCursor{
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAX0lEQVR4nO3WMQrAIAxG4dzaUUfPVQ/2OtWhtFJoTJb/G10eSCAxk4+ABnRLiF56RjQmznM0Ji5ugIG/kRU+/L5G/kLDJbug4ZIMQFlsoJoRr1ujL/GY6O3ibPNBbO0E9P+irqa88kEAAAAASUVORK5CYII="),auto;
}
.dropdownContainer {
display: flex;
@@ -301,7 +304,7 @@
z-index: 2;
background: white;
}
.signCopy {
position: absolute;