From 56799174ccfc98a0025e1cb278c9c8e62acb6477 Mon Sep 17 00:00:00 2001
From: Wayne <wayne.lee@2fi-solutions.com.hk>
Date: Sun, 27 Oct 2024 18:15:43 +0900
Subject: [PATCH] Allow temporary saving for timesheet entry

---
 src/app/api/timesheets/utils.ts               | 37 ++++++++++++++++++-
 .../DateHoursTable/DateHoursList.tsx          |  9 ++++-
 .../TimeLeaveModal/TimeLeaveModal.tsx         | 12 +++++-
 3 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/src/app/api/timesheets/utils.ts b/src/app/api/timesheets/utils.ts
index d5cb15f..64d9088 100644
--- a/src/app/api/timesheets/utils.ts
+++ b/src/app/api/timesheets/utils.ts
@@ -133,7 +133,10 @@ export const validateTimeLeaveRecord = (
     }
   });
 
-  return Object.keys(errors).length > 0 ? errors : undefined;
+  const hasErrors = Object.keys(errors).length > 0;
+  const temporarilySaveable = isTemporarilySaveable(records, errors, holidays);
+
+  return !temporarilySaveable && hasErrors ? errors : undefined;
 };
 
 export const checkTotalHours = (
@@ -180,3 +183,35 @@ export const checkTotalHours = (
 
 export const DAILY_NORMAL_MAX_HOURS = 8;
 export const TIMESHEET_DAILY_MAX_HOURS = 20;
+
+export const isTemporarilySaveable = (
+  records: RecordTimeLeaveInput,
+  errors: { [date: string]: string },
+  holidays: Set<string>,
+): boolean => {
+  const filledDates = Object.keys(records)
+    .reduce<{ date: string; hasFilled: boolean }[]>((acc, date) => {
+      const dayJsObj = dayjs(date);
+      const isHoliday =
+        holidays.has(date) || dayJsObj.day() === 0 || dayJsObj.day() === 6;
+      if (isHoliday) {
+        return acc;
+      }
+      return [...acc, { date, hasFilled: !Boolean(errors[date]) }];
+    }, [])
+    .sort((a, b) => dayjs(a.date).diff(dayjs(b.date)));
+
+  const isConsecutivelyFilled = filledDates.every((currentDate, index) => {
+    if (index === 0) {
+      return true;
+    }
+
+    if (currentDate.hasFilled && !filledDates[index - 1].hasFilled) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return isConsecutivelyFilled;
+};
diff --git a/src/components/DateHoursTable/DateHoursList.tsx b/src/components/DateHoursTable/DateHoursList.tsx
index 35f451c..9f4cb97 100644
--- a/src/components/DateHoursTable/DateHoursList.tsx
+++ b/src/components/DateHoursTable/DateHoursList.tsx
@@ -33,6 +33,7 @@ interface Props<EntryComponentProps = object> {
   >;
   entryComponentProps: EntryComponentProps;
   errorComponent?: React.ReactNode;
+  onSubmit?: () => void;
 }
 
 function DateHoursList<EntryTableProps>({
@@ -43,6 +44,7 @@ function DateHoursList<EntryTableProps>({
   entryComponentProps,
   companyHolidays,
   errorComponent,
+  onSubmit,
 }: Props<EntryTableProps>) {
   const {
     t,
@@ -240,7 +242,12 @@ function DateHoursList<EntryTableProps>({
             {t("Done")}
           </Button>
         ) : (
-          <Button variant="contained" startIcon={<Check />} type="submit">
+          <Button
+            variant="contained"
+            startIcon={<Check />}
+            type="submit"
+            onClick={onSubmit}
+          >
             {t("Save")}
           </Button>
         )}
diff --git a/src/components/TimeLeaveModal/TimeLeaveModal.tsx b/src/components/TimeLeaveModal/TimeLeaveModal.tsx
index e86e199..f7a170b 100644
--- a/src/components/TimeLeaveModal/TimeLeaveModal.tsx
+++ b/src/components/TimeLeaveModal/TimeLeaveModal.tsx
@@ -237,7 +237,14 @@ const TimeLeaveModal: React.FC<Props> = ({
                 >
                   {t("Cancel")}
                 </Button>
-                <Button variant="contained" startIcon={<Check />} type="submit">
+                <Button
+                  variant="contained"
+                  startIcon={<Check />}
+                  type="submit"
+                  onClick={() => {
+                    formProps.clearErrors();
+                  }}
+                >
                   {t("Save")}
                 </Button>
               </CardActions>
@@ -277,6 +284,9 @@ const TimeLeaveModal: React.FC<Props> = ({
                 miscTasks,
               }}
               errorComponent={errorComponent}
+              onSubmit={() => {
+                formProps.clearErrors();
+              }}
             />
           </Box>
         </FullscreenModal>