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

fix: placeholder flow widget's issue

Browse Source
This commit is contained in:
RaktimaNXG
2024-02-14 20:33:24 +05:30
parent b35d8406a3
commit 156a05f6ed
11 changed files with 144 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+7 -19
View File
@@ -84,13 +84,13 @@ function SignYourSelf() {
const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
status: false
});
const [widgetType, setWidgetType] = useState("");
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
});
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
const [isDontShow, setIsDontShow] = useState(false);
const [isdraggingEnable, setIsDraggingEnable] = useState(false);
const divRef = useRef(null);
const nodeRef = useRef(null);
const [{ isOver }, drop] = useDrop({
@@ -110,8 +110,6 @@ function SignYourSelf() {
id: 1,
text: "signature"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragSign: !!monitor.isDragging()
})
@@ -123,7 +121,7 @@ function SignYourSelf() {
id: 2,
text: "stamp"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragStamp: !!monitor.isDragging()
})
@@ -137,11 +135,6 @@ function SignYourSelf() {
id: 3,
text: "drag me"
},
canDrag: isdraggingEnable,
// options: {
// // Set the delay for touch dragging
// delay: { touch: 500 }, // Set the delay in milliseconds
// },
collect: (monitor) => ({
isDragSignatureSS: !!monitor.isDragging()
})
@@ -154,7 +147,7 @@ function SignYourSelf() {
id: 4,
text: "drag me"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragStampSS: !!monitor.isDragging()
})
@@ -188,9 +181,6 @@ function SignYourSelf() {
if (documentId) {
getDocumentDetails(true);
}
if (!isMobile) {
setIsDraggingEnable(true);
}
}, []);
useEffect(() => {
@@ -478,9 +468,7 @@ function SignYourSelf() {
} else if (dragTypeValue === "initials") {
setIsInitial(true);
}
if (isMobile) {
setIsDraggingEnable(false);
}
setWidgetType(dragTypeValue);
};
//function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
@@ -529,7 +517,7 @@ function SignYourSelf() {
});
const flag = true;
//embed document's object id to all pages in pdf document
await embedDocId(pdfDoc, documentId, allPages);
//embed multi signature in pdf
@@ -964,6 +952,7 @@ function SignYourSelf() {
isInitial={isInitial}
setIsInitial={setIsInitial}
setIsStamp={setIsStamp}
widgetType={widgetType}
/>
{/* render email component to send email after finish signature on document */}
<EmailComponent
@@ -1022,6 +1011,7 @@ function SignYourSelf() {
containerWH={containerWH}
setIsPageCopy={setIsPageCopy}
setIsInitial={setIsInitial}
setWidgetType={setWidgetType}
/>
)}
</div>
@@ -1055,8 +1045,6 @@ function SignYourSelf() {
isSignYourself={true}
addPositionOfSignature={addPositionOfSignature}
isMailSend={false}
setIsDraggingEnable={setIsDraggingEnable}
isdraggingEnable={isdraggingEnable}
/>
</div>
) : (
microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
-8
View File
@@ -78,7 +78,6 @@ const TemplatePlaceholder = () => {
const [isResize, setIsResize] = useState(false);
const [isSigners, setIsSigners] = useState(false);
const [zIndex, setZIndex] = useState(1);
const [isdraggingEnable, setIsDraggingEnable] = useState(false);
const [showDropdown, setShowDropdown] = useState(false);
const [widgetType, setWidgetType] = useState("");
const [isRadio, setIsRadio] = useState(false);
@@ -183,9 +182,6 @@ const TemplatePlaceholder = () => {
useEffect(() => {
fetchTemplate();
if (!isMobile) {
setIsDraggingEnable(true);
}
}, []);
useEffect(() => {
@@ -1451,8 +1447,6 @@ const TemplatePlaceholder = () => {
handleOnBlur={handleOnBlur}
title={"Roles"}
initial={true}
setIsDraggingEnable={setIsDraggingEnable}
isdraggingEnable={isdraggingEnable}
isTemplateFlow={true}
/>
</div>
@@ -1494,8 +1488,6 @@ const TemplatePlaceholder = () => {
addPositionOfSignature={addPositionOfSignature}
title={"Roles"}
initial={true}
setIsDraggingEnable={setIsDraggingEnable}
isdraggingEnable={isdraggingEnable}
isTemplateFlow={true}
/>
</div>
microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js
+74
View File
@@ -0,0 +1,74 @@
import React, { useEffect } from "react";
import ModalUi from "../../premitives/ModalUi";
import { themeColor } from "../../utils/ThemeColor/backColor";
function CheckboxStatus(props) {
const checkboxType = ["Optional", "Required", "Read only"];
useEffect(() => {
if (props.currWidgetsDetails?.widgetStatus) {
props.setSelectRequiredType(props.currWidgetsDetails?.widgetStatus);
}
}, [props.currWidgetsDetails]);
return (
<ModalUi isOpen={props.isCheckboxRequired} title={"Checkbox"}>
<div style={{ height: "100%", padding: 20 }}>
{checkboxType.map((data, ind) => {
return (
<div key={ind} style={{ display: "flex", flexDirection: "column" }}>
<label style={{ fontSize: "16px", fontWeight: "500" }}>
<input
style={{ accentColor: "red", marginRight: "10px" }}
type="radio"
value={data}
onChange={() => props.setSelectRequiredType(data)}
checked={props.selectRequiredType === data}
/>
{data}
</label>
</div>
);
})}
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
onClick={() => {
props.handleApplyWidgetsStatus();
}}
style={{
background: themeColor()
}}
type="button"
className="finishBtn"
>
Apply
</button>
{props.currWidgetsDetails?.widgetStatus && (
<button
type="submit"
className="finishBtn cancelBtn"
onClick={() => {
props.setCurrWidgetsDetails([]);
props.setIsCheckboxRequired(false);
props.setSelectRequiredType("Optional");
}}
>
Cancel
</button>
)}
</div>
</ModalUi>
);
}
export default CheckboxStatus;
microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js
+10 -3
View File
@@ -45,7 +45,8 @@ function DropdownWidgetOption(props) {
props.handleSaveWidgetsOptions(dropdownName, dropdownOptionList);
props.setShowDropdown(false);
setDropdownOptionList(["option-1", "option-2"]);
setDropdownName("Field-1");
setDropdownName(props.type);
props.setCurrWidgetsDetails([]);
};
return (
@@ -90,7 +91,8 @@ function DropdownWidgetOption(props) {
style={{
display: "flex",
flexDirection: "row",
marginBottom: "5px"
marginBottom: "5px",
alignItems: "center"
}}
>
<input
@@ -151,7 +153,12 @@ function DropdownWidgetOption(props) {
<button
type="submit"
className="finishBtn cancelBtn"
onClick={() => props.setShowDropdown(false)}
onClick={() => {
setDropdownOptionList(["option-1", "option-2"]);
setDropdownName(props.type);
props.setCurrWidgetsDetails([]);
props.setShowDropdown(false);
}}
>
Cancel
</button>
microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js
+9 -7
View File
@@ -42,16 +42,18 @@ function InputValidation(props) {
className="regxSelect"
onChange={(e) => props.setTextValidate(e.target.value)}
>
{options.map((data) => {
return <option value={data}>{data}</option>;
<option style={{ fontSize: "13px" }} value="">
Select...
</option>
{options.map((data, ind) => {
return (
<option style={{ fontSize: "13px" }} key={ind} value={data}>
{data}
</option>
);
})}
</select>
</div>
{/* {validateError && (
<p style={{ color: "red", fontSize: "12px" }}>{validateError}</p>
)} */}
{/* <CustomSelect/> */}
</div>
<div
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+5 -10
View File
@@ -133,14 +133,6 @@ function Placeholder(props) {
props.setSignKey(props.pos.key);
props.setIsStamp(props.pos?.isStamp ? props.pos.isStamp : false);
}
} else if (
props.isPlaceholder &&
props.pos.type === "dropdown" &&
!props.isDragging
) {
props?.setShowDropdown(true);
props?.setSignKey(props.pos.key);
props.setUniqueId(props.data.Id);
} else if (!props.pos.type) {
if (
!props.pos.type &&
@@ -405,6 +397,7 @@ function Placeholder(props) {
bottomRight:
props.data && props.isNeedSign
? props.data?.signerObjId === props.signerObjId &&
props.pos.type !== "checkbox" &&
props.pos.type !== "radio"
? true
: false
@@ -479,6 +472,7 @@ function Placeholder(props) {
);
}}
onClick={() => {
!props.isNeedSign && props.setWidgetType(props.pos.type);
props.isNeedSign && props.data?.signerObjId === props.signerObjId
? handlePlaceholderClick()
: props.isPlaceholder
@@ -501,7 +495,7 @@ function Placeholder(props) {
: -11
}
/>
) : props.data && props.isNeedSign ? (
) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
props.data?.signerObjId === props.signerObjId &&
props.pos.type !== "radio" ? (
<BorderResize />
@@ -528,7 +522,8 @@ function Placeholder(props) {
height: props.posHeight(props.pos, props.isSignYourself),
zIndex: "10"
}}
onTouchEnd={(e) => {
onTouchEnd={() => {
!props.isNeedSign && props.setWidgetType(props.pos.type);
props.isNeedSign && props.data?.signerObjId === props.signerObjId
? handlePlaceholderClick()
: props.isPlaceholder
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
+1 -1
View File
@@ -67,7 +67,7 @@ function PlaceholderType(props) {
case "text":
setValidatePlaceholder("enter text");
default:
setValidatePlaceholder(validateType);
setValidatePlaceholder("enter text");
}
}
useEffect(() => {
microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+10 -11
View File
@@ -30,7 +30,7 @@ function FieldsComponent({
handleRoleChange,
handleOnBlur,
title,
isdraggingEnable,
isTemplateFlow
}) {
const [isSignersModal, setIsSignersModal] = useState(false);
@@ -42,7 +42,7 @@ function FieldsComponent({
id: 5,
text: "dropdown"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragDropdown: !!monitor.isDragging()
})
@@ -54,7 +54,7 @@ function FieldsComponent({
id: 6,
text: "checkbox"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragCheck: !!monitor.isDragging()
})
@@ -66,7 +66,7 @@ function FieldsComponent({
id: 7,
text: "text"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragText: !!monitor.isDragging()
})
@@ -78,7 +78,7 @@ function FieldsComponent({
id: 8,
text: "initials"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragInitial: !!monitor.isDragging()
})
@@ -90,7 +90,7 @@ function FieldsComponent({
id: 9,
text: "name"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragName: !!monitor.isDragging()
})
@@ -102,7 +102,7 @@ function FieldsComponent({
id: 10,
text: "company"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragCompany: !!monitor.isDragging()
})
@@ -114,7 +114,7 @@ function FieldsComponent({
id: 11,
text: "job title"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragJobtitle: !!monitor.isDragging()
})
@@ -126,7 +126,7 @@ function FieldsComponent({
id: 12,
text: "date"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragDate: !!monitor.isDragging()
})
@@ -138,7 +138,7 @@ function FieldsComponent({
id: 13,
text: "image"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragImage: !!monitor.isDragging()
})
@@ -150,7 +150,6 @@ function FieldsComponent({
id: 14,
text: "email"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragEmail: !!monitor.isDragging()
})
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+2
View File
@@ -412,6 +412,7 @@ function RenderPdf({
pdfDetails={pdfDetails[0]}
isDragging={isDragging}
setIsInitial={setIsInitial}
setWidgetType={setWidgetType}
/>
)
);
@@ -584,6 +585,7 @@ function RenderPdf({
pdfDetails={pdfDetails[0]}
isDragging={isDragging}
setIsInitial={setIsInitial}
setWidgetType={setWidgetType}
/>
</React.Fragment>
)
microfrontends/SignDocuments/src/Component/component/signPad.js
+5 -8
View File
@@ -24,7 +24,8 @@ function SignPad({
myInitial,
isInitial,
setIsInitial,
setIsStamp
setIsStamp,
widgetType
}) {
const [penColor, setPenColor] = useState("blue");
const allColor = [bluePen, redPen, blackPen];
@@ -236,12 +237,6 @@ function SignPad({
setSignature(dataUrl);
};
const getFirstChar = () => {
const trimmedString = currentUserName.trim();
const firstCharacter = trimmedString.charAt(0);
const userName = isInitial ? firstCharacter : signValue;
setSignValue(userName);
};
return (
<div>
{isSignPad && (
@@ -272,7 +267,9 @@ function SignPad({
>
{isStamp ? (
<span style={{ color: themeColor() }} className="signTab">
Upload stamp image
{widgetType === "image"
? "Upload image"
: "Upload stamp image"}
</span>
) : (
<>
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+21 -71
View File
@@ -37,6 +37,7 @@ import TourContentWithBtn from "../premitives/TourContentWithBtn";
import ModalUi from "../premitives/ModalUi";
import DropdownWidgetOption from "../Component/WidgetComponent/dropdownWidgetOption";
import InputValidation from "./WidgetComponent/inputValidation";
import CheckboxStatus from "./WidgetComponent/checkboxStatus";
function PlaceHolderSign() {
const navigate = useNavigate();
@@ -93,10 +94,9 @@ function PlaceHolderSign() {
const [showDropdown, setShowDropdown] = useState(false);
const [isCheckboxRequired, setIsCheckboxRequired] = useState(false);
const [selectRequiredType, setSelectRequiredType] = useState("Optional");
const [isdraggingEnable, setIsDraggingEnable] = useState(false);
const [isValidate, setIsValidate] = useState(false);
const [textValidate, setTextValidate] = useState("");
const [validateError, setValidateError] = useState("");
const [widgetType, setWidgetType] = useState("");
const [isUiLoading, setIsUiLoading] = useState(false);
const [isRadio, setIsRadio] = useState(false);
@@ -116,7 +116,7 @@ function PlaceHolderSign() {
"#66ccff",
"#ffffcc"
];
const checkboxType = ["Optional", "Required", "Read only"];
const isMobile = window.innerWidth < 767;
const [{ isOver }, drop] = useDrop({
accept: "BOX",
@@ -132,7 +132,7 @@ function PlaceHolderSign() {
id: 1,
text: "signature"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragSign: !!monitor.isDragging()
})
@@ -144,7 +144,7 @@ function PlaceHolderSign() {
id: 2,
text: "stamp"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragStamp: !!monitor.isDragging()
})
@@ -156,7 +156,7 @@ function PlaceHolderSign() {
id: 3,
text: "signature"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragSignatureSS: !!monitor.isDragging()
})
@@ -168,7 +168,7 @@ function PlaceHolderSign() {
id: 4,
text: "stamp"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragStampSS: !!monitor.isDragging()
})
@@ -196,9 +196,6 @@ function PlaceHolderSign() {
if (documentId) {
getDocumentDetails();
}
if (!isMobile) {
setIsDraggingEnable(true);
}
}, []);
useEffect(() => {
@@ -501,9 +498,6 @@ function PlaceHolderSign() {
}
setWidgetType(dragTypeValue);
setSignKey(key);
if (isMobile) {
setIsDraggingEnable(false);
}
} else {
let filterSignerPos = signerPos.filter(
(data) => data.Role === "prefill"
@@ -808,12 +802,10 @@ function PlaceHolderSign() {
};
const sendEmailToSigners = async () => {
const pdfUrl = await embedPrefilllData();
setIsUiLoading(true);
const pdfUrl = await embedPrefilllData();
setIsSendAlert({});
let sendMail;
const expireDate = pdfDetails?.[0].ExpiryDate.iso;
const newDate = new Date(expireDate);
const localExpireDate = newDate.toLocaleDateString("en-US", {
@@ -1240,6 +1232,7 @@ function PlaceHolderSign() {
setIsValidate(false);
};
console.log("currentdetails", currWidgetsDetails);
return (
<>
<Title title={state?.title ? state.title : "New Document"} />
@@ -1262,7 +1255,7 @@ function PlaceHolderSign() {
justifyContent: "center",
flexDirection: "column",
alignItems: "center",
zIndex: "20",
zIndex: "999",
backgroundColor: "#e6f2f2",
opacity: 0.8
}}
@@ -1464,56 +1457,15 @@ function PlaceHolderSign() {
</div>
</ModalUi>
{/* checkbox widget status component */}
<ModalUi isOpen={isCheckboxRequired} title={"Checkbox"}>
<div style={{ height: "100%", padding: 20 }}>
{checkboxType.map((data, key) => {
return (
<div
key={key}
style={{ display: "flex", flexDirection: "column" }}
>
<label
key={key}
style={{ fontSize: "16px", fontWeight: "500" }}
>
<input
style={{ accentColor: "red", marginRight: "10px" }}
type="radio"
value={data}
onChange={() => setSelectRequiredType(data)}
checked={selectRequiredType === data}
/>
{data}
</label>
</div>
);
})}
<div
style={{
height: "1px",
backgroundColor: "#9f9f9f",
width: "100%",
marginTop: "15px",
marginBottom: "15px"
}}
></div>
<button
onClick={() => {
handleApplyWidgetsStatus();
}}
style={{
background: themeColor()
}}
type="button"
// disabled={!selectCopyType}
className="finishBtn"
>
Apply
</button>
</div>
</ModalUi>
<CheckboxStatus
setSelectRequiredType={setSelectRequiredType}
selectRequiredType={selectRequiredType}
isCheckboxRequired={isCheckboxRequired}
setIsCheckboxRequired={setIsCheckboxRequired}
handleApplyWidgetsStatus={handleApplyWidgetsStatus}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
/>
<InputValidation
setIsValidate={setIsValidate}
handleValidateInput={handleValidateInput}
@@ -1539,6 +1491,7 @@ function PlaceHolderSign() {
setShowDropdown={setIsRadio}
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
/>
<DropdownWidgetOption
type="dropdown"
@@ -1547,6 +1500,7 @@ function PlaceHolderSign() {
setShowDropdown={setShowDropdown}
handleSaveWidgetsOptions={handleSaveWidgetsOptions}
currWidgetsDetails={currWidgetsDetails}
setCurrWidgetsDetails={setCurrWidgetsDetails}
/>
{/* pdf header which contain funish back button */}
<Header
@@ -1638,8 +1592,6 @@ function PlaceHolderSign() {
setUniqueId={setUniqueId}
setRoleName={setRoleName}
initial={true}
setIsDraggingEnable={setIsDraggingEnable}
isdraggingEnable={isdraggingEnable}
/>
</div>
) : (
@@ -1675,8 +1627,6 @@ function PlaceHolderSign() {
isSignYourself={false}
addPositionOfSignature={addPositionOfSignature}
initial={true}
setIsDraggingEnable={setIsDraggingEnable}
isdraggingEnable={isdraggingEnable}
/>
</div>
</div>