Skip to content

Commit 0e5cffa

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
fix: widgets issue after placing on multiple pages
1 parent 885b528 commit 0e5cffa

File tree

6 files changed

+129
-71
lines changed

6 files changed

+129
-71
lines changed

‎apps/OpenSign/src/components/pdf/Placeholder.js‎

Lines changed: 55 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ function Placeholder(props) {
1313
const [selectDate, setSelectDate] = useState();
1414
const [dateFormat, setDateFormat] = useState([]);
1515
const [saveDateFormat, setSaveDateFormat] = useState("");
16+
17+
const [startDate, setStartDate] = useState();
1618
const dateFormatArr = [
1719
"L",
1820
"DD-MM-YYYY",
@@ -52,36 +54,41 @@ function Placeholder(props) {
5254
}
5355
};
5456

57+
//useEffect for to set date and date format for all flow (signyour-self, request-sign,placeholder,template)
58+
//checking if already have data and set else set new date
5559
useEffect(() => {
5660
//set default current date and default format MM/dd/yyyy
57-
if (props.isSignYourself) {
58-
const date = new Date();
59-
const milliseconds = date.getTime();
60-
const newDate = moment(milliseconds).format("MM/DD/YYYY");
61-
const dateObj = {
62-
date: newDate,
63-
format: "MM/dd/YYYY"
64-
};
65-
setSelectDate(dateObj);
66-
} else {
67-
const defaultRes = props?.pos?.options?.response;
68-
const defaultFormat = props.pos?.options?.validation?.format;
69-
const updateDate = defaultRes
70-
? new Date(props?.pos?.options?.response)
71-
: new Date();
72-
const dateFormat = defaultFormat ? defaultFormat : "MM/DD/YYYY";
73-
const milliseconds = updateDate.getTime();
74-
const newDate = moment(milliseconds).format(dateFormat);
75-
const dateObj = {
76-
date: newDate,
77-
format: props.pos?.options?.validation?.format
78-
? props.pos?.options?.validation?.format
79-
: "MM/dd/YYYY"
80-
};
81-
setSelectDate(dateObj);
82-
}
61+
// if (props.isSignYourself) {
62+
// const date = new Date();
63+
// const milliseconds = date.getTime();
64+
// const newDate = moment(milliseconds).format("MM/DD/YYYY");
65+
// const dateObj = {
66+
// date: newDate,
67+
// format: "MM/dd/YYYY"
68+
// };
69+
// setSelectDate(dateObj);
70+
// } else {
71+
const defaultRes = props?.pos?.options?.response;
72+
73+
const defaultFormat = props.pos?.options?.validation?.format;
74+
const updateDate = defaultRes
75+
? new Date(props?.pos?.options?.response)
76+
: new Date();
77+
const dateFormat = defaultFormat ? defaultFormat : "MM/DD/YYYY";
78+
const milliseconds = updateDate.getTime();
79+
const newDate = moment(milliseconds).format(dateFormat);
80+
const dateObj = {
81+
date: newDate,
82+
format: props.pos?.options?.validation?.format
83+
? props.pos?.options?.validation?.format
84+
: "MM/dd/YYYY"
85+
};
86+
setSelectDate(dateObj);
87+
setStartDate(updateDate);
88+
89+
// }
8390
// eslint-disable-next-line react-hooks/exhaustive-deps
84-
}, []);
91+
}, [props.index]);
8592

