diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js index 03bd1e93c..ef66769a7 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js @@ -28,14 +28,18 @@ function DropdownWidgetOption(props) { }; const handleAddInput = () => { + const flage = true; setDropdownOptionList((prevInputs) => [...prevInputs, ""]); + props.handleSaveWidgetsOptions(null, null, flage, false); }; const handleDeleteInput = (ind) => { + const flage = true; const getUpdatedOptions = dropdownOptionList.filter( (data, index) => index !== ind ); setDropdownOptionList(getUpdatedOptions); + props.handleSaveWidgetsOptions(null, null, false, flage); }; const handleSaveOption = () => { props.handleSaveWidgetsOptions(dropdownName, dropdownOptionList); diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index cb2c73c3a..a1e4b6f73 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -4,22 +4,14 @@ import RecipientList from "../../premitives/RecipientList"; import { useDrag } from "react-dnd"; import AllWidgets from "../WidgetComponent/allWidgets"; import { widgets } from "../../utils/Utils"; -import Scrollbar from "react-scrollbars-custom"; function FieldsComponent({ - pdfUrl, dragSignature, signRef, handleDivClick, handleMouseLeave, - isDragSign, themeColor, dragStamp, - dragRef, - isDragStamp, - dragSignatureSS, - dragStampSS, - isDragSignatureSS, isSignYourself, addPositionOfSignature, signersdata, @@ -39,7 +31,6 @@ function FieldsComponent({ handleRoleChange, handleOnBlur, title, - setIsDraggingEnable, isdraggingEnable }) { const [isSignersModal, setIsSignersModal] = useState(false); @@ -176,6 +167,18 @@ function FieldsComponent({ isDragRadio: !!monitor.isDragging() }) }); + // const [, label] = useDrag({ + // type: "BOX", + + // item: { + // type: "BOX", + // id: 14, + // text: "label" + // }, + // collect: (monitor) => ({ + // isDragLabel: !!monitor.isDragging() + // }) + // }); const isMobile = window.innerWidth < 767; const scrollContainerRef = useRef(null); const [widget, setWidget] = useState([]); @@ -213,6 +216,7 @@ function FieldsComponent({ image, email, radio + // label ]; const getWidgetArray = widgets; const newUpdateSigner = getWidgetArray.map((obj, ind) => { @@ -224,6 +228,7 @@ function FieldsComponent({ const filterWidgets = widget.filter( (data) => data.type !== "dropdown" && data.type !== "radio" + // && data.type !== "label" ); const updateWidgets = isSignYourself ? filterWidgets : widget; diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 4c780d48f..2b5ffb05e 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -902,7 +902,12 @@ function PlaceHolderSign() { } ]; - const handleSaveWidgetsOptions = (dropdownName, dropdownOptions) => { + const handleSaveWidgetsOptions = ( + dropdownName, + dropdownOptions, + addOption, + deleteOption + ) => { const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; @@ -918,14 +923,28 @@ function PlaceHolderSign() { const addSignPos = getPosData.map((position, ind) => { if (position.key === signKey) { if (widgetType === "radio") { - return { - ...position, - widgetName: dropdownName, - widgetOption: dropdownOptions, - Height: position.Height - ? position.Height + 15 - : defaultWidthHeight(widgetType).width + 15 - }; + 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, diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 483fae6bd..c3caf4663 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -845,6 +845,20 @@ option { flex-direction: column; justify-content: flex-start; } + +.labelTextArea { + font-size: 0.8rem; + letter-spacing: 1px; +} + +.labelTextArea { + padding: 10px; + max-width: 100%; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; +} @media screen and (max-width:766px) { .validateInputText { diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 65f036729..ff193d483 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -92,9 +92,14 @@ export const onChangeInput = ( const isSigners = xyPostion.some((data) => data.signerPtr); if (isSigners) { - const filterSignerPos = xyPostion.filter( - (data) => data.signerObjId === signerObjId - ); + let filterSignerPos; + if (signerObjId) { + filterSignerPos = xyPostion.filter( + (data) => data.signerObjId === signerObjId + ); + } else { + filterSignerPos = xyPostion.filter((data) => data.Role === "prefill"); + } const getPlaceHolder = filterSignerPos[0].placeHolder; if (initial) { @@ -139,7 +144,9 @@ export const onChangeInput = ( }); const newUpdateSigner = xyPostion.map((obj, ind) => { - if (obj.signerObjId === signerObjId) { + if (obj.Role === "prefill") { + return { ...obj, placeHolder: newUpdateSignPos }; + } else if (obj.signerObjId === signerObjId) { return { ...obj, placeHolder: newUpdateSignPos }; } return obj; @@ -237,6 +244,11 @@ export const widgets = [ icon: "fa-regular fa-circle-dot", iconSize: "20px" } + // { + // type: "label", + // icon: "fa-solid fa-text-width", + // iconSize: "20px" + // } ]; export const getWidgetType = (item, marginLeft) => { @@ -367,12 +379,19 @@ export const defaultWidthHeight = (type) => { width: 50, height: 20 }; + return obj; case "radio": obj = { width: 15, - height: 20 + height: 30 }; return obj; + // case "label": + // obj = { + // width: 150, + // height: 25 + // }; + return obj; default: obj = { width: 150, @@ -1005,7 +1024,9 @@ export const multiSignEmbed = async ( return page.getHeight() - y - scaleHeight; } } else { - return page.getHeight() - resizePos - scaleHeight; + const widgetHeight = imgData.type === "radio" ? 10 : scaleHeight; + return page.getHeight() - resizePos - widgetHeight; + // - scaleHeight; } } } @@ -1033,7 +1054,8 @@ export const multiSignEmbed = async ( imgData.type === "company" || imgData.type === "job title" || imgData.type === "date" || - imgData.type === "email" + imgData.type === "email" || + imgData.type === "label" ) { const font = await pdfDoc.embedFont("Helvetica"); const fontSize = 12; @@ -1057,19 +1079,35 @@ export const multiSignEmbed = async ( }); dropdown.enableReadOnly(); } else if (imgData.type === "radio") { - const rocketField = form.createRadioGroup(randomboxId); + // 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; for (let i = 1; i <= imgData?.widgetOption.length; i++) { const data = imgData?.widgetOption[i - 1]; let yPosition; if (i > 1) { - yPosition = yPos(imgData) + addYPosition; + yPosition = yPos(imgData) - addYPosition; } else { yPosition = yPos(imgData); } - rocketField.addOptionToPage(data, page, { + radioGroup.addOptionToPage(data, page, { x: xPos(imgData), y: yPosition, width: 11, @@ -1080,8 +1118,8 @@ export const multiSignEmbed = async ( } } - rocketField.select(imgData.widgetValue); - rocketField.enableReadOnly(); + radioGroup.select(imgData.widgetValue); + radioGroup.enableReadOnly(); } else { page.drawImage(img, { x: xPos(imgData),