diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index fb6cc4f3d..366b058da 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -334,6 +334,25 @@ function SignYourSelf() { const newDate = moment(milliseconds).format("MM/DD/YYYY"); return newDate; }; + const getWidgetValue = (type) => { + switch (type) { + case "name": + return pdfDetails[0].ExtUserPtr.Name; + case "company": + return pdfDetails[0].ExtUserPtr.Company; + case "job title": + return pdfDetails[0].ExtUserPtr.JobTitle; + case "email": + return pdfDetails[0].ExtUserPtr.Email; + case "checkbox": + const flag = true; + return flag; + case "date": + return getDate(); + default: + return ""; + } + }; //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { const key = Math.floor(1000 + Math.random() * 9000); @@ -345,20 +364,7 @@ function SignYourSelf() { const dragTypeValue = item?.text ? item.text : monitor.type; - const widgetValue = - dragTypeValue === "name" - ? pdfDetails[0].ExtUserPtr.Name - : dragTypeValue === "company" - ? pdfDetails[0].ExtUserPtr.Company - : dragTypeValue === "job title" - ? pdfDetails[0].ExtUserPtr.JobTitle - : dragTypeValue === "email" - ? pdfDetails[0].ExtUserPtr.Email - : dragTypeValue === "checkbox" - ? true - : dragTypeValue === "date" - ? getDate() - : ""; + const widgetValue = getWidgetValue(dragTypeValue); const widgetWidth = defaultWidthHeight(dragTypeValue).width; const widgetHeight = defaultWidthHeight(dragTypeValue).height; diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 5ddbb1eed..0d9651ee9 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from "react"; import RenderAllPdfPage from "./component/renderAllPdfPage"; import { useParams, useNavigate } from "react-router-dom"; import axios from "axios"; +import moment from "moment"; import "../css/./signature.css"; import { themeColor } from "../utils/ThemeColor/backColor"; import { DndProvider } from "react-dnd"; @@ -20,7 +21,8 @@ import { getHostUrl, randomId, addZIndex, - createDocument + createDocument, + defaultWidthHeight } from "../utils/Utils"; import RenderPdf from "./component/renderPdf"; import "../css/AddUser.css"; @@ -32,6 +34,7 @@ import AddRoleModal from "./component/AddRoleModal"; import PlaceholderCopy from "./component/PlaceholderCopy"; import ModalComponent from "./component/modalComponent"; import TourContentWithBtn from "../premitives/TourContentWithBtn"; +import DropdownWidgetOption from "./WidgetComponent/dropdownWidgetOption"; const TemplatePlaceholder = () => { const navigate = useNavigate(); const { templateId } = useParams(); @@ -49,6 +52,8 @@ const TemplatePlaceholder = () => { const [isSelectListId, setIsSelectId] = useState(); const [isSendAlert, setIsSendAlert] = useState(false); const [isCreateDocModal, setIsCreateDocModal] = useState(false); + const [isCheckboxRequired, setIsCheckboxRequired] = useState(false); + const [selectRequiredType, setSelectRequiredType] = useState("Optional"); const [isLoading, setIsLoading] = useState({ isLoad: true, message: "This might take some time" @@ -73,6 +78,12 @@ const TemplatePlaceholder = () => { 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); + const [validateError, setValidateError] = useState(""); + const [isValidate, setIsValidate] = useState(false); + const [textValidate, setTextValidate] = useState(""); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -158,6 +169,8 @@ const TemplatePlaceholder = () => { const [IsReceipent, setIsReceipent] = useState(true); const [isDontShow, setIsDontShow] = useState(false); const [isDragging, setIsDragging] = useState(false); + const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]); + const checkboxType = ["Optional", "Required", "Read only"]; const senderUser = localStorage.getItem( `Parse/${localStorage.getItem("parseAppId")}/currentUser` @@ -327,6 +340,12 @@ const TemplatePlaceholder = () => { } }; + const getDate = () => { + const date = new Date(); + const milliseconds = date.getTime(); + const newDate = moment(milliseconds).format("MM/DD/YYYY"); + return newDate; + }; //function for setting position after drop signature button over pdf const addPositionOfSignature = (item, monitor) => { getSignerPos(item, monitor); @@ -346,27 +365,36 @@ const TemplatePlaceholder = () => { // (data) => data.signerObjId === signerObjId // ); let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); + const dragTypeValue = item?.text ? item.text : monitor.type; let dropData = []; let placeHolder; if (item === "onclick") { const dropObj = { - xPosition: window.innerWidth / 2 - 100, + //onclick put placeholder center on pdf + xPosition: window.innerWidth / 2 - 150, yPosition: window.innerHeight / 2 - 60, - isStamp: monitor.type === "stamp" && true, + isStamp: + (dragTypeValue === "stamp" || dragTypeValue === "image") && true, key: key, isDrag: false, scale: scale, isMobile: isMobile, yBottom: window.innerHeight / 2 - 60, zIndex: posZIndex, - type: monitor.type + type: dragTypeValue, + widgetValue: + dragTypeValue === "checkbox" + ? false + : dragTypeValue === "date" + ? getDate() + : "" }; dropData.push(dropObj); placeHolder = { pageNumber: pageNumber, pos: dropData }; - } else if (item.type === "BOX") { + } else { const offset = monitor.getClientOffset(); //adding and updating drop position in array when user drop signature button in div const containerRect = document @@ -379,7 +407,8 @@ const TemplatePlaceholder = () => { const dropObj = { xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x, yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y, - isStamp: isDragStamp || isDragStampSS ? true : false, + isStamp: + (dragTypeValue === "stamp" || dragTypeValue === "image") && true, key: key, isDrag: false, firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, @@ -388,7 +417,13 @@ const TemplatePlaceholder = () => { scale: scale, isMobile: isMobile, zIndex: posZIndex, - type: item.text + type: item.text, + widgetValue: + dragTypeValue === "checkbox" + ? false + : dragTypeValue === "date" + ? getDate() + : "" }; dropData.push(dropObj); @@ -457,9 +492,18 @@ const TemplatePlaceholder = () => { } setSignerPos((prev) => [...prev, placeHolderPos]); } - if (isMobile) { - setIsDraggingEnable(false); + + if (dragTypeValue === "dropdown") { + setShowDropdown(true); + } else if (dragTypeValue === "checkbox") { + setIsCheckboxRequired(true); + } else if (dragTypeValue === "radio") { + setIsRadio(true); } + setCurrWidgetsDetails(""); + setWidgetType(dragTypeValue); + setSignKey(key); + setIsMailSend(false); } else { setIsReceipent(false); @@ -969,6 +1013,154 @@ const TemplatePlaceholder = () => { setIsModalRole(false); }; + //function for base on condition to add checkbox widget status and input text validation in signerPos array + const handleApplyWidgetsStatus = (textValidate) => { + let regularExpression = textValidate; + 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, ind) => { + if (position.key === signKey) { + if (widgetType === "checkbox") { + if (selectRequiredType === "Read only") { + return { + ...position, + widgetStatus: selectRequiredType, + widgetValue: true + }; + } else { + return { + ...position, + widgetStatus: selectRequiredType + }; + } + } else { + return { + ...position, + validation: regularExpression + }; + } + } + return position; + }); + + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.Id === uniqueId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); + + setSignerPos(newUpdateSigner); + setIsCheckboxRequired(false); + + setSelectRequiredType("Optional"); + } + } + }; + + const handleSaveWidgetsOptions = ( + dropdownName, + dropdownOptions, + addOption, + deleteOption + ) => { + 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, ind) => { + if (position.key === signKey) { + if (widgetType === "radio") { + if (addOption) { + return { + ...position, + + Height: position.Height + ? position.Height + 15 + : defaultWidthHeight(widgetType).height + 15 + }; + } else if (deleteOption) { + return { + ...position, + Height: position.Height + ? position.Height - 15 + : defaultWidthHeight(widgetType).height - 15 + }; + } else { + return { + ...position, + widgetName: dropdownName, + widgetOption: dropdownOptions + }; + } + } else { + return { + ...position, + widgetName: dropdownName, + widgetOption: dropdownOptions + }; + } + } + return position; + }); + + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.Id === uniqueId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); + + setSignerPos(newUpdateSigner); + } + } + }; + + const handleValidateInput = (e) => { + if ( + textValidate === "email" || + textValidate === "number" || + textValidate === "text" + ) { + handleApplyWidgetsStatus(textValidate); + setIsValidate(false); + } else { + setValidateError("please enter accurate validation."); + setTimeout(() => { + setValidateError(""); + }, 1500); + } + }; return (
@@ -1087,6 +1279,128 @@ const TemplatePlaceholder = () => { type={"signersAlert"} setIsShowEmail={setIsShowEmail} /> + + {/* 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> + <ModalUi + //isValidate + isOpen={isValidate} + handleClose={() => { + setIsValidate(false); + }} + title={"Validation"} + > + <div style={{ height: "100%", padding: 20 }}> + <div className="validateText"> + <label + style={{ + marginRight: "5px", + fontSize: "14px", + fontWeight: "500" + }} + > + Regular expression: + </label> + + <input + placeholder="email, number, text" + className="drodown-input validateInputText" + onChange={(e) => setTextValidate(e.target.value)} + /> + {validateError && ( + <p style={{ color: "red", fontSize: "12px" }}> + {validateError} + </p> + )} + </div> + + <div + style={{ + height: "1px", + backgroundColor: "#9f9f9f", + width: "100%", + marginTop: "15px", + marginBottom: "15px" + }} + ></div> + <button + onClick={() => { + handleValidateInput(); + }} + style={{ + background: themeColor() + }} + type="button" + // disabled={!selectCopyType} + className="finishBtn" + > + Apply + </button> + </div> + </ModalUi> + <DropdownWidgetOption + title="RadioGroup" + showDropdown={isRadio} + setShowDropdown={setIsRadio} + handleSaveWidgetsOptions={handleSaveWidgetsOptions} + currWidgetsDetails={currWidgetsDetails} + /> + <DropdownWidgetOption + title="Dropdown options" + showDropdown={showDropdown} + setShowDropdown={setShowDropdown} + handleSaveWidgetsOptions={handleSaveWidgetsOptions} + currWidgetsDetails={currWidgetsDetails} + /> <PlaceholderCopy isPageCopy={isPageCopy} setIsPageCopy={setIsPageCopy} @@ -1144,6 +1458,12 @@ const TemplatePlaceholder = () => { setSignKey={setSignKey} setSignerObjId={setSignerObjId} isDragging={isDragging} + setShowDropdown={setShowDropdown} + setCurrWidgetsDetails={setCurrWidgetsDetails} + setWidgetType={setWidgetType} + setIsRadio={setIsRadio} + setIsCheckboxRequired={setIsCheckboxRequired} + setIsValidate={setIsValidate} /> )} </div> diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js index ef66769a7..19232160d 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js @@ -55,7 +55,6 @@ function DropdownWidgetOption(props) { isOpen={props.showDropdown} title={props.title} closeOff={true} - // handleClose={() => props.setShowDropdown(false)} > <div style={{ height: "100%", padding: 20 }}> <form @@ -148,6 +147,15 @@ function DropdownWidgetOption(props) { > Save </button> + {props.currWidgetsDetails?.widgetOption?.length > 0 && ( + <button + type="submit" + className="finishBtn cancelBtn" + onClick={() => props.setShowDropdown(false)} + > + Cancel + </button> + )} </form> </div> </ModalUi> diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index dd9f5d966..d550c2580 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -99,15 +99,17 @@ function Placeholder(props) { //onclick placeholder function to open signature pad const handlePlaceholderClick = () => { - if ( - props.pos.type === "text" || - props.pos.type === "checkbox" || - props.pos.type === "name" || - props.pos.type === "company" || - props.pos.type === "job title" || - props.pos.type === "date" || - props.pos.type === "email" - ) { + const widgetTypeExist = [ + "text", + "checkbox", + "name", + "company", + "job title", + "date", + "email" + ].includes(props.pos.type); + + if (widgetTypeExist) { setDraggingEnabled(false); } if ((props.isNeedSign || props.isSignYourself) && !props.isDragging) { @@ -167,13 +169,16 @@ function Placeholder(props) { <> {props.isPlaceholder && ( <> - {(props.pos.type === "checkbox" || - props.pos.type === "text" || - props.pos.type === "email" || - props.pos.type === "name" || - props.pos.type === "company" || - props.pos.type === "job title" || - props.pos.type === "radio") && ( + {[ + "checkbox", + "text", + "email", + "name", + "company", + "job title", + "dropdown", + "radio" + ].includes(props.pos.type) && ( <i onClick={(e) => { e.stopPropagation(); @@ -181,6 +186,8 @@ function Placeholder(props) { props.setIsCheckboxRequired(true); } else if (props.pos.type === "radio") { props.setIsRadio(true); + } else if (props.pos.type === "dropdown") { + props?.setShowDropdown(true); } else { props.setIsValidate(true); } @@ -214,7 +221,8 @@ function Placeholder(props) { props.pos.type === "email" || props.pos.type === "name" || props.pos.type === "company" || - props.pos.type === "job title" + props.pos.type === "job title" || + props.pos.type === "dropdown" ? "49px" : "23px", top: @@ -222,7 +230,8 @@ function Placeholder(props) { props.pos.type === "email" || props.pos.type === "name" || props.pos.type === "company" || - props.pos.type === "job title" + props.pos.type === "job title" || + props.pos.type === "dropdown" ? "-17px" : "-28px" }} @@ -261,10 +270,14 @@ function Placeholder(props) { id="menu-container" style={{ zIndex: "99", - top: isMobile ? "-17px" : "-27px", - left: props.isPlaceholder ? "-12px" : "5px" + top: "-19px", + right: props.isPlaceholder ? "60px" : "44px" }} - className={isShowDateFormat ? "dropdown show" : "dropdown"} + className={ + isShowDateFormat + ? "dropdown signUserIcon show" + : "dropdown signUserIcon" + } onClick={(e) => { setIsShowDateFormat(!isShowDateFormat); e.stopPropagation(); diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index d2388db09..1a041685c 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -65,7 +65,7 @@ function PlaceholderType(props) { }, []); useEffect(() => { - if (props.isNeedSign) { + if (props.isNeedSign && props.pos.type === "date") { // props.pos.widgetValue const updateDate = new Date(); setStartDate(updateDate); @@ -73,45 +73,50 @@ function PlaceholderType(props) { }, []); useEffect(() => { - onChangeInput( - isCheckedRadio.selectValue, - props.pos.key, - props.xyPostion, - props.index, - props.setXyPostion, - props.data && props.data.signerObjId, - false - ); + if (props.pos?.type && props.pos.type === "radio" && props.isNeedSign) { + console.log("props.pos?.type", props.pos?.type); + onChangeInput( + isCheckedRadio.selectValue, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.Id, + false + ); + } }, [isCheckedRadio]); useEffect(() => { - if (props.selectDate) { - const updateDate = new Date(props.saveDateFormat); - setStartDate(updateDate); - const dateObj = { - date: props.saveDateFormat, - format: props.selectDate - ? props.selectDate?.format + if (props.pos?.type && props.pos.type === "date") { + if (props.selectDate) { + const updateDate = new Date(props.saveDateFormat); + setStartDate(updateDate); + const dateObj = { + date: props.saveDateFormat, + format: props.selectDate + ? props.selectDate?.format + : props.pos?.dateFormat + ? props.pos?.dateFormat + : "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?.dateFormat ? props.pos?.dateFormat : "MM/dd/YYYY" - }; - props.setSelectDate(dateObj); + ); } - - onChangeInput( - props.saveDateFormat, - props.pos.key, - props.xyPostion, - props.index, - props.setXyPostion, - props.data && props.data.signerObjId, - false, - props.selectDate?.format - ? props.selectDate.format - : props.pos?.dateFormat - ? props.pos?.dateFormat - : "MM/dd/YYYY" - ); }, [props.saveDateFormat]); const dateValue = (value) => { @@ -131,19 +136,21 @@ function PlaceholderType(props) { )); useEffect(() => { - const senderUser = localStorage.getItem(`Extand_Class`); - const jsonSender = JSON.parse(senderUser); + if (props.pos?.type) { + const senderUser = localStorage.getItem(`Extand_Class`); + const jsonSender = JSON.parse(senderUser); - if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) { - onChangeInput( - jsonSender && jsonSender[0], - null, - props.xyPostion, - null, - props.setXyPostion, - props.signerObjId, - true - ); + if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) { + onChangeInput( + jsonSender && jsonSender[0], + null, + props.xyPostion, + null, + props.setXyPostion, + props.data.Id, + true + ); + } } }, [type]); @@ -223,7 +230,7 @@ function PlaceholderType(props) { props.xyPostion, props.index, props.setXyPostion, - props.data && props.data.signerObjId, + props.data && props.data.Id, false ) } @@ -251,7 +258,7 @@ function PlaceholderType(props) { props.xyPostion, props.index, props.setXyPostion, - props.data && props.data.signerObjId, + props.data && props.data?.Id, false ); }} @@ -271,7 +278,7 @@ function PlaceholderType(props) { props.xyPostion, props.index, props.setXyPostion, - props.data && props.data.signerObjId, + props.data && props.data?.Id, false ); }} @@ -334,7 +341,7 @@ function PlaceholderType(props) { props.xyPostion, props.index, props.setXyPostion, - props.data && props.data.signerObjId, + props.data && props.data?.Id, false ) } @@ -367,7 +374,7 @@ function PlaceholderType(props) { props.xyPostion, props.index, props.setXyPostion, - props.data && props.data.signerObjId, + props.data && props.data?.Id, false ) } @@ -400,7 +407,7 @@ function PlaceholderType(props) { props.xyPostion, props.index, props.setXyPostion, - props.data && props.data.signerObjId, + props.data && props.data?.Id, false ) } @@ -418,28 +425,6 @@ function PlaceholderType(props) { case "date": return ( <div> - {/* <input - placeholder="mm/dd/yyyy" - className="inputPlaceholder" - style={{ outlineColor: "#007bff" }} - type="date" - disabled={props.isPlaceholder ? true : false} - onBlur={handleInputBlur} - // value={props.selectDate && formatDate(props.selectDate)} - // value={props.selectDate && props.selectDate} - onChange={(e) => { - props.setSelectDate(e.target.value); - onChangeInput( - e.target.value, - props.pos.key, - props.xyPostion, - props.index, - props.setXyPostion, - props.data && props.data.signerObjId, - false - ); - }} - /> */} <DatePicker disabled={ props.isNeedSign && props.data?.signerObjId !== props.signerObjId @@ -457,19 +442,6 @@ function PlaceholderType(props) { } onChange={(date) => { setStartDate(date); - - // onChangeInput( - // props.saveDateFormat, - // props.pos.key, - // props.xyPostion, - // props.index, - // props.setXyPostion, - // props.data && props.data.signerObjId, - // false, - // props.selectDate?.format - // ? props.selectDate.format - // : "MM/dd/YYYY" - // ); }} popperPlacement="top-end" customInput={<ExampleCustomInput />} @@ -527,7 +499,7 @@ function PlaceholderType(props) { props.xyPostion, props.index, props.setXyPostion, - props.data && props.data.signerObjId, + props.data && props.data?.Id, false ) } diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 2b5ffb05e..b6b2d5850 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -207,6 +207,7 @@ function PlaceHolderSign() { }); } }, [divRef.current]); + //function for get document details const getDocumentDetails = async () => { //getting document details @@ -364,8 +365,6 @@ function PlaceHolderSign() { let dropData = []; let placeHolder; const dragTypeValue = item?.text ? item.text : monitor.type; - // const widgetWidth = defaultWidthHeight(dragTypeValue).width; - // const widgetHeight = defaultWidthHeight(dragTypeValue).height; if (item === "onclick") { const dropObj = { @@ -498,6 +497,7 @@ function PlaceHolderSign() { } else if (dragTypeValue === "radio") { setIsRadio(true); } + setCurrWidgetsDetails(""); setWidgetType(dragTypeValue); setSignKey(key); if (isMobile) { diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index ff193d483..58fd9471c 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -21,18 +21,18 @@ export const calculateInitialWidthHeight = (type, widgetData) => { getHeight: height }; }; -export const addInitialData = (signerPos, setXyPostion, value, signerObjId) => { +export const addInitialData = (signerPos, setXyPostion, value, userId) => { return signerPos.map((item) => { if (item.placeHolder && item.placeHolder.length > 0) { // If there is a nested array, recursively add the field to the last object - if (item.signerObjId === signerObjId) { + if (item.Id === userId) { return { ...item, placeHolder: addInitialData( item.placeHolder, setXyPostion, value, - signerObjId + userId ) }; } else { @@ -44,7 +44,7 @@ export const addInitialData = (signerPos, setXyPostion, value, signerObjId) => { // If there is no nested array, add the new field return { ...item, - pos: addInitialData(item.pos, setXyPostion, value, signerObjId) + pos: addInitialData(item.pos, setXyPostion, value, userId) // Adjust this line to add the desired field }; } else { @@ -85,30 +85,23 @@ export const onChangeInput = ( xyPostion, index, setXyPostion, - signerObjId, + userId, initial, dateFormat ) => { const isSigners = xyPostion.some((data) => data.signerPtr); - + let filterSignerPos; if (isSigners) { - let filterSignerPos; - if (signerObjId) { - filterSignerPos = xyPostion.filter( - (data) => data.signerObjId === signerObjId - ); + if (userId) { + filterSignerPos = xyPostion.filter((data) => data.Id === userId); } else { filterSignerPos = xyPostion.filter((data) => data.Role === "prefill"); } - const getPlaceHolder = filterSignerPos[0].placeHolder; + console.log("filter", filterSignerPos); + const getPlaceHolder = filterSignerPos[0]?.placeHolder; if (initial) { - const xyData = addInitialData( - xyPostion, - setXyPostion, - value, - signerObjId - ); + const xyData = addInitialData(xyPostion, setXyPostion, value, userId); setXyPostion(xyData); } else { const getPageNumer = getPlaceHolder.filter( @@ -146,7 +139,7 @@ export const onChangeInput = ( const newUpdateSigner = xyPostion.map((obj, ind) => { if (obj.Role === "prefill") { return { ...obj, placeHolder: newUpdateSignPos }; - } else if (obj.signerObjId === signerObjId) { + } else if (obj.Id === userId) { return { ...obj, placeHolder: newUpdateSignPos }; } return obj; @@ -386,12 +379,12 @@ export const defaultWidthHeight = (type) => { height: 30 }; return obj; - // case "label": - // obj = { - // width: 150, - // height: 25 - // }; - return obj; + // case "label": + // obj = { + // width: 150, + // height: 25 + // }; + // return obj; default: obj = { width: 150, @@ -946,6 +939,16 @@ export const multiSignEmbed = async ( imgData.type === "initials" || imgData.type === "image" ) { + console.log(images[id]); + if ( + (imgData.ImageType && imgData.ImageType === "image/png") || + imgData.ImageType === "image/jpeg" + ) { + img = await pdfDoc.embedJpg(images[id]); + } else { + img = await pdfDoc.embedPng(images[id]); + } + } else if (!imgData.type) { if ( (imgData.ImageType && imgData.ImageType === "image/png") || imgData.ImageType === "image/jpeg" @@ -1079,22 +1082,6 @@ export const multiSignEmbed = async ( }); dropdown.enableReadOnly(); } else if (imgData.type === "radio") { - // page.drawText("first", { - // x: xPos(imgData) + 50, - // y: yPos(imgData), - // size: 18 - // }); - // page.drawText("second", { - // x: xPos(imgData) + 50, - // y: yPos(imgData) - 18, - // size: 18 - // }); - // page.drawText("third", { - // x: xPos(imgData) + 50, - // y: yPos(imgData) - 34, - // size: 18 - // }); - const radioGroup = form.createRadioGroup(randomboxId); let addYPosition = 18;