From 83fa9c9ebd5c5e0db4d75d44050d2807351ea262 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 7 Feb 2024 15:28:18 +0530 Subject: [PATCH] fix: radio widget embeding issue in pdf --- .../WidgetComponent/dropdownWidgetOption.js | 202 +++--- .../Component/WidgetComponent/placeholder.js | 24 +- .../WidgetComponent/placeholderBorder.js | 14 +- .../WidgetComponent/placeholderType.js | 44 +- .../src/Component/component/renderPdf.js | 650 +----------------- .../src/Component/placeHolderSign.js | 140 +--- .../SignDocuments/src/utils/Utils.js | 17 +- 7 files changed, 203 insertions(+), 888 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js index 2ed82f9b8..03bd1e93c 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { themeColor } from "../../utils/ThemeColor/backColor"; import ModalUi from "../../premitives/ModalUi"; function DropdownWidgetOption(props) { @@ -8,7 +8,17 @@ function DropdownWidgetOption(props) { ]); const [dropdownName, setDropdownName] = useState("Field-1"); - const [error, setError] = useState(""); + + useEffect(() => { + if ( + props.currWidgetsDetails?.widgetName && + props.currWidgetsDetails?.widgetOption + ) { + setDropdownName(props.currWidgetsDetails?.widgetName); + setDropdownOptionList(props.currWidgetsDetails?.widgetOption); + } + }, [props.currWidgetsDetails]); + const handleInputChange = (index, value) => { setDropdownOptionList((prevInputs) => { const newInputs = [...prevInputs]; @@ -28,19 +38,10 @@ function DropdownWidgetOption(props) { setDropdownOptionList(getUpdatedOptions); }; const handleSaveOption = () => { - const existEmptyOption = dropdownOptionList.some((data) => data === ""); - - if (existEmptyOption) { - setError("Enter all option"); - setTimeout(() => { - setError(""); - }, 1000); - } else { - props.handleSaveDropdownOptions(dropdownName, dropdownOptionList); - props.setShowDropdown(false); - setDropdownOptionList(["option-1", "option-2"]); - setDropdownName("Field-1"); - } + props.handleSaveWidgetsOptions(dropdownName, dropdownOptionList); + props.setShowDropdown(false); + setDropdownOptionList(["option-1", "option-2"]); + setDropdownName("Field-1"); }; return ( @@ -48,99 +49,102 @@ function DropdownWidgetOption(props) { props.setShowDropdown(false)} >
-
- - setDropdownName(e.target.value)} - className="drodown-input" - /> - +
{ + e.preventDefault(); + handleSaveOption(); + }} + > +
+ + setDropdownName(e.target.value)} + className="drodown-input" + /> + + +
+ {dropdownOptionList.map((option, index) => ( +
+ handleInputChange(index, e.target.value)} + /> + + handleDeleteInput(index)} + style={{ + color: "red", + fontSize: "25px", + marginLeft: "10px" + }} + > +
+ ))} + + +
+
+
-
- {error} -
- - {/* */} + Save + + ); diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index 044964f39..715bfc9ee 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -188,6 +188,7 @@ function Placeholder(props) { props.setSignKey(props.pos.key); props.setUniqueId(props.data.Id); props.setWidgetType(props.pos.type); + props.setCurrWidgetsDetails(props.pos); }} onTouchEnd={(e) => { e.stopPropagation(); @@ -203,6 +204,7 @@ function Placeholder(props) { props.setSignKey(props.pos.key); props.setUniqueId(props.data.Id); props.setWidgetType(props.pos.type); + props.setCurrWidgetsDetails(props.pos); }} class="fa-solid fa-gear settingIcon" style={{ @@ -214,7 +216,7 @@ function Placeholder(props) { props.pos.type === "company" || props.pos.type === "job title" ? "49px" - : "17px", + : "23px", top: props.pos.type === "text" || props.pos.type === "email" || @@ -222,7 +224,7 @@ function Placeholder(props) { props.pos.type === "company" || props.pos.type === "job title" ? "-17px" - : "-35px" + : "-28px" }} > )} @@ -244,11 +246,11 @@ function Placeholder(props) { color: "#188ae2", right: props.pos.type === "checkbox" || props.pos.type === "radio" - ? "6px" + ? "8px" : "32px", top: props.pos.type === "checkbox" || props.pos.type === "radio" - ? "-35px" + ? "-28px" : "-18px" }} > @@ -259,7 +261,7 @@ function Placeholder(props) { id="menu-container" style={{ zIndex: "99", - top: "-27px", + top: isMobile ? "-17px" : "-27px", left: props.isPlaceholder ? "-12px" : "5px" }} className={isShowDateFormat ? "dropdown show" : "dropdown"} @@ -350,12 +352,12 @@ function Placeholder(props) { right: (props.pos.type === "checkbox" || props.pos.type === "radio") && props.isPlaceholder - ? "-11px" + ? "-9px" : "12px", top: (props.pos.type === "checkbox" || props.pos.type === "radio") && props.isPlaceholder - ? "-35px" + ? "-28px" : "-18px" }} > @@ -385,12 +387,12 @@ function Placeholder(props) { right: (props.pos.type === "checkbox" || props.pos.type === "radio") && props.isPlaceholder - ? "-30px" + ? "-27px" : "-8px", top: (props.pos.type === "checkbox" || props.pos.type === "radio") && props.isPlaceholder - ? "-35px" + ? "-28px" : "-18px" }} > @@ -502,13 +504,13 @@ function Placeholder(props) { right={ (props.pos.type === "checkbox" || props.pos.type === "radio") && props.isPlaceholder - ? -28 + ? -21 : -12 } top={ (props.pos.type === "checkbox" || props.pos.type === "radio") && props.isPlaceholder - ? -28 + ? -21 : -11 } /> diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js index 135f9572f..ca45b22ba 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderBorder.js @@ -2,17 +2,13 @@ import React from "react"; import { themeColor } from "../../utils/ThemeColor/backColor"; import { defaultWidthHeight, resizeBorderExtraWidth } from "../../utils/Utils"; function PlaceholderBorder(props) { - const getResizeBorderExtraWidth = resizeBorderExtraWidth(); - const defaultWidth = + const getResizeBorderExtraWidth = (props.pos.type === "checkbox" || props.pos.type === "radio") && props.isPlaceholder - ? 50 - : defaultWidthHeight(props.pos.type).width; - const defaultHeight = - (props.pos.type === "checkbox" || props.pos.type === "radio") && - props.isPlaceholder - ? 50 - : defaultWidthHeight(props.pos.type).height; + ? 38 + : resizeBorderExtraWidth(); + const defaultWidth = defaultWidthHeight(props.pos.type).width; + const defaultHeight = defaultWidthHeight(props.pos.type).height; return (
{ let isValidate = regexValidation.test(inputValue); @@ -70,7 +73,7 @@ function PlaceholderType(props) { useEffect(() => { onChangeInput( - isCheckedRadio, + isCheckedRadio.selectValue, props.pos.key, props.xyPostion, props.index, @@ -540,18 +543,31 @@ function PlaceholderType(props) { ); case "radio": return ( - +
+ {props.pos?.widgetOption?.map((data, ind) => { + return ( + { + setIsCheckedRadio({ + isChecked: !isCheckedRadio, + selectValue: data + }); + }} + /> + ); + })} +
); default: diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 5a7f55012..612549cc8 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -59,7 +59,8 @@ function RenderPdf({ setIsValidate, setWidgetType, setValidateAlert, - setIsRadio + setIsRadio, + setCurrWidgetsDetails }) { const isMobile = window.innerWidth < 767; const newWidth = containerWH.width; @@ -242,106 +243,6 @@ function RenderPdf({ return ( pos && ( - {/* { - if (data.signerObjId === signerObjectId) { - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - } - }} - onResize={(e, direction, ref, delta, position) => { - e.stopPropagation(); - handleImageResize( - ref, - pos.key, - data.Id, - position, - signerPos, - pageNumber, - setSignerPos, - pdfOriginalWidth, - containerWH, - true - ); - }} - lockAspectRatio={ - pos.Width ? pos.Width / pos.Height : 2.5 - } - default={{ - x: xPos(pos), - y: yPos(pos) - }} - > -
- {data.signerObjId === signerObjectId && ( - - )} - {pos.SignUrl ? ( - no img { - setIsSignPad(true); - setSignKey(pos.key); - }} - src={pos.SignUrl} - style={{ - width: "100%", - height: "100%", - objectFit: "contain" - }} - /> - ) : ( - pdfDetails[0].Signers.map((signerData, key) => { - return ( - signerData.objectId === data.signerObjId && ( -
- {signerData.Name} -
- ) - ); - }) - )} -
- */} { return ( - // handleTabDrag(pos.key)} - // size={{ - // width: posWidth(pos), - // height: posHeight(pos) - // }} - // // size={{ - // // width: pos.Width ? pos.Width : 150, - // // height: pos.Height ? pos.Height : 60 - // // }} - // lockAspectRatio={ - // pos.Width ? pos.Width / pos.Height : 2.5 - // } - // onDragStop={ - // (event, dragElement) => - // handleStop( - // event, - // dragElement, - // data.Id, - // pos.key - // ) - // // data.signerObjId, - // } - // // default={{ - // // x: pos.xPosition, - // // y: pos.yPosition - // // }} - // default={{ - // x: xPos(pos), - // y: yPos(pos) - // }} - // onResizeStart={() => { - // setIsResize(true); - // }} - // onResizeStop={() => { - // setIsResize && setIsResize(false); - // }} - // onResize={( - // e, - // direction, - // ref, - // delta, - // position - // ) => { - // handleImageResize( - // ref, - // pos.key, - // data.Id, - // position, - // signerPos, - // pageNumber, - // setSignerPos, - // pdfOriginalWidth, - // containerWH, - // true - // ); - // }} - // > - // - // - //
{ - // if (!isDragging) { - // handleLinkUser(data.Id); - // setUniqueId(data.Id); - // } - // }} - // onTouchEnd={() => { - // if (!isDragging) { - // handleLinkUser(data.Id); - // setUniqueId(data.Id); - // } - // const dataNewPlace = addZIndex( - // signerPos, - // pos.key, - // setZIndex - // ); - // setSignerPos((prevState) => { - // const newState = [...prevState]; - // newState.splice( - // 0, - // signerPos.length, - // ...dataNewPlace - // ); - // return newState; - // }); - // }} - // > - // { - // e.stopPropagation(); - // handleLinkUser(data.Id); - // setUniqueId(data.Id); - // }} - // onClick={(e) => { - // e.stopPropagation(); - // handleLinkUser(data.Id); - // setUniqueId(data.Id); - // }} - // style={{ - // color: "#188ae2" - // }} - // > - // { - // e.stopPropagation(); - // setIsPageCopy(true); - // setSignKey(pos.key); - // setSignerObjId(data.signerObjId); - // setUniqueId(data.Id); - // }} - // onClick={(e) => { - // e.stopPropagation(); - // setIsPageCopy(true); - // setSignKey(pos.key); - // setSignerObjId(data.signerObjId); - // setUniqueId(data.Id); - // }} - // style={{ - // color: "#188ae2" - // }} - // > - // { - // e.stopPropagation(); - // handleDeleteSign(pos.key, data.Id); - // }} - // onClick={(e) => { - // e.stopPropagation(); - // handleDeleteSign(pos.key, data.Id); - // // data.signerObjId - // }} - // style={{ - // color: "#188ae2" - // }} - // > - - //
- //
{pos.type}
- // {handleUserName( - // data.signerObjId, - // data.Role - // )}{" "} - //
- //
- // ); @@ -662,138 +386,6 @@ function RenderPdf({ data.pos.map((pos) => { return ( pos && ( - // handleTabDrag(pos.key)} - // onDragStop={handleStop} - // onResize={( - // e, - // direction, - // ref, - // delta, - // position - // ) => { - // handleSignYourselfImageResize( - // ref, - // pos.key, - // xyPostion, - // index, - // setXyPostion - // ); - // }} - // > - // - // - //
{ - // if (!isDragging && isMobile) { - // setTimeout(() => { - // e.stopPropagation(); - // setIsSignPad(true); - // setSignKey(pos.key); - // setIsStamp(pos.isStamp); - // }, 500); - // } - // }} - // > - // { - // e.stopPropagation(); - // setIsPageCopy(true); - // setSignKey(pos.key); - // }} - // style={{ - // color: "#188ae2" - // }} - // > - // { - // e.stopPropagation(); - // if (data) { - // handleDeleteSign( - // pos.key, - // data.signerObjId - // ); - // } else { - // handleDeleteSign(pos.key); - // setIsStamp(false); - // } - // }} - // style={{ - // color: "#188ae2" - // }} - // > - - // {pos.SignUrl ? ( - //
- // signimg - //
- // ) : ( - //
- // {pos.isStamp ? "stamp" : "signature"} - //
- // )} - //
- // { return ( - // { - // if (!isDragging) { - // handleLinkUser(data.Id); - // setUniqueId(data.Id); - // } - // const dataNewPlace = addZIndex( - // signerPos, - // pos.key, - // setZIndex - // ); - // setSignerPos((prevState) => { - // const newState = [...prevState]; - // newState.splice( - // 0, - // signerPos.length, - // ...dataNewPlace - // ); - // return newState; - // }); - // }} - // key={pos.key} - // enableResizing={{ - // top: false, - // right: false, - // bottom: false, - // left: false, - // topRight: false, - // bottomRight: true, - // bottomLeft: false, - // topLeft: false - // }} - // bounds="parent" - // style={{ - // cursor: "all-scroll", - // background: data.blockColor, - // zIndex: pos.zIndex - // }} - // className="signYourselfBlock" - // onDrag={() => handleTabDrag(pos.key)} - // size={{ - // width: posWidth(pos), - // height: posHeight(pos) - // }} - // lockAspectRatio={ - // pos.Width - // ? pos.Width / pos.Height - // : 2.5 - // } - // onDragStop={ - // (event, dragElement) => - // handleStop( - // event, - // dragElement, - // data.Id, - // pos.key - // ) - // // data.signerObjId, - // } - // // default={{ - // // x: pos.xPosition, - // // y: pos.yPosition - // // }} - // default={{ - // x: xPos(pos), - // y: yPos(pos) - // }} - // onResizeStart={() => { - // setIsResize(true); - // }} - // onResizeStop={() => { - // setIsResize && setIsResize(false); - // }} - // onResize={( - // e, - // direction, - // ref, - // delta, - // position - // ) => { - // e.stopPropagation(); - // handleImageResize( - // ref, - // pos.key, - // data.Id, //data.signerObjId, - // position, - // signerPos, - // pageNumber, - // setSignerPos, - // pdfOriginalWidth, - // containerWH, - // false - // ); - // }} - // > - // - // - //
- // { - // e.stopPropagation(); - // handleLinkUser(data.Id); - // setUniqueId(data.Id); - // }} - // style={{ - // color: "#188ae2" - // }} - // > - // { - // e.stopPropagation(); - // setIsPageCopy(true); - // setSignKey(pos.key); - // setUniqueId(data.Id); - // setSignerObjId( - // data.signerObjId - // ); - // }} - // style={{ - // color: "#188ae2" - // }} - // > - // { - // e.stopPropagation(); - // handleDeleteSign( - // pos.key, - // data.Id - // ); - // // data.signerObjId - // }} - // style={{ - // color: "#188ae2" - // }} - // > - - //
- // {pos.isStamp ? ( - //
stamp
- // ) : ( - //
signature
- // )} - // {handleUserName( - // data.signerObjId, - // data.Role - // )} - //
- //
- // ); @@ -1123,72 +555,6 @@ function RenderPdf({ data.pos.map((pos) => { return ( pos && ( - // handleTabDrag(pos.key)} - // size={{ - // width: pos.Width ? pos.Width : 150, - // height: pos.Height ? pos.Height : 60 - // }} - // onDragStop={handleStop} - // default={{ - // x: pos.xPosition, - // y: pos.yPosition - // }} - // onClick={() => { - // if (!isDragging) { - // setIsSignPad(true); - // setSignKey(pos.key); - // setIsStamp(pos.isStamp); - // } - // }} - // onResize={( - // e, - // direction, - // ref, - // delta, - // position - // ) => { - // e.stopPropagation(); - // handleSignYourselfImageResize( - // ref, - // pos.key, - // xyPostion, - // index, - // setXyPostion - // ); - // }} - // > - // - // - // - // { + const handleSaveWidgetsOptions = (dropdownName, dropdownOptions) => { const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; @@ -918,11 +917,22 @@ function PlaceHolderSign() { const getPosData = getXYdata; const addSignPos = getPosData.map((position, ind) => { if (position.key === signKey) { - return { - ...position, - widgetName: dropdownName, - widgetOption: dropdownOptions - }; + if (widgetType === "radio") { + return { + ...position, + widgetName: dropdownName, + widgetOption: dropdownOptions, + Height: position.Height + ? position.Height + 15 + : defaultWidthHeight(widgetType).width + 15 + }; + } else { + return { + ...position, + widgetName: dropdownName, + widgetOption: dropdownOptions + }; + } } return position; }); @@ -1068,12 +1078,6 @@ function PlaceHolderSign() { widgetStatus: selectRequiredType }; } - } else if (widgetType === "radio") { - return { - ...position, - widgetName: radioData.label, - widgetOption: [radioData.data] - }; } else { return { ...position, @@ -1099,13 +1103,11 @@ function PlaceHolderSign() { setSignerPos(newUpdateSigner); setIsCheckboxRequired(false); - setIsRadio(false); - setRadioData({}); + setSelectRequiredType("Optional"); } } }; - const handleValidateInput = (e) => { if ( textValidate === "email" || @@ -1121,16 +1123,6 @@ function PlaceHolderSign() { }, 1500); } }; - const handleInputChange = (e) => { - const { name, value } = e.target; - - // Update the state with the new value for the corresponding input - setRadioData((prevValues) => ({ - ...prevValues, - [name]: value - })); - }; - return ( <> @@ -1461,83 +1453,7 @@ function PlaceHolderSign() { </button> </div> </ModalUi> - <ModalUi - //isValidate - isOpen={isRadio} - title={"Radio group"} - > - <div style={{ height: "100%", padding: 20 }}> - <form - onSubmit={(e) => { - e.preventDefault(); - handleApplyWidgetsStatus(); - }} - > - <div className="radioGroup"> - <label - style={{ - marginRight: "5px", - fontSize: "14px", - fontWeight: "500" - }} - > - Field name: - </label> - <input - required - placeholder="Enter field name" - className="drodown-input radioGroupInput" - // onChange={(e) => setTextValidate(e.target.value)} - id="label" - name="label" - value={radioData.label} - onChange={handleInputChange} - /> - - <label - style={{ - marginRight: "5px", - fontSize: "14px", - fontWeight: "500" - }} - > - Data label: - </label> - - <input - required - placeholder="Enter data" - className="drodown-input radioGroupInput" - id="data" - name="data" - value={radioData.data} - onChange={handleInputChange} - /> - </div> - - <div - style={{ - height: "1px", - backgroundColor: "#9f9f9f", - width: "100%", - marginTop: "15px", - marginBottom: "15px" - }} - ></div> - <button - style={{ - background: themeColor() - }} - type="submit" - // disabled={!selectCopyType} - className="finishBtn" - > - Apply - </button> - </form> - </div> - </ModalUi> <PlaceholderCopy isPageCopy={isPageCopy} setIsPageCopy={setIsPageCopy} @@ -1550,9 +1466,18 @@ function PlaceHolderSign() { Id={uniqueId} /> <DropdownWidgetOption + title="RadioGroup" + showDropdown={isRadio} + setShowDropdown={setIsRadio} + handleSaveWidgetsOptions={handleSaveWidgetsOptions} + currWidgetsDetails={currWidgetsDetails} + /> + <DropdownWidgetOption + title="Dropdown options" showDropdown={showDropdown} setShowDropdown={setShowDropdown} - handleSaveDropdownOptions={handleSaveDropdownOptions} + handleSaveWidgetsOptions={handleSaveWidgetsOptions} + currWidgetsDetails={currWidgetsDetails} /> {/* pdf header which contain funish back button */} <Header @@ -1603,6 +1528,7 @@ function PlaceHolderSign() { setIsValidate={setIsValidate} setWidgetType={setWidgetType} setIsRadio={setIsRadio} + setCurrWidgetsDetails={setCurrWidgetsDetails} /> )} </div> diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index ab8692e21..91e3bc440 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -1058,13 +1058,18 @@ export const multiSignEmbed = async ( dropdown.enableReadOnly(); } else if (imgData.type === "radio") { const rocketField = form.createRadioGroup(randomboxId); - rocketField.addOptionToPage(imgData.widgetOption[0], page, { - x: xPos(imgData), - y: yPos(imgData), - width: scaleWidth, - height: scaleHeight + let addYPosition = 20; + imgData.widgetOption.map((data, ind) => { + rocketField.addOptionToPage(data, page, { + x: xPos(imgData), + y: ind === 0 ? yPos(imgData) : yPos(imgData) - addYPosition, + width: 11, + height: 11 + }); + addYPosition = ind !== 0 && addYPosition + 20; }); - rocketField.select(imgData.widgetOption[0]); + + rocketField.select(imgData.widgetValue); rocketField.enableReadOnly(); } else { page.drawImage(img, {