WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-22 07:32:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #491 from OpenSignLabs/staging

Browse Source
This commit is contained in:
Amol
2024-03-14 21:45:14 +05:30
committed by GitHub
parent d3b1a37a7c 08476ba3d6
commit f08758fd71
28 changed files with 1241 additions and 618 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/package-lock.json
Generated
+14
View File
@@ -43,6 +43,7 @@
"react-scrollbars-custom": "^4.1.1",
"react-select": "^5.8.0",
"react-signature-canvas": "^1.0.6",
"react-tooltip": "^5.26.3",
"reactour": "^1.19.2",
"redux": "^4.2.1",
"redux-thunk": "^2.4.2",
@@ -20145,6 +20146,19 @@
}
}
},
"node_modules/react-tooltip": {
"version": "5.26.3",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.26.3.tgz",
"integrity": "sha512-MpYAws8CEHUd/RC4GaDCdoceph/T4KHM5vS5Dbk8FOmLMvvIht2ymP2htWdrke7K6lqPO8rz8+bnwWUIXeDlzg==",
"dependencies": {
"@floating-ui/dom": "^1.6.1",
"classnames": "^2.3.0"
},
"peerDependencies": {
"react": ">=16.14.0",
"react-dom": ">=16.14.0"
}
},
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
apps/OpenSign/package.json
+2 -1
View File
@@ -38,6 +38,7 @@
"react-scrollbars-custom": "^4.1.1",
"react-select": "^5.8.0",
"react-signature-canvas": "^1.0.6",
"react-tooltip": "^5.26.3",
"reactour": "^1.19.2",
"redux": "^4.2.1",
"redux-thunk": "^2.4.2",
@@ -48,7 +49,7 @@
},
"scripts": {
"start": "serve -s build",
"start-dev" :"react-scripts start",
"start-dev": "react-scripts start",
"version": "curl -s https://api.github.com/repos/opensignlabs/opensign/releases/latest | grep '\"tag_name\":' | awk -F '\"' '{print $4}' > ./public/version.txt",
"version-win": "powershell -Command \"Invoke-RestMethod -Uri 'https://api.github.com/repos/opensignlabs/opensign/releases/latest' | Select-Object -ExpandProperty tag_name | Out-File -FilePath ./public/version.txt\"",
"build": "npm run version && react-scripts build",
apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+73 -50
View File
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { themeColor } from "../../constant/const";
import ModalUi from "../../primitives/ModalUi";
import { radioButtonWidget } from "../../constant/Utils";
function DropdownWidgetOption(props) {
const [dropdownOptionList, setDropdownOptionList] = useState([
"option-1",
@@ -10,6 +11,7 @@ function DropdownWidgetOption(props) {
const [maxCount, setMaxCount] = useState(0);
const [dropdownName, setDropdownName] = useState(props.type);
const [isReadOnly, setIsReadOnly] = useState(false);
const [isHideLabel, setIsHideLabel] = useState(false);
const [status, setStatus] = useState("required");
const [defaultValue, setDefaultValue] = useState("");
const statusArr = ["required", "optional"];
@@ -19,6 +21,7 @@ function DropdownWidgetOption(props) {
setDropdownOptionList(["option-1", "option-2"]);
setDropdownName(props.type);
setIsReadOnly(false);
setIsHideLabel(false);
setMinCount(0);
setMaxCount(0);
setDefaultCheckbox([]);
@@ -39,6 +42,7 @@ function DropdownWidgetOption(props) {
props.currWidgetsDetails?.options?.validation?.maxRequiredCount
);
setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly);
setIsHideLabel(props.currWidgetsDetails?.options?.isHideLabel);
setStatus(props.currWidgetsDetails?.options?.status || "required");
setDefaultValue(props.currWidgetsDetails?.options?.defaultValue || "");
setDefaultCheckbox(props.currWidgetsDetails?.options?.defaultValue || []);
@@ -106,13 +110,15 @@ function DropdownWidgetOption(props) {
null,
null,
status,
defaultData
defaultData,
isHideLabel
);
// props.setShowDropdown(false);
setDropdownOptionList(["option-1", "option-2"]);
setDropdownName(props.type);
// props.setCurrWidgetsDetails({});
setIsReadOnly(false);
setIsHideLabel(false);
setMinCount(0);
setMaxCount(0);
setDefaultCheckbox([]);
@@ -143,7 +149,7 @@ function DropdownWidgetOption(props) {
// styleClass={"dropdownModal"}
isOpen={props.showDropdown}
title={props.title}
closeOff={true}
showClose={false}
>
<div style={{ height: "100%", padding: 20 }}>
<form
@@ -153,20 +159,6 @@ function DropdownWidgetOption(props) {
}}
>
<div className="dropdownContainer">
{["checkbox", "radio"].includes(props.type) &&
!props.isSignYourself && (
<div>
<input
type="checkbox"
checked={isReadOnly}
onChange={(e) => {
setIsReadOnly(e.target.checked);
}}
/>
<label style={{ marginLeft: "10px" }}>Is read only</label>
</div>
)}
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Name<span style={{ color: "red", fontSize: 13 }}> *</span>
</label>
@@ -178,36 +170,6 @@ function DropdownWidgetOption(props) {
className="drodown-input"
/>
{props.type === "checkbox" && !props.isSignYourself && (
<>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Minimun check
</label>
<input
required
defaultValue={0}
value={minCount}
onChange={(e) => {
const count = handleSetMinMax(e);
setMinCount(count);
}}
className="drodown-input"
/>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Maximum check
</label>
<input
required
defaultValue={0}
value={maxCount}
onChange={(e) => {
const count = handleSetMinMax(e);
setMaxCount(count);
}}
className="drodown-input"
/>
</>
)}
<label
style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
>
@@ -274,7 +236,6 @@ function DropdownWidgetOption(props) {
></i>
</div>
))}
<i
onClick={handleAddInput}
style={{
@@ -285,8 +246,38 @@ function DropdownWidgetOption(props) {
}}
className="fa-solid fa-square-plus"
></i>
{props.type === "checkbox" && !props.isSignYourself && (
<>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Minimun check
</label>
<input
required
defaultValue={0}
value={minCount}
onChange={(e) => {
const count = handleSetMinMax(e);
setMinCount(count);
}}
className="drodown-input"
/>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Maximum check
</label>
<input
required
defaultValue={0}
value={maxCount}
onChange={(e) => {
const count = handleSetMinMax(e);
setMaxCount(count);
}}
className="drodown-input"
/>
</>
)}
</div>
{["dropdown", "radio"].includes(props.type) && (
{["dropdown", radioButtonWidget].includes(props.type) && (
<>
<label
style={{
@@ -321,7 +312,7 @@ function DropdownWidgetOption(props) {
</select>
</>
)}
{props.type !== "checkbox" && props.type !== "radio" && (
{props.type !== "checkbox" && props.type !== radioButtonWidget && (
<>
<div
style={{
@@ -358,8 +349,40 @@ function DropdownWidgetOption(props) {
</div>
</>
)}
</div>
{["checkbox", radioButtonWidget].includes(props.type) && (
<div className="flex flex-row gap-5 mt-2 items-center text-center">
{!props.isSignYourself && (
<div>
<input
id="isreadonly"
type="checkbox"
checked={isReadOnly}
onChange={(e) => {
setIsReadOnly(e.target.checked);
}}
/>
<label className="ml-1" htmlFor="isreadonly">
Is read only
</label>
</div>
)}
<div>
<input
id="ishidelabel"
type="checkbox"
checked={isHideLabel}
onChange={(e) => {
setIsHideLabel(e.target.checked);
}}
/>
<label className="ml-1" htmlFor="ishidelabel">
Hide label
</label>
</div>
</div>
)}
</div>
<div
style={{
height: "1px",
apps/OpenSign/src/components/pdf/Placeholder.js
+254 -190
View File
@@ -2,17 +2,122 @@ import React, { useState, useEffect } from "react";
import BorderResize from "./BorderResize";
import PlaceholderBorder from "./PlaceholderBorder";
import { Rnd } from "react-rnd";
import { defaultWidthHeight, isMobile } from "../../constant/Utils";
import {
defaultWidthHeight,
isMobile,
onChangeInput,
radioButtonWidget,
textInputWidget,
textWidget
} from "../../constant/Utils";
import PlaceholderType from "./PlaceholderType";
import moment from "moment";
import "../../styles/opensigndrive.css";
const selectFormat = (data) => {
switch (data) {
case "L":
return "MM/dd/yyyy";
case "DD-MM-YYYY":
return "dd-MM-yyyy";
case "DD/MM/YYYY":
return "dd/MM/yyyy";
case "LL":
return "MMMM dd, yyyy";
case "DD MMM, YYYY":
return "dd MMM, yyyy";
case "YYYY-MM-DD":
return "yyyy-MM-dd";
case "MM-DD-YYYY":
return "MM-dd-yyyy";
case "MM.DD.YYYY":
return "MM.dd.yyyy";
case "MMM DD, YYYY":
return "MMM dd, yyyy";
case "DD MMMM, YYYY":
return "dd MMMM, yyyy";
default:
return "MM/dd/yyyy";
}
};
const changeDateToMomentFormat = (format) => {
switch (format) {
case "MM/dd/yyyy":
return "L";
case "dd-MM-yyyy":
return "DD-MM-YYYY";
case "dd/MM/yyyy":
return "DD/MM/YYYY";
case "MMMM dd, yyyy":
return "LL";
case "dd MMM, yyyy":
return "DD MMM, YYYY";
case "yyyy-MM-dd":
return "YYYY-MM-DD";
case "MM-dd-yyyy":
return "MM-DD-YYYY";
case "MM.dd.yyyy":
return "MM.DD.YYYY";
case "MMM dd, yyyy":
return "MMM DD, YYYY";
case "dd MMMM, yyyy":
return "DD MMMM, YYYY";
default:
return "L";
}
};
//function to get default date
const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
let date;
if (format && format === "dd-MM-yyyy") {
const newdate = selectedDate
? selectedDate
: moment(new Date()).format(changeDateToMomentFormat(format));
const [day, month, year] = newdate.split("-");
date = new Date(`${year}-${month}-${day}`);
} else {
date = new Date(selectedDate);
}
const value = date;
return value;
};
//function to get default format
const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
function Placeholder(props) {
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
const [isShowDateFormat, setIsShowDateFormat] = useState(false);
const [selectDate, setSelectDate] = useState();
const [selectDate, setSelectDate] = useState({
date:
props.pos.type === "date"
? moment(
getDefaultdate(
props?.pos?.options?.response,
props.pos?.options?.validation?.format
).getTime()
).format(
changeDateToMomentFormat(props.pos?.options?.validation?.format)
)
: "",
format:
props.pos.type === "date"
? getDefaultFormat(props.pos?.options?.validation?.format)
: ""
});
const [dateFormat, setDateFormat] = useState([]);
const [saveDateFormat, setSaveDateFormat] = useState("");
const [startDate, setStartDate] = useState(
props.pos.type === "date" &&
getDefaultdate(
props?.pos?.options?.response,
props.pos?.options?.validation?.format
)
);
const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
width: null,
height: null
});
const dateFormatArr = [
"L",
"DD-MM-YYYY",
@@ -25,70 +130,41 @@ function Placeholder(props) {
"DD MMMM, YYYY"
];
const selectFormat = (data) => {
switch (data) {
case "L":
return "MM/dd/yyyy";
case "DD-MM-YYYY":
return "dd-MM-yyyy";
case "DD/MM/YYYY":
return "dd/MM/yyyy";
case "LL":
return "MMMM dd, yyyy";
case "DD MMM, YYYY":
return "dd MMM, YYYY";
case "YYYY-MM-DD":
return "YYYY-MM-dd";
case "MM-DD-YYYY":
return "MM-dd-YYYY";
case "MM.DD.YYYY":
return "MM.dd.YYYY";
case "MMM DD, YYYY":
return "MMM dd, YYYY";
case "DD MMMM, YYYY":
return "dd MMMM, YYYY";
default:
return "dd/MM/yyyy";
}
};
useEffect(() => {
const updateWidth = () => {
const rndElement = document.getElementById(props.pos.key);
if (rndElement) {
const { width, height } = rndElement.getBoundingClientRect();
setGetCheckboxRenderWidth({ width: width, height: height });
}
};
// Delay to ensure rendering is complete
const timer = setTimeout(updateWidth, 0);
return () => clearTimeout(timer);
}, [props.pos]);
useEffect(() => {
//set default current date and default format MM/dd/yyyy
if (props.isSignYourself) {
const date = new Date();
const milliseconds = date.getTime();
const newDate = moment(milliseconds).format("MM/DD/YYYY");
const dateObj = {
date: newDate,
format: "MM/dd/YYYY"
};
setSelectDate(dateObj);
} else {
const defaultRes = props?.pos?.options?.response;
const defaultFormat = props.pos?.options?.validation?.format;
const updateDate = defaultRes
? new Date(props?.pos?.options?.response)
: new Date();
const dateFormat = defaultFormat ? defaultFormat : "MM/DD/YYYY";
const milliseconds = updateDate.getTime();
const newDate = moment(milliseconds).format(dateFormat);
const dateObj = {
date: newDate,
format: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/YYYY"
};
setSelectDate(dateObj);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const closeMenuOnOutsideClick = (e) => {
if (!isDraggingEnabled && !e.target.closest("#changeIsDragging")) {
setDraggingEnabled(true);
}
};
//function for add selected date and format in selectFormat
document.addEventListener("click", closeMenuOnOutsideClick);
return () => {
// Cleanup the event listener when the component unmounts
document.removeEventListener("click", closeMenuOnOutsideClick);
};
}, [isDraggingEnabled]);
//function change format array list with selected date and format
const changeDateFormat = () => {
const updateDate = [];
dateFormatArr.map((data) => {
let date;
if (selectDate.format === "dd-MM-yyyy") {
if (selectDate && selectDate.format === "dd-MM-yyyy") {
const [day, month, year] = selectDate.date.split("-");
date = new Date(`${year}-${month}-${day}`);
} else {
@@ -104,13 +180,15 @@ function Placeholder(props) {
});
setDateFormat(updateDate);
};
useEffect(() => {
if (props.isPlaceholder || props.isSignYourself) {
selectDate && changeDateFormat();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectDate]);
//handle to close drop down menu onclick screen
//it detect outside click of date dropdown menu
useEffect(() => {
const closeMenuOnOutsideClick = (e) => {
if (isShowDateFormat && !e.target.closest("#menu-container")) {
@@ -124,14 +202,14 @@ function Placeholder(props) {
};
}, [isShowDateFormat]);
//onclick placeholder function to open signature pad
const handlePlaceholderClick = () => {
//`handleWidgetIdandPopup` is used to set current widget id and open relative popup
const handleWidgetIdandPopup = () => {
if (props.setSelectWidgetId) {
props.setSelectWidgetId(props.pos.key);
}
const widgetTypeExist = [
"text",
textInputWidget,
"checkbox",
"name",
"company",
@@ -167,7 +245,7 @@ function Placeholder(props) {
} else if (
props.isPlaceholder &&
!props.isDragging &&
props.pos.type !== "label"
props.pos.type !== textWidget
) {
if (props.pos.key === props.selectWidgetId) {
props.handleLinkUser(props.data.Id);
@@ -194,9 +272,19 @@ function Placeholder(props) {
}
}
};
const handleWidgetsOnclick = () => {
if (props.pos.type === "radio") {
const handleOnClickPlaceholder = () => {
if (!props.isNeedSign) {
props.setWidgetType(props.pos.type);
}
if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
handleWidgetIdandPopup();
} else if (props.isPlaceholder || props.isSignYourself) {
handleWidgetIdandPopup();
}
};
//`handleOnClickSettingIcon` is used set current widget details and open setting of it
const handleOnClickSettingIcon = () => {
if (props.pos.type === radioButtonWidget) {
props.setIsRadio(true);
} else if (props.pos.type === "dropdown") {
props?.setShowDropdown(true);
@@ -206,13 +294,57 @@ function Placeholder(props) {
props?.handleNameModal(true);
}
if (props.isPlaceholder) {
if (props.isPlaceholder && props.type !== textWidget) {
props.setUniqueId(props.data.Id);
}
props.setSignKey(props.pos.key);
props.setWidgetType(props.pos.type);
props.setCurrWidgetsDetails(props.pos);
};
//function ro set state value of onclick on widget's copy icon
const handleCopyPlaceholder = (e) => {
if (props.data && props?.pos?.type !== textWidget) {
props.setSignerObjId(props?.data?.signerObjId);
props.setUniqueId(props?.data?.Id);
} else if (props.data && props.pos.type === textWidget) {
props.setTempSignerId(props.uniqueId);
props.setSignerObjId(props?.data?.signerObjId);
props.setUniqueId(props?.data?.Id);
}
e.stopPropagation();
props.setIsPageCopy(true);
props.setSignKey(props.pos.key);
};
//function to save date and format on local array onchange date and onclick format
const handleSaveDate = (data, isDateChange) => {
let updateDate = data.date;
//check if date change by user
if (isDateChange) {
//`changeDateToMomentFormat` is used to convert date as per required to moment package
updateDate = moment(data.date).format(
changeDateToMomentFormat(data.format)
);
}
//using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
//`getDefaultdate` is used to convert update date in new Date() format
const date = moment(
getDefaultdate(updateDate, data?.format).getTime()
).format(changeDateToMomentFormat(data?.format));
//`onChangeInput` is used to save data related to date in a placeholder field
onChangeInput(
date,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
data?.format
);
setSelectDate({ date: date, format: data?.format });
};
const PlaceholderIcon = () => {
return (
props.isShowBorder && (
@@ -223,48 +355,42 @@ function Placeholder(props) {
<i
onClick={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
handleOnClickSettingIcon();
}}
onTouchEnd={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
handleOnClickSettingIcon();
}}
className="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2",
right: "9px",
top: "-28px"
right: "29px",
top: "-19px"
}}
></i>
) : (
props.pos.type !== "date" &&
props.pos.type !== "label" &&
props.pos.type !== "signature" &&
!props.isSignYourself && (
((!props?.pos?.type && props.pos.isStamp) ||
(props?.pos?.type &&
!["date", textWidget, "signature"].includes(
props.pos.type
) &&
!props.isSignYourself)) && (
<i
onClick={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
handleOnClickSettingIcon();
}}
onTouchEnd={(e) => {
e.stopPropagation();
handleWidgetsOnclick();
handleOnClickSettingIcon();
}}
className="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2",
right: ["checkbox", "radio"].includes(props.pos.type)
? "24px"
: "47px",
top: ["checkbox", "radio"].includes(props.pos.type)
? "-28px"
: "-19px"
}}
style={{ color: "#188ae2", right: "47px", top: "-19px" }}
></i>
)
)}
{props.pos.type !== "label" && !props.isSignYourself && (
{props.pos.type !== textWidget && !props.isSignYourself && (
<i
data-tut="reactourLinkUser"
className="fa-regular fa-user signUserIcon"
@@ -278,19 +404,7 @@ function Placeholder(props) {
props.handleLinkUser(props.data.Id);
props.setUniqueId(props.data.Id);
}}
style={{
color: "#188ae2",
right:
props.pos.type === "checkbox" ||
props.pos.type === "radio"
? "8px"
: "32px",
top:
props.pos.type === "checkbox" ||
props.pos.type === "radio"
? "-28px"
: "-18px"
}}
style={{ color: "#188ae2", right: "32px", top: "-18px" }}
></i>
)}
</>
@@ -347,10 +461,12 @@ function Placeholder(props) {
e.stopPropagation();
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(data);
handleSaveDate(data);
}}
onClick={() => {
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(data);
handleSaveDate(data);
}}
className="dropdown-item itemColor"
style={{ fontSize: "12px" }}
@@ -364,35 +480,9 @@ function Placeholder(props) {
)}
<i
className="fa-regular fa-copy signCopy"
onClick={(e) => {
if (props.data) {
props.setSignerObjId(props.data.signerObjId);
props.setUniqueId(props.data.Id);
}
e.stopPropagation();
props.setIsPageCopy(true);
props.setSignKey(props.pos.key);
}}
onTouchEnd={(e) => {
if (props.data) {
props.setSignerObjId(props.data.signerObjId);
props.setUniqueId(props.data.Id);
}
e.stopPropagation();
props.setIsPageCopy(true);
props.setSignKey(props.pos.key);
}}
style={{
color: "#188ae2",
right:
props.pos.type === "checkbox" || props.pos.type === "radio"
? "-9px"
: "12px",
top:
props.pos.type === "checkbox" || props.pos.type === "radio"
? "-28px"
: "-18px"
}}
onClick={(e) => handleCopyPlaceholder(e)}
onTouchEnd={(e) => handleCopyPlaceholder(e)}
style={{ color: "#188ae2", right: "12px", top: "-18px" }}
></i>
<i
className="fa-regular fa-circle-xmark signCloseBtn"
@@ -415,17 +505,7 @@ function Placeholder(props) {
props.setIsStamp(false);
}
}}
style={{
color: "#188ae2",
right:
props.pos.type === "checkbox" || props.pos.type === "radio"
? "-27px"
: "-8px",
top:
props.pos.type === "checkbox" || props.pos.type === "radio"
? "-28px"
: "-18px"
}}
style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
></i>
</>
)
@@ -434,11 +514,11 @@ function Placeholder(props) {
return (
<Rnd
id={props.pos.key}
data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
//ref={nodeRef}
key={props.pos.key}
lockAspectRatio={
props.pos.type !== "label" &&
props.pos.type !== textWidget &&
(props.pos.Width
? props.pos.Width / props.pos.Height
: defaultWidthHeight(props.pos.type).width /
@@ -454,10 +534,10 @@ function Placeholder(props) {
props.data && props.isNeedSign
? props.data?.signerObjId === props.signerObjId &&
props.pos.type !== "checkbox" &&
props.pos.type !== "radio"
props.pos.type !== radioButtonWidget
? true
: false
: props.pos.type !== "radio" &&
: props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId &&
true,
@@ -467,8 +547,8 @@ function Placeholder(props) {
bounds="parent"
className="signYourselfBlock"
style={{
border: props.pos.type !== "checkbox" && "1px solid #007bff",
borderRadius: props.pos.type !== "checkbox" && "2px",
border: "1px solid #007bff",
borderRadius: "2px",
textAlign:
props.pos.type !== "name" &&
props.pos.type !== "company" &&
@@ -482,21 +562,27 @@ function Placeholder(props) {
: "all-scroll",
zIndex:
props.pos.type === "date"
? "99"
? props.pos.key === props.selectWidgetId
? 99 + 1
: 99
: props?.pos?.zIndex
? props.pos.zIndex
: "5",
background: props.data
? props.data.blockColor
: props.pos.type !== "checkbox" && "rgb(203 233 237)"
background: props.data ? props.data.blockColor : "rgb(203 233 237)"
}}
onDrag={() => {
setDraggingEnabled(true);
props.handleTabDrag && props.handleTabDrag(props.pos.key);
}}
size={{
width: props.posWidth(props.pos, props.isSignYourself),
height: props.posHeight(props.pos, props.isSignYourself)
width:
props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
? "auto"
: props.posWidth(props.pos, props.isSignYourself),
height:
props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
? "auto"
: props.posHeight(props.pos, props.isSignYourself)
}}
onResizeStart={() => {
setDraggingEnabled(true);
@@ -532,41 +618,23 @@ function Placeholder(props) {
false
);
}}
onClick={() => {
!props.isNeedSign && props.setWidgetType(props.pos.type);
props.isNeedSign && props.data?.signerObjId === props.signerObjId
? handlePlaceholderClick()
: props.isPlaceholder
? handlePlaceholderClick()
: props.isSignYourself && handlePlaceholderClick();
}}
onClick={() => handleOnClickPlaceholder()}
>
{props.isShowBorder &&
props.pos.type !== "radio" &&
props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId ? (
<BorderResize
right={
props.pos.type === "checkbox" || props.pos.type === "radio"
? -21
: -12
}
top={
props.pos.type === "checkbox" || props.pos.type === "radio"
? -21
: -11
}
/>
<BorderResize right={-12} top={-11} />
) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
props.data?.signerObjId === props.signerObjId &&
props.pos.type !== "radio" &&
props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" ? (
<BorderResize />
) : (
<></>
)
) : (
props.pos.type !== "radio" &&
props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId && <BorderResize />
)}
@@ -576,6 +644,7 @@ function Placeholder(props) {
setDraggingEnabled={setDraggingEnabled}
pos={props.pos}
isPlaceholder={props.isPlaceholder}
getCheckboxRenderWidth={getCheckboxRenderWidth}
/>
)}
{isMobile ? (
@@ -583,18 +652,11 @@ function Placeholder(props) {
style={{
left: props.xPos(props.pos, props.isSignYourself),
top: props.yPos(props.pos, props.isSignYourself),
width: props.posWidth(props.pos, props.isSignYourself),
width: "auto", //props.posWidth(props.pos, props.isSignYourself),
// height: props.posHeight(props.pos, props.isSignYourself),
zIndex: "10"
}}
onTouchEnd={() => {
!props.isNeedSign && props.setWidgetType(props.pos.type);
props.isNeedSign && props.data?.signerObjId === props.signerObjId
? handlePlaceholderClick()
: props.isPlaceholder
? handlePlaceholderClick()
: props.isSignYourself && handlePlaceholderClick();
}}
onTouchEnd={() => handleOnClickPlaceholder()}
>
{props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
@@ -615,9 +677,10 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
setSaveDateFormat={setSaveDateFormat}
saveDateFormat={saveDateFormat}
setValidateAlert={props.setValidateAlert}
setStartDate={setStartDate}
startDate={startDate}
handleSaveDate={handleSaveDate}
/>
</div>
) : (
@@ -640,9 +703,10 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
setSaveDateFormat={setSaveDateFormat}
saveDateFormat={saveDateFormat}
setValidateAlert={props.setValidateAlert}
setStartDate={setStartDate}
startDate={startDate}
handleSaveDate={handleSaveDate}
/>
</>
)}
apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+24 -12
View File
@@ -2,30 +2,42 @@ import React from "react";
import { themeColor } from "../../constant/const";
import {
defaultWidthHeight,
isMobile,
radioButtonWidget,
resizeBorderExtraWidth
} from "../../constant/Utils";
function PlaceholderBorder(props) {
const getResizeBorderExtraWidth =
props.pos.type === "checkbox" || props.pos.type === "radio"
? 38
: resizeBorderExtraWidth();
const getResizeBorderExtraWidth = resizeBorderExtraWidth();
const defaultWidth = defaultWidthHeight(props.pos.type).width;
const defaultHeight = defaultWidthHeight(props.pos.type).height;
const handleMinWidth = () => {
if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
return props.getCheckboxRenderWidth.width + getResizeBorderExtraWidth;
} else {
return props.pos.Width
? props.pos.Width + getResizeBorderExtraWidth
: defaultWidth + getResizeBorderExtraWidth;
}
};
const handleMinHeight = () => {
if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
return props.getCheckboxRenderWidth.height + getResizeBorderExtraWidth;
} else {
return props.pos.Height
? props.pos.Height + getResizeBorderExtraWidth
: defaultHeight + getResizeBorderExtraWidth;
}
};
return (
<div
onMouseEnter={props?.setDraggingEnabled(true)}
onMouseEnter={!isMobile && props?.setDraggingEnabled(true)}
className="borderResize"
style={{
borderColor: themeColor,
borderStyle: "dashed",
width: props.pos.Width
? props.pos.Width + getResizeBorderExtraWidth
: defaultWidth + getResizeBorderExtraWidth,
height: props.pos.Height
? props.pos.Height + getResizeBorderExtraWidth
: defaultHeight + getResizeBorderExtraWidth,
minWidth: handleMinWidth(),
minHeight: handleMinHeight(),
borderWidth: "0.2px",
overflow: "hidden"
}}
apps/OpenSign/src/components/pdf/PlaceholderCopy.js
+12 -4
View File
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { themeColor } from "../../constant/const";
import ModalUi from "../../primitives/ModalUi";
import { randomId } from "../../constant/Utils";
import { randomId, textWidget } from "../../constant/Utils";
function PlaceholderCopy(props) {
const copyType = ["All pages", "All pages but last", "All pages but first"];
@@ -180,7 +180,13 @@ function PlaceholderCopy(props) {
copyPlaceholder("first");
}
};
const handleUniqueId = () => {
if (props.widgetType === textWidget) {
props.setUniqueId(props?.tempSignerId);
props.setTempSignerId("");
}
props.setIsPageCopy(false);
};
return (
<ModalUi
isOpen={props.isPageCopy}
@@ -220,7 +226,7 @@ function PlaceholderCopy(props) {
<button
onClick={() => {
handleApplyCopy();
props.setIsPageCopy(false);
handleUniqueId();
}}
style={{ background: themeColor }}
type="button"
@@ -232,7 +238,9 @@ function PlaceholderCopy(props) {
<button
type="button"
className="finishBtn cancelBtn"
onClick={() => props.setIsPageCopy(false)}
onClick={() => {
handleUniqueId();
}}
>
Cancel
</button>
apps/OpenSign/src/components/pdf/PlaceholderType.js
+111 -126
View File
@@ -1,5 +1,13 @@
import React, { useEffect, useState, forwardRef, useRef } from "react";
import { getMonth, getYear, onChangeInput, range } from "../../constant/Utils";
import {
getMonth,
getYear,
onChangeInput,
radioButtonWidget,
range,
textInputWidget,
textWidget
} from "../../constant/Utils";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import "../../styles/signature.css";
@@ -7,10 +15,7 @@ import RegexParser from "regex-parser";
function PlaceholderType(props) {
const type = props?.pos?.type;
const [selectOption, setSelectOption] = useState(
props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
);
const [startDate, setStartDate] = useState(new Date());
const [selectOption, setSelectOption] = useState("");
const [validatePlaceholder, setValidatePlaceholder] = useState("");
const inputRef = useRef(null);
const [textValue, setTextValue] = useState();
@@ -80,7 +85,7 @@ function PlaceholderType(props) {
case "number":
setValidatePlaceholder("12345");
break;
case "text":
case textInputWidget:
setValidatePlaceholder("enter text");
break;
default:
@@ -89,10 +94,7 @@ function PlaceholderType(props) {
}
useEffect(() => {
if (props.isNeedSign && type === "date") {
const updateDate = new Date();
setStartDate(updateDate);
} else if (type && type === "checkbox" && props.isNeedSign) {
if (type && type === "checkbox" && props.isNeedSign) {
const isDefaultValue = props.pos.options?.defaultValue;
if (isDefaultValue) {
setSelectedCheckbox(isDefaultValue);
@@ -103,7 +105,18 @@ function PlaceholderType(props) {
checkRegularExpress(props.pos?.options?.validation?.type);
}
setTextValue(
props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
props.pos?.options?.response
? props.pos?.options?.response
: props.pos?.options?.defaultValue
? props.pos?.options?.defaultValue
: ""
);
setSelectOption(
props.pos?.options?.response
? props.pos?.options?.response
: props.pos?.options?.defaultValue
? props.pos?.options?.defaultValue
: ""
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -120,54 +133,8 @@ function PlaceholderType(props) {
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.pos?.options?.defaultValue]);
}, [props.pos]);
useEffect(() => {
if (type && type === "date") {
if (props.selectDate) {
let updateDate;
if (props.selectDate.format === "dd-MM-yyyy") {
const [day, month, year] = props.saveDateFormat.split("-");
updateDate = new Date(`${year}-${month}-${day}`);
} else {
if (props?.saveDateFormat) {
updateDate = new Date(props.saveDateFormat);
}
}
// const updateDate = new Date(props.saveDateFormat);
setStartDate(updateDate);
const dateObj = {
date: props.saveDateFormat,
format: props.selectDate
? props.selectDate?.format
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/YYYY"
};
props.setSelectDate(dateObj);
onChangeInput(
props.saveDateFormat,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
props.selectDate?.format
? props.selectDate.format
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/YYYY"
);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.saveDateFormat]);
const dateValue = (value) => {
props.setSaveDateFormat(value);
return <span>{value}</span>;
};
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
<div
className="inputPlaceholder"
@@ -175,7 +142,7 @@ function PlaceholderType(props) {
onClick={onClick}
ref={ref}
>
{dateValue(value)}
{value}
<i className="fa-regular fa-calendar" style={{ marginLeft: "5px" }}></i>
</div>
));
@@ -307,7 +274,16 @@ function PlaceholderType(props) {
isRadio
);
};
//function to set onchange date
const handleOnDateChange = (date) => {
props.setStartDate(date);
const isDateChange = true;
const dateObj = {
date: date,
format: props.selectDate.format
};
props.handleSaveDate(dateObj, isDateChange);
};
switch (type) {
case "signature":
return props.pos.SignUrl ? (
@@ -356,51 +332,55 @@ function PlaceholderType(props) {
<div style={{ zIndex: props.isSignYourself && "99" }}>
{props.pos.options?.values?.map((data, ind) => {
return (
<input
key={ind}
style={{
width: props.pos.Width,
display: "flex",
justifyContent: "center",
marginBottom: "6px",
marginTop: "5px"
}}
onBlur={handleInputBlur}
disabled={
props.isNeedSign &&
(props.pos.options?.isReadOnly ||
props.data?.signerObjId !== props.signerObjId)
}
type="checkbox"
checked={selectCheckbox(ind)}
onChange={(e) => {
if (e.target.checked) {
if (!props.isPlaceholder) {
const maxRequired =
props.pos.options?.validation?.maxRequiredCount;
const maxCountInt = maxRequired && parseInt(maxRequired);
<div key={ind} className="flex items-center text-center gap-0.5">
<input
style={{
width: props.pos.Width,
display: "flex",
justifyContent: "center",
marginTop: ind === 0 ? 0 : "5px"
}}
onBlur={handleInputBlur}
disabled={
props.isNeedSign &&
(props.pos.options?.isReadOnly ||
props.data?.signerObjId !== props.signerObjId)
}
type="checkbox"
checked={selectCheckbox(ind)}
onChange={(e) => {
if (e.target.checked) {
if (!props.isPlaceholder) {
const maxRequired =
props.pos.options?.validation?.maxRequiredCount;
const maxCountInt =
maxRequired && parseInt(maxRequired);
if (maxCountInt > 0) {
if (
selectedCheckbox &&
selectedCheckbox?.length <= maxCountInt - 1
) {
if (maxCountInt > 0) {
if (
selectedCheckbox &&
selectedCheckbox?.length <= maxCountInt - 1
) {
handleCheckboxValue(e.target.checked, ind);
}
} else {
handleCheckboxValue(e.target.checked, ind);
}
} else {
handleCheckboxValue(e.target.checked, ind);
}
} else {
handleCheckboxValue(e.target.checked, ind);
}
} else {
handleCheckboxValue(e.target.checked, ind);
}
}}
/>
}}
/>
{!props.pos.options?.isHideLabel && (
<label className="text-xs mb-0 text-center">{data}</label>
)}
</div>
);
})}
</div>
);
case "text":
case textInputWidget:
return props.isSignYourself ||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
<input
@@ -639,21 +619,21 @@ function PlaceholderType(props) {
</div>
)}
disabled={
props.isNeedSign && props.data?.signerObjId !== props.signerObjId
props.isPlaceholder ||
(props.isNeedSign &&
props.data?.signerObjId !== props.signerObjId)
}
onBlur={handleInputBlur}
closeOnScroll={true}
className="inputPlaceholder"
style={{ outlineColor: "#007bff" }}
selected={
startDate
? startDate
props?.startDate
? props?.startDate
: props.pos.options?.response &&
new Date(props.pos.options.response)
}
onChange={(date) => {
setStartDate(date);
}}
onChange={(date) => handleOnDateChange(date)}
popperPlacement="top-end"
customInput={<ExampleCustomInput />}
dateFormat={
@@ -661,7 +641,7 @@ function PlaceholderType(props) {
? props.selectDate?.format
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/YYYY"
: "MM/dd/yyyy"
}
/>
</div>
@@ -721,43 +701,48 @@ function PlaceholderType(props) {
<span>{type}</span>
</div>
);
case "radio":
case radioButtonWidget:
return (
<div>
{props.pos.options?.values.map((data, ind) => {
return (
<input
key={ind}
style={{
width: props.pos.Width,
display: "flex",
justifyContent: "center",
marginBottom: "6px",
marginTop: "5px"
}}
type="radio"
disabled={
props.isNeedSign &&
(props.pos.options?.isReadOnly ||
props.data?.signerObjId !== props.signerObjId)
}
checked={handleRadioCheck(data)}
onChange={(e) => {
if (!props.isPlaceholder) {
handleCheckRadio(e.target.checked, data);
<div key={ind} className="flex items-center text-center gap-0.5">
<input
style={{
width: props.pos.Width,
display: "flex",
justifyContent: "center",
marginTop: ind === 0 ? 0 : "5px"
}}
type="radio"
disabled={
props.isNeedSign &&
(props.pos.options?.isReadOnly ||
props.data?.signerObjId !== props.signerObjId)
}
}}
/>
checked={handleRadioCheck(data)}
onChange={(e) => {
if (!props.isPlaceholder) {
handleCheckRadio(e.target.checked, data);
}
}}
/>
{!props.pos.options?.isHideLabel && (
<label className="text-xs mb-0">{data}</label>
)}
</div>
);
})}
</div>
);
case "label":
case textWidget:
return (
<textarea
placeholder="Enter label"
rows={1}
value={textValue}
onChange={(e) => {
setTextValue(e.target.value);
onChangeInput(
e.target.value,
props.pos.key,
apps/OpenSign/src/components/pdf/RenderPdf.js
+9 -1
View File
@@ -56,7 +56,9 @@ function RenderPdf({
selectWidgetId,
unSignedWidgetId,
setIsCheckbox,
handleNameModal
handleNameModal,
setTempSignerId,
uniqueId
}) {
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
@@ -268,6 +270,8 @@ function RenderPdf({
setIsInitial={setIsInitial}
setValidateAlert={setValidateAlert}
unSignedWidgetId={unSignedWidgetId}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
/>
</React.Fragment>
)
@@ -393,6 +397,8 @@ function RenderPdf({
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={handleNameModal}
setTempSignerId={setTempSignerId}
uniqueId={uniqueId}
/>
</React.Fragment>
);
@@ -574,6 +580,8 @@ function RenderPdf({
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={handleNameModal}
setTempSignerId={setTempSignerId}
uniqueId={uniqueId}
/>
</React.Fragment>
);
apps/OpenSign/src/components/pdf/WidgetComponent.js
+27 -21
View File
@@ -3,7 +3,12 @@ import ModalUi from "../../primitives/ModalUi";
import RecipientList from "./RecipientList";
import { useDrag } from "react-dnd";
import WidgetList from "./WidgetList";
import { widgets } from "../../constant/Utils";
import {
radioButtonWidget,
textInputWidget,
textWidget,
widgets
} from "../../constant/Utils";
import { themeColor } from "../../constant/const";
function WidgetComponent({
dragSignature,
@@ -58,16 +63,15 @@ function WidgetComponent({
isDragCheck: !!monitor.isDragging()
})
});
const [, text] = useDrag({
const [, textInput] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 7,
text: "text"
text: textInputWidget
},
collect: (monitor) => ({
isDragText: !!monitor.isDragging()
isDragTextInput: !!monitor.isDragging()
})
});
const [, initials] = useDrag({
@@ -153,28 +157,28 @@ function WidgetComponent({
isDragEmail: !!monitor.isDragging()
})
});
const [, radio] = useDrag({
const [, radioButton] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 15,
text: "radio"
text: radioButtonWidget
},
collect: (monitor) => ({
isDragRadio: !!monitor.isDragging()
isDragRadiotton: !!monitor.isDragging()
})
});
const [, label] = useDrag({
const [, text] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 16,
text: "label"
text: textWidget
},
collect: (monitor) => ({
isDragLabel: !!monitor.isDragging()
isDragText: !!monitor.isDragging()
})
});
const isMobile = window.innerWidth < 767;
@@ -204,17 +208,17 @@ function WidgetComponent({
dragSignature,
dragStamp,
initials,
label,
name,
jobTitle,
company,
date,
text,
textInput,
checkbox,
dropdown,
radio,
radioButton,
image,
date,
name,
email,
company,
jobTitle
email
];
const getWidgetArray = widgets;
const newUpdateSigner = getWidgetArray.map((obj, ind) => {
@@ -227,13 +231,15 @@ function WidgetComponent({
const filterWidgets = widget.filter(
(data) =>
data.type !== "dropdown" && data.type !== "radio" && data.type !== "label"
data.type !== "dropdown" &&
data.type !== radioButtonWidget &&
data.type !== textWidget
);
const labelWidget = widget.filter((data) => data.type !== "label");
const textWidgetData = widget.filter((data) => data.type !== textWidget);
const updateWidgets = isSignYourself
? filterWidgets
: isTemplateFlow
? labelWidget
? textWidgetData
: widget;
return (
apps/OpenSign/src/components/pdf/WidgetNameModal.js
+6 -5
View File
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import ModalUi from "../../primitives/ModalUi";
import "../../styles/AddUser.css";
import RegexParser from "regex-parser";
import { textInputWidget } from "../../constant/Utils";
const WidgetNameModal = (props) => {
const [formdata, setFormdata] = useState({
@@ -69,7 +70,7 @@ const WidgetNameModal = (props) => {
return "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/";
case "number":
return "/^\\d+$/";
case "text":
case textInputWidget:
return "/^[a-zA-Zs]+$/";
default:
return type;
@@ -111,8 +112,8 @@ const WidgetNameModal = (props) => {
required
/>
</div>
{(props.defaultdata?.type === "text" ||
props.widgetName === "text") && (
{(props.defaultdata?.type === textInputWidget ||
props.widgetName === textInputWidget) && (
<>
<div className="form-section">
<label htmlFor="textvalidate" style={{ fontSize: 13 }}>
@@ -243,8 +244,8 @@ const WidgetNameModal = (props) => {
})}
</div>
</div>
{(props.defaultdata?.type === "text" ||
props?.widgetName === "text") && (
{(props.defaultdata?.type === textInputWidget ||
props?.widgetName === textInputWidget) && (
<div className="form-section">
<label htmlFor="hint" style={{ fontSize: 13 }}>
Hint
apps/OpenSign/src/components/shared/fields/CreateFolder.js
+18 -2
View File
@@ -11,6 +11,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
const [name, setName] = useState("");
const [folderList, setFolderList] = useState([]);
const [isAlert, setIsAlert] = useState(false);
const [isLoader, setIsLoader] = useState(false);
const [selectedParent, setSelectedParent] = useState();
const [alert, setAlert] = useState({ type: "info", message: "" });
useEffect(() => {
@@ -42,6 +43,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
};
const handleCreateFolder = async (event) => {
event.preventDefault();
handleLoader(true);
if (name) {
const currentUser = Parse.User.current();
const exsitQuery = new Parse.Query(folderCls);
@@ -52,7 +54,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
}
const templExist = await exsitQuery.first();
if (templExist) {
setAlert({ type: "dange", message: "Folder already exist!" });
setAlert({ type: "danger", message: "Folder already exist!" });
setIsAlert(true);
setTimeout(() => {
setIsAlert(false);
@@ -74,6 +76,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
const res = await template.save();
if (res) {
handleLoader(false);
setAlert({
type: "success",
message: "Folder created successfully!"
@@ -88,6 +91,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
}
}
} else {
handleLoader(false);
setAlert({ type: "info", message: "Please fill folder name" });
setIsAlert(true);
setTimeout(() => {
@@ -98,10 +102,21 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
const handleOptions = (e) => {
setSelectedParent(e.target.value);
};
const handleLoader = (status) => {
setIsLoader(status);
};
return (
<div>
{isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
<div id="createFolder">
<div id="createFolder" className="relative">
{isLoader && (
<div className="absolute h-full w-full flex justify-center items-center ">
<div
style={{ fontSize: "45px", color: "#3dd3e0" }}
className="loader-37"
></div>
</div>
)}
<h1 className="text-base font-semibold">Create Folder</h1>
<div className="text-xs mt-2">
<label className="block">
@@ -133,6 +148,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
<div>
<button
onClick={handleCreateFolder}
disabled={isLoader}
className="flex items-center rounded p-2 bg-[#32a3ac] text-white mt-3"
>
<i className="fa-solid fa-plus mr-1"></i>
apps/OpenSign/src/components/shared/fields/SelectFolder.js
+51 -18
View File
@@ -2,8 +2,9 @@ import React, { useEffect, useState } from "react";
import Parse from "parse";
import CreateFolder from "./CreateFolder";
import ModalUi from "../../../primitives/ModalUi";
import Tooltip from "../../../primitives/Tooltip";
const SelectFolder = ({ required, onSuccess, folderCls }) => {
const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
const [isOpen, SetIsOpen] = useState(false);
const [clickFolder, setClickFolder] = useState("");
const [selectFolder, setSelectedFolder] = useState({});
@@ -22,6 +23,21 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
}
// eslint-disable-next-line
}, [isOpen]);
// below useEffect is used to reset folder selection if user pass isReset = true from parent component
useEffect(() => {
if (isReset == true) {
handleReset();
}
}, [isReset]);
const handleReset = () => {
setFolderPath({});
setSelectedFolder("");
setClickFolder("");
setIsAdd(false);
setFolderList([]);
setTabList([]);
};
// `fetchFolder` is used to fetch of folder list created by user on basis of folderPtr or without folderPtr
const fetchFolder = async (folderPtr) => {
setIsLoader(true);
try {
@@ -47,6 +63,8 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
setIsLoader(false);
}
};
// `handleSelect` is used to save pointer of folder selected by user and it's path in state
const handleSelect = (item) => {
setFolderList([]);
setClickFolder({ ObjectId: item.objectId, Name: item.Name });
@@ -73,6 +91,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
}
};
// `handleSubmit` is used to pass folderPtr to parent component
const handleSubmit = () => {
let url = "Root";
tabList.forEach((t) => {
@@ -85,6 +104,8 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
}
SetIsOpen(false);
};
// `handleCancel` is used to clear list of folder, close popup and folderUrl
const handleCancel = () => {
SetIsOpen(false);
setClickFolder({});
@@ -92,6 +113,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
setTabList([]);
};
// `handleCancel` is call when user click on folder name from path/tab in popup
const removeTabListItem = async (e, i) => {
e.preventDefault();
// setEditable(false);
@@ -121,9 +143,11 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
fetchFolder(folderPtr);
}
};
// `handleCreate` is used to open folder creation form in popup
const handleCreate = () => {
setIsAdd(!isAdd);
};
// `handleAddFolder` is call when user folder created successfully and it fetch folder list on the basis of folderPtr or without folderPtr
const handleAddFolder = () => {
setFolderList([]);
if (clickFolder && clickFolder.ObjectId) {
@@ -145,7 +169,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
{required && <span className="text-red-500 text-[13px]">*</span>}
</label>
</div>
<div className="rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
<div className="relative rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
<div>
<i
className="far fa-folder-open text-[40px] text-[#33bbff]"
@@ -170,6 +194,13 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
{selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
</p>
</div>
<div className="absolute top-1 right-1 cursor-pointer">
<Tooltip
message={
"If you do not select a folder, your signed document will be saved in the Main OpenSign drive folder."
}
/>
</div>
</div>
<ModalUi
title={"Select Folder"}
@@ -201,23 +232,25 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
<hr />
</div>
<div className="mt-2 mb-3">
{!isAdd &&
folderList.length > 0 &&
folderList.map((folder) => (
<div
key={folder.Name}
className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer"
onClick={() => handleSelect(folder)}
>
<div className="flex items-center gap-2">
<i
className="fa fa-folder text-[#33bbff] text-[1.4rem]"
aria-hidden="true"
></i>
<span className="font-semibold">{folder.Name}</span>
<div className="max-h-[210px] overflow-auto">
{!isAdd &&
folderList.length > 0 &&
folderList.map((folder) => (
<div
key={folder.Name}
className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer "
onClick={() => handleSelect(folder)}
>
<div className="flex items-center gap-2">
<i
className="fa fa-folder text-[#33bbff] text-[1.4rem]"
aria-hidden="true"
></i>
<span className="font-semibold">{folder.Name}</span>
</div>
</div>
</div>
))}
))}
</div>
{isAdd && (
<CreateFolder
parentFolderId={clickFolder && clickFolder.ObjectId}
apps/OpenSign/src/components/shared/fields/SignersInput.js
+6 -1
View File
@@ -19,7 +19,7 @@ const SignersInput = (props) => {
Modal.setAppElement("body");
const [state, setState] = useState(undefined);
// const [editFormData, setEditFormData] = useState([]);
const [selected, setSelected] = React.useState([]);
const [selected, setSelected] = useState([]);
const [isModal, setIsModel] = useState(false);
const onChange = (selectedOptions) => setSelected(selectedOptions);
const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -63,6 +63,11 @@ const SignersInput = (props) => {
useEffect(() => {
GetSelectListData();
}, []);
useEffect(() => {
if (props.isReset && props.isReset === true) {
setSelected([]);
}
}, [props.isReset]);
useEffect(() => {
if (selected && selected.length) {
apps/OpenSign/src/constant/Utils.js
+91 -47
View File
@@ -5,6 +5,9 @@ import React from "react";
import { rgb } from "pdf-lib";
export const isMobile = window.innerWidth < 767;
export const textInputWidget = "text input";
export const textWidget = "text";
export const radioButtonWidget = "radio button";
export const openInNewTab = (url) => {
window.open(url, "_blank", "noopener,noreferrer");
};
@@ -162,12 +165,32 @@ export const widgets = [
iconSize: "15px"
},
{
type: "label",
type: "name",
icon: "fa-solid fa-user",
iconSize: "21px"
},
{
type: "job title",
icon: "fa-solid fa-address-card",
iconSize: "17px"
},
{
type: "company",
icon: "fa-solid fa-building",
iconSize: "25px"
},
{
type: "date",
icon: "fa-solid fa-calendar-days",
iconSize: "20px"
},
{
type: textWidget,
icon: "fa-solid fa-text-width",
iconSize: "20px"
},
{
type: "text",
type: textInputWidget,
icon: "fa-solid fa-font",
iconSize: "21px"
},
@@ -182,7 +205,7 @@ export const widgets = [
iconSize: "19px"
},
{
type: "radio",
type: radioButtonWidget,
icon: "fa-regular fa-circle-dot",
iconSize: "20px"
},
@@ -191,40 +214,19 @@ export const widgets = [
icon: "fa-solid fa-image",
iconSize: "20px"
},
{
type: "date",
icon: "fa-solid fa-calendar-days",
iconSize: "20px"
},
{
type: "name",
icon: "fa-solid fa-user",
iconSize: "21px"
},
{
type: "email",
icon: "fa-solid fa-envelope",
iconSize: "20px"
},
{
type: "company",
icon: "fa-solid fa-building",
iconSize: "25px"
},
{
type: "job title",
icon: "fa-solid fa-address-card",
iconSize: "17px"
}
];
const getDate = () => {
export const getDate = () => {
const date = new Date();
const milliseconds = date.getTime();
const newDate = moment(milliseconds).format("MM/DD/YYYY");
return newDate;
};
export const addWidgetOptions = (type) => {
const defaultOpt = {
name: "",
@@ -236,8 +238,11 @@ export const addWidgetOptions = (type) => {
case "stamp":
return defaultOpt;
case "checkbox":
return defaultOpt;
case "text":
return {
...defaultOpt,
options: { isReadOnly: false, isHideLabel: false }
};
case textInputWidget:
return { ...defaultOpt, validation: { type: "text", pattern: "" } };
case "initials":
return defaultOpt;
@@ -248,16 +253,25 @@ export const addWidgetOptions = (type) => {
case "job title":
return { ...defaultOpt, validation: { type: "text", pattern: "" } };
case "date":
return { ...defaultOpt, response: getDate() };
return {
...defaultOpt,
response: getDate(),
validation: { format: "MM/dd/yyyy", type: "date-format" }
};
case "image":
return defaultOpt;
case "email":
return { ...defaultOpt, validation: { type: "email", pattern: "" } };
case "dropdown":
return defaultOpt;
case "radio":
return { ...defaultOpt, values: [] };
case "label":
case radioButtonWidget:
return {
...defaultOpt,
values: [],
isReadOnly: false,
isHideLabel: false
};
case textWidget:
return defaultOpt;
default:
return {};
@@ -323,7 +337,7 @@ export const defaultWidthHeight = (type) => {
return { width: 150, height: 60 };
case "checkbox":
return { width: 15, height: 15 };
case "text":
case textInputWidget:
return { width: 150, height: 25 };
case "dropdown":
return { width: 120, height: 22 };
@@ -341,9 +355,9 @@ export const defaultWidthHeight = (type) => {
return { width: 70, height: 70 };
case "email":
return { width: 150, height: 20 };
case "radio":
case radioButtonWidget:
return { width: 15, height: 30 };
case "label":
case textWidget:
return { width: 150, height: 17 };
default:
return { width: 150, height: 60 };
@@ -692,13 +706,27 @@ export const onChangeInput = (
const updatePosition = getXYdata.map((positionData) => {
if (positionData.key === signKey) {
return {
...positionData,
options: {
...positionData.options,
response: value
}
};
if (dateFormat) {
return {
...positionData,
options: {
...positionData.options,
response: value,
validation: {
type: "date-format",
format: dateFormat // This indicates the required date format explicitly.
}
}
};
} else {
return {
...positionData,
options: {
...positionData.options,
response: value
}
};
}
}
return positionData;
});
@@ -970,7 +998,6 @@ export const multiSignEmbed = async (
} else {
updateItem = item.pos;
}
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const pageNo = item.pageNumber;
@@ -1060,7 +1087,7 @@ export const multiSignEmbed = async (
? labelDefaultHeight
: scaleHeight;
const widgetHeight =
position.type === "radio"
position.type === radioButtonWidget
? 10
: position.type === "checkbox"
? 10
@@ -1125,7 +1152,7 @@ export const multiSignEmbed = async (
}
};
const widgetTypeExist = [
"text",
textInputWidget,
"name",
"company",
"job title",
@@ -1157,6 +1184,14 @@ export const multiSignEmbed = async (
yPosition = yPos(position, ind);
addYPosition = height + 8;
}
if (!position?.options?.isHideLabel) {
// below line of code is used to embed label with radio button in pdf
page.drawText(item, {
x: xPos(position) + 15,
y: yPosition + 2,
size: height
});
}
checkbox.addToPage(page, {
x: xPos(position),
y: yPosition,
@@ -1171,7 +1206,7 @@ export const multiSignEmbed = async (
checkbox.enableReadOnly();
});
}
} else if (position.type === "label") {
} else if (position.type === textWidget) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 12;
let textContent;
@@ -1251,10 +1286,11 @@ export const multiSignEmbed = async (
x: xPos(position),
y: yPos(position),
width: scaleWidth,
height: scaleHeight
height: scaleHeight,
borderWidth: 0
});
dropdown.enableReadOnly();
} else if (position.type === "radio") {
} else if (position.type === radioButtonWidget) {
const radioRandomId = "radio" + randomId();
const radioGroup = form.createRadioGroup(radioRandomId);
let addYPosition = 18;
@@ -1268,6 +1304,14 @@ export const multiSignEmbed = async (
yPosition = yPos(position);
}
if (!position?.options?.isHideLabel) {
// below line of code is used to embed label with radio button in pdf
page.drawText(data, {
x: xPos(position) + 15,
y: yPosition + 2,
size: 11
});
}
radioGroup.addOptionToPage(data, page, {
x: xPos(position),
y: yPosition,
apps/OpenSign/src/layout/HomeLayout.js
+1 -1
View File
@@ -97,7 +97,7 @@ const HomeLayout = () => {
...resArr,
{
selector: '[data-tut="reactourLast"]',
content: `You are good to go`,
content: `You are ready to start using OpenSign! If you need support feel free to contact us.`,
position: "top"
// style: { backgroundColor: "#abd4d2" },
}
apps/OpenSign/src/pages/Form.js
+21 -7
View File
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { formJson } from "../json/FormJson";
import AddUser from "../components/AddUser";
@@ -11,6 +11,7 @@ import SignersInput from "../components/shared/fields/SignersInput";
import Title from "../components/Title";
import PageNotFound from "./PageNotFound";
// `Form` render all type of Form on this basis of their provided in path
function Form() {
const { id } = useParams();
@@ -40,13 +41,16 @@ const Forms = (props) => {
const [fileupload, setFileUpload] = useState([]);
const [fileload, setfileload] = useState(false);
const [percentage, setpercentage] = useState(0);
const [isReset, setIsReset] = useState(false);
const [isAlert, setIsAlert] = useState(false);
const [isSubmit, setIsSubmit] = useState(false);
const [isErr, setIsErr] = useState("");
const handleStrInput = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
useEffect(() => {
handleReset();
}, [props.title]);
const handleFileInput = (e) => {
setpercentage(0);
try {
@@ -222,15 +226,19 @@ const Forms = (props) => {
};
const handleReset = () => {
setIsReset(true);
setSigners([]);
setFolder({ ObjectId: "", Name: "" });
setFormData({
Name: "",
Description: "",
Note: ""
Note: "Please review and sign this document",
TimeToCompleteDays: 15,
SendinOrder: "false"
});
setFileUpload([]);
setpercentage(0);
setTimeout(() => setIsReset(false), 50);
};
return (
<div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
@@ -334,7 +342,9 @@ const Forms = (props) => {
onChange={(e) => handleStrInput(e)}
/>
</div>
{props.signers && <SignersInput onChange={handleSigners} required />}
{props.signers && (
<SignersInput onChange={handleSigners} isReset={isReset} required />
)}
<div className="text-xs mt-2">
<label className="block">
Note<span className="text-red-500 text-[13px]">*</span>
@@ -347,7 +357,11 @@ const Forms = (props) => {
required
/>
</div>
<SelectFolder onSuccess={handleFolder} folderCls={props.Cls} />
<SelectFolder
onSuccess={handleFolder}
folderCls={props.Cls}
isReset={isReset}
/>
{props.title === "Request Signatures" && (
<div className="text-xs mt-2">
@@ -399,10 +413,10 @@ const Forms = (props) => {
type="submit"
disabled={isSubmit}
>
Submit
Next
</button>
<div
className="bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
onClick={() => handleReset()}
>
Reset
apps/OpenSign/src/pages/GuestLogin.js
+9
View File
@@ -4,6 +4,7 @@ import "../styles/loginPage.css";
import loader from "../assets/images/loader2.gif";
import axios from "axios";
import { themeColor } from "../constant/const";
import { contractUsers } from "../constant/Utils";
function GuestLogin() {
const { id, userMail, contactBookId, serverUrl } = useParams();
@@ -103,11 +104,19 @@ function GuestLogin() {
} else {
let _user = user.data.result;
const parseId = localStorage.getItem("parseAppId");
const contractUserDetails = await contractUsers(_user.email);
localStorage.setItem("UserInformation", JSON.stringify(_user));
localStorage.setItem(
`Parse/${parseId}/currentUser`,
JSON.stringify(_user)
);
if (contractUserDetails) {
localStorage.setItem(
"Extand_Class",
JSON.stringify(contractUserDetails)
);
}
localStorage.setItem("username", _user.name);
localStorage.setItem("accesstoken", _user.sessionToken);
//save isGuestSigner true in local to handle login flow header in mobile view
apps/OpenSign/src/pages/PdfRequestFiles.js
+10 -4
View File
@@ -19,7 +19,8 @@ import {
onImageSelect,
onSaveSign,
onSaveImage,
addDefaultSignatureImg
addDefaultSignatureImg,
radioButtonWidget
} from "../constant/Utils";
import Loader from "../primitives/LoaderWithMsg";
import HandleError from "../primitives/HandleError";
@@ -48,6 +49,7 @@ function PdfRequestFiles() {
const [imgWH, setImgWH] = useState({});
const imageRef = useRef(null);
const [handleError, setHandleError] = useState();
const [selectWidgetId, setSelectWidgetId] = useState("");
const [isLoading, setIsLoading] = useState({
isLoad: true,
message: "This might take some time"
@@ -385,7 +387,8 @@ function PdfRequestFiles() {
for (let j = 0; j < checkUser[0].placeHolder[i].pos.length; j++) {
checkboxExist =
checkUser[0].placeHolder[i].pos[j].type === "checkbox";
radioExist = checkUser[0].placeHolder[i].pos[j].type === "radio";
radioExist =
checkUser[0].placeHolder[i].pos[j].type === radioButtonWidget;
if (checkboxExist) {
requiredCheckbox = checkUser[0].placeHolder[i].pos.filter(
(position) =>
@@ -434,7 +437,8 @@ function PdfRequestFiles() {
} else if (radioExist) {
requiredRadio = checkUser[0].placeHolder[i].pos.filter(
(position) =>
!position.options?.isReadOnly && position.type === "radio"
!position.options?.isReadOnly &&
position.type === radioButtonWidget
);
if (requiredRadio && requiredRadio?.length > 0) {
let checkSigned;
@@ -457,7 +461,7 @@ function PdfRequestFiles() {
const requiredWidgets = checkUser[0].placeHolder[i].pos.filter(
(position) =>
position.options?.status === "required" &&
position.type !== "radio" &&
position.type !== radioButtonWidget &&
position.type !== "checkbox"
);
if (requiredWidgets && requiredWidgets?.length > 0) {
@@ -1173,6 +1177,8 @@ function PdfRequestFiles() {
setIsInitial={setIsInitial}
setValidateAlert={setValidateAlert}
unSignedWidgetId={unSignedWidgetId}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
/>
)}
</div>
apps/OpenSign/src/pages/PlaceHolderSign.js
+33 -21
View File
@@ -24,7 +24,10 @@ import {
randomId,
defaultWidthHeight,
multiSignEmbed,
addWidgetOptions
addWidgetOptions,
textInputWidget,
textWidget,
radioButtonWidget
} from "../constant/Utils";
import RenderPdf from "../components/pdf/RenderPdf";
import { useNavigate } from "react-router-dom";
@@ -76,6 +79,7 @@ function PlaceHolderSign() {
const [isResize, setIsResize] = useState(false);
const [zIndex, setZIndex] = useState(1);
const [signKey, setSignKey] = useState();
const [tempSignerId, setTempSignerId] = useState("");
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
@@ -380,18 +384,16 @@ function PlaceHolderSign() {
pos: dropData
};
}
setSelectWidgetId(key);
if (signer) {
let filterSignerPos;
if (dragTypeValue === "label") {
if (dragTypeValue === textWidget) {
filterSignerPos = signerPos.filter((data) => data.Role === "prefill");
} else {
filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
}
const { blockColor, Role } = signer;
//adding placholder in existing signer pos array (placaholder)
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -412,7 +414,7 @@ function PlaceHolderSign() {
};
updatePlace.push(xyPos);
let updatesignerPos;
if (dragTypeValue === "label") {
if (dragTypeValue === textWidget) {
updatesignerPos = signerPos.map((x) =>
x.Role === "prefill" ? { ...x, placeHolder: updatePlace } : x
);
@@ -425,7 +427,7 @@ function PlaceHolderSign() {
setSignerPos(updatesignerPos);
} else {
let updatesignerPos;
if (dragTypeValue === "label") {
if (dragTypeValue === textWidget) {
updatesignerPos = signerPos.map((x) =>
x.Role === "prefill"
? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
@@ -442,9 +444,8 @@ function PlaceHolderSign() {
}
} else {
//adding new placeholder for selected signer in pos array (placeholder)
// const signerData = signerPos;
let placeHolderPos;
if (dragTypeValue === "label") {
if (dragTypeValue === textWidget) {
placeHolderPos = {
signerPtr: {},
signerObjId: "",
@@ -484,9 +485,12 @@ function PlaceHolderSign() {
setShowDropdown(true);
} else if (dragTypeValue === "checkbox") {
setIsCheckbox(true);
} else if (dragTypeValue === "radio") {
} else if (dragTypeValue === radioButtonWidget) {
setIsRadio(true);
} else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
} else if (
dragTypeValue !== textWidget &&
dragTypeValue !== "signature"
) {
setIsNameModal(true);
}
setWidgetType(dragTypeValue);
@@ -736,7 +740,7 @@ function PlaceHolderSign() {
if (getPrefill && isLabel) {
const alert = {
mssg: "label",
mssg: textWidget,
alert: true
};
setIsSendAlert(alert);
@@ -1051,7 +1055,8 @@ function PlaceHolderSign() {
addOption,
deleteOption,
status,
defaultValue
defaultValue,
isHideLabel
) => {
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
@@ -1067,7 +1072,7 @@ function PlaceHolderSign() {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
if (widgetType === "radio") {
if (widgetType === radioButtonWidget) {
if (addOption) {
return {
...position,
@@ -1089,7 +1094,8 @@ function PlaceHolderSign() {
...position.options,
name: dropdownName,
values: dropdownOptions,
isReadOnly: isReadOnly,
isReadOnly: isReadOnly || false,
isHideLabel: isHideLabel || false,
defaultValue: defaultValue
}
};
@@ -1121,7 +1127,8 @@ function PlaceHolderSign() {
maxRequiredCount: maxCount
},
defaultValue: defaultValue,
isReadOnly: isReadOnly
isReadOnly: isReadOnly || false,
isHideLabel: isHideLabel || false
}
};
}
@@ -1186,7 +1193,7 @@ function PlaceHolderSign() {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
if (position.type === "text") {
if (position.type === textInputWidget) {
return {
...position,
options: {
@@ -1406,13 +1413,13 @@ function PlaceHolderSign() {
<ModalUi
headerColor={
isSendAlert.mssg === "sure" || isSendAlert.mssg === "label"
isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
? "#dc3545"
: isSendAlert.mssg === "confirm" && themeColor
}
isOpen={isSendAlert.alert}
title={
isSendAlert.mssg === "sure" || isSendAlert.mssg === "label"
isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
? "Fields required"
: isSendAlert.mssg === "confirm" && "Send Mail"
}
@@ -1421,7 +1428,7 @@ function PlaceHolderSign() {
<div style={{ height: "100%", padding: 20 }}>
{isSendAlert.mssg === "sure" ? (
<p>Please add field for all recipients.</p>
) : isSendAlert.mssg === "label" ? (
) : isSendAlert.mssg === textWidget ? (
<p>Please confirm that you have filled label widget.</p>
) : (
isSendAlert.mssg === "confirm" && (
@@ -1553,11 +1560,14 @@ function PlaceHolderSign() {
allPages={allPages}
pageNumber={pageNumber}
signKey={signKey}
// signerObjId={signerObjId}
Id={uniqueId}
widgetType={widgetType}
setUniqueId={setUniqueId}
tempSignerId={tempSignerId}
setTempSignerId={setTempSignerId}
/>
<DropdownWidgetOption
type="radio"
type={radioButtonWidget}
title="Radio group"
showDropdown={isRadio}
setShowDropdown={setIsRadio}
@@ -1639,6 +1649,8 @@ function PlaceHolderSign() {
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={setIsNameModal}
setTempSignerId={setTempSignerId}
uniqueId={uniqueId}
/>
)}
</div>
apps/OpenSign/src/pages/SignyourselfPdf.js
+13 -14
View File
@@ -3,7 +3,6 @@ import { PDFDocument } from "pdf-lib";
import "../styles/signature.css";
import { themeColor } from "../constant/const";
import axios from "axios";
import moment from "moment";
import Loader from "../primitives/LoaderWithMsg";
import loader from "../assets/images/loader2.gif";
import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
@@ -25,7 +24,9 @@ import {
onSaveSign,
contractUsers,
contactBook,
randomId
randomId,
getDate,
textInputWidget
} from "../constant/Utils";
import { useParams } from "react-router-dom";
import Tour from "reactour";
@@ -308,13 +309,6 @@ function SignYourSelf() {
setIsLoading(loadObj);
}
};
const getDate = () => {
const date = new Date();
const milliseconds = date.getTime();
const newDate = moment(milliseconds).format("MM/DD/YYYY");
return newDate;
};
const getWidgetValue = (type) => {
switch (type) {
case "name":
@@ -333,6 +327,7 @@ function SignYourSelf() {
return "";
}
};
const addWidgetOptions = (type) => {
switch (type) {
case "signature":
@@ -348,7 +343,7 @@ function SignYourSelf() {
name: "checkbox"
};
case "text":
case textInputWidget:
return {
name: "text"
};
@@ -386,7 +381,8 @@ function SignYourSelf() {
case "date":
return {
name: "date",
defaultValue: getDate()
response: getDate(),
validation: { format: "MM/dd/yyyy", type: "date-format" }
};
case "image":
return {
@@ -596,7 +592,6 @@ function SignYourSelf() {
await signPdfFun(pdfBytes, documentId);
}
}
//function for get digital signature
const signPdfFun = async (base64Url, documentId) => {
let singleSign = {
@@ -875,7 +870,10 @@ function SignYourSelf() {
maxCount,
isReadOnly,
addOption,
deleteOption
deleteOption,
status,
defaultValue,
isHideLabel
) => {
const getPageNumer = xyPostion.filter(
(data) => data.pageNumber === pageNumber
@@ -907,7 +905,8 @@ function SignYourSelf() {
...position.options,
name: dropdownName,
values: dropdownOptions,
isReadOnly: isReadOnly
isReadOnly: isReadOnly,
isHideLabel: isHideLabel || false
}
};
}
apps/OpenSign/src/pages/TemplatePlaceholder.js
+20 -11
View File
@@ -21,7 +21,10 @@ import {
addZIndex,
createDocument,
defaultWidthHeight,
addWidgetOptions
addWidgetOptions,
textInputWidget,
textWidget,
radioButtonWidget
} from "../constant/Utils";
import RenderPdf from "../components/pdf/RenderPdf";
import "../styles/AddUser.css";
@@ -442,9 +445,12 @@ const TemplatePlaceholder = () => {
setShowDropdown(true);
} else if (dragTypeValue === "checkbox") {
setIsCheckbox(true);
} else if (dragTypeValue === "radio") {
} else if (dragTypeValue === radioButtonWidget) {
setIsRadio(true);
} else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
} else if (
dragTypeValue !== textWidget &&
dragTypeValue !== "signature"
) {
setIsNameModal(true);
}
setCurrWidgetsDetails({});
@@ -970,7 +976,8 @@ const TemplatePlaceholder = () => {
addOption,
deleteOption,
status,
defaultValue
defaultValue,
isHideLabel
) => {
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
@@ -986,11 +993,10 @@ const TemplatePlaceholder = () => {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
if (widgetType === "radio") {
if (widgetType === radioButtonWidget) {
if (addOption) {
return {
...position,
Height: position.Height
? position.Height + 15
: defaultWidthHeight(widgetType).height + 15
@@ -1010,7 +1016,9 @@ const TemplatePlaceholder = () => {
name: dropdownName,
values: dropdownOptions,
status: status,
defaultValue: defaultValue
defaultValue: defaultValue,
isReadOnly: isReadOnly || false,
isHideLabel: isHideLabel || false
}
};
}
@@ -1040,8 +1048,9 @@ const TemplatePlaceholder = () => {
minRequiredCount: minCount,
maxRequiredCount: maxCount
},
isReadOnly: isReadOnly,
defaultValue: defaultValue
isReadOnly: isReadOnly || false,
defaultValue: defaultValue,
isHideLabel: isHideLabel || false
}
};
}
@@ -1106,7 +1115,7 @@ const TemplatePlaceholder = () => {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
if (position.type === "text") {
if (position.type === textInputWidget) {
return {
...position,
options: {
@@ -1305,7 +1314,7 @@ const TemplatePlaceholder = () => {
</div>
</ModalUi>
<DropdownWidgetOption
type="radio"
type={radioButtonWidget}
title="Radio group"
showDropdown={isRadio}
setShowDropdown={setIsRadio}
apps/OpenSign/src/primitives/Tooltip.js
+18
View File
@@ -0,0 +1,18 @@
import React from "react";
// import * as HoverCard from "@radix-ui/react-hover-card";
// import "../styles/opensigndrive.css";
import { Tooltip as ReactTooltip } from "react-tooltip";
const Tooltip = ({ children, message }) => (
<>
<a data-tooltip-id="my-tooltip" data-tooltip-content={message}>
{children ? (
children
) : (
<i className="fa-solid fa-question border-[1.5px] px-1.5 py-0.5 rounded-full border-[#33bbff] text-xs text-[#33bbff]"></i>
)}
</a>
<ReactTooltip id="my-tooltip" className="max-w-[200px]" />
</>
);
export default Tooltip;
apps/OpenSignServer/cloud/parsefunction/pdf/PDF.min.js
Vendored
+87 -76
View File
@@ -1,7 +1,8 @@
import SignPDF from './SignPDF.min.cjs';
import fs from 'node:fs';
import axios from 'axios';
import { plainAddPlaceholder } from 'node-signpdf/dist/helpers/index.js';
import { pdflibAddPlaceholder } from './customSignPdf/pdflibplaceholder.min.js';
import { PDFDocument } from 'pdf-lib';
const serverUrl = process.env.SERVER_URL,
APPID = process.env.APP_ID,
masterKEY = process.env.MASTER_KEY;
@@ -15,20 +16,20 @@ async function uploadFile(e, a) {
console.log('Err ', e), fs.unlinkSync(a);
}
}
async function updateDoc(t, s, r, i, n, o) {
async function updateDoc(t, s, r, i, o, n) {
try {
var d = {
UserPtr: { __type: 'Pointer', className: o, objectId: r },
UserPtr: { __type: 'Pointer', className: n, objectId: r },
SignedUrl: s,
Activity: 'Signed',
ipAddress: i,
};
let e;
var l = (e = n.AuditTrail && 0 < n.AuditTrail.length ? [...n.AuditTrail, d] : [d]).filter(
var l = (e = o.AuditTrail && 0 < o.AuditTrail.length ? [...o.AuditTrail, d] : [d]).filter(
e => 'Signed' === e.Activity
);
let a = !1;
!((n.Signers && 0 < n.Signers.length && l.length !== n.Signers.length) || !(a = !0));
!((o.Signers && 0 < o.Signers.length && l.length !== o.Signers.length) || !(a = !0));
var c = { SignedUrl: s, AuditTrail: e, IsCompleted: a };
await axios.put(serverUrl + '/classes/contracts_Document/' + t, c, {
headers: {
@@ -150,9 +151,8 @@ async function sendDoctoWebhook(t, e, a, s) {
}
}));
}
async function PDF(i, n) {
async function PDF(i) {
try {
i.params.sign;
var e = i.params.docId,
a = i.params.userId,
o = await axios.get(
@@ -173,125 +173,136 @@ async function PDF(i, n) {
});
if (!t.data || !t.data.objectId) return { status: 'error', message: 'this user not allowed!' };
{
var d,
var n,
d,
l,
c,
p = JSON.stringify({ objectId: a });
c = JSON.stringify({ objectId: a });
let s, r;
r = a
? (d = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + p, {
? (n = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + c, {
headers: {
'X-Parse-Application-Id': APPID,
'X-Parse-Session-Token': i.headers.sessiontoken,
},
})).data && 0 < d.data.results.length
? ((s = d), 'contracts_Contactbook')
: ((s = await axios.get(serverUrl + '/classes/contracts_Users?where=' + p, {
})).data && 0 < n.data.results.length
? ((s = n), 'contracts_Contactbook')
: ((s = await axios.get(serverUrl + '/classes/contracts_Users?where=' + c, {
headers: { 'X-Parse-Application-Id': APPID, 'X-Parse-Master-Key': masterKEY },
})),
'contracts_Users')
: ((l = JSON.stringify({
: ((d = JSON.stringify({
UserId: { __type: 'Pointer', className: '_User', objectId: t.data.objectId },
})),
(c = await axios.get(serverUrl + '/classes/contracts_Users?where=' + l, {
(l = await axios.get(serverUrl + '/classes/contracts_Users?where=' + d, {
headers: { 'X-Parse-Application-Id': APPID, 'X-Parse-Master-Key': masterKEY },
})).data && 0 < c.data.results.length
? ((s = c), 'contracts_Users')
: ((s = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + l, {
})).data && 0 < l.data.results.length
? ((s = l), 'contracts_Users')
: ((s = await axios.get(serverUrl + '/classes/contracts_Contactbook?where=' + d, {
headers: {
'X-Parse-Application-Id': APPID,
'X-Parse-Session-Token': i.headers.sessiontoken,
},
})),
'contracts_Contactbook'));
var m = s.data.results[0].Name,
g = s.data.results[0].Email;
var p = s.data.results[0].Name,
m = s.data.results[0].Email;
if (!i.params.pdfFile) return { status: 'error', message: 'pdf file not present!' };
{
let e = Buffer.from(i.params.pdfFile, 'base64');
var h = process.env.PFX_BASE64,
u = Buffer.from(h, 'base64'),
f = {
var g = process.env.PFX_BASE64,
h = Buffer.from(g, 'base64'),
u = {
UserPtr: { __type: 'Pointer', className: r, objectId: s.data.results[0].objectId },
SignedUrl: '',
Activity: 'Signed',
ipAddress: i.headers['x-real-ip'],
};
let a;
var y = (a =
var f = (a =
o.data.AuditTrail && 0 < o.data.AuditTrail.length
? [...o.data.AuditTrail, f]
: [f]).filter(e => 'Signed' === e.Activity);
? [...o.data.AuditTrail, u]
: [u]).filter(e => 'Signed' === e.Activity);
let t = !1;
!(
(o.data.Signers && 0 < o.data.Signers.length && y.length !== o.data.Signers.length) ||
(o.data.Signers && 0 < o.data.Signers.length && f.length !== o.data.Signers.length) ||
!(t = !0)
);
var v,
var y,
P,
b = `exported_file_${Math.floor(5e3 * Math.random())}.pdf`,
x = './exports/' + b,
U =
v,
b,
x,
w,
U,
I,
S,
A = `exported_file_${Math.floor(5e3 * Math.random())}.pdf`,
D = './exports/' + A,
E =
(t
? ((v = o.data.Signers?.map(e => e.Name + ' <' + e.Email + '>')),
? ((y = o.data.Signers?.map(e => e.Name + ' <' + e.Email + '>')),
(e =
v && 0 < v.length
? plainAddPlaceholder({
pdfBuffer: e,
reason: 'Digitally signed by OpenSign for ' + v?.join(', '),
y && 0 < y.length
? ((P = await PDFDocument.load(e)),
pdflibAddPlaceholder({
pdfDoc: P,
reason: 'Digitally signed by OpenSign for ' + y?.join(', '),
location: 'location',
signatureLength: 1e4,
})
: plainAddPlaceholder({
pdfBuffer: e,
reason: 'Digitally signed by OpenSign for ' + m + ' <' + g + '>',
signatureLength: 15e3,
}),
(v = await P.save()),
Buffer.from(v))
: ((b = await PDFDocument.load(e)),
pdflibAddPlaceholder({
pdfDoc: b,
reason: 'Digitally signed by OpenSign for ' + p + ' <' + m + '>',
location: 'location',
signatureLength: 1e4,
})),
(P = await new SignPDF(e, u).signPDF()),
fs.writeFileSync(x, P))
: fs.writeFileSync(x, e),
await uploadFile(b, x));
if (U && U.imageUrl) {
const n = await updateDoc(
i.params.docId,
U.imageUrl,
s.data.results[0].objectId,
i.headers['x-real-ip'],
o.data,
r
);
var I,
w = {
url: U.imageUrl,
signatureLength: 15e3,
}),
(x = await b.save()),
Buffer.from(x))),
(w = await new SignPDF(e, h).signPDF()),
fs.writeFileSync(D, w))
: fs.writeFileSync(D, e),
await uploadFile(A, D));
if (E && E.imageUrl)
return (
(U = await updateDoc(
i.params.docId,
E.imageUrl,
s.data.results[0].objectId,
i.headers['x-real-ip'],
o.data,
r
)),
(I = {
url: E.imageUrl,
sender: { Mail: o.data.ExtUserPtr.Email, Name: o.data.ExtUserPtr.Name },
pdfName: o.data.Name,
receiver: g,
};
return (
receiver: m,
}),
o.data.IsSendMail && !1 === o.data.IsSendMail
? console.log("don't send mail")
: sendMail(w),
sendDoctoWebhook(o, U.imageUrl, 'signed', s?.data.results?.[0]),
n &&
n.isCompleted &&
((I = {
url: U.imageUrl,
: sendMail(I),
sendDoctoWebhook(o, E.imageUrl, 'signed', s?.data.results?.[0]),
U &&
U.isCompleted &&
((S = {
url: E.imageUrl,
sender: { Mail: o.data.ExtUserPtr.Email, Name: 'OpenSign™' },
pdfName: o.data.Name,
receiver: o.data.ExtUserPtr.Email,
}),
o.data.IsSendMail && !1 === o.data.IsSendMail
? console.log("don't send mail")
: sendCompletedMail(I),
sendDoctoWebhook(o, U.imageUrl, 'completed')),
fs.unlinkSync(x),
console.log('New Signed PDF created called: ' + x),
'success' === n.message
? { status: 'success', data: U.imageUrl }
: sendCompletedMail(S),
sendDoctoWebhook(o, E.imageUrl, 'completed')),
fs.unlinkSync(D),
console.log('New Signed PDF created called: ' + D),
'success' === U.message
? { status: 'success', data: E.imageUrl }
: { status: 'error', message: 'please provide required parameters!' }
);
}
}
}
} catch (e) {
apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/SignPdfError.min.js
Vendored
+20 -1
View File
@@ -1 +1,20 @@
const ERROR_TYPE_UNKNOWN=1,ERROR_TYPE_INPUT=2,ERROR_TYPE_PARSE=3,ERROR_VERIFY_SIGNATURE=4;class SignPdfError extends Error{constructor(R,E=ERROR_TYPE_UNKNOWN){super(R),this.type=E}}SignPdfError.TYPE_UNKNOWN=ERROR_TYPE_UNKNOWN,SignPdfError.TYPE_INPUT=ERROR_TYPE_INPUT,SignPdfError.TYPE_PARSE=ERROR_TYPE_PARSE,SignPdfError.VERIFY_SIGNATURE=ERROR_VERIFY_SIGNATURE;export default SignPdfError;export{ERROR_TYPE_UNKNOWN,ERROR_TYPE_INPUT,ERROR_TYPE_PARSE,ERROR_VERIFY_SIGNATURE};
const ERROR_TYPE_UNKNOWN = 1,
ERROR_TYPE_INPUT = 2,
ERROR_TYPE_PARSE = 3,
ERROR_VERIFY_SIGNATURE = 4;
class SignPdfError extends Error {
constructor(R, E = ERROR_TYPE_UNKNOWN) {
super(R), (this.type = E);
}
}
(SignPdfError.TYPE_UNKNOWN = ERROR_TYPE_UNKNOWN),
(SignPdfError.TYPE_INPUT = ERROR_TYPE_INPUT),
(SignPdfError.TYPE_PARSE = ERROR_TYPE_PARSE),
(SignPdfError.VERIFY_SIGNATURE = ERROR_VERIFY_SIGNATURE);
export {
ERROR_TYPE_UNKNOWN,
ERROR_TYPE_INPUT,
ERROR_TYPE_PARSE,
ERROR_VERIFY_SIGNATURE,
SignPdfError,
};
apps/OpenSignServer/cloud/parsefunction/pdf/customSignPdf/pdflibplaceholder.min.js
Vendored
+87
View File
@@ -0,0 +1,87 @@
import {
DEFAULT_BYTE_RANGE_PLACEHOLDER,
DEFAULT_SIGNATURE_LENGTH,
SUBFILTER_ADOBE_PKCS7_DETACHED,
} from './const.min.js';
import { SignPdfError } from './SignPdfError.min.js';
import {
PDFArray,
PDFDict,
PDFHexString,
PDFName,
PDFNumber,
PDFInvalidObject,
PDFString,
} from 'pdf-lib';
const pdflibAddPlaceholder = ({
pdfDoc: e = void 0,
pdfPage: o = void 0,
reason: t,
contactInfo: r = 'emailfromp1289@gmail.com',
name: i = 'Name from p12',
location: n,
signingTime: a = void 0,
signatureLength: P = DEFAULT_SIGNATURE_LENGTH,
byteRangePlaceholder: F = DEFAULT_BYTE_RANGE_PLACEHOLDER,
subFilter: D = SUBFILTER_ADOBE_PKCS7_DETACHED,
widgetRect: f = [0, 0, 0, 0],
appName: g = void 0,
}) => {
if (void 0 === e && void 0 === o)
throw new SignPdfError('PDFDoc or PDFPage must be set.', SignPdfError.TYPE_INPUT);
var e = e ?? o.doc,
o = o ?? e.getPages()[0],
m = PDFArray.withContext(e.context),
F =
(m.push(PDFNumber.of(0)),
m.push(PDFName.of(F)),
m.push(PDFName.of(F)),
m.push(PDFName.of(F)),
PDFHexString.of(String.fromCharCode(0).repeat(P))),
P = g ? { App: { Name: g } } : {},
g = e.context.obj({
Type: 'Sig',
Filter: 'Adobe.PPKLite',
SubFilter: D,
ByteRange: m,
Contents: F,
Reason: PDFString.of(t),
M: PDFString.fromDate(a ?? new Date()),
ContactInfo: PDFString.of(r),
Name: PDFString.of(i),
Location: PDFString.of(n),
Prop_Build: { Filter: { Name: 'Adobe.PPKLite' }, ...P },
}),
D = new Uint8Array(g.sizeInBytes()),
m = (g.copyBytesInto(D, 0), PDFInvalidObject.of(D)),
F = e.context.register(m);
const s = PDFArray.withContext(e.context);
f.forEach(e => s.push(PDFNumber.of(e)));
(t = e.context.formXObject([], { BBox: f, Resources: {} })),
(a = e.context.obj({
Type: 'Annot',
Subtype: 'Widget',
FT: 'Sig',
Rect: s,
V: F,
T: PDFString.of('Signature1'),
F: 4,
P: o.ref,
AP: { N: e.context.register(t) },
})),
(r = e.context.register(a));
let c = o.node.lookupMaybe(PDFName.of('Annots'), PDFArray),
d =
((c = void 0 === c ? e.context.obj([]) : c).push(r),
o.node.set(PDFName.of('Annots'), c),
e.catalog.lookupMaybe(PDFName.of('AcroForm'), PDFDict));
void 0 === d &&
((d = e.context.obj({ Fields: [] })),
(i = e.context.register(d)),
e.catalog.set(PDFName.of('AcroForm'), i));
let N;
N = d.has(PDFName.of('SigFlags')) ? d.get(PDFName.of('SigFlags')) : PDFNumber.of(0);
n = PDFNumber.of(3 | N.asNumber());
d.set(PDFName.of('SigFlags'), n), d.get(PDFName.of('Fields')).push(r);
};
export { pdflibAddPlaceholder };
apps/OpenSignServer/databases/migrations/20240313095456-update_tour_dashboard.cjs
+219
View File
@@ -0,0 +1,219 @@
/**
*
* @param {Parse} Parse
*/
exports.up = async Parse => {
// TODO: set className here
const className = 'w_dashboard';
const dashboard = new Parse.Query(className);
const updatedashboard = await dashboard.get('35KBoSgoAK');
updatedashboard.set('rows', [
{
columns: [
{
colxs: '12',
colmd: '6',
collg: '6',
widget: {
type: 'Card',
icon: 'fas fa-signature',
bgColor: '#f0058e',
label: 'Need your Signature',
description: null,
data: {
id: 'e04ee9dc-932d-6b80-0202-703fd154eb74',
queryType: '',
class: 'contracts_Document',
query:
'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
key: 'count',
Redirect_type: 'Report',
Redirect_id: '4Hhwbp482K',
tourSection: 'tourcard1',
tourMessage:
'Clicking on this card will take you to the list of documents awaiting your review.',
},
},
},
{
colxs: '12',
colmd: '6',
collg: '6',
widget: {
type: 'Card',
icon: 'fas fa-sign-out-alt',
bgColor: '#g0058e',
label: 'Out for signatures',
description: null,
data: {
id: 'c1935cc0-28d4-3d73-b72a-8c1e3d18a17f',
queryType: '',
class: 'contracts_Document',
query:
'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
key: 'count',
Redirect_type: 'Report',
Redirect_id: '1MwEuxLEkF',
tourSection: 'tourcard2',
tourMessage:
'Clicking on this card will take you to a list of documents awaiting signature.',
},
},
},
{
colxs: '12',
colmd: '6',
collg: '6',
widget: {
type: 'report',
reportId: '5Go51Q7T8r',
data: {
tourSection: 'tourreport1',
tourMessage: 'This is a list of documents that are waiting for your signature.',
},
},
},
{
colxs: '12',
colmd: '6',
collg: '6',
widget: {
type: 'report',
reportId: 'd9k3UfYHBc',
data: {
tourSection: 'tourreport2',
tourMessage:
"This is a list of documents you've sent to other parties for signature.",
},
},
},
{
colxs: '12',
colmd: '12',
collg: '12',
widget: {
type: 'report',
reportId: 'kC5mfynCi4',
data: {
tourSection: 'tourreport3',
tourMessage:
'This are documents you have started but have not finalized for sending.',
},
},
},
],
},
]);
return updatedashboard.save();
};
/**
*
* @param {Parse} Parse
*/
exports.down = async Parse => {
const className = 'w_dashboard';
const dashboard = new Parse.Query(className);
const revertdashboard = await dashboard.get('35KBoSgoAK');
revertdashboard.set('rows', [
{
columns: [
{
colxs: '12',
colmd: '6',
collg: '6',
widget: {
type: 'Card',
icon: 'fas fa-signature',
bgColor: '#f0058e',
label: 'Need your Signature',
description: null,
data: {
id: 'e04ee9dc-932d-6b80-0202-703fd154eb74',
queryType: '',
class: 'contracts_Document',
query:
'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
key: 'count',
Redirect_type: 'Report',
Redirect_id: '4Hhwbp482K',
tourSection: 'tourcard1',
tourMessage:
'This card shows the aggregate count of documents that are awaiting your signature. Clicking on this card will seamlessly take you to the detailed list of such documents for your review and action.',
},
},
},
{
colxs: '12',
colmd: '6',
collg: '6',
widget: {
type: 'Card',
icon: 'fas fa-sign-out-alt',
bgColor: '#g0058e',
label: 'Out for signatures',
description: null,
data: {
id: 'c1935cc0-28d4-3d73-b72a-8c1e3d18a17f',
queryType: '',
class: 'contracts_Document',
query:
'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
key: 'count',
Redirect_type: 'Report',
Redirect_id: '1MwEuxLEkF',
tourSection: 'tourcard2',
tourMessage:
"This card indicates the total number of documents you've sent out for signatures. A single click on this card will navigate you to a comprehensive list of these documents, allowing you to monitor their status.",
},
},
},
{
colxs: '12',
colmd: '6',
collg: '6',
widget: {
type: 'report',
reportId: '5Go51Q7T8r',
data: {
tourSection: 'tourreport1',
tourMessage:
'Here lies a curated list of documents that are pending your signature. These are requests from other users that require your immediate attention for completion.',
},
},
},
{
colxs: '12',
colmd: '6',
collg: '6',
widget: {
type: 'report',
reportId: 'd9k3UfYHBc',
data: {
tourSection: 'tourreport2',
tourMessage:
"This area displays all the documents you've dispatched for signatures from other parties. It serves as a real-time tracker for documents pending external approval.",
},
},
},
{
colxs: '12',
colmd: '12',
collg: '12',
widget: {
type: 'report',
reportId: 'kC5mfynCi4',
data: {
tourSection: 'tourreport3',
tourMessage:
"In this section, you'll find your draft documents awaiting completion. These are the documents you've initiated but haven't yet finalized for sending.",
},
},
},
],
},
]);
return revertdashboard.save();
};
apps/OpenSignServer/package-lock.json
Generated
+4 -4
View File
@@ -32,7 +32,7 @@
"parse-server-api-mail-adapter": "^3.1.1",
"parse-server-fs-adapter": "1.0.1",
"parse-server-s3-adapter": "^1.2.0",
"pdf-lib": "^1.16.0",
"pdf-lib": "^1.17.1",
"pdfkit": "^0.13.0",
"posthog-node": "^3.6.2",
"razorpay": "^2.8.6",
@@ -7025,9 +7025,9 @@
"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
},
"node_modules/pdf-lib": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.16.0.tgz",
"integrity": "sha512-P/1SSmElOBKrPlbc+Sn7UxikRQbzVA64+4Dh6/uczPscvq/NatP9eryoOguyBTpTnzICNiG8EnMH4Ziqp2TnFA==",
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
"integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
"dependencies": {
"@pdf-lib/standard-fonts": "^1.0.0",
"@pdf-lib/upng": "^1.0.1",
apps/OpenSignServer/package.json
+1 -1
View File
@@ -41,7 +41,7 @@
"parse-server-api-mail-adapter": "^3.1.1",
"parse-server-fs-adapter": "1.0.1",
"parse-server-s3-adapter": "^1.2.0",
"pdf-lib": "^1.16.0",
"pdf-lib": "^1.17.1",
"pdfkit": "^0.13.0",
"posthog-node": "^3.6.2",
"razorpay": "^2.8.6",