WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-20 06:35:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: checkbox widget status,fix image emabed and upload issue

Browse Source
This commit is contained in:
RaktimaNXG
2024-01-25 16:18:37 +05:30
parent ad5776cfba
commit bc90da4cf2
10 changed files with 284 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/ManageSign.js
+2 -2
View File
@@ -493,7 +493,7 @@ const ManageSign = () => {
justifyContent: "space-between"
// width: 460,
}}
className="penContainer"
className="penContainerDefault"
>
<div>
{!image && (
@@ -611,7 +611,7 @@ const ManageSign = () => {
flexDirection: "row",
justifyContent: "space-between"
}}
className="penContainer"
className="penContainerInitial"
>
<div>
{!isInitials && (
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+41 -8
View File
@@ -296,23 +296,55 @@ function PdfRequestFiles() {
(data) => data.signerObjId === signerObjectId
);
if (checkUser && checkUser.length > 0) {
let checkSigned = 0;
let checkWidgetSign = 0;
let allXyPos = 0;
let checkedRequireCount = 0;
let optionalCheckbox = 0;
let CheckboxRequireCount = 0;
for (let i = 0; i < checkUser[0].placeHolder.length; i++) {
const posSignUrlData = checkUser[0].placeHolder[i].pos.filter(
(pos) => pos.SignUrl
(pos) => pos?.SignUrl
);
const posWidgetData = checkUser[0].placeHolder[i].pos.filter(
(pos) => pos.widgetValue
(pos) => pos?.widgetValue && pos?.type !== "checkbox"
);
checkSigned =
checkSigned + posSignUrlData.length + posWidgetData.length;
const checkboxReadOnly = checkUser[0].placeHolder[i].pos.filter(
(pos) =>
pos?.widgetValue &&
pos?.type === "checkbox" &&
pos?.widgetStatus === "Read only"
).length;
const checkboxRequire = checkUser[0].placeHolder[i].pos.filter(
(pos) => pos?.type === "checkbox" && pos?.widgetStatus === "Required"
);
CheckboxRequireCount = CheckboxRequireCount + checkboxRequire?.length;
checkedRequireCount =
checkedRequireCount +
checkUser[0].placeHolder[i].pos?.filter(
(pos) =>
pos?.widgetValue &&
pos?.type === "checkbox" &&
pos?.widgetStatus === "Required"
)?.length;
optionalCheckbox = checkUser[0].placeHolder[i].pos.filter(
(pos) => pos.type === "checkbox" && pos.widgetStatus === "Optional"
).length;
checkWidgetSign =
checkWidgetSign +
posSignUrlData.length +
posWidgetData.length +
checkboxReadOnly +
checkedRequireCount +
optionalCheckbox;
allXyPos = allXyPos + checkUser[0].placeHolder[i].pos.length;
}
if (allXyPos !== checkSigned) {
if (CheckboxRequireCount !== checkedRequireCount) {
setIsAlert({
isShow: true,
alertMessage: "Please check the required checkbox to continue."
});
} else if (allXyPos !== checkWidgetSign) {
setIsAlert({
isShow: true,
alertMessage: "Please complete your signature!"
@@ -450,6 +482,7 @@ function PdfRequestFiles() {
});
};
console.log("signerpos", signerPos);
//function for save button to save signature or image url
const saveSign = (isDefaultSign, width, height) => {
const isTypeText = width && height ? true : false;
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
-1
View File
@@ -518,7 +518,6 @@ function SignYourSelf() {
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(pdfBytes, documentId);
setIsSignPad(false);
setIsEmail(true);
setXyPostion([]);
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+69 -20
View File
@@ -77,23 +77,50 @@ function Placeholder(props) {
props.isShowBorder && (
<>
{props.isPlaceholder && (
<i
data-tut="reactourLinkUser"
className="fa-regular fa-user signUserIcon"
onClick={(e) => {
e.stopPropagation();
props.handleLinkUser(props.data.Id);
props.setUniqueId(props.data.Id);
}}
onTouchEnd={(e) => {
e.stopPropagation();
props.handleLinkUser(props.data.Id);
props.setUniqueId(props.data.Id);
}}
style={{
color: "#188ae2"
}}
></i>
<>
{props.pos.type === "checkbox" && (
<i
onClick={(e) => {
e.stopPropagation();
props.setIsCheckboxRequired(true);
props.setSignKey(props.pos.key);
props.setUniqueId(props.data.Id);
}}
onTouchEnd={(e) => {
e.stopPropagation();
props.setIsCheckboxRequired(true);
props.setSignKey(props.pos.key);
props.setUniqueId(props.data.Id);
}}
class="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2",
right: "23px",
top: "-35px"
}}
></i>
)}
<i
data-tut="reactourLinkUser"
className="fa-regular fa-user signUserIcon"
onClick={(e) => {
e.stopPropagation();
props.handleLinkUser(props.data.Id);
props.setUniqueId(props.data.Id);
}}
onTouchEnd={(e) => {
e.stopPropagation();
props.handleLinkUser(props.data.Id);
props.setUniqueId(props.data.Id);
}}
style={{
color: "#188ae2",
right: props.pos.type === "checkbox" ? "6px" : "32px",
top: props.pos.type === "checkbox" ? "-35px" : "-18px"
}}
></i>
</>
)}
<i
@@ -115,7 +142,15 @@ function Placeholder(props) {
props.setSignKey(props.pos.key);
}}
style={{
color: "#188ae2"
color: "#188ae2",
right:
props.pos.type === "checkbox" && props.isPlaceholder
? "-11px"
: "12px",
top:
props.pos.type === "checkbox" && props.isPlaceholder
? "-35px"
: "-18px"
}}
></i>
<i
@@ -140,7 +175,15 @@ function Placeholder(props) {
}
}}
style={{
color: "#188ae2"
color: "#188ae2",
right:
props.pos.type === "checkbox" && props.isPlaceholder
? "-30px"
: "-8px",
top:
props.pos.type === "checkbox" && props.isPlaceholder
? "-35px"
: "-18px"
}}
></i>
</>
@@ -243,7 +286,12 @@ function Placeholder(props) {
}}
>
{props.isShowBorder ? (
<BorderResize right={-12} top={-11} />
<BorderResize
right={
props.pos.type === "checkbox" && props.isPlaceholder ? -28 : -12
}
top={props.pos.type === "checkbox" && props.isPlaceholder ? -28 : -11}
/>
) : props.data && props.isNeedSign ? (
props.data?.signerObjId === props.signerObjId ? (
<BorderResize />
@@ -258,6 +306,7 @@ function Placeholder(props) {
<PlaceholderBorder
setDraggingEnabled={setDraggingEnabled}
pos={props.pos}
isPlaceholder={props.isPlaceholder}
/>
)}
{isMobile ? (
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js
+8 -2
View File
@@ -3,8 +3,14 @@ import { themeColor } from "../../utils/ThemeColor/backColor";
import { defaultWidthHeight, resizeBorderExtraWidth } from "../../utils/Utils";
function PlaceholderBorder(props) {
const getResizeBorderExtraWidth = resizeBorderExtraWidth();
const defaultWidth = defaultWidthHeight(props.pos.type).width;
const defaultHeight = defaultWidthHeight(props.pos.type).height;
const defaultWidth =
props.pos.type === "checkbox" && props.isPlaceholder
? 50
: defaultWidthHeight(props.pos.type).width;
const defaultHeight =
props.pos.type === "checkbox" && props.isPlaceholder
? 50
: defaultWidthHeight(props.pos.type).height;
return (
<div
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
+4 -1
View File
@@ -85,10 +85,13 @@ function PlaceholderType(props) {
className="inputPlaceholder"
style={{ outlineColor: "#007bff" }}
type="checkbox"
defaultChecked={props.pos?.widgetStatus === "Read only"}
disabled={
props.isNeedSign && props.data?.signerObjId !== props.signerObjId
? true
: props.isPlaceholder
: props.isNeedSign && props.pos?.widgetStatus === "Read only"
? true
: props.isPlaceholder
}
onBlur={handleInputBlur}
checked={props.pos.widgetValue}
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+8 -1
View File
@@ -55,7 +55,8 @@ function RenderPdf({
setIsPageCopy,
setSignerObjId,
setShowDropdown,
setIsInitial
setIsInitial,
setIsCheckboxRequired
}) {
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
@@ -769,6 +770,9 @@ function RenderPdf({
posWidth={posWidth}
posHeight={posHeight}
isDragging={isDragging}
setIsCheckboxRequired={
setIsCheckboxRequired
}
/>
</React.Fragment>
);
@@ -1224,6 +1228,9 @@ function RenderPdf({
posWidth={posWidth}
posHeight={posHeight}
isDragging={isDragging}
setIsCheckboxRequired={
setIsCheckboxRequired
}
/>
</React.Fragment>
);
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+116 -5
View File
@@ -84,7 +84,8 @@ function PlaceHolderSign() {
const [isDontShow, setIsDontShow] = useState(false);
const [isDragging, setIsDragging] = useState(false);
const [showDropdown, setShowDropdown] = useState(false);
const [isCheckboxRequired, setIsCheckboxRequired] = useState(false);
const [selectRequiredType, setSelectRequiredType] = useState("Optional");
const color = [
"#93a3db",
"#e6c3db",
@@ -99,6 +100,7 @@ function PlaceHolderSign() {
"#66ccff",
"#ffffcc"
];
const checkboxType = ["Optional", "Required", "Read only"];
const isMobile = window.innerWidth < 767;
const [{ isOver }, drop] = useDrop({
accept: "BOX",
@@ -349,7 +351,8 @@ function PlaceHolderSign() {
isMobile: isMobile,
yBottom: window.innerHeight / 2 - 60,
zIndex: posZIndex,
type: monitor.type
type: monitor.type,
widgetValue: monitor.type === "checkbox" ? false : ""
};
dropData.push(dropObj);
placeHolder = {
@@ -378,7 +381,8 @@ function PlaceHolderSign() {
scale: scale,
isMobile: isMobile,
zIndex: posZIndex,
type: item.text
type: item.text,
widgetValue: item.text === "checkbox" ? false : ""
};
dropData.push(dropObj);
@@ -450,6 +454,9 @@ function PlaceHolderSign() {
if (item.text === "dropdown" || monitor.type === "dropdown") {
setShowDropdown(true);
setSignKey(key);
} else if (item.text === "checkbox" || monitor.type === "checkbox") {
setIsCheckboxRequired(true);
setSignKey(key);
}
}
}
@@ -659,7 +666,7 @@ function PlaceHolderSign() {
setIsSendAlert({});
let sendMail;
// console.log("pdfDetails", pdfDetails);
const expireDate = pdfDetails?.[0].ExpiryDate.iso;
const newDate = new Date(expireDate);
const localExpireDate = newDate.toLocaleDateString("en-US", {
@@ -982,7 +989,6 @@ function PlaceHolderSign() {
setCurrentId(getCurrentUserDeatils[0].Email);
}
}
// console.log("updateSigner ", updateSigner);
setSignersData(updateSigner);
const index = signersdata.findIndex((x) => x.Id === uniqueId);
@@ -993,6 +999,59 @@ function PlaceHolderSign() {
const closePopup = () => {
setIsAddUser({});
};
//function for add checkbox widget status in signerPos array
const handleApplycheckbox = () => {
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((position, ind) => {
if (position.key === signKey) {
if (selectRequiredType === "Read only") {
return {
...position,
widgetStatus: selectRequiredType,
widgetValue: true
};
} else {
return {
...position,
widgetStatus: selectRequiredType
};
}
}
return position;
});
const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
const newUpdateSigner = signerPos.map((obj, ind) => {
if (obj.Id === uniqueId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
setIsCheckboxRequired(false);
setSelectRequiredType("Optional");
}
}
};
return (
<>
<Title title={state?.title ? state.title : "New Document"} />
@@ -1191,6 +1250,57 @@ function PlaceHolderSign() {
</button>
</div>
</ModalUi>
{/* checkbox widget status component */}
<ModalUi isOpen={isCheckboxRequired} title={"Checkbox"}>
<div style={{ height: "100%", padding: 20 }}>
{checkboxType.map((data, key) => {
return (
<div
key={key}
style={{ display: "flex", flexDirection: "column" }}
>
<label
key={key}
style={{ fontSize: "16px", fontWeight: "500" }}
>
<input
style={{ accentColor: "red", marginRight: "10px" }}
type="radio"
value={data}
onChange={() => setSelectRequiredType(data)}
checked={selectRequiredType === data}
/>
{data}
</label>
</div>
);
})}
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
onClick={() => {
handleApplycheckbox();
}}
style={{
background: themeColor()
}}
type="button"
// disabled={!selectCopyType}
className="finishBtn"
>
Apply
</button>
</div>
</ModalUi>
<PlaceholderCopy
isPageCopy={isPageCopy}
setIsPageCopy={setIsPageCopy}
@@ -1252,6 +1362,7 @@ function PlaceHolderSign() {
setUniqueId={setUniqueId}
isDragging={isDragging}
setShowDropdown={setShowDropdown}
setIsCheckboxRequired={setIsCheckboxRequired}
/>
)}
</div>
microfrontends/SignDocuments/src/css/signature.css
+23 -14
View File
@@ -94,7 +94,6 @@
width: 460px;
height: 184px;
}
.intialSignatureCanvas {
border: 2px solid #888;
background-color: rgb(255, 255, 255);
@@ -105,12 +104,16 @@
.intialSignature {
border: 2px solid #888;
background-color: rgb(255, 255, 255);
width: 180px;
height: 180px;
width: 183px;
height: 183px;
}
.penContainer {
width: 180px;
.penContainerDefault {
width: 460px;
}
.penContainerInitial {
width: 183px;
}
.borderResize {
@@ -278,8 +281,7 @@
.signCloseBtn {
position: absolute;
right: -8px;
top: -18px;
font-size: 14px;
cursor: pointer;
z-index: 2;
@@ -288,8 +290,7 @@
.signCopy {
position: absolute;
right: 12px;
top: -18px;
font-size: 13px;
cursor: pointer;
z-index: 2;
@@ -298,8 +299,16 @@
.signUserIcon {
position: absolute;
right: 32px;
top: -18px;
font-size: 13px;
cursor: pointer;
z-index: 2;
background: white;
}
.settingIcon {
position: absolute;
font-size: 13px;
cursor: pointer;
z-index: 2;
@@ -923,7 +932,7 @@ option {
height: 120px;
}
.penContainer {
.penContainerDefault {
width: 300px;
}
@@ -955,7 +964,7 @@ option {
height: 112px;
}
.penContainer {
.penContainerDefault {
width: 280px;
}
@@ -991,7 +1000,7 @@ option {
height: 92px;
}
.penContainer {
.penContainerDefault {
width: 230px;
}
microfrontends/SignDocuments/src/utils/Utils.js
+13 -4
View File
@@ -364,6 +364,7 @@ export const defaultWidthHeight = (type) => {
export const resizeBorderExtraWidth = () => {
return 20;
};
export async function getBase64FromUrl(url) {
const data = await fetch(url);
const blob = await data.blob();
@@ -440,7 +441,7 @@ export function getHostUrl() {
export const calculateImgAspectRatio = (imgWH, pos) => {
let newWidth, newHeight;
const placeholderHeight = pos && pos.Width ? pos.Height : 60;
const placeholderHeight = pos && pos.Height ? pos.Height : 60;
const aspectRatio = imgWH.width / imgWH.height;
newWidth = aspectRatio * placeholderHeight;
newHeight = placeholderHeight;
@@ -451,6 +452,7 @@ export const calculateImgAspectRatio = (imgWH, pos) => {
//function for upload stamp or image
export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
let getIMGWH;
//get current page position
const getXYData = xyPostion[index].pos;
const updateXYData = getXYData.map((position) => {
@@ -901,7 +903,8 @@ export const multiSignEmbed = async (
if (
imgData.type === "signature" ||
imgData.type === "stamp" ||
imgData.type === "initials"
imgData.type === "initials" ||
imgData.type === "image"
) {
if (
(imgData.ImageType && imgData.ImageType === "image/png") ||
@@ -996,14 +999,20 @@ export const multiSignEmbed = async (
width: scaleWidth,
height: scaleHeight
});
checkBox.check();
if (imgData.widgetValue) {
checkBox.check();
} else {
checkBox.uncheck();
}
checkBox.enableReadOnly();
} else if (
imgData.type === "text" ||
imgData.type === "name" ||
imgData.type === "company" ||
imgData.type === "job title" ||
imgData.type === "date"
imgData.type === "date" ||
imgData.type === "email"
) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 12;