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

fix: radio widgets position and email widgets width issue

Browse Source
This commit is contained in:
RaktimaNXG
2024-02-09 10:50:19 +05:30
parent 4a52d327ce
commit 6a0788c2a1
5 changed files with 110 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js
+4
View File
@@ -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);
microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+14 -9
View File
@@ -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;
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+28 -9
View File
@@ -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,
microfrontends/SignDocuments/src/css/signature.css
+14
View File
@@ -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 {
microfrontends/SignDocuments/src/utils/Utils.js
+50 -12
View File
@@ -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),