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

feat: implement functionality to delete a PDF page while editing the document

Browse Source
This commit is contained in:
RaktimaNXG
2024-11-25 13:06:31 +05:30
parent 41c3b4746d
commit b2afe37942
16 changed files with 409 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/public/locales/en/translation.json
+5 -1
View File
@@ -709,5 +709,9 @@
},
"expiry-date": "Expiry Date",
"expiry-date-updated": "The expiry date has been successfully extended to {{newexpirydate}}",
"expiry-date-error": "Please provide a new expiry date that is later than the current one"
"expiry-date-error": "Please provide a new expiry date that is later than the current one",
"delete-page":"Delete page",
"delete-alert":"Can not delete single page",
"delete-alert-2":"Are you sure want to delete this page ?",
"delete-note":"Note - once delete this page you can not undo"
}
apps/OpenSign/public/locales/es/translation.json
+5 -1
View File
@@ -709,5 +709,9 @@
},
"expiry-date": "Date d'expiration",
"expiry-date-updated": "La fecha de vencimiento se ha extendido con éxito hasta el {{newexpirydate}}",
"expiry-date-error": "Proporcione una nueva fecha de vencimiento que sea posterior a la actual"
"expiry-date-error": "Proporcione una nueva fecha de vencimiento que sea posterior a la actual",
"delete-page": "eliminar página",
"delete-alert": "No se puede eliminar una sola página",
"delete-alert-2": "¿Está seguro de que desea eliminar esta página?",
"delete-note": "Nota: una vez que elimines esta página, no podrás deshacerla"
}
apps/OpenSign/public/locales/fr/translation.json
+5 -1
View File
@@ -708,5 +708,9 @@
},
"expiry-date": "Fecha de caducidad",
"expiry-date-updated": "La fecha de vencimiento se ha extendido con éxito hasta el {{newexpirydate}}",
"expiry-date-error": "Veuillez fournir une nouvelle date d'expiration postérieure à la date actuelle"
"expiry-date-error": "Veuillez fournir une nouvelle date d'expiration postérieure à la date actuelle",
"delete-page": "supprimer la page",
"delete-alert": "Impossible de supprimer une seule page",
"delete-alert-2": "Etes-vous sûr de vouloir supprimer cette page ?",
"delete-note": "Remarque : une fois cette page supprimée, vous ne pouvez plus l'annuler"
}
apps/OpenSign/src/components/RotateAlert.js
+5 -3
View File
@@ -6,9 +6,9 @@ function RotateAlert(props) {
const { t } = useTranslation();
return (
<ModalUi
isOpen={props.isRotate}
isOpen={props.showRotateAlert}
title={t("Rotation-alert")}
handleClose={() => props.setIsRotate({ status: false, degree: 0 })}
handleClose={() => props.setShowRotateAlert({ status: false, degree: 0 })}
>
{" "}
<div className="p-[20px] h-full">
@@ -16,7 +16,9 @@ function RotateAlert(props) {
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
<div className="flex gap-1">
<button
onClick={() => props.setIsRotate({ status: false, degree: 0 })}
onClick={() =>
props.setShowRotateAlert({ status: false, degree: 0 })
}
type="button"
className="op-btn op-btn-ghost shadow-md"
>
apps/OpenSign/src/components/pdf/PdfHeader.js
+59 -1
View File
@@ -1,8 +1,10 @@
import React, { useState } from "react";
import PrevNext from "./PrevNext";
import {
deletePdfPage,
handleDownloadCertificate,
handleDownloadPdf,
handleRemoveWidgets,
handleToPrint
} from "../../constant/Utils";
import "../../styles/signature.css";
@@ -41,7 +43,13 @@ function Header({
isDisableRotate,
templateId,
setIsDownloadModal,
disabledBackBtn
disabledBackBtn,
setPdfArrayBuffer,
setPdfBase64Url,
pdfArrayBuffer,
setIsUploadPdf,
setSignerPos,
userId
}) {
const { t } = useTranslation();
const filterPrefill =
@@ -49,6 +57,7 @@ function Header({
const isMobile = window.innerWidth < 767;
const [isDownloading, setIsDownloading] = useState("");
const isGuestSigner = localStorage.getItem("isGuestSigner");
const [isDeletePage, setIsDeletePage] = useState(false);
const enabledBackBtn = disabledBackBtn === true ? false : true;
//function for show decline alert
@@ -56,6 +65,18 @@ function Header({
const currentDecline = { currnt: "Sure", isDeclined: true };
setIsDecline(currentDecline);
};
const handleDetelePage = async () => {
setIsUploadPdf(true);
const pdfupdatedData = await deletePdfPage(pdfArrayBuffer, pageNumber);
if (pdfupdatedData?.totalPages === 1) {
alert(t("delete-alert"));
} else {
setPdfBase64Url(pdfupdatedData.base64);
setPdfArrayBuffer(pdfupdatedData.arrayBuffer);
setIsDeletePage(false);
handleRemoveWidgets(setSignerPos, signerPos, pageNumber, userId);
}
};
return (
<div className="flex py-[5px]">
{isMobile && isShowHeader ? (
@@ -255,6 +276,17 @@ function Header({
</span>
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
className="DropdownMenuItem"
onClick={() => setIsDeletePage(true)}
>
<div className="flex flex-row">
<i className="fa-light fa-trash text-gray-500 2xl:text-[30px] mr-[3px]"></i>
<span className="font-[500]">
{t("delete-page")}
</span>
</div>
</DropdownMenu.Item>
</>
)}
@@ -553,6 +585,32 @@ function Header({
<p>{t("generate-certificate-alert")}</p>
</div>
</ModalUi>
<ModalUi
isOpen={isDeletePage}
title={t("validation-alert")}
handleClose={() => setIsDeletePage(false)}
>
<div className="h-[100%] p-[20px]">
<p>{t("delete-alert-2")}</p>
<p className="pt-3 font-medium">{t("delete-note")}</p>
{/* <p>{t("deletepage-alert")}</p> */}
<div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
<button
onClick={() => handleDetelePage()}
type="button"
className="op-btn op-btn-primary"
>
{t("yes")}
</button>
<button
onClick={() => setIsDeletePage(false)}
type="button"
className="op-btn op-btn-ghost"
>
{t("no")}
</button>
</div>
</ModalUi>
</div>
);
}
apps/OpenSign/src/components/pdf/PdfZoom.js
+101 -33
View File
@@ -1,47 +1,115 @@
import React from "react";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { deletePdfPage, handleRemoveWidgets } from "../../constant/Utils";
import ModalUi from "../../primitives/ModalUi";
function PdfZoom(props) {
const { t } = useTranslation();
const [isDeletePage, setIsDeletePage] = useState(false);
const handleDetelePage = async () => {
props.setIsUploadPdf(true);
try {
const pdfupdatedData = await deletePdfPage(
props.pdfArrayBuffer,
props.pageNumber
);
if (pdfupdatedData?.totalPages === 1) {
alert(t("delete-alert"));
} else {
props.setPdfBase64Url(pdfupdatedData.base64);
props.setPdfArrayBuffer(pdfupdatedData.arrayBuffer);
setIsDeletePage(false);
handleRemoveWidgets(
props.setSignerPos,
props.signerPos,
props.pageNumber,
props.userId
);
}
} catch (e) {
console.log("error in delete pdf page", e);
}
};
return (
<span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[43px] 2xl:mt-[63px]">
<span
className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
onClick={() => props.clickOnZoomIn()}
title={t("zoom-in")}
>
<i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
</span>
{!props?.isDisableRotate && (
<>
<>
<span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[43px] 2xl:mt-[63px]">
<span
className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
onClick={() => props.clickOnZoomIn()}
title={t("zoom-in")}
>
<i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
</span>
{!props.isDisableDelete && (
<span
className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
onClick={() => props.handleRotationFun(90)}
title={t("rotate-right")}
onClick={() => setIsDeletePage(true)}
title={t("delete-page")}
>
<i className="fa-light fa-rotate-right text-gray-500 2xl:text-[30px]"></i>
<i className="fa-light fa-trash text-gray-500 2xl:text-[30px]"></i>
</span>
<span
className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
title={t("rotate-left")}
onClick={() => props.handleRotationFun(-90)}
>
<i className="fa-light fa-rotate-left text-gray-500 2xl:text-[30px]"></i>
</span>
</>
)}
<span
className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px]"
onClick={() => props.clickOnZoomOut()}
style={{
cursor: props.zoomPercent > 0 ? "pointer" : "default"
}}
title={t("zoom-out")}
>
<i className="fa-light fa-magnifying-glass-minus text-gray-500 2xl:text-[30px]"></i>
)}
{!props?.isDisableRotate && (
<>
<span
className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
onClick={() => props.handleRotationFun(90)}
title={t("rotate-right")}
>
<i className="fa-light fa-rotate-right text-gray-500 2xl:text-[30px]"></i>
</span>
<span
className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
title={t("rotate-left")}
onClick={() => props.handleRotationFun(-90)}
>
<i className="fa-light fa-rotate-left text-gray-500 2xl:text-[30px]"></i>
</span>
</>
)}
<span
className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px]"
onClick={() => props.clickOnZoomOut()}
style={{
cursor: props.zoomPercent > 0 ? "pointer" : "default"
}}
title={t("zoom-out")}
>
<i className="fa-light fa-magnifying-glass-minus text-gray-500 2xl:text-[30px]"></i>
</span>
</span>
</span>
<ModalUi
isOpen={isDeletePage}
title={t("validation-alert")}
handleClose={() => setIsDeletePage(false)}
>
<div className="h-[100%] p-[20px]">
<p>Are you sure want to delete this page ?</p>
<p className="pt-3 font-medium">
Note - once delete this page you can not undo
</p>
{/* <p>{t("deletepage-alert")}</p> */}
<div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
<button
onClick={() => handleDetelePage()}
type="button"
className="op-btn op-btn-primary"
>
{t("yes")}
</button>
<button
onClick={() => setIsDeletePage(false)}
type="button"
className="op-btn op-btn-ghost"
>
{t("no")}
</button>
</div>
</ModalUi>
</>
);
}
apps/OpenSign/src/components/pdf/RenderAllPdfPage.js
+3 -3
View File
@@ -13,7 +13,7 @@ function RenderAllPdfPage({
signerPos,
signerObjectId,
containerWH,
pdfRotateBase64
pdfBase64Url
}) {
const { t } = useTranslation();
const [signPageNumber, setSignPageNumber] = useState([]);
@@ -67,7 +67,7 @@ function RenderAllPdfPage({
)
);
};
const pdfDataBase64 = `data:application/pdf;base64,${pdfRotateBase64}`;
const pdfDataBase64 = `data:application/pdf;base64,${pdfBase64Url}`;
return (
<div ref={pageContainer} className="hidden w-[20%] bg-base-100 md:block">
<div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
@@ -80,7 +80,7 @@ function RenderAllPdfPage({
<Document
loading={t("loading-doc")}
onLoadSuccess={onDocumentLoad}
file={(pdfRotateBase64 && pdfDataBase64) || signPdfUrl}
file={(pdfBase64Url && pdfDataBase64) || signPdfUrl}
>
{Array.from(new Array(allPages), (el, index) => (
<div
apps/OpenSign/src/components/pdf/RenderPdf.js
+6 -7
View File
@@ -61,7 +61,7 @@ function RenderPdf({
setIsSelectId,
ispublicTemplate,
handleUserDetails,
pdfRotateBase64,
pdfBase64Url,
fontSize,
setFontSize,
fontColor,
@@ -256,8 +256,7 @@ function RenderPdf({
);
}
};
const pdfDataBase64 = `data:application/pdf;base64,${pdfRotateBase64}`;
const pdfDataBase64 = `data:application/pdf;base64,${pdfBase64Url}`;
return (
<>
{successEmail && (
@@ -377,10 +376,11 @@ function RenderPdf({
return (
<React.Fragment key={ind}>
{data.pageNumber === pageNumber &&
data.pos.map((pos) => {
data.pos.map((pos, id) => {
return (
pos && (
<Placeholder
key={id}
pos={pos}
setIsPageCopy={setIsPageCopy}
setSignKey={setSignKey}
@@ -443,7 +443,7 @@ function RenderPdf({
}
}}
file={
(pdfRotateBase64 && pdfDataBase64) ||
(pdfBase64Url && pdfDataBase64) ||
pdfDetails[0]?.SignedUrl ||
pdfDetails[0].URL
}
@@ -640,9 +640,8 @@ function RenderPdf({
setSelectWidgetId("");
}
}}
// ref={pdfRef}
file={
(pdfRotateBase64 && pdfDataBase64) ||
(pdfBase64Url && pdfDataBase64) ||
pdfDetails[0]?.SignedUrl ||
pdfDetails[0].URL
}
apps/OpenSign/src/constant/Utils.js
+49 -29
View File
@@ -2425,23 +2425,9 @@ export const getDefaultSignature = async (objectId) => {
};
//function to rotate pdf page
export async function rotatePdfPage(
url,
rotateDegree,
pageNumber,
pdfRotateBase64
) {
let file;
//condition to handle pdf base64 in arrayBuffer format
if (pdfRotateBase64) {
file = base64ToArrayBuffer(pdfRotateBase64);
} else {
//condition to handle pdf url in arrayBuffer format
file = await convertPdfArrayBuffer(url);
}
export async function rotatePdfPage(rotateDegree, pageNumber, pdfArrayBuffer) {
// Load the existing PDF
const pdfDoc = await PDFDocument.load(file);
const pdfDoc = await PDFDocument.load(pdfArrayBuffer);
// Get the page according to page number
const page = pdfDoc.getPage(pageNumber);
//get current page rotation angle
@@ -2507,21 +2493,35 @@ export const handleRemoveWidgets = (
setSignerPos,
signerPos,
pageNumber,
userId,
setIsRotate
) => {
const updatedSignerPos = signerPos.map((placeholderObj) => {
return {
...placeholderObj,
placeHolder: placeholderObj?.placeHolder?.filter(
(data) => data?.pageNumber !== pageNumber
)
};
});
setSignerPos(updatedSignerPos);
setIsRotate({
status: false,
degree: 0
});
const isSigners = signerPos.some((data) => data.signerPtr);
if (isSigners) {
const updatedSignerPos = signerPos.map((placeholderObj) => {
if (placeholderObj.Id === userId) {
return {
...placeholderObj,
placeHolder: placeholderObj?.placeHolder?.filter(
(data) => data?.pageNumber !== pageNumber
)
};
} else {
return placeholderObj;
}
});
setSignerPos(updatedSignerPos);
setIsRotate &&
setIsRotate({
status: false,
degree: 0
});
} else {
const updatedSignerPos = signerPos.filter(
(data) => data?.pageNumber !== pageNumber
);
setSignerPos(updatedSignerPos);
}
};
//function to show warning when user rotate page and there are some already widgets on that page
export const handleRotateWarning = (signerPos, pageNumber) => {
@@ -2610,3 +2610,23 @@ export const formatDate = (date) => {
const format = formattedDate.replaceAll(/ /g, "-");
return format;
};
export const deletePdfPage = async (pdfArrayBuffer, pageNumber) => {
// Load the existing PDF
const pdfDoc = await PDFDocument.load(pdfArrayBuffer);
// Get the total number of pages
const totalPages = pdfDoc.getPageCount();
// Ensure the page index is valid
if (totalPages > 1) {
//Remove the specified page
pdfDoc.removePage(pageNumber - 1);
// Save the modified PDF
const modifiedPdfBytes = await pdfDoc.saveAsBase64({
useObjectStreams: false
});
const arrayBuffer = base64ToArrayBuffer(modifiedPdfBytes);
return { arrayBuffer: arrayBuffer, base64: modifiedPdfBytes };
} else {
return { totalPages: 1 };
}
};
apps/OpenSign/src/pages/PdfRequestFiles.js
+12 -13
View File
@@ -41,7 +41,8 @@ import {
fetchUrl,
signatureTypes,
handleSignatureType,
getTenantDetails
getTenantDetails,
getBase64FromUrl
} from "../constant/Utils";
import Header from "../components/pdf/PdfHeader";
import RenderPdf from "../components/pdf/RenderPdf";
@@ -146,6 +147,7 @@ function PdfRequestFiles(props) {
const divRef = useRef(null);
const [isDownloadModal, setIsDownloadModal] = useState(false);
const [signatureType, setSignatureType] = useState([]);
const [pdfBase64Url, setPdfBase64Url] = useState("");
const isMobile = window.innerWidth < 767;
let isGuestSignFlow = false;
@@ -323,10 +325,9 @@ function PdfRequestFiles(props) {
documentData[0] &&
(documentData[0]?.SignedUrl || documentData[0]?.URL);
if (url) {
//convert document url in array buffer format to use embed widgets in pdf using pdf-lib
const arrayBuffer = await convertPdfArrayBuffer(url);
if (arrayBuffer === "Error") {
setHandleError(t("something-went-wrong-mssg"));
const base64Pdf = await getBase64FromUrl(url);
if (base64Pdf) {
setPdfBase64Url(base64Pdf);
}
} else {
setHandleError(t("something-went-wrong-mssg"));
@@ -443,10 +444,9 @@ function PdfRequestFiles(props) {
documentData[0] &&
(documentData[0]?.SignedUrl || documentData[0]?.URL);
if (url) {
//convert document url in array buffer format to use embed widgets in pdf using pdf-lib
const arrayBuffer = await convertPdfArrayBuffer(url);
if (arrayBuffer === "Error") {
setHandleError(t("something-went-wrong-mssg"));
const base64Pdf = await getBase64FromUrl(url);
if (base64Pdf) {
setPdfBase64Url(base64Pdf);
}
} else {
setHandleError(t("something-went-wrong-mssg"));
@@ -2063,15 +2063,12 @@ function PdfRequestFiles(props) {
<RenderAllPdfPage
signerPos={signerPos}
signerObjectId={signerObjectId}
signPdfUrl={
pdfDetails[0] &&
(pdfDetails[0]?.SignedUrl || pdfDetails[0]?.URL)
}
allPages={allPages}
setAllPages={setAllPages}
setPageNumber={setPageNumber}
pageNumber={pageNumber}
containerWH={containerWH}
pdfBase64Url={pdfBase64Url}
/>
{/* pdf render view */}
<div className=" w-full md:w-[57%] flex mr-4">
@@ -2079,6 +2076,7 @@ function PdfRequestFiles(props) {
clickOnZoomIn={clickOnZoomIn}
clickOnZoomOut={clickOnZoomOut}
isDisableRotate={true}
isDisableDelete={true}
/>
<div className=" w-full md:w-[95%] ">
{/* this modal is used show this document is already sign */}
@@ -2272,6 +2270,7 @@ function PdfRequestFiles(props) {
uniqueId={uniqueId}
ispublicTemplate={isPublicTemplate}
handleUserDetails={handleUserDetails}
pdfBase64Url={pdfBase64Url}
/>
)}
</div>
apps/OpenSign/src/pages/PlaceHolderSign.js
+53 -25
View File
@@ -41,7 +41,8 @@ import {
handleRotateWarning,
signatureTypes,
handleSignatureType,
formatDate
formatDate,
getBase64FromUrl
} from "../constant/Utils";
import RenderPdf from "../components/pdf/RenderPdf";
import { useNavigate } from "react-router-dom";
@@ -140,7 +141,7 @@ function PlaceHolderSign() {
const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
const isHeader = useSelector((state) => state.showHeader);
const [activeMailAdapter, setActiveMailAdapter] = useState("");
const [isRotate, setIsRotate] = useState({
const [showRotateAlert, setShowRotateAlert] = useState({
status: false,
degree: 0
});
@@ -152,11 +153,12 @@ function PlaceHolderSign() {
const [isCustomize, setIsCustomize] = useState(false);
const [zoomPercent, setZoomPercent] = useState(0);
const [scale, setScale] = useState(1);
const [pdfRotateBase64, setPdfRotatese64] = useState("");
const [pdfBase64Url, setPdfBase64Url] = useState("");
const [planCode, setPlanCode] = useState("");
const [unSignedWidgetId, setUnSignedWidgetId] = useState("");
const [signatureType, setSignatureType] = useState(signatureTypes);
const [emailResetDate, setEmailResetDate] = useState("");
const [isUploadPdf, setIsUploadPdf] = useState(false);
const isMobile = window.innerWidth < 767;
const [, drop] = useDrop({
accept: "BOX",
@@ -266,9 +268,11 @@ function PlaceHolderSign() {
const url = documentData[0] && documentData[0]?.URL;
//convert document url in array buffer format to use embed widgets in pdf using pdf-lib
const arrayBuffer = await convertPdfArrayBuffer(url);
const base64Pdf = await getBase64FromUrl(url);
if (arrayBuffer === "Error") {
setHandleError(t("something-went-wrong-mssg"));
} else {
setPdfBase64Url(base64Pdf);
setPdfArrayBuffer(arrayBuffer);
}
if (documentData[0]?.ExtUserPtr?.LastEmailCountReset?.iso) {
@@ -859,15 +863,12 @@ function PlaceHolderSign() {
} catch (e) {
console.log("error to convertBase64ToFile in placeholder flow", e);
}
} else if (pdfRotateBase64) {
} else if (pdfBase64Url) {
try {
const pdfUrl = await convertBase64ToFile(
pdfDetails[0].Name,
pdfRotateBase64
pdfBase64Url
);
const tenantId = localStorage.getItem("TenantId");
const buffer = atob(pdfRotateBase64);
SaveFileSize(buffer.length, pdfUrl, tenantId);
return pdfUrl;
} catch (e) {
console.log("error to convertBase64ToFile in placeholder flow", e);
@@ -940,7 +941,6 @@ function PlaceHolderSign() {
}
}
};
useEffect(() => {
const timer = setTimeout(() => {
if (signerPos?.length > 0 && !pdfDetails?.[0]?.IsCompleted) {
@@ -949,7 +949,7 @@ function PlaceHolderSign() {
}, 2000);
return () => clearTimeout(timer);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [signerPos, signersdata, signatureType]);
}, [signerPos, signersdata, signatureType, pdfBase64Url]);
// `autosavedetails` is used to save doc details after every 2 sec when changes are happern in placeholder like drag-drop widgets, remove signers
const autosavedetails = async () => {
@@ -963,12 +963,20 @@ function PlaceHolderSign() {
}
return acc;
}, []);
let pdfUrl;
if (isUploadPdf) {
pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
}
try {
const docCls = new Parse.Object("contracts_Document");
docCls.id = documentId;
docCls.set("Placeholders", signerPos);
docCls.set("Signers", signers);
docCls.set("SignatureType", signatureType);
if (pdfUrl) {
docCls.set("URL", pdfUrl);
}
await docCls.save();
} catch (e) {
console.log("error", e);
@@ -1741,30 +1749,36 @@ function PlaceHolderSign() {
};
//`handleRotationFun` function is used to roatate pdf particular page
const handleRotationFun = async (rotateDegree) => {
const isRotate = handleRotateWarning(signerPos, pageNumber);
if (isRotate) {
setIsRotate({ status: true, degree: rotateDegree });
const rotatePlaceholderExist = handleRotateWarning(signerPos, pageNumber);
//show rotation alert if widgets already exist
if (rotatePlaceholderExist) {
setShowRotateAlert({ status: true, degree: rotateDegree });
} else {
setIsUploadPdf(true);
const urlDetails = await rotatePdfPage(
pdfDetails[0].URL,
rotateDegree,
pageNumber - 1,
pdfRotateBase64
pdfBase64Url
);
setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer);
setPdfRotatese64(urlDetails.base64);
setPdfBase64Url(urlDetails.base64);
}
};
const handleRemovePlaceholder = async () => {
handleRemoveWidgets(setSignerPos, signerPos, pageNumber, setIsRotate);
handleRemoveWidgets(
setSignerPos,
signerPos,
pageNumber,
uniqueId,
setShowRotateAlert
);
const urlDetails = await rotatePdfPage(
pdfDetails[0].URL,
isRotate.degree,
showRotateAlert.degree,
pageNumber - 1,
pdfRotateBase64
pdfArrayBuffer
);
setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer);
setPdfRotatese64(urlDetails.base64);
setPdfBase64Url(urlDetails.base64);
};
return (
<>
@@ -1821,7 +1835,7 @@ function PlaceHolderSign() {
setPageNumber={setPageNumber}
setSignBtnPosition={setSignBtnPosition}
pageNumber={pageNumber}
pdfRotateBase64={pdfRotateBase64}
pdfBase64Url={pdfBase64Url}
/>
{/* pdf render view */}
<div className=" w-full md:w-[57%] flex mr-4">
@@ -1829,6 +1843,14 @@ function PlaceHolderSign() {
clickOnZoomIn={clickOnZoomIn}
clickOnZoomOut={clickOnZoomOut}
handleRotationFun={handleRotationFun}
pdfArrayBuffer={pdfArrayBuffer}
pageNumber={pageNumber}
setPdfBase64Url={setPdfBase64Url}
setPdfArrayBuffer={setPdfArrayBuffer}
setIsUploadPdf={setIsUploadPdf}
setSignerPos={setSignerPos}
signerPos={signerPos}
userId={uniqueId}
/>
<div className=" w-full md:w-[95%] ">
{/* this modal is used show alert set placeholder for all signers before send mail */}
@@ -2093,6 +2115,12 @@ function PlaceHolderSign() {
handleRotationFun={handleRotationFun}
clickOnZoomIn={clickOnZoomIn}
clickOnZoomOut={clickOnZoomOut}
setIsUploadPdf={setIsUploadPdf}
pdfArrayBuffer={pdfArrayBuffer}
setPdfArrayBuffer={setPdfArrayBuffer}
setPdfBase64Url={setPdfBase64Url}
setSignerPos={setSignerPos}
userId={uniqueId}
/>
<div
@@ -2141,7 +2169,7 @@ function PlaceHolderSign() {
setScale={setScale}
scale={scale}
setIsSelectId={setIsSelectId}
pdfRotateBase64={pdfRotateBase64}
pdfBase64Url={pdfBase64Url}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
@@ -2286,8 +2314,8 @@ function PlaceHolderSign() {
setFontColor={setFontColor}
/>
<RotateAlert
isRotate={isRotate.status}
setIsRotate={setIsRotate}
showRotateAlert={showRotateAlert.status}
setShowRotateAlert={setShowRotateAlert}
handleRemoveWidgets={handleRemovePlaceholder}
/>
</DndProvider>
apps/OpenSign/src/pages/SignyourselfPdf.js
+40 -12
View File
@@ -37,7 +37,9 @@ import {
onClickZoomIn,
onClickZoomOut,
rotatePdfPage,
signatureTypes
signatureTypes,
getBase64FromUrl,
convertBase64ToFile
} from "../constant/Utils";
import { useParams } from "react-router-dom";
import Tour from "reactour";
@@ -129,11 +131,12 @@ function SignYourSelf() {
const [zoomPercent, setZoomPercent] = useState(0);
const isHeader = useSelector((state) => state.showHeader);
const [scale, setScale] = useState(1);
const [pdfRotateBase64, setPdfRotatese64] = useState("");
const [pdfBase64Url, setPdfBase64Url] = useState("");
const [isRotate, setIsRotate] = useState({ status: false, degree: 0 });
const [isSubscribe, setIsSubscribe] = useState({ plan: "", isValid: true });
const [isDownloadModal, setIsDownloadModal] = useState(false);
const [isResize, setIsResize] = useState(false);
const [isUploadPdf, setIsUploadPdf] = useState(false);
const divRef = useRef(null);
const nodeRef = useRef(null);
const [, drop] = useDrop({
@@ -221,13 +224,17 @@ function SignYourSelf() {
? documentData[0]?.Placeholders
: [];
setXyPostion(placeholders);
const url = documentData[0] && documentData[0]?.URL;
const url =
documentData[0] &&
(documentData[0]?.SignedUrl || documentData[0]?.URL);
if (url) {
//convert document url in array buffer format to use embed widgets in pdf using pdf-lib
const arrayBuffer = await convertPdfArrayBuffer(url);
const base64Pdf = await getBase64FromUrl(url);
if (arrayBuffer === "Error") {
setHandleError(t("something-went-wrong-mssg"));
} else {
setPdfBase64Url(base64Pdf);
setPdfArrayBuffer(arrayBuffer);
}
} else {
@@ -562,15 +569,23 @@ function SignYourSelf() {
}, 2000);
return () => clearTimeout(timer);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [xyPostion]);
}, [xyPostion, pdfBase64Url]);
// `autosavedetails` is used to save doc details after every 2 sec when changes are happern in placeholder like drag-drop widgets, remove signers
const autosavedetails = async () => {
try {
const docCls = new Parse.Object("contracts_Document");
docCls.id = documentId;
let pdfUrl;
if (isUploadPdf) {
pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
}
console.log("isUploadPdf", isUploadPdf);
docCls.set("Placeholders", xyPostion);
docCls.set("IsSignyourself", true);
if (pdfUrl) {
docCls.set("URL", pdfUrl);
}
await docCls.save();
} catch (e) {
console.log("error", e);
@@ -765,7 +780,7 @@ function SignYourSelf() {
const signedpdf = JSON.parse(JSON.stringify(resSignPdf));
setPdfUrl(signedpdf);
getDocumentDetails(false);
setPdfRotatese64("");
setPdfBase64Url("");
}
};
@@ -1127,14 +1142,14 @@ function SignYourSelf() {
if (isPlaceholder) {
setIsRotate({ status: true, degree: rotateDegree });
} else {
setIsUploadPdf(true);
const urlDetails = await rotatePdfPage(
pdfUrl || pdfDetails[0].URL,
rotateDegree,
pageNumber - 1,
pdfRotateBase64
pdfBase64Url
);
setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer);
setPdfRotatese64(urlDetails.base64);
setPdfBase64Url(urlDetails.base64);
}
};
@@ -1158,10 +1173,10 @@ function SignYourSelf() {
pdfUrl || pdfDetails[0].URL,
isRotate.degree,
pageNumber - 1,
pdfRotateBase64
pdfArrayBuffer
);
setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer);
setPdfRotatese64(urlDetails.base64);
setPdfBase64Url(urlDetails.base64);
setXyPostion(updatePlaceholder);
setIsRotate({ status: false, degree: 0 });
};
@@ -1228,13 +1243,20 @@ function SignYourSelf() {
setSignBtnPosition={setSignBtnPosition}
pageNumber={pageNumber}
containerWH={containerWH}
pdfRotateBase64={pdfRotateBase64}
pdfBase64Url={pdfBase64Url}
/>
<div className=" w-full md:w-[57%] flex mr-4">
<PdfZoom
clickOnZoomIn={clickOnZoomIn}
clickOnZoomOut={clickOnZoomOut}
handleRotationFun={handleRotationFun}
pdfArrayBuffer={pdfArrayBuffer}
pageNumber={pageNumber}
setPdfBase64Url={setPdfBase64Url}
setPdfArrayBuffer={setPdfArrayBuffer}
setIsUploadPdf={setIsUploadPdf}
setSignerPos={setXyPostion}
signerPos={xyPostion}
/>
<div className="w-full md:w-[95%]">
<ModalUi
@@ -1348,6 +1370,12 @@ function SignYourSelf() {
clickOnZoomOut={clickOnZoomOut}
widgetsDetails={xyPostion}
setIsDownloadModal={setIsDownloadModal}
setIsUploadPdf={setIsUploadPdf}
pdfArrayBuffer={pdfArrayBuffer}
setPdfArrayBuffer={setPdfArrayBuffer}
setPdfBase64Url={setPdfBase64Url}
setSignerPos={setXyPostion}
signerPos={xyPostion}
/>
<div ref={divRef} data-tut="reactourSecond" className="h-full">
{containerWH?.width && containerWH?.height && (
@@ -1388,7 +1416,7 @@ function SignYourSelf() {
handleTextSettingModal={handleTextSettingModal}
setScale={setScale}
scale={scale}
pdfRotateBase64={pdfRotateBase64}
pdfBase64Url={pdfBase64Url}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
apps/OpenSign/src/pages/TemplatePlaceholder.js
+50 -15
View File
@@ -33,7 +33,9 @@ import {
color,
signatureTypes,
getTenantDetails,
handleSignatureType
handleSignatureType,
getBase64FromUrl,
convertPdfArrayBuffer
} from "../constant/Utils";
import RenderPdf from "../components/pdf/RenderPdf";
import "../styles/AddUser.css";
@@ -102,7 +104,8 @@ const TemplatePlaceholder = () => {
const [isNameModal, setIsNameModal] = useState(false);
const [isTextSetting, setIsTextSetting] = useState(false);
const [pdfLoad, setPdfLoad] = useState(false);
const [pdfRotateBase64, setPdfRotatese64] = useState("");
const [pdfBase64Url, setPdfBase64Url] = useState("");
const [isUploadPdf, setIsUploadPdf] = useState(false);
const isMobile = window.innerWidth < 767;
const [, drop] = useDrop({
accept: "BOX",
@@ -139,6 +142,7 @@ const TemplatePlaceholder = () => {
const [zoomPercent, setZoomPercent] = useState(0);
const [scale, setScale] = useState(1);
const [signatureType, setSignatureType] = useState([]);
const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
useEffect(() => {
fetchTemplate();
@@ -247,6 +251,17 @@ const TemplatePlaceholder = () => {
tenantSignTypes,
docSignTypes
);
const url = documentData[0] && documentData[0]?.URL;
if (url) {
const arrayBuffer = await convertPdfArrayBuffer(url);
const base64Pdf = await getBase64FromUrl(url);
if (arrayBuffer === "Error") {
setHandleError(t("something-went-wrong-mssg"));
} else {
setPdfBase64Url(base64Pdf);
setPdfArrayBuffer(arrayBuffer);
}
}
setSignatureType(updatedSignatureType);
const updatedPdfDetails = [...documentData];
updatedPdfDetails[0].SignatureType = updatedSignatureType;
@@ -709,12 +724,19 @@ const TemplatePlaceholder = () => {
}
});
}
let pdfUrl;
if (isUploadPdf) {
pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
}
try {
const templateCls = new Parse.Object("contracts_Template");
templateCls.id = templateId;
templateCls.set("Placeholders", signerPos);
templateCls.set("Signers", signers);
templateCls.set("SignatureType", signatureType);
if (pdfUrl) {
templateCls.set("URL", pdfUrl);
}
await templateCls.save();
} catch (err) {
console.log("error in autosave template", err);
@@ -739,12 +761,9 @@ const TemplatePlaceholder = () => {
});
}
let pdfUrl = pdfDetails[0]?.URL;
if (pdfRotateBase64) {
if (pdfBase64Url) {
try {
pdfUrl = await convertBase64ToFile(
pdfDetails[0].Name,
pdfRotateBase64
);
pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
} catch (e) {
console.log("error to convertBase64ToFile in placeholder flow", e);
}
@@ -900,9 +919,9 @@ const TemplatePlaceholder = () => {
setIsCreateDocModal(false);
setIsCreateDoc(true);
let pdfUrl = pdfDetails[0]?.URL;
if (pdfRotateBase64) {
if (pdfBase64Url) {
try {
pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfRotateBase64);
pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
} catch (e) {
console.log("error to convertBase64ToFile in placeholder flow", e);
}
@@ -1327,24 +1346,31 @@ const TemplatePlaceholder = () => {
if (isRotate) {
setIsRotate({ status: true, degree: rotateDegree });
} else {
setIsUploadPdf(false);
const urlDetails = await rotatePdfPage(
pdfDetails[0].URL,
rotateDegree,
pageNumber - 1,
pdfRotateBase64
pdfArrayBuffer
);
setPdfRotatese64(urlDetails.base64);
setPdfBase64Url(urlDetails.base64);
}
};
const handleRemovePlaceholder = async () => {
handleRemoveWidgets(setSignerPos, signerPos, pageNumber, setIsRotate);
handleRemoveWidgets(
setSignerPos,
signerPos,
pageNumber,
uniqueId,
setIsRotate
);
const urlDetails = await rotatePdfPage(
pdfDetails[0].URL,
isRotate.degree,
pageNumber - 1,
pdfRotateBase64
pdfBase64Url
);
setPdfRotatese64(urlDetails.base64);
setPdfBase64Url(urlDetails.base64);
};
return (
@@ -1389,6 +1415,7 @@ const TemplatePlaceholder = () => {
setPageNumber={setPageNumber}
setSignBtnPosition={setSignBtnPosition}
pageNumber={pageNumber}
pdfBase64Url={pdfBase64Url}
/>
{/* pdf render view */}
@@ -1397,6 +1424,13 @@ const TemplatePlaceholder = () => {
clickOnZoomIn={clickOnZoomIn}
clickOnZoomOut={clickOnZoomOut}
handleRotationFun={handleRotationFun}
pdfArrayBuffer={pdfArrayBuffer}
pageNumber={pageNumber}
setPdfBase64Url={setPdfBase64Url}
setPdfArrayBuffer={setPdfArrayBuffer}
setIsUploadPdf={setIsUploadPdf}
setSignerPos={setSignerPos}
signerPos={signerPos}
/>
<div className="w-full md:w-[95%]">
{/* this modal is used show alert set placeholder for all signers before send mail */}
@@ -1542,6 +1576,7 @@ const TemplatePlaceholder = () => {
handleRotationFun={handleRotationFun}
clickOnZoomIn={clickOnZoomIn}
clickOnZoomOut={clickOnZoomOut}
setSignerPos={setSignerPos}
/>
<div
ref={divRef}
@@ -1586,7 +1621,7 @@ const TemplatePlaceholder = () => {
setScale={setScale}
scale={scale}
setIsSelectId={setIsSelectId}
pdfRotateBase64={pdfRotateBase64}
pdfBase64Url={pdfBase64Url}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
apps/OpenSign/src/script/locales/en/translation.json
+6 -2
View File
@@ -707,7 +707,11 @@
"p1": "The document creator will receive an email notification whenever a signer signs the document.",
"note": "Note: Notification email will not be sent for the last signer, as the document creator will receive a completion email instead."
},
"expiry-date":"Expiry date",
"expiry-date": "Expiry date",
"expiry-date-updated": "The expiry date has been successfully extended to {{newexpirydate}}",
"expiry-date-error": "Please provide a new expiry date that is later than the current one"
"expiry-date-error": "Please provide a new expiry date that is later than the current one",
"delete-page": "Delete page",
"delete-alert": "Can not delete single page",
"delete-alert-2": "Are you sure want to delete this page ?",
"delete-note": "Note - once delete this page you can not undo"
}
apps/OpenSign/src/script/locales/es/translation.json
+5 -1
View File
@@ -709,5 +709,9 @@
},
"expiry-date": "Date d'expiration",
"expiry-date-updated": "La fecha de vencimiento se ha extendido con éxito hasta el {{newexpirydate}}",
"expiry-date-error": "Proporcione una nueva fecha de vencimiento que sea posterior a la actual"
"expiry-date-error": "Proporcione una nueva fecha de vencimiento que sea posterior a la actual",
"delete-page": "eliminar página",
"delete-alert": "No se puede eliminar una sola página",
"delete-alert-2": "¿Está seguro de que desea eliminar esta página?",
"delete-note": "Nota: una vez que elimines esta página, no podrás deshacerla"
}
apps/OpenSign/src/script/locales/fr/translation.json
+5 -1
View File
@@ -708,5 +708,9 @@
},
"expiry-date": "Fecha de caducidad",
"expiry-date-updated": "La date d'expiration a été prolongée avec succès jusqu'au {{newexpirydate}}",
"expiry-date-error": "Veuillez fournir une nouvelle date d'expiration postérieure à la date actuelle"
"expiry-date-error": "Veuillez fournir une nouvelle date d'expiration postérieure à la date actuelle",
"delete-page": "supprimer la page",
"delete-alert": "Impossible de supprimer une seule page",
"delete-alert-2": "Etes-vous sûr de vouloir supprimer cette page ?",
"delete-note": "Remarque : une fois cette page supprimée, vous ne pouvez plus l'annuler"
}