Disable future years on leave management screen (#1749)

Co-authored-by: Nishant Samel <[email protected]>
saeloun · Mar 22, 2024 · 81c0337 · 81c0337
1 parent 5bc6e48
commit 81c0337
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/app/javascript/src/common/CustomYearPicker/index.tsx b/app/javascript/src/common/CustomYearPicker/index.tsx
@@ -8,6 +8,7 @@ type customYearPickerProps = {
   yearClassName?: string;
   currentYear: number;
   setCurrentYear: React.Dispatch<React.SetStateAction<number>>;
+  nextYearButtonDisabled?: boolean;
 };
 
 const defaultWrapperClassName = "flex items-center justify-center";
@@ -20,6 +21,7 @@ const CustomYearPicker = ({
   yearClassName,
   currentYear,
   setCurrentYear,
+  nextYearButtonDisabled = false,
 }: customYearPickerProps) => {
   const range = (start, end) => {
     const ans = [];
@@ -31,6 +33,10 @@ const CustomYearPicker = ({
   };
 
   const years = range(1920, currentYear + 1);
+  const actualYear = new Date().getFullYear();
+  const isNextYearButtonDisabled = nextYearButtonDisabled
+    ? currentYear >= actualYear
+    : false;
 
   const handleOnChange = selected => {
     const current = parseInt(selected);
@@ -67,8 +73,16 @@ const CustomYearPicker = ({
           ))}
         </select>
       )}
-      <button className="pl-2" onClick={handleNext}>
-        <CaretCircleRightIcon size={13} weight="bold" />
+      <button
+        className="pl-2"
+        disabled={isNextYearButtonDisabled}
+        onClick={handleNext}
+      >
+        {isNextYearButtonDisabled ? (
+          <CaretCircleRightIcon color="#ADA4CE" size={13} weight="bold" />
+        ) : (
+          <CaretCircleRightIcon size={13} weight="bold" />
+        )}
       </button>
     </div>
   );

diff --git a/app/javascript/src/components/LeaveManagement/Header.tsx b/app/javascript/src/components/LeaveManagement/Header.tsx
@@ -16,6 +16,7 @@ const Header = ({
       Leave Management
     </span>
     <CustomYearPicker
+      nextYearButtonDisabled
       currentYear={currentYear}
       setCurrentYear={setCurrentYear}
       wrapperClassName="text-miru-han-purple-1000"