8693
//function for add selected date and format in selectFormat
8794
const changeDateFormat = () => {
@@ -206,13 +213,27 @@ function Placeholder(props) {
206213
props?.handleNameModal(true);
207214
}
208215

209-
if (props.isPlaceholder) {
216+
if (props.isPlaceholder && props.type !== "label") {
210217
props.setUniqueId(props.data.Id);
211218
}
212219
props.setSignKey(props.pos.key);
213220
props.setWidgetType(props.pos.type);
214221
props.setCurrWidgetsDetails(props.pos);
215222
};
223+
const handleCopyPlaceholder = (e) => {
224+
if (props.data && props?.pos?.type !== "label") {
225+
props.setSignerObjId(props?.data?.signerObjId);
226+
props.setUniqueId(props?.data?.Id);
227+
} else if (props.data && props.pos.type === "label") {
228+
props.setTempSignerId(props.uniqueId);
229+
props.setSignerObjId(props?.data?.signerObjId);
230+
props.setUniqueId(props?.data?.Id);
231+
}
232+
e.stopPropagation();
233+
props.setIsPageCopy(true);
234+
props.setSignKey(props.pos.key);
235+
};
236+
216237
const PlaceholderIcon = () => {
217238
return (
218239
props.isShowBorder && (
@@ -365,22 +386,10 @@ function Placeholder(props) {
365386
<i
366387
className="fa-regular fa-copy signCopy"
367388
onClick={(e) => {
368-
if (props.data) {
369-
props.setSignerObjId(props.data.signerObjId);
370-
props.setUniqueId(props.data.Id);
371-
}
372-
e.stopPropagation();
373-
props.setIsPageCopy(true);
374-
props.setSignKey(props.pos.key);
389+
handleCopyPlaceholder(e);
375390
}}
376391
onTouchEnd={(e) => {
377-
if (props.data) {
378-
props.setSignerObjId(props.data.signerObjId);
379-
props.setUniqueId(props.data.Id);
380-
}
381-
e.stopPropagation();
382-
props.setIsPageCopy(true);
383-
props.setSignKey(props.pos.key);
392+
handleCopyPlaceholder(e);
384393
}}
385394
style={{
386395
color: "#188ae2",
@@ -618,6 +627,8 @@ function Placeholder(props) {
618627
setSaveDateFormat={setSaveDateFormat}
619628
saveDateFormat={saveDateFormat}
620629
setValidateAlert={props.setValidateAlert}
630+
setStartDate={setStartDate}
631+
startDate={startDate}
621632
/>
622633
</div>
623634
) : (
@@ -643,6 +654,8 @@ function Placeholder(props) {
643654
setSaveDateFormat={setSaveDateFormat}
644655
saveDateFormat={saveDateFormat}
645656
setValidateAlert={props.setValidateAlert}
657+
setStartDate={setStartDate}
658+
startDate={startDate}
646659
/>
647660
</>
648661
)}

‎apps/OpenSign/src/components/pdf/PlaceholderCopy.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,13 @@ function PlaceholderCopy(props) {
180180
copyPlaceholder("first");
181181
}
182182
};
183-
183+
const handleUniqueId = () => {
184+
if (props.widgetType === "label") {
185+
props.setUniqueId(props?.tempSignerId);
186+
props.setTempSignerId("");
187+
}
188+
props.setIsPageCopy(false);
189+
};
184190
return (
185191
<ModalUi
186192
isOpen={props.isPageCopy}
@@ -220,7 +226,7 @@ function PlaceholderCopy(props) {
220226
<button
221227
onClick={() => {
222228
handleApplyCopy();
223-
props.setIsPageCopy(false);
229+
handleUniqueId();
224230
}}
225231
style={{ background: themeColor }}
226232
type="button"
@@ -232,7 +238,9 @@ function PlaceholderCopy(props) {
232238
<button
233239
type="button"
234240
className="finishBtn cancelBtn"
235-
onClick={() => props.setIsPageCopy(false)}
241+
onClick={() => {
242+
handleUniqueId();
243+
}}
236244
>
237245
Cancel
238246
</button>

‎apps/OpenSign/src/components/pdf/PlaceholderType.js‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@ import RegexParser from "regex-parser";
77

88
function PlaceholderType(props) {
99
const type = props?.pos?.type;
10-
const [selectOption, setSelectOption] = useState(
11-
props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
12-
);
13-
const [startDate, setStartDate] = useState(new Date());
10+
const [selectOption, setSelectOption] = useState("");
11+
1412
const [validatePlaceholder, setValidatePlaceholder] = useState("");
1513
const inputRef = useRef(null);
1614
const [textValue, setTextValue] = useState();
@@ -89,10 +87,7 @@ function PlaceholderType(props) {
8987
}
9088

9189
useEffect(() => {
92-
if (props.isNeedSign && type === "date") {
93-
const updateDate = new Date();
94-
setStartDate(updateDate);
95-
} else if (type && type === "checkbox" && props.isNeedSign) {
90+
if (type && type === "checkbox" && props.isNeedSign) {
9691
const isDefaultValue = props.pos.options?.defaultValue;
9792
if (isDefaultValue) {
9893
setSelectedCheckbox(isDefaultValue);
@@ -103,8 +98,20 @@ function PlaceholderType(props) {
10398
checkRegularExpress(props.pos?.options?.validation?.type);
10499
}
105100
setTextValue(
106-
props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
101+
props.pos?.options?.response
102+
? props.pos?.options?.response
103+
: props.pos?.options?.defaultValue
104+
? props.pos?.options?.defaultValue
105+
: ""
106+
);
107+
setSelectOption(
108+
props.pos?.options?.response
109+
? props.pos?.options?.response
110+
: props.pos?.options?.defaultValue
111+
? props.pos?.options?.defaultValue
112+
: ""
107113
);
114+
108115
// eslint-disable-next-line react-hooks/exhaustive-deps
109116
}, []);
110117

@@ -135,7 +142,7 @@ function PlaceholderType(props) {
135142
}
136143
}
137144
// const updateDate = new Date(props.saveDateFormat);
138-
setStartDate(updateDate);
145+
props.setStartDate(updateDate);
139146
const dateObj = {
140147
date: props.saveDateFormat,
141148
format: props.selectDate
@@ -646,17 +653,23 @@ function PlaceholderType(props) {
646653
className="inputPlaceholder"
647654
style={{ outlineColor: "#007bff" }}
648655
selected={
649-
startDate
650-
? startDate
656+
props?.startDate
657+
? props?.startDate
651658
: props.pos.options?.response &&
652659
new Date(props.pos.options.response)
653660
}
654661
onChange={(date) => {
655-
setStartDate(date);
662+
props.setStartDate(date);
656663
}}
657664
popperPlacement="top-end"
658665
customInput={<ExampleCustomInput />}
659666
dateFormat={
667+
// props.pos?.options?.validation?.format
668+
// ? props.pos?.options?.validation?.format
669+
// : props.selectDate
670+
// ? props.selectDate?.format
671+
// : "MM/dd/YYYY"
672+
660673
props.selectDate
661674
? props.selectDate?.format
662675
: props.pos?.options?.validation?.format
@@ -757,7 +770,9 @@ function PlaceholderType(props) {
757770
<textarea
758771
placeholder="Enter label"
759772
rows={1}
773+
value={textValue}
760774
onChange={(e) => {
775+
setTextValue(e.target.value);
761776
onChangeInput(
762777
e.target.value,
763778
props.pos.key,

‎apps/OpenSign/src/components/pdf/RenderPdf.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,9 @@ function RenderPdf({
5656
selectWidgetId,
5757
unSignedWidgetId,
5858
setIsCheckbox,
59-
handleNameModal
59+
handleNameModal,
60+
setTempSignerId,
61+
uniqueId
6062
}) {
6163
const isMobile = window.innerWidth < 767;
6264
const newWidth = containerWH.width;
@@ -393,6 +395,8 @@ function RenderPdf({
393395
setSelectWidgetId={setSelectWidgetId}
394396
selectWidgetId={selectWidgetId}
395397
handleNameModal={handleNameModal}
398+
setTempSignerId={setTempSignerId}
399+
uniqueId={uniqueId}
396400
/>
397401
</React.Fragment>
398402
);
@@ -574,6 +578,8 @@ function RenderPdf({
574578
setSelectWidgetId={setSelectWidgetId}
575579
selectWidgetId={selectWidgetId}
576580
handleNameModal={handleNameModal}
581+
setTempSignerId={setTempSignerId}
582+
uniqueId={uniqueId}
577583
/>
578584
</React.Fragment>
579585
);

‎apps/OpenSign/src/constant/Utils.js‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -692,13 +692,27 @@ export const onChangeInput = (
692692

693693
const updatePosition = getXYdata.map((positionData) => {
694694
if (positionData.key === signKey) {
695-
return {
696-
...positionData,
697-
options: {
698-
...positionData.options,
699-
response: value
700-
}
701-
};
695+
if (dateFormat) {
696+
return {
697+
...positionData,
698+
options: {
699+
...positionData.options,
700+
response: value,
701+
validation: {
702+
type: "date-format",
703+
format: dateFormat // This indicates the required date format explicitly.
704+
}
705+
}
706+
};
707+
} else {
708+
return {
709+
...positionData,
710+
options: {
711+
...positionData.options,
712+
response: value
713+
}
714+
};
715+
}
702716
}
703717
return positionData;
704718
});
@@ -970,7 +984,6 @@ export const multiSignEmbed = async (
970984
} else {
971985
updateItem = item.pos;
972986
}
973-
974987
const newWidth = containerWH.width;
975988
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
976989
const pageNo = item.pageNumber;

0 commit comments

Comments
 (0)