From b94e0fa0529b25a6d7e98d1b013bad5ac0fc4fde Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Tue, 12 Mar 2024 16:50:50 +0530
Subject: [PATCH] refactor: change order of minimum & maximum input in checkbox
 setting

---
 .../components/pdf/DropdownWidgetOption.js    |  61 ++++---
 .../src/components/pdf/Placeholder.js         | 165 +++++++++++-------
 .../src/components/pdf/PlaceholderType.js     |  14 +-
 3 files changed, 141 insertions(+), 99 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
index 19d616dc9..1d8a075cf 100644
--- a/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
+++ b/apps/OpenSign/src/components/pdf/DropdownWidgetOption.js
@@ -178,36 +178,6 @@ function DropdownWidgetOption(props) {
               className="drodown-input"
             />
 
-            {props.type === "checkbox" && !props.isSignYourself && (
-              <>
-                <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                  Minimun check
-                </label>
-                <input
-                  required
-                  defaultValue={0}
-                  value={minCount}
-                  onChange={(e) => {
-                    const count = handleSetMinMax(e);
-                    setMinCount(count);
-                  }}
-                  className="drodown-input"
-                />
-                <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                  Maximum check
-                </label>
-                <input
-                  required
-                  defaultValue={0}
-                  value={maxCount}
-                  onChange={(e) => {
-                    const count = handleSetMinMax(e);
-                    setMaxCount(count);
-                  }}
-                  className="drodown-input"
-                />
-              </>
-            )}
             <label
               style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
             >
@@ -274,7 +244,6 @@ function DropdownWidgetOption(props) {
                   ></i>
                 </div>
               ))}
