WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-21 15:12:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: default date issue and remove commented code, unnecessary using useEffect

Browse Source
This commit is contained in:
RaktimaNXG
2024-03-13 14:30:25 +05:30
parent c04fd80a38
commit 73b2ba6abd
4 changed files with 58 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/pdf/Placeholder.js
+40 -50
View File
@@ -5,6 +5,7 @@ import { Rnd } from "react-rnd";
import {
defaultWidthHeight,
isMobile,
onChangeInput,
textInputWidget,
textWidget
} from "../../constant/Utils";
@@ -66,9 +67,7 @@ const changeDateToMomentFormat = (format) => {
}
};
// const getDefaultdate = (selectedDate) => {
// return selectedDate ? new Date(selectedDate) : new Date();
// };
//function to get default date
const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
let date;
if (format && format === "dd-MM-yyyy") {
@@ -83,17 +82,12 @@ const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
const value = date;
return value;
};
//function to get default format
const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
function Placeholder(props) {
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
const [isShowDateFormat, setIsShowDateFormat] = useState(false);
// const [selectDate, setSelectDate] = useState({
// date: moment(
// getDefaultdate(props?.pos?.options?.response).getTime()
// ).format(changeDateToMomentFormat(props.pos?.options?.validation?.format)),
// format: getDefaultFormat(props.pos?.options?.validation?.format)
// });
const [selectDate, setSelectDate] = useState({
date: moment(
getDefaultdate(
@@ -104,10 +98,6 @@ function Placeholder(props) {
format: getDefaultFormat(props.pos?.options?.validation?.format)
});
const [dateFormat, setDateFormat] = useState([]);
const [saveDateFormat, setSaveDateFormat] = useState("");
// const [startDate, setStartDate] = useState(
// getDefaultdate(props?.pos?.options?.response)
// );
const [startDate, setStartDate] = useState(
getDefaultdate(
props?.pos?.options?.response,
@@ -126,36 +116,6 @@ function Placeholder(props) {
"DD MMMM, YYYY"
];
//useEffect for to set date and date format for all flow (signyour-self, request-sign,placeholder,template)
//checking if already have data and set else set new date
// useEffect(() => {
// console.log('go here')
// //set default current date and default format MM/dd/yyyy
// const defaultFormat = props.pos?.options?.validation?.format;
// const updateDate = props?.pos?.options?.response
// ? new Date(props?.pos?.options?.response)
// : new Date();
// //DD-mm-YYYY
// const dateFormat = defaultFormat && defaultFormat;
// // const isMomentType = dateFormat && dateFormat === "MM/dd/YYYY";
// // const selectMomentFormat = isMomentType ? "MM/DD/YYYY" : dateFormat;
// const selectMomentFormat = changeDateToMomentFormat(dateFormat);
// // const isFormatType = dateFormat && dateFormat === "MM/dd/YYYY";
// const getFormat = dateFormat || "MM/dd/yyyy";
// const milliseconds = updateDate.getTime();
// const newDate = moment(milliseconds).format(selectMomentFormat);
// // console.log('new date',newDate)
// const dateObj = {
// date: newDate,
// format: getFormat
// };
// console.log("dateobj selectdate useEffect", dateObj);
// setSelectDate(dateObj);
// setStartDate(updateDate);
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, []);
//function change format array list with selected date and format
const changeDateFormat = () => {
const updateDate = [];
@@ -178,15 +138,14 @@ function Placeholder(props) {
setDateFormat(updateDate);
};
// console.log("selected date", selectDate);
useEffect(() => {
if (props.isPlaceholder || props.isSignYourself) {
// console.log("selected date useEffect", selectDate);
selectDate && changeDateFormat();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectDate]);
//handle to close drop down menu onclick screen
//it detect outside click of date dropdown menu
useEffect(() => {
const closeMenuOnOutsideClick = (e) => {
if (isShowDateFormat && !e.target.closest("#menu-container")) {
@@ -271,6 +230,7 @@ function Placeholder(props) {
}
};
//function to set state value of onclick on widget's setting icon
const handleWidgetsOnclick = () => {
if (props.pos.type === "radio") {
props.setIsRadio(true);
@@ -289,6 +249,7 @@ function Placeholder(props) {
props.setWidgetType(props.pos.type);
props.setCurrWidgetsDetails(props.pos);
};
//function ro set state value of onclick on widget's copy icon
const handleCopyPlaceholder = (e) => {
if (props.data && props?.pos?.type !== textWidget) {
props.setSignerObjId(props?.data?.signerObjId);
@@ -303,6 +264,35 @@ function Placeholder(props) {
props.setSignKey(props.pos.key);
};
//function to save date and format on local array onchange date and onclick format
const handleSaveDate = (data, isDateChange) => {
let updateDate = data.date;
//check if date change by user
if (isDateChange) {
//`changeDateToMomentFormat` is used to convert date as per required to moment package
updateDate = moment(data.date).format(
changeDateToMomentFormat(data.format)
);
}
//using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
//`getDefaultdate` is used to convert update date in new Date() format
const date = moment(
getDefaultdate(updateDate, data?.format).getTime()
).format(changeDateToMomentFormat(data?.format));
//`onChangeInput` is used to save data related to date in a placeholder field
onChangeInput(
date,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
data?.format
);
setSelectDate({ date: date, format: data?.format });
};
const PlaceholderIcon = () => {
return (
props.isShowBorder && (
@@ -439,10 +429,12 @@ function Placeholder(props) {
e.stopPropagation();
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(data);
handleSaveDate(data);
}}
onClick={() => {
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(data);
handleSaveDate(data);
}}
className="dropdown-item itemColor"
style={{ fontSize: "12px" }}
@@ -695,11 +687,10 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
setSaveDateFormat={setSaveDateFormat}
saveDateFormat={saveDateFormat}
setValidateAlert={props.setValidateAlert}
setStartDate={setStartDate}
startDate={startDate}
handleSaveDate={handleSaveDate}
/>
</div>
) : (
@@ -722,11 +713,10 @@ function Placeholder(props) {
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
setSaveDateFormat={setSaveDateFormat}
saveDateFormat={saveDateFormat}
setValidateAlert={props.setValidateAlert}
setStartDate={setStartDate}
startDate={startDate}
handleSaveDate={handleSaveDate}
/>
</>
)}
apps/OpenSign/src/components/pdf/PlaceholderType.js
+11 -57
View File
@@ -117,7 +117,6 @@ function PlaceholderType(props) {
? props.pos?.options?.defaultValue
: ""
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@@ -135,54 +134,7 @@ function PlaceholderType(props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.pos?.options?.defaultValue]);
//useEffect to save date and format on local array
useEffect(() => {
if (type && type === "date") {
if (props?.selectDate) {
// let updateDate;
// if (props?.selectDate.format === "dd-MM-yyyy") {
// // console.log('saveDateformat',props.saveDateFormat)
// const [day, month, year] = props.saveDateFormat.split("-");
// updateDate = new Date(`${year}-${month}-${day}`);
// console.log('update',updateDate)
// } else {
// if (props?.saveDateFormat) {
// updateDate = new Date(props.saveDateFormat);
// }
// }
// const updateDate = new Date(props.saveDateFormat);
// props.setStartDate(updateDate);
// const dateObj = {
// date: props.saveDateFormat,
// format: props.selectDate
// ? props.selectDate?.format
// : props.pos?.options?.validation?.format
// ? props.pos?.options?.validation?.format
// : "MM/dd/yyyy"
// };
// props.setSelectDate(dateObj);
onChangeInput(
props.saveDateFormat,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.Id,
false,
props.selectDate?.format
? props.selectDate.format
: props.pos?.options?.validation?.format
? props.pos?.options?.validation?.format
: "MM/dd/yyyy"
);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.saveDateFormat]);
const dateValue = (value) => {
props.setSaveDateFormat(value);
return <span>{value}</span>;
};
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
@@ -325,6 +277,16 @@ function PlaceholderType(props) {
);
};
//function to set onchange date
const handleOnDateChange = (date) => {
props.setStartDate(date);
const isDateChange = true;
const dateObj = {
date: date,
format: props.selectDate.format
};
props.handleSaveDate(dateObj, isDateChange);
};
switch (type) {
case "signature":
return props.pos.SignUrl ? (
@@ -670,18 +632,10 @@ function PlaceholderType(props) {
: props.pos.options?.response &&
new Date(props.pos.options.response)
}
onChange={(date) => {
props.setStartDate(date);
}}
onChange={(date) => handleOnDateChange(date)}
popperPlacement="top-end"
customInput={<ExampleCustomInput />}
dateFormat={
// props.pos?.options?.validation?.format
// ? props.pos?.options?.validation?.format
// : props.selectDate
// ? props.selectDate?.format
// : "MM/dd/YYYY"
props.selectDate
? props.selectDate?.format
: props.pos?.options?.validation?.format
apps/OpenSign/src/constant/Utils.js
+5 -1
View File
@@ -249,7 +249,11 @@ export const addWidgetOptions = (type) => {
case "job title":
return { ...defaultOpt, validation: { type: "text", pattern: "" } };
case "date":
return { ...defaultOpt, response: getDate() };
return {
...defaultOpt,
response: getDate(),
validation: { format: "MM/dd/yyyy", type: "date-format" }
};
case "image":
return defaultOpt;
case "email":
apps/OpenSign/src/pages/SignyourselfPdf.js
+2 -1
View File
@@ -381,7 +381,8 @@ function SignYourSelf() {
case "date":
return {
name: "date",
defaultValue: getDate()
response: getDate(),
validation: { format: "MM/dd/yyyy", type: "date-format" }
};
case "image":
return {