Skip to content

Commit fc3f134

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
fix: zIndex of placeholder-block and added signyourself & request signature form in openSign drive
1 parent d6c2c66 commit fc3f134

File tree

6 files changed

+203
-58
lines changed

6 files changed

+203
-58
lines changed

‎microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
white-space: nowrap;
104104
background-color: transparent;
105105
border: 0;
106+
cursor: pointer;
106107
}
107108

108109

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

Lines changed: 66 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ import ModalHeader from "react-bootstrap/esm/ModalHeader";
88
import { themeColor, iconColor } from "../../utils/ThemeColor/backColor";
99
import { getDrive } from "../../utils/Utils";
1010
import AlertComponent from "../component/alertComponent";
11+
import { useNavigate } from "react-router-dom";
1112

1213
function PdfFile() {
14+
const navigate = useNavigate();
1315
const scrollRef = useRef(null);
1416
const [isList, setIsList] = useState(false);
1517
const [selectedSort, setSelectedSort] = useState("Date");
@@ -28,6 +30,7 @@ function PdfFile() {
2830
const [handleError, setHandleError] = useState();
2931
const [folderName, setFolderName] = useState([]);
3032
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
33+
const [isNewFol, setIsNewFol] = useState(false);
3134
const currentUser =
3235
localStorage.getItem(
3336
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -188,7 +191,6 @@ function PdfFile() {
188191
};
189192
}
190193

191-
// console.log("data", data);
192194
await axios
193195
.post(
194196
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
@@ -314,6 +316,8 @@ function PdfFile() {
314316
const closeMenuOnOutsideClick = (e) => {
315317
if (isShowSort && !e.target.closest("#menu-container")) {
316318
setIsShowSort(false);
319+
} else if (isNewFol && !e.target.closest("#folder-menu")) {
320+
setIsNewFol(false);
317321
}
318322
};
319323

@@ -502,6 +506,67 @@ function PdfFile() {
502506
})}
503507
</div>
504508
<div className="dropMenuBD">
509+
<div
510+
id="folder-menu"
511+
className={isNewFol ? "dropdown show" : "dropdown"}
512+
onClick={() => setIsNewFol(!isNewFol)}
513+
>
514+
<div className="sort">
515+
<i
516+
className="fa fa-plus-square"
517+
aria-hidden="true"
518+
style={{ fontSize: "25px", color: `${iconColor()}` }}
519+
></i>
520+
</div>
521+
<div
522+
className={
523+
isNewFol ? "dropdown-menu show" : "dropdown-menu"
524+
}
525+
aria-labelledby="dropdownMenuButton"
526+
aria-expanded={isNewFol ? "true" : "false"}
527+
>
528+
{" "}
529+
<div
530+
style={{
531+
display: "flex",
532+
flexDirection: "column"
533+
}}
534+
>
535+
<span
536+
className="dropdown-item itemColor"
537+
onClick={() => getParentFolder()}
538+
>
539+
<i
540+
style={{ marginRight: "5px" }}
541+
className="fa fa-plus"
542+
aria-hidden="true"
543+
></i>
544+
Create folder
545+
</span>
546+
<span
547+
className="dropdown-item itemColor"
548+
onClick={() => navigate("/form/sHAnZphf69")}
549+
>
550+
<i
551+
style={{ marginRight: "5px" }}
552+
className="fas fa-pen-nib"
553+
></i>
554+
Sign Yourself
555+
</span>
556+
<span
557+
className="dropdown-item itemColor"
558+
onClick={() => navigate("/form/8mZzFxbG1z")}
559+
>
560+
{" "}
561+
<i
562+
style={{ marginRight: "5px" }}
563+
className="fa fa-file-signature"
564+
></i>
565+
Request Signatures{" "}
566+
</span>
567+
</div>
568+
</div>
569+
</div>
505570
<div
506571
id="menu-container"
507572
className={isShowSort ? "dropdown show" : "dropdown"}
@@ -645,14 +710,6 @@ function PdfFile() {
645710
</div>
646711
)}
647712
</div>
648-
649-
<div className="sort" onClick={() => getParentFolder()}>
650-
<i
651-
className="fa fa-plus-square"
652-
aria-hidden="true"
653-
style={{ fontSize: "25px", color: `${iconColor()}` }}
654-
></i>
655-
</div>
656713
</div>
657714
</div>
658715

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

Lines changed: 94 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { themeColor } from "../../utils/ThemeColor/backColor";
55
import { Document, Page, pdfjs } from "react-pdf";
66
import BorderResize from "./borderResize";
77
import {
8+
addZIndex,
89
handleImageResize,
910
handleSignYourselfImageResize
1011
} from "../../utils/Utils";
@@ -46,7 +47,8 @@ function RenderPdf({
4647
setXyPostion,
4748
index,
4849
containerWH,
49-
setIsResize
50+
setIsResize,
51+
setZIndex
5052
}) {
5153
const isMobile = window.innerWidth < 767;
5254
const newWidth = containerWH.width;
@@ -200,7 +202,8 @@ function RenderPdf({
200202
? "pointer"
201203
: "not-allowed",
202204
borderColor: themeColor(),
203-
background: data.blockColor
205+
background: data.blockColor,
206+
zIndex: "1"
204207
}}
205208
className="placeholderBlock"
206209
size={{
@@ -337,7 +340,8 @@ function RenderPdf({
337340
bounds="parent"
338341
style={{
339342
cursor: "all-scroll",
340-
borderColor: themeColor()
343+
borderColor: themeColor(),
344+
zIndex: "1"
341345
}}
342346
className="placeholderBlock"
343347
onResize={(
@@ -449,7 +453,8 @@ function RenderPdf({
449453
style={{
450454
cursor: "all-scroll",
451455
borderColor: themeColor(),
452-
background: data.blockColor
456+
background: data.blockColor,
457+
zIndex: pos.zIndex
453458
}}
454459
className="placeholderBlock"
455460
onDrag={() =>
@@ -482,14 +487,16 @@ function RenderPdf({
482487
onResizeStart={() => {
483488
setIsResize(true);
484489
}}
485-
onResizeStop={(
490+
onResizeStop={() => {
491+
setIsResize && setIsResize(false);
492+
}}
493+
onResize={(
486494
e,
487495
direction,
488496
ref,
489497
delta,
490498
position
491499
) => {
492-
e.stopPropagation();
493500
handleImageResize(
494501
ref,
495502
pos.key,
@@ -500,37 +507,67 @@ function RenderPdf({
500507
setSignerPos,
501508
pdfOriginalWidth,
502509
containerWH,
503-
false,
504-
setIsResize
510+
false
505511
);
506512
}}
507513
>
508-
<BorderResize />
509-
510514
<div
511-
onTouchStart={(e) => {
512-
e.stopPropagation();
513-
handleDeleteSign(
515+
onTouchEnd={() => {
516+
const dataNewPlace = addZIndex(
517+
signerPos,
514518
pos.key,
515-
data.signerObjId
519+
setZIndex
516520
);
521+
setSignerPos((prevState) => {
522+
const newState = [...prevState];
523+
newState.splice(
524+
0,
525+
signerPos.length,
526+
...dataNewPlace
527+
);
528+
return newState;
529+
});
517530
}}
518531
style={{
519-
background: themeColor()
520-
}}
521-
className="placeholdCloseBtn"
522-
>
523-
x
524-
</div>
525-
<div
526-
style={{
527-
fontSize: "12px",
528-
color: "black",
529-
fontWeight: "600",
530-
marginTop: "0px"
532+
cursor: "all-scroll",
533+
borderColor: themeColor(),
534+
background: data.blockColor,
535+
zIndex: pos.zIndex,
536+
height: pos.Height
537+
? pos.Height
538+
: 60,
539+
width: pos.Width ? pos.Width : 150
531540
}}
532541
>
533-
{pos.isStamp ? "stamp" : "signature"}
542+
<BorderResize />
543+
544+
<div
545+
onTouchStart={(e) => {
546+
e.stopPropagation();
547+
handleDeleteSign(
548+
pos.key,
549+
data.signerObjId
550+
);
551+
}}
552+
style={{
553+
background: themeColor()
554+
}}
555+
className="placeholdCloseBtn"
556+
>
557+
x
558+
</div>
559+
<div
560+
style={{
561+
fontSize: "12px",
562+
color: "black",
563+
fontWeight: "600",
564+
marginTop: "0px"
565+
}}
566+
>
567+
{pos.isStamp
568+
? "stamp"
569+
: "signature"}
570+
</div>
534571
</div>
535572
</Rnd>
536573
);
@@ -569,7 +606,8 @@ function RenderPdf({
569606
key={pos.key}
570607
style={{
571608
cursor: "all-scroll",
572-
borderColor: themeColor()
609+
borderColor: themeColor(),
610+
zIndex: "1"
573611
}}
574612
size={{
575613
width: pos.Width ? pos.Width : 151,
@@ -772,7 +810,8 @@ function RenderPdf({
772810
bounds="parent"
773811
style={{
774812
cursor: "all-scroll",
775-
borderColor: themeColor()
813+
borderColor: themeColor(),
814+
zIndex: "1"
776815
}}
777816
className="placeholderBlock"
778817
size={{
@@ -854,6 +893,22 @@ function RenderPdf({
854893
placeData.pos.map((pos) => {
855894
return (
856895
<Rnd
896+
onClick={() => {
897+
const dataNewPlace = addZIndex(
898+
signerPos,
899+
pos.key,
900+
setZIndex
901+
);
902+
setSignerPos((prevState) => {
903+
const newState = [...prevState];
904+
newState.splice(
905+
0,
906+
signerPos.length,
907+
...dataNewPlace
908+
);
909+
return newState;
910+
});
911+
}}
857912
key={pos.key}
858913
enableResizing={{
859914
top: false,
@@ -869,15 +924,11 @@ function RenderPdf({
869924
style={{
870925
cursor: "all-scroll",
871926
background: data.blockColor,
872-
borderColor: themeColor()
927+
borderColor: themeColor(),
928+
zIndex: pos.zIndex
873929
}}
874930
className="placeholderBlock"
875-
onDrag={() =>
876-
handleTabDrag(
877-
pos.key
878-
// data.signerObjId
879-
)
880-
}
931+
onDrag={() => handleTabDrag(pos.key)}
881932
size={{
882933
width: pos.Width ? pos.Width : 150,
883934
height: pos.Height ? pos.Height : 60
@@ -902,7 +953,10 @@ function RenderPdf({
902953
onResizeStart={() => {
903954
setIsResize(true);
904955
}}
905-
onResizeStop={(
956+
onResizeStop={() => {
957+
setIsResize && setIsResize(false);
958+
}}
959+
onResize={(
906960
e,
907961
direction,
908962
ref,
@@ -919,8 +973,7 @@ function RenderPdf({
919973
setSignerPos,
920974
pdfOriginalWidth,
921975
containerWH,
922-
false,
923-
setIsResize
976+
false
924977
);
925978
}}
926979
>
@@ -988,7 +1041,8 @@ function RenderPdf({
9881041
bounds="parent"
9891042
style={{
9901043
borderColor: themeColor(),
991-
cursor: "all-scroll"
1044+
cursor: "all-scroll",
1045+
zIndex: "1"
9921046
}}
9931047
className="placeholderBlock"
9941048
onDrag={() => handleTabDrag(pos.key)}

0 commit comments

Comments
 (0)