WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-17 21:25:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: unexpected modal issue when the settings icon is clicked on text input widgets.

Browse Source
This commit is contained in:
RaktimaNXG
2024-07-17 15:11:06 +05:30
parent e6a7cda3b6
commit 4e46795e0f
6 changed files with 155 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/pdf/Placeholder.js
+27 -10
View File
@@ -317,7 +317,9 @@ function Placeholder(props) {
props?.setShowDropdown(true);
} else if (props.pos.type === "checkbox") {
props?.setIsCheckbox(true);
} else if (
}
//condition to handle setting icon for signyour-self flow for all type text widgets
else if (
[
textInputWidget,
textWidget,
@@ -325,13 +327,15 @@ function Placeholder(props) {
"company",
"job title",
"email"
].includes(props.pos.type)
].includes(props.pos.type) &&
props.isSignYourself
) {
props.handleTextSettingModal(true);
} else {
props?.handleNameModal && props?.handleNameModal(true);
}
//condition for only placeholder and template flow
if (props.data && props?.pos?.type !== textWidget) {
props.setSignerObjId(props?.data?.signerObjId);
props.setUniqueId(props?.data?.Id);
@@ -340,13 +344,15 @@ function Placeholder(props) {
);
props.setIsSelectId(checkIndex || 0);
} else if (props.data && props.pos.type === textWidget) {
}
//condition to handle in placeholder and template flow for text widget signerId for text widgets i have to set uniqueId in tempSignerId because
//it does not have any signer user and any signerobjId
else if (props.data && props.pos.type === textWidget) {
props.setTempSignerId(props.uniqueId);
props.setUniqueId(props?.data?.Id);
const checkIndex = props.xyPostion.findIndex(
(data) => data.Id === props.data.Id
);
props.setIsSelectId(checkIndex || 0);
}
props.setSignKey(props.pos.key);
@@ -433,6 +439,9 @@ function Placeholder(props) {
<>
{(props.isPlaceholder || props.isSignYourself) && (
<>
{/* condition to add setting icon for signyour-self flow for particular text widgets
and also it have diffrent position
*/}
{[
"checkbox",
textInputWidget,
@@ -459,6 +468,7 @@ function Placeholder(props) {
}}
></i>
) : (
/* condition to add setting icon for placeholder & template flow for all widgets except signature and date */
((!props?.pos?.type && props.pos.isStamp) ||
(props?.pos?.type &&
!["date", "signature"].includes(props.pos.type) &&
@@ -481,7 +491,7 @@ function Placeholder(props) {
></i>
)
)}
{/* condition for usericon for all widgets except text widgets and signyour-self flow */}
{props.pos.type !== textWidget && !props.isSignYourself && (
<i
data-tut="assignSigner"
@@ -509,6 +519,7 @@ function Placeholder(props) {
)}
</>
)}
{/* setting icon only for date widgets */}
{props.pos.type === "date" && selectDate && (
<div
id="menu-container"
@@ -581,29 +592,37 @@ function Placeholder(props) {
</div>
</div>
)}
{/* copy icon for all widgets */}
<i
className="fa-light fa-copy icon"
onClick={(e) => handleCopyPlaceholder(e)}
onTouchEnd={(e) => handleCopyPlaceholder(e)}
style={{ color: "#188ae2", right: "12px", top: "-18px" }}
></i>
{/* delete icon for all widgets */}
<i
className="fa-light fa-circle-xmark icon"
onClick={(e) => {
e.stopPropagation();
//condition for template and placeholder flow
if (props.data) {
props.handleDeleteSign(props.pos.key, props.data.Id);
} else {
}
//condition for signyour-self flow
else {
props.handleDeleteSign(props.pos.key);
props.setIsStamp(false);
}
}}
//for mobile and tablet touch event
onTouchEnd={(e) => {
e.stopPropagation();
//condition for template and placeholder flow
if (props.data) {
props.handleDeleteSign(props.pos.key, props.data?.Id);
} else {
}
//condition for signyour-self flow
else {
props.handleDeleteSign(props.pos.key);
props.setIsStamp(false);
}
@@ -689,7 +708,6 @@ function Placeholder(props) {
data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
key={props.pos.key}
lockAspectRatio={
// props.pos.type !== textWidget
![
textWidget,
"email",
@@ -832,7 +850,6 @@ function Placeholder(props) {
)}
{isTabAndMobile ? (
<div
// className="sm:inline-block md:inline-block lg:hidden "
className="flex items-stretch"
style={{
left: xPos(props.pos, props.isSignYourself),
apps/OpenSign/src/components/pdf/PlaceholderBorder.js
+2 -2
View File
@@ -51,8 +51,8 @@ function PlaceholderBorder(props) {
style={{
borderColor: themeColor,
borderStyle: "dashed",
minWidth: handleMinWidth(),
minHeight: handleMinHeight(),
minWidth: handleMinWidth() || "",
minHeight: handleMinHeight() || "",
borderWidth: "0.2px",
overflow: "hidden"
}}
apps/OpenSign/src/components/pdf/PlaceholderType.js
+20 -10
View File
@@ -423,8 +423,10 @@ function PlaceholderType(props) {
) : (
<div
style={{
color: "black",
fontSize: "12px"
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
>
<span>{type}</span>
@@ -522,8 +524,10 @@ function PlaceholderType(props) {
) : (
<div
style={{
color: "black",
fontSize: "12px"
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
>
<span>{type}</span>
@@ -562,8 +566,10 @@ function PlaceholderType(props) {
) : (
<div
style={{
color: "black",
fontSize: "12px"
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
>
<span>{type}</span>
@@ -602,8 +608,10 @@ function PlaceholderType(props) {
) : (
<div
style={{
color: "black",
fontSize: "12px"
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
>
<span>{type}</span>
@@ -720,8 +728,10 @@ function PlaceholderType(props) {
) : (
<div
style={{
color: "black",
fontSize: "12px"
fontSize: props.pos.options?.fontSize
? props.pos.options?.fontSize + "px"
: "12px",
color: props.pos.options?.fontColor || "black"
}}
>
<span>{type}</span>
apps/OpenSign/src/components/pdf/WidgetNameModal.js
+61 -1
View File
@@ -2,11 +2,12 @@ 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";
import { textInputWidget, textWidget } from "../../constant/Utils";
import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
import Upgrade from "../../primitives/Upgrade";
import { isEnableSubscription } from "../../constant/const";
import Tooltip from "../../primitives/Tooltip";
import { fontColorArr, fontsizeArr } from "../../constant/Utils";
const WidgetNameModal = (props) => {
const [formdata, setFormdata] = useState({
@@ -266,6 +267,65 @@ const WidgetNameModal = (props) => {
/>
</div>
)}
{[
textInputWidget,
textWidget,
"name",
"company",
"job title",
"email"
].includes(props.defaultdata?.type || props?.widgetName) && (
<div className="flex items-center mb-[0.75rem]">
<span>Font size:</span>
<select
className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
value={
props.fontSize ||
props.currWidgetsDetails?.options?.fontSize ||
"12"
}
onChange={(e) => props.setFontSize(e.target.value)}
>
{fontsizeArr.map((size, ind) => {
return (
<option className="text-[13px]" value={size} key={ind}>
{size}
</option>
);
})}
</select>
<div className="flex flex-row gap-1 items-center ml-4">
<span>color: </span>
<select
value={
props.fontColor ||
props.currWidgetsDetails?.options?.fontColor ||
"black"
}
onChange={(e) => props.setFontColor(e.target.value)}
className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
>
{fontColorArr.map((color, ind) => {
return (
<option value={color} key={ind}>
{color}
</option>
);
})}
</select>
<span
style={{
background:
props.fontColor ||
props.currWidgetsDetails?.options?.fontColor ||
"black"
}}
className="w-5 h-[19px] ml-1"
></span>
</div>
</div>
)}
<div className="h-[1px] w-full mb-[16px] bg-[#b7b3b3]"></div>
<button type="submit" className="op-btn op-btn-primary">
Save
apps/OpenSign/src/pages/PlaceHolderSign.js
+29 -71
View File
@@ -50,7 +50,6 @@ import Upgrade from "../primitives/Upgrade";
import Alert from "../primitives/Alert";
import Loader from "../primitives/Loader";
import { useSelector } from "react-redux";
import TextFontSetting from "../components/pdf/TextFontSetting";
import PdfZoom from "../components/pdf/PdfZoom";
import LottieWithLoader from "../primitives/DotLottieReact";
@@ -1485,7 +1484,13 @@ function PlaceHolderSign() {
pattern:
inputype === "regex" ? defaultdata.textvalidate : ""
}
: {}
: {},
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
"black"
}
};
} else {
@@ -1495,7 +1500,13 @@ function PlaceHolderSign() {
...position.options,
name: defaultdata.name,
status: defaultdata.status,
defaultValue: defaultdata.defaultValue
defaultValue: defaultdata.defaultValue,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
"black"
}
};
}
@@ -1520,6 +1531,15 @@ function PlaceHolderSign() {
}
setCurrWidgetsDetails({});
handleNameModal();
setFontSize();
setFontColor();
//condition for text widget type after set all values for text widget
//change setUniqueId which is set in tempsignerId
//because textwidget do not have signer user so for selected signers we have to do
if (currWidgetsDetails.type === textWidget) {
setUniqueId(tempSignerId);
setTempSignerId("");
}
};
const handleNameModal = () => {
@@ -1679,62 +1699,6 @@ function PlaceHolderSign() {
setSignerPos(updatePlaceholderUser);
setIsMailSend(false);
};
const handleSaveFontSize = () => {
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
return {
...position,
options: {
...position.options,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor || currWidgetsDetails?.options?.fontColor || "black"
}
};
}
return position;
});
const newUpdateSignPos = getPlaceHolder.map((obj) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
const newUpdateSigner = signerPos.map((obj) => {
if (obj.Id === uniqueId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
}
}
setFontSize();
setFontColor();
if (currWidgetsDetails.type === textWidget) {
setUniqueId(tempSignerId);
setTempSignerId("");
}
handleTextSettingModal(false);
};
const handleTextSettingModal = (value) => {
setIsTextSetting(value);
};
return (
<>
<Title title={state?.title ? state.title : "New Document"} />
@@ -2095,7 +2059,6 @@ function PlaceHolderSign() {
handleNameModal={setIsNameModal}
setTempSignerId={setTempSignerId}
uniqueId={uniqueId}
handleTextSettingModal={handleTextSettingModal}
pdfOriginalWH={pdfOriginalWH}
setScale={setScale}
scale={scale}
@@ -2215,17 +2178,6 @@ function PlaceHolderSign() {
</button>
</div>
</ModalUi>
<TextFontSetting
isTextSetting={isTextSetting}
setIsTextSetting={setIsTextSetting}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
handleSaveFontSize={handleSaveFontSize}
currWidgetsDetails={currWidgetsDetails}
/>
<LinkUserModal
handleAddUser={handleAddUser}
isAddUser={isAddUser}
@@ -2246,6 +2198,12 @@ function PlaceHolderSign() {
handleClose={handleNameModal}
handleData={handleWidgetdefaultdata}
isSubscribe={isSubscribe}
isTextSetting={isTextSetting}
setIsTextSetting={setIsTextSetting}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
/>
</DndProvider>
</>
apps/OpenSign/src/pages/TemplatePlaceholder.js
+16 -58
View File
@@ -38,7 +38,6 @@ import TourContentWithBtn from "../primitives/TourContentWithBtn";
import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
import Parse from "parse";
import { useSelector } from "react-redux";
import TextFontSetting from "../components/pdf/TextFontSetting";
import PdfZoom from "../components/pdf/PdfZoom";
const TemplatePlaceholder = () => {
const navigate = useNavigate();
@@ -1204,7 +1203,13 @@ const TemplatePlaceholder = () => {
pattern:
inputype === "regex" ? defaultdata.textvalidate : ""
}
: {}
: {},
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
"black"
}
};
} else {
@@ -1214,7 +1219,13 @@ const TemplatePlaceholder = () => {
...position.options,
name: defaultdata.name,
status: defaultdata.status,
defaultValue: defaultdata.defaultValue
defaultValue: defaultdata.defaultValue,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor ||
currWidgetsDetails?.options?.fontColor ||
"black"
}
};
}
@@ -1237,6 +1248,8 @@ const TemplatePlaceholder = () => {
setSignerPos(newUpdateSigner);
}
}
setFontSize();
setFontColor();
setCurrWidgetsDetails({});
handleNameModal();
};
@@ -1247,57 +1260,7 @@ const TemplatePlaceholder = () => {
setIsRadio(false);
setIsCheckbox(false);
};
const handleSaveFontSize = () => {
const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((position) => {
if (position.key === signKey) {
return {
...position,
options: {
...position.options,
fontSize:
fontSize || currWidgetsDetails?.options?.fontSize || "12",
fontColor:
fontColor || currWidgetsDetails?.options?.fontColor || "black"
}
};
}
return position;
});
const newUpdateSignPos = getPlaceHolder.map((obj) => {
if (obj.pageNumber === pageNumber) {
return { ...obj, pos: addSignPos };
}
return obj;
});
const newUpdateSigner = signerPos.map((obj) => {
if (obj.Id === uniqueId) {
return { ...obj, placeHolder: newUpdateSignPos };
}
return obj;
});
setSignerPos(newUpdateSigner);
}
}
setFontSize();
setFontColor();
handleTextSettingModal(false);
};
const handleTextSettingModal = (value) => {
setIsTextSetting(value);
};
return (
<>
<Title title={"Template"} />
@@ -1533,7 +1496,6 @@ const TemplatePlaceholder = () => {
selectWidgetId={selectWidgetId}
setIsCheckbox={setIsCheckbox}
handleNameModal={setIsNameModal}
handleTextSettingModal={handleTextSettingModal}
pdfOriginalWH={pdfOriginalWH}
setScale={setScale}
scale={scale}
@@ -1673,16 +1635,12 @@ const TemplatePlaceholder = () => {
handleClose={handleNameModal}
handleData={handleWidgetdefaultdata}
isSubscribe={isSubscribe}
/>
<TextFontSetting
isTextSetting={isTextSetting}
setIsTextSetting={setIsTextSetting}
fontSize={fontSize}
setFontSize={setFontSize}
fontColor={fontColor}
setFontColor={setFontColor}
handleSaveFontSize={handleSaveFontSize}
currWidgetsDetails={currWidgetsDetails}
/>
</DndProvider>
</>