WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-24 16:42:33 +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/package-lock.json
Generated
+80 -16
View File
@@ -24,6 +24,7 @@
"radix-ui": "^1.0.1",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-datepicker": "^5.1.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dnd-multi-backend": "^8.0.3",
@@ -2554,28 +2555,42 @@
}
},
"node_modules/@floating-ui/core": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
"integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
"dependencies": {
"@floating-ui/utils": "^0.1.3"
"@floating-ui/utils": "^0.2.1"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
"integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz",
"integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==",
"dependencies": {
"@floating-ui/core": "^1.4.2",
"@floating-ui/utils": "^0.1.3"
"@floating-ui/core": "^1.6.0",
"@floating-ui/utils": "^0.2.1"
}
},
"node_modules/@floating-ui/react": {
"version": "0.26.8",
"resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.8.tgz",
"integrity": "sha512-fOZb8BnJBrVohGPZ8RthDM5cHD9SnBKgY/U7LFXHhuwafSZD7TVmCX67+ezkkwxFbWpQGTEbgcjuHUDRonGy1g==",
"dependencies": {
"@floating-ui/react-dom": "^2.0.8",
"@floating-ui/utils": "^0.2.1",
"tabbable": "^6.0.1"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@floating-ui/react-dom": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
"integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
"integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
"dependencies": {
"@floating-ui/dom": "^1.5.1"
"@floating-ui/dom": "^1.6.1"
},
"peerDependencies": {
"react": ">=16.8.0",
@@ -2583,9 +2598,9 @@
}
},
"node_modules/@floating-ui/utils": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
"integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.11",
@@ -9007,6 +9022,21 @@
"node": ">=10"
}
},
"node_modules/date-fns": {
"version": "2.30.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
"dependencies": {
"@babel/runtime": "^7.21.0"
},
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -17664,6 +17694,22 @@
"react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-datepicker": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-5.1.0.tgz",
"integrity": "sha512-elwEnHpd9dQ4U/u7f2vsFdK1CchrOkPPR6rRDQWIzOgqM+Dty43c0tK/IPumrcPSMpRcyDu1okHmbs5m3xlz7w==",
"dependencies": {
"@floating-ui/react": "^0.26.2",
"classnames": "^2.2.6",
"date-fns": "^2.30.0",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.13.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17 || ^18",
"react-dom": "^16.9.0 || ^17 || ^18"
}
},
"node_modules/react-dev-utils": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -17923,6 +17969,19 @@
"resolved": "https://registry.npmjs.org/react-native-crypto-js/-/react-native-crypto-js-1.0.0.tgz",
"integrity": "sha512-FNbLuG/HAdapQoybeZSoes1PWdOj0w242gb+e1R0hicf3Gyj/Mf8M9NaED2AnXVOX01b2FXomwUiw1xP1K+8sA=="
},
"node_modules/react-onclickoutside": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
"integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
"funding": {
"type": "individual",
"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
},
"peerDependencies": {
"react": "^15.5.x || ^16.x || ^17.x || ^18.x",
"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
}
},
"node_modules/react-pdf": {
"version": "7.4.0",
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-7.4.0.tgz",
@@ -19902,6 +19961,11 @@
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
},
"node_modules/tabbable": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
},
"node_modules/tailwindcss": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
microfrontends/SignDocuments/package.json
+1
View File
@@ -20,6 +20,7 @@
"radix-ui": "^1.0.1",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-datepicker": "^5.1.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dnd-multi-backend": "^8.0.3",
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;
});