HCMPRE 154 (#1186)

* date validation fix * Update date logic * FIX --------- Co-authored-by: nabeelmd-eGov <[email protected]>
egovernments · Jul 30, 2024 · de09876 · de09876
1 parent c69f8b4
commit de09876
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 95 deletions.
diff --git a/micro-ui/web/micro-ui-internals/example/package.json b/micro-ui/web/micro-ui-internals/example/package.json
@@ -12,7 +12,7 @@
     "@egovernments/digit-ui-libraries": "1.8.2-beta.5",
     "@egovernments/digit-ui-module-workbench": "1.0.2-beta.3",
     "@egovernments/digit-ui-components": "0.0.2-beta.19",
-    "@egovernments/digit-ui-module-core": "1.8.2-beta.8",
+    "@egovernments/digit-ui-module-core": "1.8.2-beta.9",
     "@egovernments/digit-ui-module-utilities": "1.0.1-beta.30",
     "@egovernments/digit-ui-react-components": "1.8.2-beta.11",
     "@egovernments/digit-ui-module-hcmworkbench":"0.0.38",

diff --git a/micro-ui/web/micro-ui-internals/example/public/index.html b/micro-ui/web/micro-ui-internals/example/public/index.html
@@ -14,7 +14,7 @@
     rel="stylesheet"
     href="https://unpkg.com/@egovernments/[email protected]/dist/index.css"
   /> -->
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].6/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].7/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />

diff --git a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss
@@ -550,3 +550,6 @@ tbody {
     min-width: 8.6rem;
   }
 }
