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

fix: expired and decline document block whole screeen

Browse Source
This commit is contained in:
RaktimaNXG
2023-11-06 14:51:33 +05:30
parent 95558d1407
commit fe37f3e021
8 changed files with 201 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+34 -65
View File
@@ -11,15 +11,13 @@ import { HTML5Backend } from "react-dnd-html5-backend";
import { useParams } from "react-router-dom";
import SignPad from "./component/signPad";
import RenderAllPdfPage from "./component/renderAllPdfPage";
import {
getBase64FromIMG,
getBase64FromUrl
} from "../utils/Utils";
import { getBase64FromIMG, getBase64FromUrl } from "../utils/Utils";
import Loader from "./component/loader";
import HandleError from "./component/HandleError";
import Nodata from "./component/Nodata";
import Header from "./component/header";
import RenderPdf from "./component/renderPdf";
import CustomModal from "./component/CustomModal";
function PdfRequestFiles() {
const { docId } = useParams();
@@ -191,7 +189,7 @@ function PdfRequestFiles() {
//comparison auditTrail user details with signers user details
for (let i = 0; i < signerRes.length; i++) {
const signerId = signerRes[i].objectId;
let isSigned = false;
for (let j = 0; j < checkDocIdExist.length; j++) {
const signedExist =
@@ -912,6 +910,7 @@ function PdfRequestFiles() {
//function for set decline true on press decline button
const declineDoc = async () => {
setIsDecline({ isDeclined: false });
const data = {
IsDeclined: true
};
@@ -984,6 +983,36 @@ function PdfRequestFiles() {
)}
<div className="signatureContainer">
{/* this modal is used to show decline alert */}
<CustomModal
show={isDecline.isDeclined}
headMsg="Document Declined Alert!"
bodyMssg={
isDecline.currnt === "Sure" ? (
<p className="pTagBody">
Are you sure want to decline this document ?
</p>
) : isDecline.currnt === "YouDeclined" ? (
<p className="pTagBody">You have declined this document!</p>
) : (
isDecline.currnt === "another" && (
<p className="pTagBody">
You cannot sign this document as it has been declined by
one or more person(s).
</p>
)
)
}
footerMessage={isDecline.currnt === "Sure"}
declineDoc={declineDoc}
setIsDecline={setIsDecline}
/>
{/* this modal is used for show expired alert */}
<CustomModal
show={isExpired}
headMsg="Document Expired!"
bodyMssg="This Document is no longer available."
/>
{/* this component used to render all pdf pages in left side */}
<RenderAllPdfPage
signPdfUrl={pdfDetails[0].URL}
@@ -999,66 +1028,6 @@ function PdfRequestFiles() {
marginRight: pdfOriginalWidth > 500 && "20px"
}}
>
<Modal show={isExpired}>
<ModalHeader className="bg-danger">
<span className="spanTagHead">Document Expired!</span>
</ModalHeader>
<Modal.Body>
<p className="pTagBody">
This Document is no longer available.
</p>
</Modal.Body>
</Modal>
{/* this modal is used for show decline alert */}
<Modal show={isDecline.isDeclined}>
<ModalHeader className="bg-danger">
<span className="spanTagHead">Document Declined Alert!</span>
</ModalHeader>
<Modal.Body>
{isDecline.currnt === "Sure" ? (
<p className="pTagBody">
Are you sure want to decline this document ?
</p>
) : isDecline.currnt === "YouDeclined" ? (
<p className="pTagBody">You have declined this document!</p>
) : (
isDecline.currnt === "another" && (
<p className="pTagBody">
You cannot sign this document as it has been declined by
one or more person(s).
</p>
)
)}
</Modal.Body>
<Modal.Footer>
{isDecline.currnt === "Sure" && (
<>
<button
style={{
color: "black"
}}
type="button"
className="finishBtn"
onClick={() => setIsDecline({ isDeclined: false })}
>
Close
</button>
<button
style={{
background: "#de4337"
}}
type="button"
className="finishBtn"
onClick={() => declineDoc()}
>
Yes
</button>
</>
)}
</Modal.Footer>
</Modal>
{/* this modal is used show this document is already sign */}
<Modal show={isCompleted.isModal}>
microfrontends/SignDocuments/src/Component/component/CustomModal.js
+51
View File
@@ -0,0 +1,51 @@
import React from "react";
import "../../css/customModal.css";
import "../../css/signature.css";
function CustomModal({
show,
headMsg,
bodyMssg,
footerMessage,
declineDoc,
setIsDecline
}) {
return (
show && (
<div className="parentDiv">
<div className="childDiv">
<div className="modalHeadDiv bg-danger">{headMsg && headMsg}</div>
<div className="modalBodyDIv">
<p className="pTagBody">{bodyMssg && bodyMssg}</p>
</div>
{footerMessage && (
<div className="modalFooterDiv">
<button
style={{
color: "black"
}}
type="button"
className="finishBtn"
onClick={() => setIsDecline({ isDeclined: false })}
>
Close
</button>
<button
style={{
background: "#de4337"
}}
type="button"
className="finishBtn"
onClick={() => declineDoc()}
>
Yes
</button>
</div>
)}
</div>
</div>
)
);
}
export default CustomModal;
microfrontends/SignDocuments/src/Component/component/defaultSignature.js
+2 -2
View File
@@ -1,5 +1,5 @@
import React, { useEffect } from "react";
import axios from "axios";
import React from "react";
function DefaultSignature({
themeColor,
microfrontends/SignDocuments/src/Component/component/emailComponent.js
+1 -1
View File
@@ -26,7 +26,7 @@ function EmailComponent({
//function for send email
const sendEmail = async () => {
setIsLoading(true);
let sendMail, recipent;
let sendMail;
for (let i = 0; i < emailCount.length; i++) {
try {
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+29 -52
View File
@@ -23,8 +23,8 @@ import Loader from "./component/loader";
import HandleError from "./component/HandleError";
import Nodata from "./component/Nodata";
import Header from "./component/header";
import ModalComponent from "./component/modalComponent";
import RenderPdf from "./component/renderPdf";
import CustomModal from "./component/CustomModal";
function EmbedPdfImage() {
const { id, contactBookId } = useParams();
const [isSignPad, setIsSignPad] = useState(false);
@@ -953,6 +953,34 @@ function EmbedPdfImage() {
<Nodata />
) : (
<div className="signatureContainer">
{/* this modal is used to show decline alert */}
<CustomModal
show={isDecline.isDeclined}
headMsg="Document Declined Alert!"
bodyMssg={
isDecline.currnt === "Sure" ? (
<p>Are you sure want to decline this document ?</p>
) : isDecline.currnt === "YouDeclined" ? (
<p>You have declined this document!</p>
) : (
isDecline.currnt === "another" && (
<p>
You cannot sign this document as it has been declined by one
or more person(s).
</p>
)
)
}
footerMessage={isDecline.currnt === "Sure"}
declineDoc={declineDoc}
setIsDecline={setIsDecline}
/>
{/* this modal is used for show expired alert */}
<CustomModal
show={isExpired}
headMsg="Document Expired!"
bodyMssg="This Document is no longer available."
/>
{/* this component used for UI interaction and show their functionality */}
{pdfLoadFail.status &&
!isExpired &&
@@ -975,57 +1003,6 @@ function EmbedPdfImage() {
marginRight: pdfOriginalWidth > 500 && "20px"
}}
>
{/* this modal is used for show decline alert */}
<Modal show={isDecline.isDeclined}>
<ModalHeader className="bg-danger" style={{ color: "white" }}>
Document Declined Alert!
</ModalHeader>
<Modal.Body>
{isDecline.currnt === "Sure" ? (
<p>Are you sure want to decline this document ?</p>
) : isDecline.currnt === "YouDeclined" ? (
<p>You have declined this document!</p>
) : (
isDecline.currnt === "another" && (
<p>
You cannot sign this document as it has been declined by
one or more person(s).
</p>
)
)}
</Modal.Body>
<Modal.Footer>
{isDecline.currnt === "Sure" && (
<>
<button
style={{
color: "black"
}}
type="button"
className="finishBtn"
onClick={() => setIsDecline({ isDeclined: false })}
>
Close
</button>
<button
style={{
background: "#de4337"
}}
type="button"
className="finishBtn"
onClick={() => declineDoc()}
>
Yes
</button>
</>
)}
</Modal.Footer>
</Modal>
{/* this modal component is used for show expired document */}
<ModalComponent isShow={isExpired} type={"expire"} />
{/* this modal is used show this document is already sign */}
<Modal show={isAlreadySign.status}>
<ModalHeader style={{ background: themeColor() }}>
microfrontends/SignDocuments/src/css/customModal.css
+61
View File
@@ -0,0 +1,61 @@
.parentDiv {
width: 100%;
height: 100%;
background: gray;
position: absolute;
z-index: 100;
background-color: rgba(0, 0, 0, 0.75);
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
}
.childDiv {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
background-color: #fff;
margin:30px 20px;
border: 0px 1px 1px 1px solid rgba(0, 0, 0, .2);
border-radius: 0.3rem;
outline: 0;
}
.modalHeadDiv {
padding: 10px;
color: #fff;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
font-size: 17px;
font-weight: 500;
}
.modalBodyDIv {
padding: 20px;
}
.spanTagHead {
color: white !important;
font-size: 17px;
font-weight: 500;
}
.pTagBody {
font-size: 15px !important;
}
.modalFooterDiv{
margin: 10px;
display: flex;
justify-content: flex-end;
}
@media screen and (max-width:500px) {
.childDiv {
margin: 50px 7px;
width: 90%;
}
}
microfrontends/SignDocuments/src/css/signature.css
+1
View File
@@ -341,6 +341,7 @@
flex-direction: row;
justify-content: space-between;
background-color: #ebebeb;
position:"relative"
/* max-height: 800px; */
/* overflow: auto; */
}
microfrontends/SignDocuments/src/utils/Utils.js
+22 -16
View File
@@ -57,37 +57,41 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
(data, ind) =>
data.key === signKey && data.Width && data.Height && data.SignUrl
);
if (updateFilter.length > 0) {
let newWidth, nweHeight;
let newWidth, newHeight;
const aspectRatio = imgWH.width / imgWH.height;
const getXYdata = xyPostion[index].pos;
if (aspectRatio === 1) {
newWidth = aspectRatio * 100;
nweHeight = aspectRatio * 100;
newHeight = aspectRatio * 100;
} else if (aspectRatio < 2) {
newWidth = aspectRatio * 100;
nweHeight = 100;
newHeight = 100;
} else if (aspectRatio > 2 && aspectRatio < 4) {
newWidth = aspectRatio * 70;
nweHeight = 70;
newHeight = 70;
} else if (aspectRatio > 4) {
newWidth = aspectRatio * 40;
nweHeight = 40;
newHeight = 40;
} else if (aspectRatio > 5) {
newWidth = aspectRatio * 10;
nweHeight = 10;
newHeight = 10;
}
let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
let getPosData = xyPostion[index].pos.filter(
(data) => data.key === signKey
);
const addSign = getXYdata.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
Width: getPosData[0].Width ? getPosData[0].Width : 150,
Height: getPosData[0].Height ? getPosData[0].Height : 60,
Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
@@ -106,7 +110,9 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
} else {
const getXYdata = xyPostion[index].pos;
let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
let getPosData = xyPostion[index].pos.filter(
(data) => data.key === signKey
);
const aspectRatio = imgWH.width / imgWH.height;
let newWidth, newHeight;
@@ -131,9 +137,9 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
if (url.key === signKey) {
return {
...url,
Width: getPosData[0].Width ? getPosData[0].Width : 150,
Height: getPosData[0].Height ? getPosData[0].Height : 60,
SignUrl: image.src,
Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
SignUrl: image.src,
ImageType: image.imgType
};
}