WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-20 22:52:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #472 from OpenSignLabs/signature_setting

Browse Source 
fix: already placed signature widget setting icon issue with old data
This commit is contained in:
prafull-opensignlabs
2024-03-14 10:04:24 +05:30
committed by GitHub
parent 3bc57a999c 86b0e90948
commit 8b15bceac8
14 changed files with 472 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+35 -35
View File
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
import { themeColor } from "../../constant/const";
import ModalUi from "../../primitives/ModalUi";
import { radioButtonWidget } from "../../constant/Utils";
function DropdownWidgetOption(props) {
const [dropdownOptionList, setDropdownOptionList] = useState([
"option-1",
@@ -143,7 +144,7 @@ function DropdownWidgetOption(props) {
// styleClass={"dropdownModal"}
isOpen={props.showDropdown}
title={props.title}
closeOff={true}
showClose={false}
>
<div style={{ height: "100%", padding: 20 }}>
<form
@@ -153,7 +154,7 @@ function DropdownWidgetOption(props) {
}}
>
<div className="dropdownContainer">
{["checkbox", "radio"].includes(props.type) &&
{["checkbox", radioButtonWidget].includes(props.type) &&
!props.isSignYourself && (
<div>
<input
@@ -178,36 +179,6 @@ function DropdownWidgetOption(props) {
className="drodown-input"
/>
{props.type === "checkbox" && !props.isSignYourself && (
<>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Minimun check
</label>
<input
required
defaultValue={0}
value={minCount}
onChange={(e) => {
const count = handleSetMinMax(e);
setMinCount(count);
}}
className="drodown-input"
/>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Maximum check
</label>
<input
required
defaultValue={0}
value={maxCount}
onChange={(e) => {
const count = handleSetMinMax(e);
setMaxCount(count);
}}
className="drodown-input"
/>
</>
)}
<label
style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
>
@@ -274,7 +245,6 @@ function DropdownWidgetOption(props) {
></i>
</div>
))}
<i
onClick={handleAddInput}
style={{
@@ -285,8 +255,38 @@ function DropdownWidgetOption(props) {
}}
className="fa-solid fa-square-plus"
></i>
{props.type === "checkbox" && !props.isSignYourself && (
<>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Minimun check
</label>
<input
required
defaultValue={0}
value={minCount}
onChange={(e) => {
const count = handleSetMinMax(e);
setMinCount(count);
}}
className="drodown-input"
/>
<label style={{ fontSize: "13px", fontWeight: "600" }}>
Maximum check
</label>
<input
required
defaultValue={0}
value={maxCount}
onChange={(e) => {
const count = handleSetMinMax(e);
setMaxCount(count);
}}
className="drodown-input"
/>
</>
)}
</div>
{["dropdown", "radio"].includes(props.type) && (
{["dropdown", radioButtonWidget].includes(props.type) && (
<>
<label
style={{
@@ -321,7 +321,7 @@ function DropdownWidgetOption(props) {
</select>
</>
)}
{props.type !== "checkbox" && props.type !== "radio" && (
{props.type !== "checkbox" && props.type !== radioButtonWidget && (
<>
<div
style={{
apps/OpenSign/src/components/pdf/Placeholder.js
+205 -108
View File
@@ -2,17 +2,118 @@ import React, { useState, useEffect } from "react";
import BorderResize from "./BorderResize";
import PlaceholderBorder from "./PlaceholderBorder";
import { Rnd } from "react-rnd";
import { defaultWidthHeight, isMobile } from "../../constant/Utils";
import {
defaultWidthHeight,
isMobile,
onChangeInput,
radioButtonWidget,
textInputWidget,
textWidget
} from "../../constant/Utils";
import PlaceholderType from "./PlaceholderType";
import moment from "moment";
import "../../styles/opensigndrive.css";
const selectFormat = (data) => {
switch (data) {
case "L":
return "MM/dd/yyyy";
case "DD-MM-YYYY":
return "dd-MM-yyyy";
case "DD/MM/YYYY":
return "dd/MM/yyyy";
case "LL":
return "MMMM dd, yyyy";
case "DD MMM, YYYY":
return "dd MMM, yyyy";
case "YYYY-MM-DD":
return "yyyy-MM-dd";
case "MM-DD-YYYY":
return "MM-dd-yyyy";
case "MM.DD.YYYY":
return "MM.dd.yyyy";
case "MMM DD, YYYY":
return "MMM dd, yyyy";
case "DD MMMM, YYYY":
return "dd MMMM, yyyy";
default:
return "MM/dd/yyyy";
}
};
const changeDateToMomentFormat = (format) => {
switch (format) {
case "MM/dd/yyyy":
return "L";
case "dd-MM-yyyy":
return "DD-MM-YYYY";
case "dd/MM/yyyy":
return "DD/MM/YYYY";
case "MMMM dd, yyyy":
return "LL";
case "dd MMM, yyyy":
return "DD MMM, YYYY";
case "yyyy-MM-dd":
return "YYYY-MM-DD";
case "MM-dd-yyyy":
return "MM-DD-YYYY";
case "MM.dd.yyyy":
return "MM.DD.YYYY";
case "MMM dd, yyyy":
return "MMM DD, YYYY";
case "dd MMMM, yyyy":
return "DD MMMM, YYYY";
default:
return "L";
}
};
//function to get default date
const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
let date;
if (format && format === "dd-MM-yyyy") {
const newdate = selectedDate
? selectedDate
: moment(new Date()).format(changeDateToMomentFormat(format));
const [day, month, year] = newdate.split("-");
date = new Date(`${year}-${month}-${day}`);
} else {
date = new Date(selectedDate);
}
const value = date;
return value;
};
//function to get default format
const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
function Placeholder(props) {
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
const [isShowDateFormat, setIsShowDateFormat] = useState(false);
const [selectDate, setSelectDate] = useState();
const [selectDate, setSelectDate] = useState({
date:
props.pos.type === "date"
? moment(
getDefaultdate(
props?.pos?.options?.response,
props.pos?.options?.validation?.format
).getTime()
).format(
changeDateToMomentFormat(props.pos?.options?.validation?.format)
)
: "",
format:
props.pos.type === "date"
? getDefaultFormat(props.pos?.options?.validation?.format)
: ""
});
const [dateFormat, setDateFormat] = useState([]);
const [saveDateFormat, setSaveDateFormat] = useState("");
const [startDate, setStartDate] = useState(
props.pos.type === "date" &&
getDefaultdate(
props?.pos?.options?.response,
props.pos?.options?.validation?.format
)
);
const dateFormatArr = [
"L",
"DD-MM-YYYY",
@@ -25,70 +126,13 @@ function Placeholder(props) {
"DD MMMM, YYYY"
];
const selectFormat = (data) => {
switch (data) {
case "L":
return "MM/dd/yyyy";
case "DD-MM-YYYY":
return "dd-MM-yyyy";
case "DD/MM/YYYY":
return "dd/MM/yyyy";
case "LL":
return "MMMM dd, yyyy";
case "DD MMM, YYYY":
return "dd MMM, YYYY";
case "YYYY-MM-DD":
return "YYYY-MM-dd";
case "MM-DD-YYYY":
return "MM-dd-YYYY";
case "MM.DD.YYYY":
return "MM.dd.YYYY";
case "MMM DD, YYYY":
return "MMM dd, YYYY";
case "DD MMMM, YYYY":
return "dd MMMM, YYYY";
default:
return "dd/MM/yyyy";
}
};
useEffect(() => {
//set default current date and default format MM/dd/yyyy
if (props.isSignYourself) {
const date = new Date();
const milliseconds = date.getTime();
const newDate = moment(milliseconds).format("MM/DD/YYYY");
const dateObj = {
date: newDate,
format: "MM/dd/YYYY"
};
setSelectDate(dateObj);
} else {
const defaultRes = props?.pos?.options?.response;
const defaultFormat = props.pos?.options?.validation?.format;
const updateDate = defaultRes
? new Date(props?.pos?.options?.response)
: new Date();
const dateFormat = defaultFormat ? defaultFormat : "MM/DD/YYYY";
const milliseconds = updateDate.getTime();
const newDate = moment(milliseconds).format(dateFormat);
const dateObj = {
date: newDate,
format: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/YYYY"
};
setSelectDate(dateObj);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
//function for add selected date and format in selectFormat
useEffect(() => {}, []);
//function change format array list with selected date and format
const changeDateFormat = () => {
const updateDate = [];
dateFormatArr.map((data) => {
let date;
if (selectDate.format === "dd-MM-yyyy") {
if (selectDate && selectDate.format === "dd-MM-yyyy") {
const [day, month, year] = selectDate.date.split("-");
date = new Date(`${year}-${month}-${day}`);
} else {
@@ -104,13 +148,15 @@ function Placeholder(props) {
});
setDateFormat(updateDate);
};
useEffect(() => {
if (props.isPlaceholder || props.isSignYourself) {
selectDate && changeDateFormat();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectDate]);
//handle to close drop down menu onclick screen
//it detect outside click of date dropdown menu
useEffect(() => {
const closeMenuOnOutsideClick = (e) => {
if (isShowDateFormat && !e.target.closest("#menu-container")) {
@@ -131,7 +177,7 @@ function Placeholder(props) {
}
const widgetTypeExist = [
"text",
textInputWidget,
"checkbox",
"name",
"company",
@@ -167,7 +213,7 @@ function Placeholder(props) {
} else if (
props.isPlaceholder &&
!props.isDragging &&
props.pos.type !== "label"
props.pos.type !== textWidget
) {
if (props.pos.key === props.selectWidgetId) {
props.handleLinkUser(props.data.Id);
@@ -195,8 +241,9 @@ function Placeholder(props) {
}
};
//function to set state value of onclick on widget's setting icon
const handleWidgetsOnclick = () => {
if (props.pos.type === "radio") {
if (props.pos.type === radioButtonWidget) {
props.setIsRadio(true);
} else if (props.pos.type === "dropdown") {
props?.setShowDropdown(true);
@@ -206,13 +253,57 @@ function Placeholder(props) {
props?.handleNameModal(true);
}
if (props.isPlaceholder) {
if (props.isPlaceholder && props.type !== textWidget) {
props.setUniqueId(props.data.Id);
}
props.setSignKey(props.pos.key);
props.setWidgetType(props.pos.type);
props.setCurrWidgetsDetails(props.pos);
};
//function ro set state value of onclick on widget's copy icon
const handleCopyPlaceholder = (e) => {
if (props.data && props?.pos?.type !== textWidget) {
props.setSignerObjId(props?.data?.signerObjId);
props.setUniqueId(props?.data?.Id);
} else if (props.data && props.pos.type === textWidget) {
props.setTempSignerId(props.uniqueId);
props.setSignerObjId(props?.data?.signerObjId);
props.setUniqueId(props?.data?.Id);
}
e.stopPropagation();
props.setIsPageCopy(true);
props.setSignKey(props.pos.key);
};
//function to save date and format on local array onchange date and onclick format
const handleSaveDate = (data, isDateChange) => {
let updateDate = data.date;
//check if date change by user
if (isDateChange) {
//`changeDateToMomentFormat` is used to convert date as per required to moment package
updateDate = moment(data.date).format(
changeDateToMomentFormat(data.format)
);
}
//using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
//`getDefaultdate` is used to convert update date in new Date() format
const date = moment(
getDefaultdate(updateDate, data?.format).getTime()
).format(changeDateToMomentFormat(data?.format));
//`onChangeInput` is used to save data related to date in a placeholder field
onChangeInput(
date,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
data?.format
);
setSelectDate({ date: date, format: data?.format });
};
const PlaceholderIcon = () => {
return (
props.isShowBorder && (
@@ -237,10 +328,12 @@ function Placeholder(props) {
}}
></i>
) : (
props.pos.type !== "date" &&
props.pos.type !== "label" &&
props.pos.type !== "signature" &&
!props.isSignYourself && (
((!props?.pos?.type && props.pos.isStamp) ||
(props?.pos?.type &&
!["date", textWidget, "signature"].includes(
props.pos.type
) &&
!props.isSignYourself)) && (
<i
onClick={(e) => {
e.stopPropagation();
@@ -253,10 +346,14 @@ function Placeholder(props) {
className="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2",
right: ["checkbox", "radio"].includes(props.pos.type)
right: ["checkbox", radioButtonWidget].includes(
props.pos.type
)
? "24px"
: "47px",
top: ["checkbox", "radio"].includes(props.pos.type)
top: ["checkbox", radioButtonWidget].includes(
props.pos.type
)
? "-28px"
: "-19px"
}}
@@ -264,7 +361,7 @@ function Placeholder(props) {
)
)}
{props.pos.type !== "label" && !props.isSignYourself && (
{props.pos.type !== textWidget && !props.isSignYourself && (
<i
data-tut="reactourLinkUser"
className="fa-regular fa-user signUserIcon"
@@ -282,12 +379,12 @@ function Placeholder(props) {
color: "#188ae2",
right:
props.pos.type === "checkbox" ||
props.pos.type === "radio"
props.pos.type === radioButtonWidget
? "8px"
: "32px",
top:
props.pos.type === "checkbox" ||
props.pos.type === "radio"
props.pos.type === radioButtonWidget
? "-28px"
: "-18px"
}}
@@ -347,10 +444,12 @@ function Placeholder(props) {
e.stopPropagation();
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(data);
handleSaveDate(data);
}}
onClick={() => {
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(data);
handleSaveDate(data);
}}
className="dropdown-item itemColor"
style={{ fontSize: "12px" }}
@@ -365,31 +464,21 @@ function Placeholder(props) {
<i
className="fa-regular fa-copy signCopy"
onClick={(e) => {
if (props.data) {
props.setSignerObjId(props.data.signerObjId);
props.setUniqueId(props.data.Id);
}
e.stopPropagation();
props.setIsPageCopy(true);
props.setSignKey(props.pos.key);
handleCopyPlaceholder(e);
}}
onTouchEnd={(e) => {
if (props.data) {
props.setSignerObjId(props.data.signerObjId);
props.setUniqueId(props.data.Id);
}
e.stopPropagation();
props.setIsPageCopy(true);
props.setSignKey(props.pos.key);
handleCopyPlaceholder(e);
}}
style={{
color: "#188ae2",
right:
props.pos.type === "checkbox" || props.pos.type === "radio"
props.pos.type === "checkbox" ||
props.pos.type === radioButtonWidget
? "-9px"
: "12px",
top:
props.pos.type === "checkbox" || props.pos.type === "radio"
props.pos.type === "checkbox" ||
props.pos.type === radioButtonWidget
? "-28px"
: "-18px"
}}
@@ -418,11 +507,13 @@ function Placeholder(props) {
style={{
color: "#188ae2",
right:
props.pos.type === "checkbox" || props.pos.type === "radio"
props.pos.type === "checkbox" ||
props.pos.type === radioButtonWidget
? "-27px"
: "-8px",
top:
props.pos.type === "checkbox" || props.pos.type === "radio"
props.pos.type === "checkbox" ||
props.pos.type === radioButtonWidget
? "-28px"
: "-18px"
}}
@@ -438,7 +529,7 @@ function Placeholder(props) {
//ref={nodeRef}
key={props.pos.key}
lockAspectRatio={
props.pos.type !== "label" &&
props.pos.type !== textWidget &&
(props.pos.Width
? props.pos.Width / props.pos.Height
: defaultWidthHeight(props.pos.type).width /
@@ -454,10 +545,10 @@ function Placeholder(props) {
props.data && props.isNeedSign
? props.data?.signerObjId === props.signerObjId &&
props.pos.type !== "checkbox" &&
props.pos.type !== "radio"
props.pos.type !== radioButtonWidget
? true
: false
: props.pos.type !== "radio" &&
: props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId &&
true,
@@ -482,7 +573,9 @@ function Placeholder(props) {
: "all-scroll",
zIndex:
props.pos.type === "date"
? "99"
? props.pos.key === props.selectWidgetId
? 99 + 1
: 99
: props?.pos?.zIndex
? props.pos.zIndex
: "5",
@@ -542,31 +635,33 @@ function Placeholder(props) {
}}
>
{props.isShowBorder &&
props.pos.type !== "radio" &&
props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId ? (
<BorderResize
right={
props.pos.type === "checkbox" || props.pos.type === "radio"
props.pos.type === "checkbox" ||
props.pos.type === radioButtonWidget
? -21
: -12
}
top={
props.pos.type === "checkbox" || props.pos.type === "radio"
props.pos.type === "checkbox" ||
props.pos.type === radioButtonWidget
? -21
: -11
}
/>
) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
props.data?.signerObjId === props.signerObjId &&
props.pos.type !== "radio" &&
props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" ? (
<BorderResize />
) : (
<></>
)
) : (
props.pos.type !== "radio" &&
props.pos.type !== radioButtonWidget &&
props.pos.type !== "checkbox" &&
props.pos.key === props.selectWidgetId && <BorderResize />
)}
@@ -615,9 +710,10 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
setSaveDateFormat={setSaveDateFormat}
saveDateFormat={saveDateFormat}
setValidateAlert={props.setValidateAlert}
setStartDate={setStartDate}
startDate={startDate}
handleSaveDate={handleSaveDate}
/>
</div>
) : (
@@ -640,9 +736,10 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
setSaveDateFormat={setSaveDateFormat}
saveDateFormat={saveDateFormat}
setValidateAlert={props.setValidateAlert}
setStartDate={setStartDate}
startDate={startDate}
handleSaveDate={handleSaveDate}
/>
</>
)}
apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+2 -1
View File
@@ -2,11 +2,12 @@ import React from "react";
import { themeColor } from "../../constant/const";
import {
defaultWidthHeight,
radioButtonWidget,
resizeBorderExtraWidth
} from "../../constant/Utils";
function PlaceholderBorder(props) {
const getResizeBorderExtraWidth =
props.pos.type === "checkbox" || props.pos.type === "radio"
props.pos.type === "checkbox" || props.pos.type === radioButtonWidget
? 38
: resizeBorderExtraWidth();
const defaultWidth = defaultWidthHeight(props.pos.type).width;
apps/OpenSign/src/components/pdf/PlaceholderCopy.js
+12 -4
View File
@@ -1,7 +1,7 @@
import React, { useState } from "react";
import { themeColor } from "../../constant/const";
import ModalUi from "../../primitives/ModalUi";
import { randomId } from "../../constant/Utils";
import { randomId, textWidget } from "../../constant/Utils";
function PlaceholderCopy(props) {
const copyType = ["All pages", "All pages but last", "All pages but first"];
@@ -180,7 +180,13 @@ function PlaceholderCopy(props) {
copyPlaceholder("first");
}
};
const handleUniqueId = () => {
if (props.widgetType === textWidget) {
props.setUniqueId(props?.tempSignerId);
props.setTempSignerId("");
}
props.setIsPageCopy(false);
};
return (
<ModalUi
isOpen={props.isPageCopy}
@@ -220,7 +226,7 @@ function PlaceholderCopy(props) {
<button
onClick={() => {
handleApplyCopy();
props.setIsPageCopy(false);
handleUniqueId();
}}
style={{ background: themeColor }}
type="button"
@@ -232,7 +238,9 @@ function PlaceholderCopy(props) {
<button
type="button"
className="finishBtn cancelBtn"
onClick={() => props.setIsPageCopy(false)}
onClick={() => {
handleUniqueId();
}}
>
Cancel
</button>
apps/OpenSign/src/components/pdf/PlaceholderType.js
+47 -65
View File
@@ -1,5 +1,13 @@
import React, { useEffect, useState, forwardRef, useRef } from "react";
import { getMonth, getYear, onChangeInput, range } from "../../constant/Utils";
import {
getMonth,
getYear,
onChangeInput,
radioButtonWidget,
range,
textInputWidget,
textWidget
} from "../../constant/Utils";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import "../../styles/signature.css";
@@ -7,10 +15,7 @@ import RegexParser from "regex-parser";
function PlaceholderType(props) {
const type = props?.pos?.type;
const [selectOption, setSelectOption] = useState(
props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
);
const [startDate, setStartDate] = useState(new Date());
const [selectOption, setSelectOption] = useState("");
const [validatePlaceholder, setValidatePlaceholder] = useState("");
const inputRef = useRef(null);
const [textValue, setTextValue] = useState();
@@ -80,7 +85,7 @@ function PlaceholderType(props) {
case "number":
setValidatePlaceholder("12345");
break;
case "text":
case textInputWidget:
setValidatePlaceholder("enter text");
break;
default:
@@ -89,10 +94,7 @@ function PlaceholderType(props) {
}
useEffect(() => {
if (props.isNeedSign && type === "date") {
const updateDate = new Date();
setStartDate(updateDate);
} else if (type && type === "checkbox" && props.isNeedSign) {
if (type && type === "checkbox" && props.isNeedSign) {
const isDefaultValue = props.pos.options?.defaultValue;
if (isDefaultValue) {
setSelectedCheckbox(isDefaultValue);
@@ -103,7 +105,18 @@ function PlaceholderType(props) {
checkRegularExpress(props.pos?.options?.validation?.type);
}
setTextValue(
props.pos?.options?.defaultValue ? props.pos?.options?.defaultValue : ""
props.pos?.options?.response
? props.pos?.options?.response
: props.pos?.options?.defaultValue
? props.pos?.options?.defaultValue
: ""
);
setSelectOption(
props.pos?.options?.response
? props.pos?.options?.response
: props.pos?.options?.defaultValue
? props.pos?.options?.defaultValue
: ""
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -120,52 +133,9 @@ function PlaceholderType(props) {
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.pos?.options?.defaultValue]);
useEffect(() => {
if (type && type === "date") {
if (props.selectDate) {
let updateDate;
if (props.selectDate.format === "dd-MM-yyyy") {
const [day, month, year] = props.saveDateFormat.split("-");
updateDate = new Date(`${year}-${month}-${day}`);
} else {
if (props?.saveDateFormat) {
updateDate = new Date(props.saveDateFormat);
}
}
// const updateDate = new Date(props.saveDateFormat);
setStartDate(updateDate);
const dateObj = {
date: props.saveDateFormat,
format: props.selectDate
? props.selectDate?.format
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/YYYY"
};
props.setSelectDate(dateObj);
onChangeInput(
props.saveDateFormat,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
props.selectDate?.format
? props.selectDate.format
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/YYYY"
);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.saveDateFormat]);
}, [props.pos]);
const dateValue = (value) => {
props.setSaveDateFormat(value);
return <span>{value}</span>;
};
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
@@ -308,6 +278,16 @@ function PlaceholderType(props) {
);
};
//function to set onchange date
const handleOnDateChange = (date) => {
props.setStartDate(date);
const isDateChange = true;
const dateObj = {
date: date,
format: props.selectDate.format
};
props.handleSaveDate(dateObj, isDateChange);
};
switch (type) {
case "signature":
return props.pos.SignUrl ? (
@@ -400,7 +380,7 @@ function PlaceholderType(props) {
})}
</div>
);
case "text":
case textInputWidget:
return props.isSignYourself ||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
<input
@@ -639,21 +619,21 @@ function PlaceholderType(props) {
</div>
)}
disabled={
props.isNeedSign && props.data?.signerObjId !== props.signerObjId
props.isPlaceholder ||
(props.isNeedSign &&
props.data?.signerObjId !== props.signerObjId)
}
onBlur={handleInputBlur}
closeOnScroll={true}
className="inputPlaceholder"
style={{ outlineColor: "#007bff" }}
selected={
startDate
? startDate
props?.startDate
? props?.startDate
: props.pos.options?.response &&
new Date(props.pos.options.response)
}
onChange={(date) => {
setStartDate(date);
}}
onChange={(date) => handleOnDateChange(date)}
popperPlacement="top-end"
customInput={<ExampleCustomInput />}
dateFormat={
@@ -661,7 +641,7 @@ function PlaceholderType(props) {
? props.selectDate?.format
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/YYYY"
: "MM/dd/yyyy"
}
/>
</div>
@@ -721,7 +701,7 @@ function PlaceholderType(props) {
<span>{type}</span>
</div>
);
case "radio":
case radioButtonWidget:
return (
<div>
{props.pos.options?.values.map((data, ind) => {
@@ -752,12 +732,14 @@ function PlaceholderType(props) {
})}
</div>
);
case "label":
case textWidget:
return (
<textarea
placeholder="Enter label"
rows={1}
value={textValue}
onChange={(e) => {
setTextValue(e.target.value);
onChangeInput(
e.target.value,
props.pos.key,
apps/OpenSign/src/components/pdf/RenderPdf.js
+9 -1
View File
@@ -56,7 +56,9 @@ function RenderPdf({
selectWidgetId,
unSignedWidgetId,
setIsCheckbox,
handleNameModal
handleNameModal,
setTempSignerId,
uniqueId
}) {
const isMobile = window.innerWidth < 767;
const newWidth = containerWH.width;
@@ -268,6 +270,8 @@ function RenderPdf({
setIsInitial={setIsInitial}
setValidateAlert={setValidateAlert}
unSignedWidgetId={unSignedWidgetId}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
/>
</React.Fragment>
)
@@ -393,6 +397,8 @@ function RenderPdf({
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={handleNameModal}
setTempSignerId={setTempSignerId}
uniqueId={uniqueId}
/>
</React.Fragment>
);
@@ -574,6 +580,8 @@ function RenderPdf({
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={handleNameModal}
setTempSignerId={setTempSignerId}
uniqueId={uniqueId}
/>
</React.Fragment>
);
apps/OpenSign/src/components/pdf/WidgetComponent.js
+27 -21
View File
@@ -3,7 +3,12 @@ import ModalUi from "../../primitives/ModalUi";
import RecipientList from "./RecipientList";
import { useDrag } from "react-dnd";
import WidgetList from "./WidgetList";
import { widgets } from "../../constant/Utils";
import {
radioButtonWidget,
textInputWidget,
textWidget,
widgets
} from "../../constant/Utils";
import { themeColor } from "../../constant/const";
function WidgetComponent({
dragSignature,
@@ -58,16 +63,15 @@ function WidgetComponent({
isDragCheck: !!monitor.isDragging()
})
});
const [, text] = useDrag({
const [, textInput] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 7,
text: "text"
text: textInputWidget
},
collect: (monitor) => ({
isDragText: !!monitor.isDragging()
isDragTextInput: !!monitor.isDragging()
})
});
const [, initials] = useDrag({
@@ -153,28 +157,28 @@ function WidgetComponent({
isDragEmail: !!monitor.isDragging()
})
});
const [, radio] = useDrag({
const [, radioButton] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 15,
text: "radio"
text: radioButtonWidget
},
collect: (monitor) => ({
isDragRadio: !!monitor.isDragging()
isDragRadiotton: !!monitor.isDragging()
})
});
const [, label] = useDrag({
const [, text] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 16,
text: "label"
text: textWidget
},
collect: (monitor) => ({
isDragLabel: !!monitor.isDragging()
isDragText: !!monitor.isDragging()
})
});
const isMobile = window.innerWidth < 767;
@@ -204,17 +208,17 @@ function WidgetComponent({
dragSignature,
dragStamp,
initials,
label,
name,
jobTitle,
company,
date,
text,
textInput,
checkbox,
dropdown,
radio,
radioButton,
image,
date,
name,
email,
company,
jobTitle
email
];
const getWidgetArray = widgets;
const newUpdateSigner = getWidgetArray.map((obj, ind) => {
@@ -227,13 +231,15 @@ function WidgetComponent({
const filterWidgets = widget.filter(
(data) =>
data.type !== "dropdown" && data.type !== "radio" && data.type !== "label"
data.type !== "dropdown" &&
data.type !== radioButtonWidget &&
data.type !== textWidget
);
const labelWidget = widget.filter((data) => data.type !== "label");
const textWidgetData = widget.filter((data) => data.type !== textWidget);
const updateWidgets = isSignYourself
? filterWidgets
: isTemplateFlow
? labelWidget
? textWidgetData
: widget;
return (
apps/OpenSign/src/components/pdf/WidgetNameModal.js
+6 -5
View File
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import ModalUi from "../../primitives/ModalUi";
import "../../styles/AddUser.css";
import RegexParser from "regex-parser";
import { textInputWidget } from "../../constant/Utils";
const WidgetNameModal = (props) => {
const [formdata, setFormdata] = useState({
@@ -69,7 +70,7 @@ const WidgetNameModal = (props) => {
return "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/";
case "number":
return "/^\\d+$/";
case "text":
case textInputWidget:
return "/^[a-zA-Zs]+$/";
default:
return type;
@@ -111,8 +112,8 @@ const WidgetNameModal = (props) => {
required
/>
</div>
{(props.defaultdata?.type === "text" ||
props.widgetName === "text") && (
{(props.defaultdata?.type === textInputWidget ||
props.widgetName === textInputWidget) && (
<>
<div className="form-section">
<label htmlFor="textvalidate" style={{ fontSize: 13 }}>
@@ -243,8 +244,8 @@ const WidgetNameModal = (props) => {
})}
</div>
</div>
{(props.defaultdata?.type === "text" ||
props?.widgetName === "text") && (
{(props.defaultdata?.type === textInputWidget ||
props?.widgetName === textInputWidget) && (
<div className="form-section">
<label htmlFor="hint" style={{ fontSize: 13 }}>
Hint
apps/OpenSign/src/constant/Utils.js
+63 -44
View File
@@ -5,6 +5,9 @@ import React from "react";
import { rgb } from "pdf-lib";
export const isMobile = window.innerWidth < 767;
export const textInputWidget = "text input";
export const textWidget = "text";
export const radioButtonWidget = "radio button";
export const openInNewTab = (url) => {
window.open(url, "_blank", "noopener,noreferrer");
};
@@ -162,12 +165,32 @@ export const widgets = [
iconSize: "15px"
},
{
type: "label",
type: "name",
icon: "fa-solid fa-user",
iconSize: "21px"
},
{
type: "job title",
icon: "fa-solid fa-address-card",
iconSize: "17px"
},
{
type: "company",
icon: "fa-solid fa-building",
iconSize: "25px"
},
{
type: "date",
icon: "fa-solid fa-calendar-days",
iconSize: "20px"
},
{
type: textWidget,
icon: "fa-solid fa-text-width",
iconSize: "20px"
},
{
type: "text",
type: textInputWidget,
icon: "fa-solid fa-font",
iconSize: "21px"
},
@@ -182,7 +205,7 @@ export const widgets = [
iconSize: "19px"
},
{
type: "radio",
type: radioButtonWidget,
icon: "fa-regular fa-circle-dot",
iconSize: "20px"
},
@@ -191,40 +214,19 @@ export const widgets = [
icon: "fa-solid fa-image",
iconSize: "20px"
},
{
type: "date",
icon: "fa-solid fa-calendar-days",
iconSize: "20px"
},
{
type: "name",
icon: "fa-solid fa-user",
iconSize: "21px"
},
{
type: "email",
icon: "fa-solid fa-envelope",
iconSize: "20px"
},
{
type: "company",
icon: "fa-solid fa-building",
iconSize: "25px"
},
{
type: "job title",
icon: "fa-solid fa-address-card",
iconSize: "17px"
}
];
const getDate = () => {
export const getDate = () => {
const date = new Date();
const milliseconds = date.getTime();
const newDate = moment(milliseconds).format("MM/DD/YYYY");
return newDate;
};
export const addWidgetOptions = (type) => {
const defaultOpt = {
name: "",
@@ -237,7 +239,7 @@ export const addWidgetOptions = (type) => {
return defaultOpt;
case "checkbox":
return defaultOpt;
case "text":
case textInputWidget:
return { ...defaultOpt, validation: { type: "text", pattern: "" } };
case "initials":
return defaultOpt;
@@ -248,16 +250,20 @@ export const addWidgetOptions = (type) => {
case "job title":
return { ...defaultOpt, validation: { type: "text", pattern: "" } };
case "date":
return { ...defaultOpt, response: getDate() };
return {
...defaultOpt,
response: getDate(),
validation: { format: "MM/dd/yyyy", type: "date-format" }
};
case "image":
return defaultOpt;
case "email":
return { ...defaultOpt, validation: { type: "email", pattern: "" } };
case "dropdown":
return defaultOpt;
case "radio":
case radioButtonWidget:
return { ...defaultOpt, values: [] };
case "label":
case textWidget:
return defaultOpt;
default:
return {};
@@ -323,7 +329,7 @@ export const defaultWidthHeight = (type) => {
return { width: 150, height: 60 };
case "checkbox":
return { width: 15, height: 15 };
case "text":
case textInputWidget:
return { width: 150, height: 25 };
case "dropdown":
return { width: 120, height: 22 };
@@ -341,9 +347,9 @@ export const defaultWidthHeight = (type) => {
return { width: 70, height: 70 };
case "email":
return { width: 150, height: 20 };
case "radio":
case radioButtonWidget:
return { width: 15, height: 30 };
case "label":
case textWidget:
return { width: 150, height: 17 };
default:
return { width: 150, height: 60 };
@@ -692,13 +698,27 @@ export const onChangeInput = (
const updatePosition = getXYdata.map((positionData) => {
if (positionData.key === signKey) {
return {
...positionData,
options: {
...positionData.options,
response: value
}
};
if (dateFormat) {
return {
...positionData,
options: {
...positionData.options,
response: value,
validation: {
type: "date-format",
format: dateFormat // This indicates the required date format explicitly.
}
}
};
} else {
return {
...positionData,
options: {
...positionData.options,
response: value
}
};
}
}
return positionData;
});
@@ -970,7 +990,6 @@ export const multiSignEmbed = async (
} else {
updateItem = item.pos;
}
const newWidth = containerWH.width;
const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
const pageNo = item.pageNumber;
@@ -1060,7 +1079,7 @@ export const multiSignEmbed = async (
? labelDefaultHeight
: scaleHeight;
const widgetHeight =
position.type === "radio"
position.type === radioButtonWidget
? 10
: position.type === "checkbox"
? 10
@@ -1125,7 +1144,7 @@ export const multiSignEmbed = async (
}
};
const widgetTypeExist = [
"text",
textInputWidget,
"name",
"company",
"job title",
@@ -1171,7 +1190,7 @@ export const multiSignEmbed = async (
checkbox.enableReadOnly();
});
}
} else if (position.type === "label") {
} else if (position.type === textWidget) {
const font = await pdfDoc.embedFont("Helvetica");
const fontSize = 12;
let textContent;
@@ -1254,7 +1273,7 @@ export const multiSignEmbed = async (
height: scaleHeight
});
dropdown.enableReadOnly();
} else if (position.type === "radio") {
} else if (position.type === radioButtonWidget) {
const radioRandomId = "radio" + randomId();
const radioGroup = form.createRadioGroup(radioRandomId);
let addYPosition = 18;
apps/OpenSign/src/pages/GuestLogin.js
+9
View File
@@ -4,6 +4,7 @@ import "../styles/loginPage.css";
import loader from "../assets/images/loader2.gif";
import axios from "axios";
import { themeColor } from "../constant/const";
import { contractUsers } from "../constant/Utils";
function GuestLogin() {
const { id, userMail, contactBookId, serverUrl } = useParams();
@@ -103,11 +104,19 @@ function GuestLogin() {
} else {
let _user = user.data.result;
const parseId = localStorage.getItem("parseAppId");
const contractUserDetails = await contractUsers(_user.email);
localStorage.setItem("UserInformation", JSON.stringify(_user));
localStorage.setItem(
`Parse/${parseId}/currentUser`,
JSON.stringify(_user)
);
if (contractUserDetails) {
localStorage.setItem(
"Extand_Class",
JSON.stringify(contractUserDetails)
);
}
localStorage.setItem("username", _user.name);
localStorage.setItem("accesstoken", _user.sessionToken);
//save isGuestSigner true in local to handle login flow header in mobile view
apps/OpenSign/src/pages/PdfRequestFiles.js
+11 -4
View File
@@ -19,7 +19,8 @@ import {
onImageSelect,
onSaveSign,
onSaveImage,
addDefaultSignatureImg
addDefaultSignatureImg,
radioButtonWidget
} from "../constant/Utils";
import Loader from "../primitives/LoaderWithMsg";
import HandleError from "../primitives/HandleError";
@@ -48,6 +49,7 @@ function PdfRequestFiles() {
const [imgWH, setImgWH] = useState({});
const imageRef = useRef(null);
const [handleError, setHandleError] = useState();
const [selectWidgetId, setSelectWidgetId] = useState("");
const [isLoading, setIsLoading] = useState({
isLoad: true,
message: "This might take some time"
@@ -385,7 +387,8 @@ function PdfRequestFiles() {
for (let j = 0; j < checkUser[0].placeHolder[i].pos.length; j++) {
checkboxExist =
checkUser[0].placeHolder[i].pos[j].type === "checkbox";
radioExist = checkUser[0].placeHolder[i].pos[j].type === "radio";
radioExist =
checkUser[0].placeHolder[i].pos[j].type === radioButtonWidget;
if (checkboxExist) {
requiredCheckbox = checkUser[0].placeHolder[i].pos.filter(
(position) =>
@@ -434,7 +437,8 @@ function PdfRequestFiles() {
} else if (radioExist) {
requiredRadio = checkUser[0].placeHolder[i].pos.filter(
(position) =>
!position.options?.isReadOnly && position.type === "radio"
!position.options?.isReadOnly &&
position.type === radioButtonWidget
);
if (requiredRadio && requiredRadio?.length > 0) {
let checkSigned;
@@ -457,7 +461,7 @@ function PdfRequestFiles() {
const requiredWidgets = checkUser[0].placeHolder[i].pos.filter(
(position) =>
position.options?.status === "required" &&
position.type !== "radio" &&
position.type !== radioButtonWidget &&
position.type !== "checkbox"
);
if (requiredWidgets && requiredWidgets?.length > 0) {
@@ -643,6 +647,7 @@ function PdfRequestFiles() {
});
}
}
console.log("signer", signerPos);
//function for update TourStatus
const closeTour = async () => {
setWidgetsTour(false);
@@ -1173,6 +1178,8 @@ function PdfRequestFiles() {
setIsInitial={setIsInitial}
setValidateAlert={setValidateAlert}
unSignedWidgetId={unSignedWidgetId}
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
/>
)}
</div>
apps/OpenSign/src/pages/PlaceHolderSign.js
+27 -18
View File
@@ -24,7 +24,10 @@ import {
randomId,
defaultWidthHeight,
multiSignEmbed,
addWidgetOptions
addWidgetOptions,
textInputWidget,
textWidget,
radioButtonWidget
} from "../constant/Utils";
import RenderPdf from "../components/pdf/RenderPdf";
import { useNavigate } from "react-router-dom";
@@ -76,6 +79,7 @@ function PlaceHolderSign() {
const [isResize, setIsResize] = useState(false);
const [zIndex, setZIndex] = useState(1);
const [signKey, setSignKey] = useState();
const [tempSignerId, setTempSignerId] = useState("");
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
@@ -380,18 +384,16 @@ function PlaceHolderSign() {
pos: dropData
};
}
setSelectWidgetId(key);
if (signer) {
let filterSignerPos;
if (dragTypeValue === "label") {
if (dragTypeValue === textWidget) {
filterSignerPos = signerPos.filter((data) => data.Role === "prefill");
} else {
filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
}
const { blockColor, Role } = signer;
//adding placholder in existing signer pos array (placaholder)
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -412,7 +414,7 @@ function PlaceHolderSign() {
};
updatePlace.push(xyPos);
let updatesignerPos;
if (dragTypeValue === "label") {
if (dragTypeValue === textWidget) {
updatesignerPos = signerPos.map((x) =>
x.Role === "prefill" ? { ...x, placeHolder: updatePlace } : x
);
@@ -425,7 +427,7 @@ function PlaceHolderSign() {
setSignerPos(updatesignerPos);
} else {
let updatesignerPos;
if (dragTypeValue === "label") {
if (dragTypeValue === textWidget) {
updatesignerPos = signerPos.map((x) =>
x.Role === "prefill"
? { ...x, placeHolder: [...x.placeHolder, placeHolder] }
@@ -442,9 +444,8 @@ function PlaceHolderSign() {
}
} else {
//adding new placeholder for selected signer in pos array (placeholder)
// const signerData = signerPos;
let placeHolderPos;
if (dragTypeValue === "label") {
if (dragTypeValue === textWidget) {
placeHolderPos = {
signerPtr: {},
signerObjId: "",
@@ -484,9 +485,12 @@ function PlaceHolderSign() {
setShowDropdown(true);
} else if (dragTypeValue === "checkbox") {
setIsCheckbox(true);
} else if (dragTypeValue === "radio") {
} else if (dragTypeValue === radioButtonWidget) {
setIsRadio(true);
} else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
} else if (
dragTypeValue !== textWidget &&
dragTypeValue !== "signature"
) {
setIsNameModal(true);
}
setWidgetType(dragTypeValue);
@@ -736,7 +740,7 @@ function PlaceHolderSign() {
if (getPrefill && isLabel) {
const alert = {
mssg: "label",
mssg: textWidget,
alert: true
};
setIsSendAlert(alert);
@@ -1067,7 +1071,7 @@ function PlaceHolderSign() {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
if (widgetType === "radio") {
if (widgetType === radioButtonWidget) {
if (addOption) {
return {
...position,
@@ -1186,7 +1190,7 @@ function PlaceHolderSign() {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
if (position.type === "text") {
if (position.type === textInputWidget) {
return {
...position,
options: {
@@ -1406,13 +1410,13 @@ function PlaceHolderSign() {
<ModalUi
headerColor={
isSendAlert.mssg === "sure" || isSendAlert.mssg === "label"
isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
? "#dc3545"
: isSendAlert.mssg === "confirm" && themeColor
}
isOpen={isSendAlert.alert}
title={
isSendAlert.mssg === "sure" || isSendAlert.mssg === "label"
isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
? "Fields required"
: isSendAlert.mssg === "confirm" && "Send Mail"
}
@@ -1421,7 +1425,7 @@ function PlaceHolderSign() {
<div style={{ height: "100%", padding: 20 }}>
{isSendAlert.mssg === "sure" ? (
<p>Please add field for all recipients.</p>
) : isSendAlert.mssg === "label" ? (
) : isSendAlert.mssg === textWidget ? (
<p>Please confirm that you have filled label widget.</p>
) : (
isSendAlert.mssg === "confirm" && (
@@ -1553,11 +1557,14 @@ function PlaceHolderSign() {
allPages={allPages}
pageNumber={pageNumber}
signKey={signKey}
// signerObjId={signerObjId}
Id={uniqueId}
widgetType={widgetType}
setUniqueId={setUniqueId}
tempSignerId={tempSignerId}
setTempSignerId={setTempSignerId}
/>
<DropdownWidgetOption
type="radio"
type={radioButtonWidget}
title="Radio group"
showDropdown={isRadio}
setShowDropdown={setIsRadio}
@@ -1639,6 +1646,8 @@ function PlaceHolderSign() {
setSelectWidgetId={setSelectWidgetId}
selectWidgetId={selectWidgetId}
handleNameModal={setIsNameModal}
setTempSignerId={setTempSignerId}
uniqueId={uniqueId}
/>
)}
</div>
apps/OpenSign/src/pages/SignyourselfPdf.js
+7 -12
View File
@@ -3,7 +3,6 @@ import { PDFDocument } from "pdf-lib";
import "../styles/signature.css";
import { themeColor } from "../constant/const";
import axios from "axios";
import moment from "moment";
import Loader from "../primitives/LoaderWithMsg";
import loader from "../assets/images/loader2.gif";
import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
@@ -25,7 +24,9 @@ import {
onSaveSign,
contractUsers,
contactBook,
randomId
randomId,
getDate,
textInputWidget
} from "../constant/Utils";
import { useParams } from "react-router-dom";
import Tour from "reactour";
@@ -308,13 +309,6 @@ function SignYourSelf() {
setIsLoading(loadObj);
}
};
const getDate = () => {
const date = new Date();
const milliseconds = date.getTime();
const newDate = moment(milliseconds).format("MM/DD/YYYY");
return newDate;
};
const getWidgetValue = (type) => {
switch (type) {
case "name":
@@ -333,6 +327,7 @@ function SignYourSelf() {
return "";
}
};
const addWidgetOptions = (type) => {
switch (type) {
case "signature":
@@ -348,7 +343,7 @@ function SignYourSelf() {
name: "checkbox"
};
case "text":
case textInputWidget:
return {
name: "text"
};
@@ -386,7 +381,8 @@ function SignYourSelf() {
case "date":
return {
name: "date",
defaultValue: getDate()
response: getDate(),
validation: { format: "MM/dd/yyyy", type: "date-format" }
};
case "image":
return {
@@ -596,7 +592,6 @@ function SignYourSelf() {
await signPdfFun(pdfBytes, documentId);
}
}
//function for get digital signature
const signPdfFun = async (base64Url, documentId) => {
let singleSign = {
apps/OpenSign/src/pages/TemplatePlaceholder.js
+12 -6
View File
@@ -21,7 +21,10 @@ import {
addZIndex,
createDocument,
defaultWidthHeight,
addWidgetOptions
addWidgetOptions,
textInputWidget,
textWidget,
radioButtonWidget
} from "../constant/Utils";
import RenderPdf from "../components/pdf/RenderPdf";
import "../styles/AddUser.css";
@@ -442,9 +445,12 @@ const TemplatePlaceholder = () => {
setShowDropdown(true);
} else if (dragTypeValue === "checkbox") {
setIsCheckbox(true);
} else if (dragTypeValue === "radio") {
} else if (dragTypeValue === radioButtonWidget) {
setIsRadio(true);
} else if (dragTypeValue !== "label" && dragTypeValue !== "signature") {
} else if (
dragTypeValue !== textWidget &&
dragTypeValue !== "signature"
) {
setIsNameModal(true);
}
setCurrWidgetsDetails({});
@@ -986,7 +992,7 @@ const TemplatePlaceholder = () => {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
if (widgetType === "radio") {
if (widgetType === radioButtonWidget) {
if (addOption) {
return {
...position,
@@ -1106,7 +1112,7 @@ const TemplatePlaceholder = () => {
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
if (position.type === "text") {
if (position.type === textInputWidget) {
return {
...position,
options: {
@@ -1305,7 +1311,7 @@ const TemplatePlaceholder = () => {
</div>
</ModalUi>
<DropdownWidgetOption
type="radio"
type={radioButtonWidget}
title="Radio group"
showDropdown={isRadio}
setShowDropdown={setIsRadio}