diff --git a/microfrontends/SignDocuments/package-lock.json b/microfrontends/SignDocuments/package-lock.json index 98359a78d..d974fe017 100644 --- a/microfrontends/SignDocuments/package-lock.json +++ b/microfrontends/SignDocuments/package-lock.json @@ -17,6 +17,7 @@ "file-saver": "^2.0.5", "gh-pages": "^6.0.0", "mf-cra": "^0.0.5", + "moment": "^2.30.1", "parse": "^4.2.0", "pdf-lib": "^1.17.1", "print-js": "^1.6.0", @@ -15206,6 +15207,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/microfrontends/SignDocuments/package.json b/microfrontends/SignDocuments/package.json index 1eae68515..1ff601f3d 100644 --- a/microfrontends/SignDocuments/package.json +++ b/microfrontends/SignDocuments/package.json @@ -13,6 +13,7 @@ "file-saver": "^2.0.5", "gh-pages": "^6.0.0", "mf-cra": "^0.0.5", + "moment": "^2.30.1", "parse": "^4.2.0", "pdf-lib": "^1.17.1", "print-js": "^1.6.0", diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index 15b3a425b..6d4b1775b 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -40,6 +40,11 @@ function PdfFile() { const jsonCurrentUser = JSON.parse(currentUser); useEffect(() => { + // localStorage.setItem('accesstoken', 'r:6d093ee320d70354f4e92cccc537180b'); + // localStorage.setItem('baseUrl', 'https://staging-app.opensignlabs.com/api/app/'); + // localStorage.setItem('parseAppId', 'opensignstgn'); + // localStorage.setItem('Parse/opensignstgn/currentUser', '{"name":"Raktima chaurasiya","email":"raktimachaurasiya@gmail.com","phone":"5645676534","username":"raktimachaurasiya@gmail.com","emailVerified":false,"createdAt":"2024-01-10T14:40:59.326Z","updatedAt":"2024-01-15T13:31:19.044Z","ProfilePic":"","ACL":{"9MUdPyX2ae":{"read":true,"write":true}},"sessionToken":"r:6d093ee320d70354f4e92cccc537180b","objectId":"9MUdPyX2ae","className":"_User"}'); + // localStorage.setItem('_appName', 'contracts'); if (docId) { getPdfFolderDocumentList(); } else { diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 2ed4007ab..143f6504b 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -89,6 +89,7 @@ function SignYourSelf() { }); const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); const [isDontShow, setIsDontShow] = useState(false); + const [isdraggingEnable, setIsDraggingEnable] = useState(false); const divRef = useRef(null); const nodeRef = useRef(null); const [{ isOver }, drop] = useDrop({ @@ -108,6 +109,7 @@ function SignYourSelf() { id: 1, text: "signature" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragSign: !!monitor.isDragging() @@ -120,6 +122,7 @@ function SignYourSelf() { id: 2, text: "stamp" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragStamp: !!monitor.isDragging() @@ -134,7 +137,7 @@ function SignYourSelf() { id: 3, text: "drag me" }, - canDrag: false, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragSignatureSS: !!monitor.isDragging() }) @@ -147,6 +150,7 @@ function SignYourSelf() { id: 4, text: "drag me" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragStampSS: !!monitor.isDragging() }) @@ -179,6 +183,9 @@ function SignYourSelf() { if (documentId) { getDocumentDetails(true); } + if (!isMobile) { + setIsDraggingEnable(true); + } }, []); useEffect(() => { @@ -456,6 +463,9 @@ function SignYourSelf() { } else if (dragTypeValue === "initials") { setIsInitial(true); } + if (isMobile) { + setIsDraggingEnable(false); + } }; //function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url @@ -1030,6 +1040,8 @@ function SignYourSelf() { isSignYourself={true} addPositionOfSignature={addPositionOfSignature} isMailSend={false} + setIsDraggingEnable={setIsDraggingEnable} + isdraggingEnable={isdraggingEnable} /> ) : ( diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 30e814e71..5ddbb1eed 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -72,6 +72,7 @@ const TemplatePlaceholder = () => { const [isResize, setIsResize] = useState(false); const [isSigners, setIsSigners] = useState(false); const [zIndex, setZIndex] = useState(1); + const [isdraggingEnable, setIsDraggingEnable] = useState(false); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -168,7 +169,9 @@ const TemplatePlaceholder = () => { useEffect(() => { fetchTemplate(); - // eslint-disable-next-line + if (!isMobile) { + setIsDraggingEnable(true); + } }, []); useEffect(() => { @@ -454,7 +457,9 @@ const TemplatePlaceholder = () => { } setSignerPos((prev) => [...prev, placeHolderPos]); } - + if (isMobile) { + setIsDraggingEnable(false); + } setIsMailSend(false); } else { setIsReceipent(false); @@ -1183,6 +1188,8 @@ const TemplatePlaceholder = () => { handleOnBlur={handleOnBlur} title={"Roles"} initial={true} + setIsDraggingEnable={setIsDraggingEnable} + isdraggingEnable={isdraggingEnable} /> ) : ( @@ -1223,6 +1230,8 @@ const TemplatePlaceholder = () => { addPositionOfSignature={addPositionOfSignature} title={"Roles"} initial={true} + setIsDraggingEnable={setIsDraggingEnable} + isdraggingEnable={isdraggingEnable} /> diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js index 51ef9ec67..0b3757e17 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js @@ -1,29 +1,81 @@ -import React from "react"; +import React, { useRef, useState } from "react"; import { getWidgetType } from "../../utils/Utils"; function AllWidgets(props) { + const [backgroundColor, setBackgroundColor] = useState(""); + const timeoutRef = useRef(null); + const touchStartTimestamp = useRef(0); + const [selectWidgetType, setSelectWidgetType] = useState(""); + + const handleTouchStart = (type) => { + // Set a timeout for the long press event + touchStartTimestamp.current = Date.now(); + + // Set a timeout for the long press event + timeoutRef.current = setTimeout(() => { + // Check if the touch is still ongoing after the long press duration + if (Date.now() - touchStartTimestamp.current >= 1000) { + setBackgroundColor("lightblue"); // Change the color after the long press + setSelectWidgetType(type); + props.setIsDraggingEnable(true); + if ("vibrate" in navigator) { + // Vibrate for 200 milliseconds + navigator.vibrate(200); + } + } + }, 1000); // Adjust the duration as needed + }; + + const handleTouchMove = () => { + // If the touch moves (indicating a drag), cancel the long press effect + clearTimeout(timeoutRef.current); + }; + + const handleTouchEnd = () => { + // Clear the timeout when the touch ends before the long press duration + setTimeout(() => { + props.setIsDraggingEnable(false); + setBackgroundColor(""); // Change the color after the long press + setSelectWidgetType(""); + }, 1000); + + clearTimeout(timeoutRef.current); + }; return props.updateWidgets.map((item, ind) => { return (
+ onClick={(e) => { props.addPositionOfSignature && - props.addPositionOfSignature("onclick", item) - } + props.addPositionOfSignature("onclick", item); + }} + className="draggable" ref={(element) => { - if (!props.isMobile) { - item.ref(element); - if (element) { - if (props?.signRef) { - props.signRef.current = element; - } + // if (!props.isMobile) { + item.ref(element); + if (element) { + if (props?.signRef) { + props.signRef.current = element; } } + // } }} onMouseMove={props?.handleDivClick} - onMouseDown={props?.handleMouseLeave} + onMouseDown={() => { + props?.handleMouseLeave(); + }} > - {item.ref && getWidgetType(item, props?.marginLeft)} + {item.ref && props.isMobile + ? getWidgetType( + item, + props?.marginLeft, + handleTouchStart, + handleTouchEnd, + handleTouchMove, + backgroundColor, + selectWidgetType + ) + : getWidgetType(item)}
); diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index 8178272ea..048dffcaa 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -1,12 +1,49 @@ -import React, { useState } from "react"; +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 PlaceholderType from "./placeholderType"; +import moment from "moment"; +import "../LegaDrive/LegaDrive.css"; function Placeholder(props) { const [isDraggingEnabled, setDraggingEnabled] = useState(true); + const [isShowDateFormat, setIsShowDateFormat] = useState(false); + const [selectDate, setSelectDate] = useState(); + const [dateFormat, setDateFormat] = useState([]); + const dateFormatArr = ["L", "l", "LL", "ll", "LLL", "lll", "llll"]; + + const changeDateFormat = () => { + const updateDate = []; + dateFormatArr.map((data) => { + const date = new Date(selectDate); + const milliseconds = date.getTime(); + const newDate = moment(milliseconds).format(data); + updateDate.push(newDate); + }); + setDateFormat(updateDate); + }; + useEffect(() => { + if (selectDate) { + changeDateFormat(); + } + }, [selectDate]); + //handle to close drop down menu onclick screen + useEffect(() => { + const closeMenuOnOutsideClick = (e) => { + if (isShowDateFormat && !e.target.closest("#menu-container")) { + setIsShowDateFormat(!isShowDateFormat); + } + }; + + document.addEventListener("click", closeMenuOnOutsideClick); + + return () => { + // Cleanup the event listener when the component unmounts + document.removeEventListener("click", closeMenuOnOutsideClick); + }; + }, [isShowDateFormat]); //onclick placeholder function to open signature pad const handlePlaceholderClick = () => { @@ -122,7 +159,59 @@ function Placeholder(props) { > )} + {props.pos.type === "date" && selectDate && ( + + )} { @@ -342,6 +431,8 @@ function Placeholder(props) { setDraggingEnabled={setDraggingEnabled} pdfDetails={props?.pdfDetails && props?.pdfDetails[0]} isNeedSign={props.isNeedSign} + setSelectDate={setSelectDate} + selectDate={selectDate} /> ) : ( @@ -363,6 +454,8 @@ function Placeholder(props) { setDraggingEnabled={setDraggingEnabled} pdfDetails={props?.pdfDetails && props?.pdfDetails[0]} isNeedSign={props.isNeedSign} + setSelectDate={setSelectDate} + selectDate={selectDate} /> )} diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index 2207253f1..fd6d56e39 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -290,25 +290,30 @@ function PlaceholderType(props) { ); case "date": return ( - - onChangeInput( - e.target.value, - props.pos.key, - props.xyPostion, - props.index, - props.setXyPostion, - props.data && props.data.signerObjId, - false - ) - } - /> +
+ { + props.setSelectDate(e.target.value); + onChangeInput( + e.target.value, + props.pos.key, + props.xyPostion, + props.index, + props.setXyPostion, + props.data && props.data.signerObjId, + false + ); + }} + /> + {/*
{props.selectDate}
*/} +
); case "image": diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index ca7e0cd57..a8d7572cb 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -4,6 +4,7 @@ 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, @@ -37,12 +38,16 @@ function FieldsComponent({ signerPos, handleRoleChange, handleOnBlur, - title + title, + setIsDraggingEnable, + isdraggingEnable }) { + const temp = ["1", "2", "3", "4", "5", "6", "7", "8", "0", "23"]; const [isSignersModal, setIsSignersModal] = useState(false); - + const [initialTouchX, setInitialTouchX] = useState(0); const [{ isDragDropdown }, dropdown] = useDrag({ type: "BOX", + canDrag: isdraggingEnable, item: { type: "BOX", id: 5, @@ -54,6 +59,7 @@ function FieldsComponent({ }); const [{ isDragCheck }, checkbox] = useDrag({ type: "BOX", + canDrag: isdraggingEnable, item: { type: "BOX", id: 6, @@ -65,6 +71,7 @@ function FieldsComponent({ }); const [{ isDragText }, text] = useDrag({ type: "BOX", + canDrag: isdraggingEnable, item: { type: "BOX", id: 7, @@ -76,6 +83,7 @@ function FieldsComponent({ }); const [{ isDragInitial }, initials] = useDrag({ type: "BOX", + canDrag: isdraggingEnable, item: { type: "BOX", id: 8, @@ -87,6 +95,7 @@ function FieldsComponent({ }); const [{ isDragName }, name] = useDrag({ type: "BOX", + canDrag: isdraggingEnable, item: { type: "BOX", id: 9, @@ -98,6 +107,7 @@ function FieldsComponent({ }); const [{ isDragCompany }, company] = useDrag({ type: "BOX", + canDrag: isdraggingEnable, item: { type: "BOX", id: 10, @@ -109,6 +119,7 @@ function FieldsComponent({ }); const [{ isDragJobtitle }, jobTitle] = useDrag({ type: "BOX", + canDrag: isdraggingEnable, item: { type: "BOX", id: 11, @@ -120,6 +131,7 @@ function FieldsComponent({ }); const [{ isDragDate }, date] = useDrag({ type: "BOX", + canDrag: isdraggingEnable, item: { type: "BOX", id: 12, @@ -131,6 +143,7 @@ function FieldsComponent({ }); const [{ isDragImage }, image] = useDrag({ type: "BOX", + canDrag: isdraggingEnable, item: { type: "BOX", id: 13, @@ -142,6 +155,7 @@ function FieldsComponent({ }); const [{ isDragEmail }, email] = useDrag({ type: "BOX", + canDrag: isdraggingEnable, item: { type: "BOX", id: 14, @@ -199,12 +213,6 @@ function FieldsComponent({ const filterWidgets = widget.filter((data) => data.type !== "dropdown"); const updateWidgets = isSignYourself ? filterWidgets : widget; - const handleScroll = (scrollOffset) => { - if (scrollContainerRef.current) { - scrollContainerRef.current.scrollLeft += scrollOffset; - } - }; - return ( <> {isMobile ? ( @@ -304,24 +312,41 @@ function FieldsComponent({ borderTop: `2px solid ${themeColor()}` }} > -
- -
+
+ {/* {temp.map((data,ind) => { + return
{data}
; + })} */} + +
+ ) diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 2ea336e36..167460610 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -86,6 +86,7 @@ function PlaceHolderSign() { const [showDropdown, setShowDropdown] = useState(false); const [isCheckboxRequired, setIsCheckboxRequired] = useState(false); const [selectRequiredType, setSelectRequiredType] = useState("Optional"); + const [isdraggingEnable, setIsDraggingEnable] = useState(false); const color = [ "#93a3db", "#e6c3db", @@ -116,6 +117,7 @@ function PlaceHolderSign() { id: 1, text: "signature" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragSign: !!monitor.isDragging() }) @@ -127,6 +129,7 @@ function PlaceHolderSign() { id: 2, text: "stamp" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragStamp: !!monitor.isDragging() }) @@ -138,6 +141,7 @@ function PlaceHolderSign() { id: 3, text: "signature" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragSignatureSS: !!monitor.isDragging() }) @@ -149,6 +153,7 @@ function PlaceHolderSign() { id: 4, text: "stamp" }, + canDrag: isdraggingEnable, collect: (monitor) => ({ isDragStampSS: !!monitor.isDragging() }) @@ -176,6 +181,9 @@ function PlaceHolderSign() { if (documentId) { getDocumentDetails(); } + if (!isMobile) { + setIsDraggingEnable(true); + } }, []); useEffect(() => { @@ -458,6 +466,9 @@ function PlaceHolderSign() { setIsCheckboxRequired(true); setSignKey(key); } + if (isMobile) { + setIsDraggingEnable(false); + } } } }; @@ -1403,6 +1414,8 @@ function PlaceHolderSign() { setUniqueId={setUniqueId} setRoleName={setRoleName} initial={true} + setIsDraggingEnable={setIsDraggingEnable} + isdraggingEnable={isdraggingEnable} /> ) : ( @@ -1438,6 +1451,8 @@ function PlaceHolderSign() { isSignYourself={false} addPositionOfSignature={addPositionOfSignature} initial={true} + setIsDraggingEnable={setIsDraggingEnable} + isdraggingEnable={isdraggingEnable} /> diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 36ec891c5..a173cf956 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -123,6 +123,10 @@ height: 14px; } +.dropdown-date-menu { + min-width: 7rem; +} + .mailBtn { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); @@ -131,7 +135,7 @@ border: none !important; color: white !important; } - + .mailBtn:hover { box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); } diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index d8b5a979c..193752e34 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -1,6 +1,7 @@ import axios from "axios"; import { rgb } from "pdf-lib"; import { themeColor } from "./ThemeColor/backColor"; + export const isMobile = window.innerWidth < 767; //calculate width and height @@ -223,15 +224,28 @@ export const widgets = [ } ]; -export const getWidgetType = (item, marginLeft) => { +export const getWidgetType = ( + item, + marginLeft, + handleTouchStart, + handleTouchEnd, + handleTouchMove, + backgroundColor, + selectWidgetType +) => { return ( <>
handleTouchStart && handleTouchStart(item.type)} + onTouchEnd={handleTouchEnd && handleTouchEnd} + onTouchMove={handleTouchMove && handleTouchMove} className="signatureBtn" style={{ boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)", - marginLeft: marginLeft && `${marginLeft}px` + marginLeft: marginLeft && `${marginLeft}px`, + background: + selectWidgetType === item.type && backgroundColor && backgroundColor }} >