Skip to content

Commit 751c7b5

Browse files
prafull-opensignlabsprafull-opensignlabs
authored
Merge pull request #294 from OpenSignLabs/feat_template
fix: minor template issues, resize issue in mobile, change recipient list Ui in mobile
2 parents c5762a0 + e82384d commit 751c7b5

File tree

9 files changed

+609
-648
lines changed

9 files changed

+609
-648
lines changed

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

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -327,21 +327,13 @@ const TemplatePlaceholder = () => {
327327

328328
//function for setting position after drop signature button over pdf
329329
const addPositionOfSignature = (item, monitor) => {
330-
if (isMobile) {
331-
if (selectedEmail) {
332330
getSignerPos(item, monitor);
333-
} else {
334-
setIsShowEmail(true);
335-
}
336-
} else {
337-
getSignerPos(item, monitor);
338-
}
339331
};
340332

341333
// `getSignerPos` is used to get placeholder position when user place it and save it in array
342334
const getSignerPos = (item, monitor) => {
343-
const singer = signersdata.find((x) => x.Id === uniqueId);
344-
if (singer) {
335+
const signer = signersdata.find((x) => x.Id === uniqueId);
336+
if (signer) {
345337
const posZIndex = zIndex + 1;
346338
setZIndex(posZIndex);
347339
const newWidth = containerWH.width;
@@ -709,8 +701,7 @@ const TemplatePlaceholder = () => {
709701
}
710702
};
711703
const handleSaveTemplate = async () => {
712-
const singer = signersdata.find((x) => x.Id === uniqueId);
713-
if (singer) {
704+
if (signersdata?.length) {
714705
const loadObj = {
715706
isLoad: true,
716707
message: "This might take some time"
@@ -899,12 +890,14 @@ const TemplatePlaceholder = () => {
899890
const updatePlaceholderUser = signerPos
900891
.filter((x) => x.Id !== Id)
901892
.map((x, i) => ({ ...x, blockColor: color[i] }));
902-
// console.log("removePlaceholderUser ", removePlaceholderUser)
903-
904893
const index = signersdata.findIndex((x)=> x.Id === Id)
905-
setUniqueId(updateSigner[index]?.Id ||"");
906-
// setIsSelectId(index === -1 ? 0: index);
907-
setIsSelectId(0);
894+
if(index === signersdata.length - 1){
895+
setUniqueId(updateSigner[updateSigner.length - 1]?.Id ||"");
896+
setIsSelectId(0);
897+
}else{
898+
setUniqueId(updateSigner[index]?.Id ||"");
899+
setIsSelectId(index);
900+
}
908901

909902
setSignerPos(updatePlaceholderUser);
910903
setIsMailSend(false);
@@ -1205,6 +1198,9 @@ const TemplatePlaceholder = () => {
12051198
handleAddSigner={handleAddSigner}
12061199
setUniqueId={setUniqueId}
12071200
setRoleName={setRoleName}
1201+
handleDeleteUser={handleDeleteUser}
1202+
handleRoleChange={handleRoleChange}
1203+
handleOnBlur={handleOnBlur}
12081204
/>
12091205
</div>
12101206
) : (

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

Lines changed: 47 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from "react";
2-
import * as Select from "@radix-ui/react-select";
3-
import classnames from "classnames";
1+
import React, { useState } from "react";
2+
import ModalUi from "../../premitives/ModalUi";
3+
import RecipientList from "../../premitives/RecipientList";
44

55
function FieldsComponent({
66
pdfUrl,
@@ -28,33 +28,20 @@ function FieldsComponent({
2828
isSigners,
2929
dataTut,
3030
dataTut2,
31-
setIsShowEmail,
3231
isMailSend,
33-
selectedEmail,
34-
setSelectedEmail,
3532
handleAddSigner,
3633
setUniqueId,
37-
setRoleName
34+
setRoleName,
35+
handleDeleteUser,
36+
signerPos,
37+
handleRoleChange,
38+
handleOnBlur
3839
}) {
40+
const [isSignersModal, setIsSignersModal] = useState(false);
3941
const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
4042

4143
const isMobile = window.innerWidth < 767;
4244

43-
const SelectItem = React.forwardRef(
44-
({ children, className, ...props }, forwardedRef) => {
45-
return (
46-
<Select.Item
47-
className={classnames("SelectItem", className)}
48-
{...props}
49-
ref={forwardedRef}
50-
>
51-
<Select.ItemText>{children}</Select.ItemText>
52-
<Select.ItemIndicator className="SelectItemIndicator"></Select.ItemIndicator>
53-
</Select.Item>
54-
);
55-
}
56-
);
57-
5845
const color = [
5946
"#93a3db",
6047
"#e6c3db",
@@ -70,6 +57,9 @@ function FieldsComponent({
7057
"#ffffcc"
7158
];
7259

60+
const handleModal = () => {
61+
setIsSignersModal(!isSignersModal);
62+
};
7363
return (
7464
<>
7565
{isMobile && isSignYourself ? (
@@ -92,97 +82,24 @@ function FieldsComponent({
9282
alignItems: "center",
9383
justifyContent: "center"
9484
}}
85+
onClick={() => {
86+
if (signersdata?.length) {
87+
handleModal();
88+
}
89+
}}
9590
>
9691
<span style={{ fontSize: "13px", fontWeight: "700" }}>
97-
Signer :
92+
Recipient
93+
</span>
94+
<span style={{ fontSize: "13px", fontWeight: "700" }}>
95+
{signersdata[isSelectListId]?.Role && (
96+
<div>
97+
{signersdata[isSelectListId]?.Name
98+
? ` : ${signersdata[isSelectListId]?.Name}`
99+
: ` : ${signersdata[isSelectListId]?.Role}`}
100+
</div>
101+
)}
98102
</span>
99-
100-
<Select.Root
101-
onValueChange={(obj) => {
102-
const [selectedKey, selectedData] = obj.split("|");
103-
const parseData = JSON.parse(selectedData);
104-
105-
setSignerObjId(parseData.objectId);
106-
setIsSelectId(selectedKey);
107-
setContractName(parseData.className);
108-
setSelectedEmail(true);
109-
setUniqueId(parseData.Id);
110-
setRoleName(parseData.Role);
111-
}}
112-
>
113-
<Select.Trigger
114-
className={selectedEmail ? "selectEmail" : "SelectTrigger"}
115-
style={{
116-
background: isSelectListId
117-
? color[isSelectListId % color.length]
118-
: color[0]
119-
}}
120-
aria-label="Food"
121-
>
122-
<Select.Value placeholder="Select signer.." />
123-
{!selectedEmail && (
124-
<Select.Icon className="SelectIcon">
125-
<i
126-
style={{
127-
marginTop: "5px",
128-
marginLeft: "5px",
129-
color: "#3b15d1",
130-
fontSize: "20px"
131-
}}
132-
className="fa fa-angle-down"
133-
aria-hidden="true"
134-
></i>
135-
</Select.Icon>
136-
)}
137-
</Select.Trigger>
138-
<Select.Portal>
139-
<Select.Content
140-
className="SelectContent"
141-
style={{ zIndex: "5000" }}
142-
>
143-
<Select.ScrollUpButton className="SelectScrollButton">
144-
<i
145-
style={{
146-
marginTop: "5px",
147-
marginLeft: "5px",
148-
color: "#3b15d1",
149-
fontSize: "20px"
150-
}}
151-
className="fa fa-angle-down"
152-
aria-hidden="true"
153-
></i>
154-
</Select.ScrollUpButton>
155-
<Select.Viewport className="SelectViewport">
156-
<Select.Group>
157-
{signersdata.map((obj, ind) => {
158-
return (
159-
<SelectItem
160-
selected
161-
key={ind}
162-
value={`${ind}|${JSON.stringify(obj)}`}
163-
// value={(obj)}
164-
>
165-
{obj.Email ? obj.Email : obj.Role }
166-
</SelectItem>
167-
);
168-
})}
169-
</Select.Group>
170-
</Select.Viewport>
171-
<Select.ScrollDownButton className="SelectScrollButton">
172-
<i
173-
style={{
174-
marginTop: "5px",
175-
marginLeft: "5px",
176-
color: "#3b15d1",
177-
fontSize: "20px"
178-
}}
179-
className="fa fa-angle-down"
180-
aria-hidden="false"
181-
></i>
182-
</Select.ScrollDownButton>
183-
</Select.Content>
184-
</Select.Portal>
185-
</Select.Root>
186103
</div>
187104
)}
188105
{handleAddSigner && (
@@ -206,17 +123,7 @@ function FieldsComponent({
206123
style={{ backgroundColor: themeColor() }}
207124
>
208125
<div
209-
onClick={() => {
210-
if (isSigners) {
211-
if (selectedEmail) {
212-
addPositionOfSignature("onclick", false);
213-
} else {
214-
setIsShowEmail(true);
215-
}
216-
} else {
217-
addPositionOfSignature("onclick", false);
218-
}
219-
}}
126+
onClick={() => addPositionOfSignature("onclick", false)}
220127
ref={(element) => {
221128
dragSignatureSS(element);
222129
if (element) {
@@ -426,6 +333,25 @@ function FieldsComponent({
426333
</div>
427334
</div>
428335
)}
336+
<ModalUi
337+
title={"Recipients"}
338+
isOpen={isSignersModal}
339+
handleClose={handleModal}
340+
>
341+
<RecipientList
342+
signerPos={signerPos}
343+
signersdata={signersdata}
344+
isSelectListId={isSelectListId}
345+
setSignerObjId={setSignerObjId}
346+
setIsSelectId={setIsSelectId}
347+
setContractName={setContractName}
348+
setUniqueId={setUniqueId}
349+
setRoleName={setRoleName}
350+
handleDeleteUser={handleDeleteUser}
351+
handleRoleChange={handleRoleChange}
352+
handleOnBlur={handleOnBlur}
353+
/>
354+
</ModalUi>
429355
</>
430356
);
431357
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -540,7 +540,7 @@ function Header({
540540
<div>
541541
{signerPos.length === 0 ? (
542542
<span style={{ fontSize: "13px", color: "#f5405e" }}>
543-
Add all {signersdata.length - signerPos.length}{" "}
543+
Add {signersdata.length - signerPos.length}{" "}
544544
recipients signature
545545
</span>
546546
) : (

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,12 @@ function PlaceholderBorder(props) {
1616
// height: props.pos.Height
1717
// ? props.pos.Height + getResizeBorderExtraWidth
1818
// : 60 + getResizeBorderExtraWidth,
19-
width: props?.posWidth(props.pos) + getResizeBorderExtraWidth,
20-
height: props?.posHeight(props.pos) + getResizeBorderExtraWidth,
19+
width:
20+
props?.posWidth(props.pos, props?.isSignYourself) +
21+
getResizeBorderExtraWidth,
22+
height:
23+
props?.posHeight(props.pos, props?.isSignYourself) +
24+
getResizeBorderExtraWidth,
2125
borderWidth: "0.2px",
2226
overflow: "hidden"
2327
}}

0 commit comments

Comments
 (0)