WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-26 09:32:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:implement new widgets- initial signature,name,company,job title & date in sign-yourself flow

Browse Source
This commit is contained in:
RaktimaNXG
2024-01-15 19:09:18 +05:30
parent f5d11f9ba6
commit babe17838b
13 changed files with 398 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/component/DragElement.js
+7 -52
View File
@@ -1,58 +1,13 @@
import React from "react";
import stamp from "../../assests/stamp2.png";
import sign from "../../assests/sign3.png";
import { themeColor } from "../../utils/ThemeColor/backColor";
import { getWidgetType, widgets } from "../../utils/Utils";
function DragElement({ type, id }) {
const selectedId = id;
return (
<div>
{selectedId === 3 ? (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
userSelect: "none",
}}
>
<img
alt="sign img"
style={{
width: "25px",
height: "23px",
background: themeColor(),
}}
src={sign}
/>
<span style={{ color: themeColor(), fontSize: "12px" }}>
Signature
</span>
</div>
) : (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
userSelect: "none",
}}
>
<img
alt="stamp img"
style={{
width: "25px",
height: "23px",
background: themeColor(),
}}
src={stamp}
/>
<span style={{ color: themeColor(), fontSize: "12px" }}>Stamp</span>
</div>
)}
</div>
function DragElement(item) {
const getWidgets = widgets;
const filterWidgetPreview = getWidgets.filter(
(data) => data.type === item?.text
);
return <div>{getWidgetType(filterWidgetPreview[0])}</div>;
}
export default DragElement;
microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+79 -10
View File
@@ -7,8 +7,6 @@ import { widgets } from "../../utils/Utils";
function FieldsComponent({
pdfUrl,
sign,
stamp,
dragSignature,
signRef,
handleDivClick,
@@ -39,7 +37,8 @@ function FieldsComponent({
signerPos,
handleRoleChange,
handleOnBlur,
title
title,
initial
}) {
const [isSignersModal, setIsSignersModal] = useState(false);
@@ -69,14 +68,69 @@ function FieldsComponent({
type: "BOX",
item: {
type: "BOX",
id: 2,
id: 7,
text: "text"
},
collect: (monitor) => ({
isDragText: !!monitor.isDragging()
})
});
const signStyle = pdfUrl ? "disableSign" : "signatureBtn";
const [{ isDragInitial }, initials] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 8,
text: "initials"
},
collect: (monitor) => ({
isDragInitial: !!monitor.isDragging()
})
});
const [{ isDragName }, name] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 9,
text: "name"
},
collect: (monitor) => ({
isDragName: !!monitor.isDragging()
})
});
const [{ isDragCompany }, company] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 10,
text: "company"
},
collect: (monitor) => ({
isDragCompany: !!monitor.isDragging()
})
});
const [{ isDragJobtitle }, jobTitle] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 11,
text: "job title"
},
collect: (monitor) => ({
isDragJobtitle: !!monitor.isDragging()
})
});
const [{ isDragDate }, date] = useDrag({
type: "BOX",
item: {
type: "BOX",
id: 11,
text: "date"
},
collect: (monitor) => ({
isDragDate: !!monitor.isDragging()
})
});
const isMobile = window.innerWidth < 767;
const scrollContainerRef = useRef(null);
const [widget, setWidget] = useState([]);
@@ -100,12 +154,27 @@ function FieldsComponent({
};
useEffect(() => {
const widgetRef = [dragSignature, dragStamp, dropdown, checkbox, text];
const widgetRef = [
dragSignature,
dragStamp,
dropdown,
checkbox,
text,
initials,
name,
company,
jobTitle,
date
];
const getWidgetArray = widgets;
const newUpdateSigner = getWidgetArray.map((obj, ind) => {
return { ...obj, ref: widgetRef[ind] };
});
setWidget(newUpdateSigner);
const removeInitial = newUpdateSigner.filter(
(widgetData) => widgetData.type !== "initials"
);
setWidget(initial ? newUpdateSigner : removeInitial);
}, []);
const filterWidgets = widget.filter((data) => data.type !== "dropdown");
@@ -294,7 +363,7 @@ function FieldsComponent({
color: "rgb(140 142 149)",
position: "fixed",
left: "1%",
bottom: "6%",
bottom: "3%",
fontSize: "23px"
}}
onClick={() => handleScroll(-100)}
@@ -372,8 +441,8 @@ function FieldsComponent({
style={{
color: "rgb(140 142 149)",
position: "fixed",
left: "95%",
bottom: "6%",
left: "93%",
bottom: "3%",
fontSize: "23px"
}}
onClick={() => handleScroll(100)}
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+5 -2
View File
@@ -104,7 +104,6 @@ function RenderPdf({
}
};
const posHeight = (pos, signYourself) => {
// console.log("signyourself",pos)
let height;
const posHeight = pos.Height;
const defaultHeight = defaultWidthHeight(pos.type).height;
@@ -964,6 +963,7 @@ function RenderPdf({
yPos={yPos}
posWidth={posWidth}
posHeight={posHeight}
pdfDetails={pdfDetails[0]}
/>
)
);
@@ -1468,7 +1468,9 @@ function RenderPdf({
handleDeleteSign={handleDeleteSign}
setIsStamp={setIsStamp}
handleTabDrag={handleTabDrag}
handleStop={handleStop}
handleStop={(event, dragElement) =>
handleStop(event, dragElement, pos.type)
}
handleSignYourselfImageResize={
handleSignYourselfImageResize
}
@@ -1484,6 +1486,7 @@ function RenderPdf({
yPos={yPos}
posWidth={posWidth}
posHeight={posHeight}
pdfDetails={pdfDetails[0]}
/>
)
);