-
               <i
                 onClick={handleAddInput}
                 style={{
@@ -285,6 +254,36 @@ function DropdownWidgetOption(props) {
                 }}
                 className="fa-solid fa-square-plus"
               ></i>
+              {props.type === "checkbox" && !props.isSignYourself && (
+                <>
+                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
+                    Minimun check
+                  </label>
+                  <input
+                    required
+                    defaultValue={0}
+                    value={minCount}
+                    onChange={(e) => {
+                      const count = handleSetMinMax(e);
+                      setMinCount(count);
+                    }}
+                    className="drodown-input"
+                  />
+                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
+                    Maximum check
+                  </label>
+                  <input
+                    required
+                    defaultValue={0}
+                    value={maxCount}
+                    onChange={(e) => {
+                      const count = handleSetMinMax(e);
+                      setMaxCount(count);
+                    }}
+                    className="drodown-input"
+                  />
+                </>
+              )}
             </div>
             {["dropdown", "radio"].includes(props.type) && (
               <>
diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js
index b5b524059..08e121c3e 100644
--- a/apps/OpenSign/src/components/pdf/Placeholder.js
+++ b/apps/OpenSign/src/components/pdf/Placeholder.js
@@ -7,14 +7,78 @@ import PlaceholderType from "./PlaceholderType";
 import moment from "moment";
 import "../../styles/opensigndrive.css";
 
+const selectFormat = (data) => {
+  switch (data) {
+    case "L":
+      return "MM/dd/yyyy";
+    case "DD-MM-YYYY":
+      return "dd-MM-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";
+    default:
+      return "MM/dd/yyyy";
+  }
+};
+
+const changeDateToMomentFormat = (format) => {
+  switch (format) {
+    case "MM/dd/yyyy":
+      return "L";
+    case "dd-MM-yyyy":
+      return "DD-MM-YYYY";
+    case "dd/MM/yyyy":
+      return "DD/MM/YYYY";
+    case "MMMM dd, yyyy":
+      return "LL";
+    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";
+    default:
+      return "L";
+  }
+};
+
+const getDefaultdate = (selectedDate) =>
+  selectedDate ? new Date(selectedDate) : new Date();
+const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
+
 function Placeholder(props) {
   const [isDraggingEnabled, setDraggingEnabled] = useState(true);
   const [isShowDateFormat, setIsShowDateFormat] = useState(false);
-  const [selectDate, setSelectDate] = useState();
+  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 [dateFormat, setDateFormat] = useState([]);
   const [saveDateFormat, setSaveDateFormat] = useState("");
-
-  const [startDate, setStartDate] = useState();
+  const [startDate, setStartDate] = useState(
+    getDefaultdate(props?.pos?.options?.response)
+  );
   const dateFormatArr = [
     "L",
     "DD-MM-YYYY",
@@ -27,71 +91,41 @@ function Placeholder(props) {
     "DD MMMM, YYYY"
   ];
 
-  const selectFormat = (data) => {
-    switch (data) {
-      case "L":
-        return "MM/dd/yyyy";
-      case "DD-MM-YYYY":
-        return "dd-MM-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";
-      default:
-        return "dd/MM/yyyy";
-    }
-  };
+  // console.log('props.pos',props.pos?.options?.validation?.format)
 
   //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(() => {
-    //set default current date and default format MM/dd/yyyy
-    // if (props.isSignYourself) {
-    //   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);
-    // } else {
-    const defaultRes = props?.pos?.options?.response;
+  // 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 defaultFormat = props.pos?.options?.validation?.format;
-    const updateDate = defaultRes
-      ? new Date(props?.pos?.options?.response)
-      : new Date();
-    const dateFormat = defaultFormat ? defaultFormat : "MM/DD/YYYY";
-    const milliseconds = updateDate.getTime();
-    const newDate = moment(milliseconds).format(dateFormat);
-    const dateObj = {
-      date: newDate,
-      format: props.pos?.options?.validation?.format
-        ? props.pos?.options?.validation?.format
-        : "MM/dd/YYYY"
-    };
-    setSelectDate(dateObj);
-    setStartDate(updateDate);
+  //   // 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
+  // }, []);
 
-    // }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.index]);
-
-  //function for add selected date and format in selectFormat
+  //function change format array list with selected date and format
   const changeDateFormat = () => {
+    // console.log("selected date", selectDate);
     const updateDate = [];
     dateFormatArr.map((data) => {
       let date;
@@ -102,17 +136,24 @@ function Placeholder(props) {
         date = new Date(selectDate?.date);
       }
       const milliseconds = date.getTime();
+      // console.log('data',data)
       const newDate = moment(milliseconds).format(data);
+      // console.log('new date',newDate)
       const dateObj = {
         date: newDate,
         format: selectFormat(data)
       };
+      // console.log('dateobj',dateObj)
       updateDate.push(dateObj);
     });
+    // console.log('updated format',updateDate)
     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
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js
index 5dc0452d3..7aa433107 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderType.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js
@@ -8,7 +8,6 @@ import RegexParser from "regex-parser";
 function PlaceholderType(props) {
   const type = props?.pos?.type;
   const [selectOption, setSelectOption] = useState("");
-
   const [validatePlaceholder, setValidatePlaceholder] = useState("");
   const inputRef = useRef(null);
   const [textValue, setTextValue] = useState();
@@ -129,11 +128,13 @@ 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) {
+      if (props?.selectDate) {
         let updateDate;
-        if (props.selectDate.format === "dd-MM-yyyy") {
+        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}`);
         } else {
@@ -149,8 +150,9 @@ function PlaceholderType(props) {
             ? props.selectDate?.format
             : props.pos?.options?.validation?.format
               ? props.pos?.options?.validation?.format
-              : "MM/dd/YYYY"
+              : "MM/dd/yyyy"
         };
+        console.log("savedateformat selectdate", dateObj);
         props.setSelectDate(dateObj);
         onChangeInput(
           props.saveDateFormat,
@@ -164,7 +166,7 @@ function PlaceholderType(props) {
             ? props.selectDate.format
             : props.pos?.options?.validation?.format
               ? props.pos?.options?.validation?.format
-              : "MM/dd/YYYY"
+              : "MM/dd/yyyy"
         );
       }
     }
@@ -674,7 +676,7 @@ function PlaceholderType(props) {
                 ? props.selectDate?.format
                 : props.pos?.options?.validation?.format
                   ? props.pos?.options?.validation?.format
-                  : "MM/dd/YYYY"
+                  : "MM/dd/yyyy"
             }
           />
         </div>