From 3eade8768c7b8ff7577bd75add10d575ceb44382 Mon Sep 17 00:00:00 2001
From: Suprabath <34211797+suprabathk@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:11:15 +0530
Subject: [PATCH] Disable out of constraint dates in DateInputV2 (#6379)

* Fixed date buttons out of range

* Added translations

* Fixed cursor

* Update DateInputV2.tsx

* Add max value

* disable future for last service date

---------

Co-authored-by: Ashesh <3626859+Ashesh3@users.noreply.github.com>
---
 .../Assets/AssetServiceEditModal.tsx          |  1 +
 src/Components/Common/DateInputV2.tsx         | 82 ++++++++++++-------
 src/Components/Facility/AssetCreate.tsx       |  1 +
 src/Locale/en/Common.json                     |  6 +-
 4 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx
index 3964dfe0770..13a91e36477 100644
--- a/src/Components/Assets/AssetServiceEditModal.tsx
+++ b/src/Components/Assets/AssetServiceEditModal.tsx
@@ -192,6 +192,7 @@ export const AssetServiceEditModal = (props: {
                 className="mt-2"
                 position="LEFT"
                 value={new Date(form.serviced_on)}
+                max={new Date(props.service_record.created_date)}
                 onChange={(date) => {
                   if (
                     dayjs(date.value).format("YYYY-MM-DD") >
diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
index 95652e68638..da974fbe0e9 100644
--- a/src/Components/Common/DateInputV2.tsx
+++ b/src/Components/Common/DateInputV2.tsx
@@ -4,6 +4,8 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
 import { Popover } from "@headlessui/react";
 import { classNames } from "../../Utils/utils";
 import dayjs from "../../Utils/dayjs";
+import * as Notification from "../../Utils/Notifications.js";
+import { t } from "i18next";
 
 type DatePickerType = "date" | "month" | "year";
 export type DatePickerPosition = "LEFT" | "RIGHT" | "CENTER";
@@ -16,6 +18,7 @@ interface Props {
   value: Date | undefined;
   min?: Date;
   max?: Date;
+  outOfLimitsErrorMessage?: string;
   onChange: (date: Date) => void;
   position?: DatePickerPosition;
   disabled?: boolean;
@@ -34,6 +37,7 @@ const DateInputV2: React.FC<Props> = ({
   value,
   min,
   max,
+  outOfLimitsErrorMessage,
   onChange,
   position,
   disabled,
@@ -100,16 +104,21 @@ const DateInputV2: React.FC<Props> = ({
   ) => void;
 
   const setDateValue = (date: number, close: CloseFunction) => () => {
-    isDateWithinConstraints(date) &&
-      onChange(
-        new Date(
-          datePickerHeaderDate.getFullYear(),
-          datePickerHeaderDate.getMonth(),
-          date
-        )
-      );
-    close();
-    setIsOpen?.(false);
+    isDateWithinConstraints(date)
+      ? (() => {
+          onChange(
+            new Date(
+              datePickerHeaderDate.getFullYear(),
+              datePickerHeaderDate.getMonth(),
+              date
+            )
+          );
+          close();
+          setIsOpen?.(false);
+        })()
+      : Notification.Error({
+          msg: outOfLimitsErrorMessage ?? "Cannot select date out of range",
+        });
   };
 
   const getDayCount = (date: Date) => {
@@ -220,7 +229,7 @@ const DateInputV2: React.FC<Props> = ({
                   readOnly
                   disabled={disabled}
                   className={`cui-input-base cursor-pointer disabled:cursor-not-allowed ${className}`}
-                  placeholder={placeholder ?? "Select date"}
+                  placeholder={placeholder ?? t("select_date")}
                   value={value && dayjs(value).format("DD/MM/YYYY")}
                 />
                 <div className="absolute right-0 top-1/2 -translate-y-1/2 p-2">
@@ -248,7 +257,7 @@ const DateInputV2: React.FC<Props> = ({
                             [dd, mm, yyyy].filter(Boolean).join("/")
                         ) || ""
                       } // Display the value in DD/MM/YYYY format
-                      placeholder="DD/MM/YYYY"
+                      placeholder={t("DD/MM/YYYY")}
                       onChange={(e) => {
                         setDisplayValue(e.target.value.replaceAll("/", ""));
                         const value = dayjs(e.target.value, "DD/MM/YYYY", true);
@@ -330,26 +339,41 @@ const DateInputV2: React.FC<Props> = ({
                             className="aspect-square w-[14.26%] border border-transparent p-1 text-center text-sm"
                           />
                         ))}
-                        {dayCount.map((d, i) => (
-                          <div
-                            key={i}
-                            id={`date-${d}`}
-                            className="aspect-square w-[14.26%]"
-                          >
+                        {dayCount.map((d, i) => {
+                          const withinConstraints = isDateWithinConstraints(d);
+                          const selected = value && isSelectedDate(d);
+
+                          const baseClasses =
+                            "flex h-full items-center justify-center rounded text-center text-sm leading-loose transition duration-100 ease-in-out";
+                          let conditionalClasses = "";
+
+                          if (withinConstraints) {
+                            if (selected) {
+                              conditionalClasses =
+                                "bg-primary-500 font-bold text-white";
+                            } else {
+                              conditionalClasses =
+                                "hover:bg-gray-300 cursor-pointer";
+                            }
+                          } else {
+                            conditionalClasses =
+                              "!cursor-not-allowed !text-gray-400";
+                          }
+                          return (
                             <div
-                              onClick={setDateValue(d, close)}
-                              className={classNames(
-                                "flex h-full cursor-pointer items-center justify-center rounded text-center text-sm leading-loose text-black transition duration-100 ease-in-out",
-                                value && isSelectedDate(d)
-                                  ? "bg-primary-500 font-bold text-white"
-                                  : "hover:bg-gray-300",
-                                !isDateWithinConstraints(d) && "!text-gray-300"
-                              )}
+                              key={i}
+                              id={`date-${d}`}
+                              className="aspect-square w-[14.26%]"
                             >
-                              {d}
+                              <div
+                                onClick={setDateValue(d, close)}
+                                className={`${baseClasses} ${conditionalClasses}`}
+                              >
+                                {d}
+                              </div>
                             </div>
-                          </div>
-                        ))}
+                          );
+                        })}
                       </div>
                     </>
                   )}
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index 84fc09188d0..a1e06a8c7ab 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -883,6 +883,7 @@ const AssetCreate = (props: AssetProps) => {
                         name="last_serviced_on"
                         className="mt-2"
                         position="RIGHT"
+                        disableFuture
                         value={last_serviced_on && new Date(last_serviced_on)}
                         onChange={(date) => {
                           if (
diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
index 0fe1ba1a8bf..7e357bc04b5 100644
--- a/src/Locale/en/Common.json
+++ b/src/Locale/en/Common.json
@@ -155,5 +155,7 @@
   "all_changes_have_been_saved": "All changes have been saved",
   "no_data_found": "No data found",
   "edit": "Edit",
-  "clear_selection": "Clear selection"
-}
\ No newline at end of file
+  "clear_selection": "Clear selection",
+  "select_date": "Select date",
+  "DD/MM/YYYY": "DD/MM/YYYY"
+}