WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-09-07 18:27:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat : multiple date format added

Browse Source
This commit is contained in:
RaktimaNXG
2024-01-31 17:12:08 +05:30
parent 0a3d89d0e2
commit fe03da1d97
8 changed files with 307 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+11 -1
View File
@@ -3,6 +3,7 @@ import { PDFDocument } from "pdf-lib";
import "../css/./signature.css";
import { themeColor } from "../utils/ThemeColor/backColor";
import axios from "axios";
import moment from "moment";
import Loader from "./component/loader";
import RenderAllPdfPage from "./component/renderAllPdfPage";
import { DndProvider } from "react-dnd";
@@ -323,6 +324,12 @@ function SignYourSelf() {
}
};
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) => {
const key = Math.floor(1000 + Math.random() * 9000);
@@ -345,7 +352,9 @@ function SignYourSelf() {
? pdfDetails[0].ExtUserPtr.Email
: dragTypeValue === "checkbox"
? true
: "";
: dragTypeValue === "date"
? getDate()
: "";
if (item === "onclick") {
dropObj = {
@@ -525,6 +534,7 @@ function SignYourSelf() {
flag,
containerWH
);
// console.log(("pdf",pdfBytes))
//function for call to embed signature in pdf and get digital signature pdf
signPdfFun(pdfBytes, documentId);
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+93 -24
View File
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import BorderResize from "../component/borderResize";
import PlaceholderBorder from "./placeholderBorder";
import { Rnd } from "react-rnd";
import { defaultWidthHeight, isMobile } from "../../utils/Utils";
import { defaultWidthHeight, isMobile, onChangeInput } from "../../utils/Utils";
import PlaceholderType from "./placeholderType";
import moment from "moment";
import "../LegaDrive/LegaDrive.css";
@@ -12,18 +12,66 @@ function Placeholder(props) {
const [isShowDateFormat, setIsShowDateFormat] = useState(false);
const [selectDate, setSelectDate] = useState();
const [dateFormat, setDateFormat] = useState([]);
const dateFormatArr = ["L", "l", "LL", "ll", "LLL", "lll", "llll"];
const [saveDateFormat, setSaveDateFormat] = useState("");
const dateFormatArr = [
"L",
"DD/MM/YYYY",
"YYYY-MM-DD",
"MM.DD.YYYY",
"MM-DD-YYYY",
"MMM DD, YYYY",
"LL",
"DD MMM, YYYY",
"DD MMMM, YYYY"
];
const selectFormat = (data) => {
switch (data) {
case "L":
return "MM/dd/yyyy";
case "DD/MM/YYYY":
return "dd/MM/yyyy";
case "LL":
return "MMMM dd, yyyy";
case "DD MMM, YYYY":
return "DD MMM, YYYY";
case "YYYY-MM-DD":
return "YYYY-MM-dd";
case "MM-DD-YYYY":
return "MM-dd-YYYY";
case "MM.DD.YYYY":
return "MM.dd.YYYY";
case "MMM DD, YYYY":
return "MMM dd, YYYY";
case "DD MMMM, YYYY":
return "dd MMMM, YYYY";
}
};
const changeDateFormat = () => {
const updateDate = [];
dateFormatArr.map((data) => {
const date = new Date(selectDate);
const date = new Date(selectDate?.date);
const milliseconds = date.getTime();
const newDate = moment(milliseconds).format(data);
updateDate.push(newDate);
const dateObj = {
date: newDate,
format: selectFormat(data)
};
updateDate.push(dateObj);
});
setDateFormat(updateDate);
};
useEffect(() => {
const date = new Date();
const milliseconds = date.getTime();
const newDate = moment(milliseconds).format("MM/DD/YYYY");
const dateObj = {
date: newDate,
format: "MM/dd/YYYY"
};
setSelectDate(dateObj);
}, []);
useEffect(() => {
if (selectDate) {
changeDateFormat();
@@ -162,28 +210,29 @@ function Placeholder(props) {
{props.pos.type === "date" && selectDate && (
<div
id="menu-container"
style={{ zIndex: "99", top: "-20px", left: "6px" }}
style={{
zIndex: "99",
top: "-19px",
left: props.isPlaceholder ? "-5px" : "9px"
}}
className={isShowDateFormat ? "dropdown show" : "dropdown"}
onClick={() => setIsShowDateFormat(!isShowDateFormat)}
onClick={(e) => {
setIsShowDateFormat(!isShowDateFormat);
e.stopPropagation();
props.setSignKey(props.pos.key);
}}
// onTouchEnd={(e) => {
// e.stopPropagation();
// setIsShowDateFormat(!isShowDateFormat);
// props.setSignKey(props.pos.key);
// }}
>
<div className=" sort " data-toggle="dropdown">
<i
// onClick={(e) => {
// console.log("click here");
// e.stopPropagation();
// props.setSignKey(props.pos.key);
// }}
// onTouchEnd={(e) => {
// e.stopPropagation();
// props.setSignKey(props.pos.key);
// }}
class="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2"
// right: "2px",
// top: "-15px"
color: "#188ae2",
fontSize: "14px"
}}
></i>
</div>
@@ -194,18 +243,34 @@ function Placeholder(props) {
aria-labelledby="dropdownMenuButton"
aria-expanded={isShowDateFormat ? "true" : "false"}
>
{dateFormat.map((date) => {
{dateFormat.map((data, ind) => {
return (
<span
key={ind}
onClick={() => {
// console.log("go here");
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(date);
setSelectDate(data);
// {
// props.isPlaceholder &&
// onChangeInput(
// data.date,
// props.pos.key,
// props.xyPostion,
// props.index,
// props.setXyPostion,
// props.data && props.data.signerObjId,
// false,
// selectDate?.format
// ? selectDate.format
// : "MM/dd/YYYY"
// );
// }
}}
className="dropdown-item itemColor"
style={{ fontSize: "12px" }}
>
{date}
{data?.date ? data?.date : "nodata"}
</span>
);
})}
@@ -433,6 +498,8 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
setSaveDateFormat={setSaveDateFormat}
saveDateFormat={saveDateFormat}
/>
</div>
) : (
@@ -456,6 +523,8 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
setSaveDateFormat={setSaveDateFormat}
saveDateFormat={saveDateFormat}
/>
</>
)}
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
+85 -8
View File
@@ -1,20 +1,49 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, forwardRef, useMemo } from "react";
import { onChangeInput } from "../../utils/Utils";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import "../../css/signature.css";
function PlaceholderType(props) {
const [selectOption, setSelectOption] = useState("");
const [startDate, setStartDate] = useState(new Date());
const memoizedCount = useMemo(
() => props.saveDateFormat,
[props.saveDateFormat]
);
const type = props.pos.type;
const handleInputBlur = () => {
props.setDraggingEnabled(true);
};
useEffect(() => {
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"
);
}, [memoizedCount]);
// const formatDate = (dateString) => {
// const date = new Date(dateString);
// const updateDate = date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
// console.log("update",updateDate)
// return updateDate;
// };
const dateValue = (value) => {
props.setSaveDateFormat(value);
return <span>{value}</span>;
};
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
<div
className="inputPlaceholder"
style={{ overflow: "hidden" }}
onClick={onClick}
ref={ref}
>
{dateValue(value)}
<i class="fa-solid fa-calendar" style={{ marginLeft: "5px" }}></i>
</div>
));
useEffect(() => {
const senderUser = localStorage.getItem(`Extand_Class`);
@@ -298,7 +327,7 @@ function PlaceholderType(props) {
case "date":
return (
<div>
<input
{/* <input
placeholder="mm/dd/yyyy"
className="inputPlaceholder"
style={{ outlineColor: "#007bff" }}
@@ -319,6 +348,54 @@ function PlaceholderType(props) {
false
);
}}
/> */}
<DatePicker
// disabled={props.isPlaceholder ? true : false}
onBlur={handleInputBlur}
closeOnScroll={true}
className="inputPlaceholder"
style={{ outlineColor: "#007bff" }}
selected={
// props.pos?.widgetValue ? props.pos.widgetValue :
startDate
? startDate
: props.pos?.widgetValue
? props.pos?.widgetValue
: new Date(props.pos.widgetValue)
}
onChange={(date) => {
setStartDate(date);
const dateObj = {
date: props.saveDateFormat,
format: props.pos?.dateFormat
? props.pos?.dateFormat
: props.selectDate
? props.selectDate?.format
: "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
: "MM/dd/YYYY"
);
}}
popperPlacement="top-end"
customInput={<ExampleCustomInput />}
dateFormat={
props.pos?.dateFormat
? props.pos?.dateFormat
: props.selectDate
? props.selectDate?.format
: "dd MMMM, YYYY"
}
/>
{/* <div style={{ position: "absolute" }}>{props.selectDate}</div> */}
</div>
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+19 -2
View File
@@ -1,5 +1,6 @@
import React, { useState, useRef, useEffect } from "react";
import axios from "axios";
import moment from "moment";
import "../css/./signature.css";
import { themeColor } from "../utils/ThemeColor/backColor";
import { DndProvider } from "react-dnd";
@@ -324,6 +325,12 @@ function PlaceHolderSign() {
}
};
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);
@@ -360,7 +367,12 @@ function PlaceHolderSign() {
yBottom: window.innerHeight / 2 - 60,
zIndex: posZIndex,
type: monitor.type,
widgetValue: monitor.type === "checkbox" ? false : ""
widgetValue:
monitor.type === "checkbox"
? false
: monitor.type === "date"
? getDate()
: ""
};
dropData.push(dropObj);
placeHolder = {
@@ -390,7 +402,12 @@ function PlaceHolderSign() {
isMobile: isMobile,
zIndex: posZIndex,
type: item.text,
widgetValue: item.text === "checkbox" ? false : ""
widgetValue:
item.text === "checkbox"
? false
: monitor.type === "date"
? getDate()
: ""
};
dropData.push(dropObj);
microfrontends/SignDocuments/src/css/signature.css
+3
View File
@@ -26,6 +26,9 @@
.dropdownContainer::-webkit-scrollbar {
display: none;
}
.react-datepicker__input-container{
position: initial !important;
}
.inputPlaceholder {
width: 100%;
microfrontends/SignDocuments/src/utils/Utils.js
+15 -5
View File
@@ -86,7 +86,8 @@ export const onChangeInput = (
index,
setXyPostion,
signerObjId,
initial
initial,
dateFormat
) => {
const isSigners = xyPostion.some((data) => data.signerPtr);
@@ -108,15 +109,24 @@ export const onChangeInput = (
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === index
);
if (getPageNumer.length > 0) {
const getXYdata = getPageNumer[0].pos;
const getPosData = getXYdata;
const addSignPos = getPosData.map((url, ind) => {
if (url.key === signKey) {
return {
...url,
widgetValue: value
};
if (dateFormat) {
return {
...url,
widgetValue: value,
dateFormat: dateFormat
};
} else {
return {
...url,
widgetValue: value
};
}
}
return url;
});