+.digit-card-component.bannerCard.removeBottomMargin.languageSelection{
+  width: unset;
+}
diff --git a/...b/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryWithDate.js b/...b/micro-ui-internals/packages/modules/campaign-manager/src/components/BoundaryWithDate.js
@@ -28,6 +28,9 @@ const BoundaryWithDate = ({ project, props, onSelect, dateReducerDispatch, canDe
   }, [project]);
 
   const handleDateChange = ({ date, endDate = false, cycleDate = false, cycleIndex }) => {
+    if (typeof date === "undefined") {
+      return null;
+    }
     if (!endDate) {
       dateReducerDispatch({
         type: "START_DATE",
@@ -44,6 +47,9 @@ const BoundaryWithDate = ({ project, props, onSelect, dateReducerDispatch, canDe
   };
 
   const handleCycleDateChange = ({ date, endDate = false, cycleIndex }) => {
+    if (typeof date === "undefined") {
+      return null;
+    }
     if (!endDate) {
       dateReducerDispatch({
         type: "CYCLE_START_DATE",
@@ -54,7 +60,7 @@ const BoundaryWithDate = ({ project, props, onSelect, dateReducerDispatch, canDe
       });
     } else {
       dateReducerDispatch({
-        type: "CYCYLE_END_DATE",
+        type: "CYCLE_END_DATE",
         date: date,
         item: project,
         cycleIndex: cycleIndex,
@@ -96,7 +102,7 @@ const BoundaryWithDate = ({ project, props, onSelect, dateReducerDispatch, canDe
             }
             onChange={(d) => {
               handleDateChange({
-                date: d,
+                date: d?.target?.value,
               });
             }}
           />
@@ -116,7 +122,7 @@ const BoundaryWithDate = ({ project, props, onSelect, dateReducerDispatch, canDe
             }}
             onChange={(d) => {
               handleDateChange({
-                date: d,
+                date: d?.target?.value,
                 endDate: true,
               });
             }}
@@ -138,26 +144,23 @@ const BoundaryWithDate = ({ project, props, onSelect, dateReducerDispatch, canDe
                   nonEditable={item?.startDate?.length > 0 && today > item?.startDate ? true : false}
                   value={item?.startDate}
                   placeholder={t("HCM_START_DATE")}
-                  populators={
-                    today >= item?.startDate
-                      ? {}
-                      : {
-                          validation: {
-                            min:
-                              index > 0
-                                ? cycleDates?.find((j) => j.cycleIndex == index)?.endDate &&
-                                  new Date(new Date(cycleDates?.find((j) => j.cycleIndex == index)?.endDate)?.getTime() + 86400000)
-                                    ?.toISOString()
-                                    ?.split("T")?.[0]
-                                : startDate,
-                            max: endDate,
-                          },
-                        }
-                  }
+                  populators={{
+                    validation: {
+                      min:
+                        index > 0 && !isNaN(new Date(cycleDates?.find((j) => j.cycleIndex == index)?.endDate)?.getTime())
+                          ? new Date(new Date(cycleDates?.find((j) => j.cycleIndex == index)?.endDate)?.getTime() + ONE_DAY_IN_MS)
+                              ?.toISOString()
+                              ?.split("T")?.[0]
+                          : today >= startDate
+                          ? today
+                          : startDate,
+                      max: endDate,
+                    },
+                  }}
                   onChange={(d) => {
                     // setStartValidation(true);
                     handleCycleDateChange({
-                      date: d,
+                      date: d?.target?.value,
                       cycleIndex: item?.cycleIndex,
                     });
                   }}
@@ -170,17 +173,19 @@ const BoundaryWithDate = ({ project, props, onSelect, dateReducerDispatch, canDe
                   placeholder={t("HCM_END_DATE")}
                   populators={{
                     validation: {
-                      min: cycleDates?.find((j) => j.cycleIndex == index + 1)?.startDate
-                        ? new Date(new Date(cycleDates?.find((j) => j.cycleIndex == index + 1)?.startDate)?.getTime() + 86400000)
+                      min: !isNaN(new Date(cycleDates?.find((j) => j.cycleIndex == index + 1)?.startDate)?.getTime())
+                        ? new Date(new Date(cycleDates?.find((j) => j.cycleIndex == index + 1)?.startDate)?.getTime() + ONE_DAY_IN_MS)
                             ?.toISOString()
                             ?.split("T")?.[0]
-                        : null,
+                        : today >= startDate
+                        ? today
+                        : startDate,
                       max: endDate,
                     },
                   }}
                   onChange={(d) => {
                     handleCycleDateChange({
-                      date: d,
+                      date: d?.target?.value,
                       endDate: true,
                       cycleIndex: item?.cycleIndex,
                     });

diff --git a/...b/micro-ui-internals/packages/modules/campaign-manager/src/components/DateWithBoundary.js b/...b/micro-ui-internals/packages/modules/campaign-manager/src/components/DateWithBoundary.js
@@ -62,7 +62,7 @@ const reducer = (state, action) => {
         return item;
       });
       break;
-    case "CYCYLE_END_DATE":
+    case "CYCLE_END_DATE":
       const cycleEndRemap = action?.cycles?.map((item, index) => {
         if (item?.id === action?.cycleIndex) {
           return {

diff --git a/...o-ui-internals/packages/modules/campaign-manager/src/pages/employee/DateAndCycleUpdate.js b/...o-ui-internals/packages/modules/campaign-manager/src/pages/employee/DateAndCycleUpdate.js
@@ -30,7 +30,7 @@ const reducer = (state, action) => {
         if (item?.id === action?.cycleIndex) {
           return {
             ...item,
-            startDate: Digit.Utils.pt.convertDateToEpoch(action?.date, "dayStart"),
+            startDate: Digit.Utils.pt.convertDateToEpoch(typeof action?.date === "string" ? action?.date : null, "dayStart"),
           };
         }
         return item;
@@ -46,7 +46,7 @@ const reducer = (state, action) => {
         },
       };
       break;
-    case "CYCYLE_END_DATE":
+    case "CYCLE_END_DATE":
       const cycleEndRemap = action?.cycles?.map((item, index) => {
         if (item?.id === action?.cycleIndex) {
           return {
@@ -116,14 +116,16 @@ const DateAndCycleUpdate = ({ onSelect, formData, ...props }) => {
 
   useEffect(() => {
     if (dateReducer) {
-      setStartDate(Digit.Utils.date.getDate(dateReducer?.startDate));
-      setEndDate(Digit.Utils.date.getDate(dateReducer?.endDate));
+      setStartDate(dateReducer?.startDate ? Digit.Utils.date.getDate(dateReducer?.startDate) : "");
+      setEndDate(dateReducer?.endDate ? Digit.Utils.date.getDate(dateReducer?.endDate) : "");
       if (dateReducer?.additionalDetails?.projectType?.cycles?.length > 0) {
-        const cycleDateData = dateReducer?.additionalDetails?.projectType?.cycles?.map((cycle) => ({
-          cycleIndex: cycle.id,
-          startDate: Digit.Utils.date.getDate(cycle.startDate),
-          endDate: Digit.Utils.date.getDate(cycle.endDate),
-        }));
+        const cycleDateData = dateReducer?.additionalDetails?.projectType?.cycles?.map((cycle) => {
+          return {
+            cycleIndex: cycle.id,
+            startDate: cycle.startDate ? Digit.Utils.date.getDate(cycle.startDate) : "",
+            endDate: cycle.endDate ? Digit.Utils.date.getDate(cycle.endDate) : "",
+          };
+        });
         setCycleDates(cycleDateData);
       }
     }
@@ -139,7 +141,7 @@ const DateAndCycleUpdate = ({ onSelect, formData, ...props }) => {
   }, [isLoading, projectData]);
 
   const handleDateChange = ({ date, endDate = false, cycleDate = false, cycleIndex }) => {
-    if (!date || date <= today) {
+    if (typeof date === "undefined") {
       return null;
     }
     if (!endDate) {
@@ -158,7 +160,7 @@ const DateAndCycleUpdate = ({ onSelect, formData, ...props }) => {
   };
 
   const handleCycleDateChange = ({ date, endDate = false, cycleIndex }) => {
-    if (!date || date <= today) {
+    if (typeof date === "undefined") {
       return null;
     }
     if (!endDate) {
@@ -171,7 +173,7 @@ const DateAndCycleUpdate = ({ onSelect, formData, ...props }) => {
       });
     } else {
       dateReducerDispatch({
-        type: "CYCYLE_END_DATE",
+        type: "CYCLE_END_DATE",
         date: date,
         item: dateReducer,
         cycleIndex: cycleIndex,
@@ -182,17 +184,18 @@ const DateAndCycleUpdate = ({ onSelect, formData, ...props }) => {
   return (
     <Card className={"boundary-with-container"}>
       <Header className="header">{t(`UPDATE_DATE_AND_CYCLE_HEADER`)}</Header>
-      <LabelFieldPair style={{ display: "grid", gridTemplateColumns: "13rem 2fr", alignItems: "start" }}>
+      <LabelFieldPair style={{ display: "grid", gridTemplateColumns: "13rem 2fr", alignItems: "start", gap: "1rem" }}>
         <div className="campaign-dates">
           <p>{t(`HCM_CAMPAIGN_DATES`)}</p>
           <span className="mandatory-date">*</span>
         </div>
         <div className="date-field-container">
           <FieldV1
+            required={true}
             withoutLabel={true}
             type="date"
             value={startDate}
-            nonEditable={today >= startDate ? true : false}
+            nonEditable={startDate && startDate?.length > 0 && today >= startDate ? true : false}
             placeholder={t("HCM_START_DATE")}
             populators={
               today >= startDate
@@ -205,31 +208,28 @@ const DateAndCycleUpdate = ({ onSelect, formData, ...props }) => {
             }
             onChange={(d) => {
               handleDateChange({
-                date: d,
+                date: d?.target?.value,
               });
             }}
           />
           <FieldV1
+            required={true}
             withoutLabel={true}
             type="date"
             value={endDate}
-            nonEditable={today >= endDate ? true : false}
+            nonEditable={endDate && endDate?.length > 0 && today >= endDate ? true : false}
             placeholder={t("HCM_END_DATE")}
-            populators={
-              today >= endDate
-                ? {}
-                : {
-                    validation: {
-                      min:
-                        startDate && startDate > today
-                          ? Digit.Utils.date.getDate(new Date(startDate).getTime() + 2 * ONE_DAY_IN_MS)
-                          : Digit.Utils.date.getDate(Date.now() + 2 * ONE_DAY_IN_MS),
-                    },
-                  }
-            }
+            populators={{
+              validation: {
+                min:
+                  startDate && startDate > today
+                    ? Digit.Utils.date.getDate(new Date(startDate).getTime() + 2 * ONE_DAY_IN_MS)
+                    : Digit.Utils.date.getDate(Date.now() + 2 * ONE_DAY_IN_MS),
+              },
+            }}
             onChange={(d) => {
               handleDateChange({
-                date: d,
+                date: d?.target?.value,
                 endDate: true,
               });
             }}
@@ -246,57 +246,55 @@ const DateAndCycleUpdate = ({ onSelect, formData, ...props }) => {
               </div>
               <div className="date-field-container">
                 <FieldV1
+                  required={true}
                   withoutLabel={true}
                   type="date"
                   value={item?.startDate}
-                  nonEditable={today >= item?.startDate ? true : false}
+                  nonEditable={item?.startDate && item?.startDate?.length > 0 && today >= item?.startDate ? true : false}
                   placeholder={t("HCM_START_DATE")}
-                  populators={
-                    today >= item?.startDate
-                      ? {}
-                      : {
-                          validation: {
-                            min:
-                              index > 0
-                                ? new Date(new Date(cycleDates?.find((j) => j.cycleIndex == index)?.endDate)?.getTime() + 86400000)
-                                    ?.toISOString()
-                                    ?.split("T")?.[0]
-                                : startDate,
-                            max: endDate,
-                          },
-                        }
-                  }
+                  populators={{
+                    validation: {
+                      min:
+                        index > 0 && !isNaN(new Date(cycleDates?.find((j) => j.cycleIndex == index)?.endDate)?.getTime())
+                          ? new Date(new Date(cycleDates?.find((j) => j.cycleIndex == index)?.endDate)?.getTime() + ONE_DAY_IN_MS)
+                              ?.toISOString()
+                              ?.split("T")?.[0]
+                          : today >= startDate
+                          ? today
+                          : startDate,
+                      max: endDate,
+                    },
+                  }}
                   onChange={(d) => {
                     // setStartValidation(true);
                     handleCycleDateChange({
-                      date: d,
+                      date: d?.target?.value,
                       cycleIndex: item?.cycleIndex,
                     });
                   }}
                 />
                 <FieldV1
+                  required={true}
                   withoutLabel={true}
                   type="date"
                   value={item?.endDate}
-                  nonEditable={today >= item?.endDate ? true : false}
+                  nonEditable={item?.endDate && item?.endDate?.length > 0 && today >= item?.endDate ? true : false}
                   placeholder={t("HCM_END_DATE")}
-                  populators={
-                    today >= item?.endDate
-                      ? {}
-                      : {
-                          validation: {
-                            min: cycleDates?.find((j) => j.cycleIndex == index + 1)?.startDate
-                              ? new Date(new Date(cycleDates?.find((j) => j.cycleIndex == index + 1)?.startDate)?.getTime() + 86400000)
-                                  ?.toISOString()
-                                  ?.split("T")?.[0]
-                              : null,
-                            max: endDate,
-                          },
-                        }
-                  }
+                  populators={{
+                    validation: {
+                      min: !isNaN(new Date(cycleDates?.find((j) => j.cycleIndex == index + 1)?.startDate)?.getTime())
+                        ? new Date(new Date(cycleDates?.find((j) => j.cycleIndex == index + 1)?.startDate)?.getTime() + ONE_DAY_IN_MS)
+                            ?.toISOString()
+                            ?.split("T")?.[0]
+                        : today >= startDate
+                        ? today
+                        : startDate,
+                      max: endDate,
+                    },
+                  }}
                   onChange={(d) => {
                     handleCycleDateChange({
-                      date: d,
+                      date: d?.target?.value,
                       endDate: true,
                       cycleIndex: item?.cycleIndex,
                     });