From 156a05f6edee36e6837590f797511729a8b6dc6e Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 14 Feb 2024 20:33:24 +0530 Subject: [PATCH] fix: placeholder flow widget's issue --- .../src/Component/SignYourselfPdf.js | 26 ++---- .../src/Component/TemplatePlaceholder.js | 8 -- .../WidgetComponent/checkboxStatus.js | 74 +++++++++++++++ .../WidgetComponent/dropdownWidgetOption.js | 13 ++- .../WidgetComponent/inputValidation.js | 16 ++-- .../Component/WidgetComponent/placeholder.js | 15 +-- .../WidgetComponent/placeholderType.js | 2 +- .../Component/component/fieldsComponent.js | 21 ++--- .../src/Component/component/renderPdf.js | 2 + .../src/Component/component/signPad.js | 13 +-- .../src/Component/placeHolderSign.js | 92 +++++-------------- 11 files changed, 144 insertions(+), 138 deletions(-) create mode 100644 microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 114ba6759..6a9cc86dc 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -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 */} )} @@ -1055,8 +1045,6 @@ function SignYourSelf() { isSignYourself={true} addPositionOfSignature={addPositionOfSignature} isMailSend={false} - setIsDraggingEnable={setIsDraggingEnable} - isdraggingEnable={isdraggingEnable} /> ) : ( diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 891ad4938..bb39ba73c 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -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} /> @@ -1494,8 +1488,6 @@ const TemplatePlaceholder = () => { addPositionOfSignature={addPositionOfSignature} title={"Roles"} initial={true} - setIsDraggingEnable={setIsDraggingEnable} - isdraggingEnable={isdraggingEnable} isTemplateFlow={true} /> diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js new file mode 100644 index 000000000..d2946dbc8 --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/checkboxStatus.js @@ -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 ( + +
+ {checkboxType.map((data, ind) => { + return ( +
+ +
+ ); + })} + +
+ + {props.currWidgetsDetails?.widgetStatus && ( + + )} +
+ + ); +} + +export default CheckboxStatus; diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js index 2ee4609b6..175d3e35e 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js @@ -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" }} > props.setShowDropdown(false)} + onClick={() => { + setDropdownOptionList(["option-1", "option-2"]); + setDropdownName(props.type); + props.setCurrWidgetsDetails([]); + props.setShowDropdown(false); + }} > Cancel diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js index 4ab12db1a..d3580315b 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js @@ -42,16 +42,18 @@ function InputValidation(props) { className="regxSelect" onChange={(e) => props.setTextValidate(e.target.value)} > - {options.map((data) => { - return ; + + {options.map((data, ind) => { + return ( + + ); })} - {/* {validateError && ( -

{validateError}

- )} */} - - {/* */}
{ + !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" ? ( @@ -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 diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index c579bbd60..1543ed554 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -67,7 +67,7 @@ function PlaceholderType(props) { case "text": setValidatePlaceholder("enter text"); default: - setValidatePlaceholder(validateType); + setValidatePlaceholder("enter text"); } } useEffect(() => { diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index da91713b2..f726b0e34 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -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() }) diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 612549cc8..18a40bbf1 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -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} /> ) diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index 3a3b5a242..6374ef7d3 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -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 (
{isSignPad && ( @@ -272,7 +267,9 @@ function SignPad({ > {isStamp ? ( - Upload stamp image + {widgetType === "image" + ? "Upload image" + : "Upload stamp image"} ) : ( <> diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index b7c83aa10..bbe120acc 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -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 ( <> @@ -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>