Skip to content

Commit fefcdf6

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
feat: placeholder copy all pages feature at same location and change placeholder design
1 parent 8c209f5 commit fefcdf6

File tree

11 files changed

+785
-407
lines changed

11 files changed

+785
-407
lines changed

‎microfrontends/SignDocuments/src/Component/PdfRequestFiles.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -782,6 +782,7 @@ function PdfRequestFiles() {
782782
allPages={allPages}
783783
setAllPages={setAllPages}
784784
setPageNumber={setPageNumber}
785+
pageNumber={pageNumber}
785786
/>
786787

787788
{/* pdf render view */}

‎microfrontends/SignDocuments/src/Component/SignYourselfPdf.js‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ import {
2323
multiSignEmbed,
2424
pdfNewWidthFun,
2525
addDefaultSignatureImg,
26-
onImageSelect
26+
onImageSelect,
27+
placeholderHeight,
28+
placeholderWidth
2729
} from "../utils/Utils";
2830
import { useParams } from "react-router-dom";
2931
import Tour from "reactour";
@@ -36,6 +38,7 @@ import RenderPdf from "./component/renderPdf";
3638
import { contractUsers, contactBook, urlValidator } from "../utils/Utils";
3739
import { modalAlign } from "../utils/Utils";
3840
import AlertComponent from "./component/alertComponent";
41+
import CopyAllPage from "./component/copyAllPage";
3942

4043
//For signYourself inProgress section signer can add sign and complete doc sign.
4144
function SignYourSelf() {
@@ -79,6 +82,7 @@ function SignYourSelf() {
7982
const [noData, setNoData] = useState(false);
8083
const [contractName, setContractName] = useState("");
8184
const [containerWH, setContainerWH] = useState({});
85+
const [isPageCopy, setIsPageCopy] = useState(false);
8286
const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
8387
status: false
8488
});
@@ -102,7 +106,6 @@ function SignYourSelf() {
102106

103107
const [{ isDragSign }, dragSignature] = useDrag({
104108
type: "BOX",
105-
106109
item: {
107110
type: "BOX",
108111
id: 1,
@@ -115,7 +118,6 @@ function SignYourSelf() {
115118

116119
const [{ isDragStamp }, dragStamp] = useDrag({
117120
type: "BOX",
118-
119121
item: {
120122
type: "BOX",
121123
id: 2,
@@ -140,7 +142,6 @@ function SignYourSelf() {
140142

141143
const [{ isDragStampSS }, dragStampSS] = useDrag({
142144
type: "BOX",
143-
144145
item: {
145146
type: "BOX",
146147
id: 4,
@@ -329,7 +330,6 @@ function SignYourSelf() {
329330
isDrag: false,
330331
key: key,
331332
isStamp: monitor,
332-
333333
yBottom: window.innerHeight / 2 - 60
334334
};
335335

@@ -516,22 +516,31 @@ function SignYourSelf() {
516516
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
517517

518518
if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) {
519+
const xPos = () => {
520+
const resizePos = xyPosData.xPosition;
521+
if (isMobile) {
522+
return resizePos * scale;
523+
} else {
524+
return resizePos;
525+
}
526+
};
519527
const height = xyPosData.Height ? xyPosData.Height : 60;
528+
const resizePos = xyPosData.yBottom;
520529
const bottomY = xyPosData.isDrag
521-
? xyPosData.yBottom * scale - height * scale
530+
? resizePos * scale - height * scale
522531
: xyPosData.firstYPos
523-
? xyPosData.yBottom * scale - height * scale + xyPosData.firstYPos
524-
: xyPosData.yBottom * scale - height * scale;
532+
? resizePos * scale - height * scale + xyPosData.firstYPos
533+
: resizePos * scale - height * scale;
525534

526535
singleSign = {
527536
pdfFile: pdfBase64Url,
528537
docId: documentId,
529538
sign: {
530539
Base64: base64Url,
531-
Left: isMobile ? xyPosData.xPosition * scale : xyPosData.xPosition,
540+
Left: xPos(),
532541
Bottom: bottomY,
533-
Width: xyPosData.Width ? xyPosData.Width * scale : 150 * scale,
534-
Height: height * scale,
542+
Width: placeholderWidth(xyPosData, scale),
543+
Height: placeholderHeight(xyPosData, scale),
535544
Page: pageNo
536545
}
537546
};
@@ -826,6 +835,7 @@ function SignYourSelf() {
826835
setAllPages={setAllPages}
827836
setPageNumber={setPageNumber}
828837
setSignBtnPosition={setSignBtnPosition}
838+
pageNumber={pageNumber}
829839
/>
830840

831841
{/* pdf render view */}
@@ -881,6 +891,15 @@ function SignYourSelf() {
881891
)}
882892
</Modal.Footer>
883893
</Modal>
894+
<CopyAllPage
895+
isPageCopy={isPageCopy}
896+
setIsPageCopy={setIsPageCopy}
897+
xyPostion={xyPostion}
898+
setXyPostion={setXyPostion}
899+
allPages={allPages}
900+
pageNumber={pageNumber}
901+
signKey={signKey}
902+
/>
884903
{/* this is modal of signature pad */}
885904
<SignPad
886905
isSignPad={isSignPad}
@@ -952,6 +971,7 @@ function SignYourSelf() {
952971
setXyPostion={setXyPostion}
953972
index={index}
954973
containerWH={containerWH}
974+
setIsPageCopy={setIsPageCopy}
955975
/>
956976
)}
957977
</div>

‎microfrontends/SignDocuments/src/Component/component/borderResize.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from "react";
22

3-
function BorderResize() {
3+
function BorderResize({ right, top }) {
44
return (
55
<div
66
className="borderResize"
77
style={{
8-
right: "-1px",
9-
bottom: "-1px",
8+
right: right ? right + "px" : "-1px",
9+
bottom: top ? top + "px" : "-1px",
1010
borderRight: "3px solid #188ae2",
1111
borderBottom: "3px solid #188ae2"
1212
}}

‎microfrontends/SignDocuments/src/Component/component/copyAllPage.js‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
import React, { useState } from "react";
2+
import Modal from "react-bootstrap/Modal";
3+
import ModalHeader from "react-bootstrap/esm/ModalHeader";
4+
import { themeColor } from "../../utils/ThemeColor/backColor";
5+
6+
function CopyAllPage(props) {
7+
const allpage = ["All pages", "All pages but last", "All pages but first"];
8+
const [selectData, setSelectData] = useState("");
9+
10+
const randomKey = () => {
11+
const randomId = Math.floor(1000 + Math.random() * 9000);
12+
return randomId;
13+
};
14+
15+
const allPagesCondition = (
16+
isAlreadyPage,
17+
type,
18+
rest,
19+
newPageNumber,
20+
getAlreadyPos
21+
) => {
22+
let obj;
23+
24+
if (isAlreadyPage === 1 && type === "first") {
25+
const filterPos =
26+
getAlreadyPos &&
27+
getAlreadyPos.filter((data) => data.xPosition !== rest.xPosition);
28+
if (filterPos && filterPos.length > 0) {
29+
return (obj = {
30+
pageNumber: newPageNumber,
31+
pos: [...filterPos]
32+
});
33+
}
34+
} else if (newPageNumber === props.allPages && type === "last") {
35+
const filterPos =
36+
getAlreadyPos &&
37+
getAlreadyPos.filter((data) => data.xPosition !== rest.xPosition);
38+
39+
if (getAlreadyPos) {
40+
return (obj = {
41+
pageNumber: newPageNumber,
42+
pos: [...filterPos]
43+
});
44+
}
45+
} else if (getAlreadyPos) {
46+
const filterPos =
47+
getAlreadyPos &&
48+
getAlreadyPos.filter((data) => data.xPosition !== rest.xPosition);
49+
50+
return (obj = {
51+
pageNumber: newPageNumber,
52+
pos: [...filterPos, rest]
53+
});
54+
} else {
55+
return (obj = {
56+
pageNumber: newPageNumber,
57+
pos: [rest]
58+
});
59+
}
60+
};
61+
const addPos = (type) => {
62+
let newXyPos = [];
63+
let newPageNumber = 1;
64+
const signerPos = props.xyPostion;
65+
66+
if (props.signerObjId) {
67+
const filterSignerPos = signerPos.filter(
68+
(data) => data.signerObjId === props.signerObjId
69+
);
70+
const xyData = filterSignerPos[0].placeHolder.filter(
71+
(data) => data.pageNumber === props.pageNumber
72+
);
73+
74+
const posData = xyData[0].pos.filter((pos) => pos.key === props.signKey);
75+
for (let i = 0; i < props.allPages; i++) {
76+
const { key, ...rest } = posData[0];
77+
const newId = randomKey();
78+
rest.key = newId;
79+
const getAlreadyPos =
80+
filterSignerPos[0].placeHolder[i] &&
81+
filterSignerPos[0].placeHolder[i].pos;
82+
83+
const isAlreadyPage =
84+
filterSignerPos[0].placeHolder[i] &&
85+
filterSignerPos[0].placeHolder[i].pageNumber;
86+
87+
const getObj = allPagesCondition(
88+
isAlreadyPage,
89+
type,
90+
rest,
91+
newPageNumber,
92+
getAlreadyPos
93+
);
94+
if (getObj) {
95+
newXyPos.push(getObj);
96+
}
97+
newPageNumber++;
98+
}
99+
100+
const addSign = signerPos.map((url, ind) => {
101+
if (url.signerObjId === props.signerObjId) {
102+
return {
103+
...url,
104+
placeHolder: newXyPos
105+
};
106+
}
107+
return url;
108+
});
109+
110+
const newSignerData = signerPos;
111+
newSignerData.splice(0, signerPos.length, ...addSign);
112+
props.setXyPostion(newSignerData);
113+
} else {
114+
const xyPostion = props.xyPostion;
115+
116+
const xyData = xyPostion.filter(
117+
(data) => data.pageNumber === props.pageNumber
118+
);
119+
const posData = xyData[0].pos.filter((pos) => pos.key === props.signKey);
120+
121+
for (let i = 0; i < props.allPages; i++) {
122+
const isAlreadyPage = xyPostion[i] && xyPostion[i].pageNumber;
123+
const getAlreadyPos = xyPostion[i] && xyPostion[i].pos;
124+
const { key, ...rest } = posData[0];
125+
const newId = randomKey();
126+
rest.key = newId;
127+
const getObj = allPagesCondition(
128+
isAlreadyPage,
129+
type,
130+
rest,
131+
newPageNumber,
132+
getAlreadyPos
133+
);
134+
if (getObj) {
135+
newXyPos.push(getObj);
136+
}
137+
138+
newPageNumber++;
139+
}
140+
props.setXyPostion(newXyPos);
141+
}
142+
};
143+
144+
const applyAllPage = () => {
145+
if (selectData === "All pages") {
146+
addPos("all");
147+
} else if (selectData === "All pages but last") {
148+
addPos("last");
149+
} else if (selectData === "All pages but first") {
150+
addPos("first");
151+
}
152+
};
153+
154+
return (
155+
<Modal show={props.isPageCopy}>
156+
<ModalHeader style={{ background: themeColor() }}>
157+
<span style={{ color: "white" }}>Place All pages</span>
158+
</ModalHeader>
159+
160+
<Modal.Body>
161+
{allpage.map((data, key) => {
162+
return (
163+
<div key={key} style={{ display: "flex", flexDirection: "column" }}>
164+
<label key={key} style={{ fontSize: "16px", fontWeight: "500" }}>
165+
<input
166+
style={{ accentColor: "red", marginRight: "10px" }}
167+
type="radio"
168+
value={data}
169+
onChange={() => setSelectData(data)}
170+
checked={selectData === data}
171+
/>
172+
173+
{data}
174+
</label>
175+
</div>
176+
);
177+
})}
178+
</Modal.Body>
179+
180+
<Modal.Footer>
181+
<button
182+
style={{
183+
color: "black"
184+
}}
185+
type="button"
186+
className="finishBtn"
187+
onClick={() => props.setIsPageCopy(false)}
188+
>
189+
Cancel
190+
</button>
191+
192+
<button
193+
onClick={() => {
194+
applyAllPage();
195+
props.setIsPageCopy(false);
196+
}}
197+
style={{
198+
background: themeColor()
199+
}}
200+
type="button"
201+
disabled={!selectData}
202+
className="finishBtn"
203+
>
204+
Apply
205+
</button>
206+
</Modal.Footer>
207+
</Modal>
208+
);
209+
}
210+
211+
export default CopyAllPage;

0 commit comments

Comments
 (0)