Merge pull request #204 from FrontMen/feature/warning-exceeds-expecte…

…d-weekly

Warning if week or daily expected hours exceeded

components/records/weekly-timesheet-totals-row.vue

@@ -29,9 +29,10 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, PropType} from "@nuxtjs/composition-api";
+import {computed, defineComponent, PropType, watch} from "@nuxtjs/composition-api";
 
 export default defineComponent({
+  emit: ["totals"],
   props: {
     projects: {
       type: Array as PropType<TimesheetProject[]>,
@@ -50,7 +51,7 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
+  setup(props, {emit}) {
     const weekTotal = computed(() => {
       let total = 0;
 
@@ -85,6 +86,20 @@ export default defineComponent({
         props.workScheme?.[index] ? props.workScheme[index].workHours : "-")
     );
 
+    watch(
+      () => [weekTotal.value],
+      () => {
+        const totals: TimesheetTotals = {
+          weekTotal: weekTotal.value,
+          expectedWeekTotal: weekWorkSchemeHoursTotal.value,
+          dayTotal: dayTotals.value,
+        };
+
+        emit('totals', totals);
+      },
+      {immediate: true}
+    );
+
     return {
       weekTotal,
       weekWorkSchemeHoursTotal,

helpers/dates.ts

@@ -68,7 +68,8 @@ export function checkNonWorkingDays(
   return days.map((day) => {
     const workSchemeDay = workScheme?.find((ws) => ws.date === day.date);
     const isPublicHoliday = !!workSchemeDay?.holiday;
-    const isLeaveDay = !!workSchemeDay?.absenceHours;
+    // Holidays also register absence hours, prevent double label.
+    const isLeaveDay = !!workSchemeDay?.absenceHours && !isPublicHoliday;
 
     const isPartTime =
       !isPublicHoliday && !!workSchemeDay && workSchemeDay.theoreticalHours < 8;

pages/records.vue

@@ -59,6 +59,7 @@
                 :show-add-project-button="
                   !isReadonly && selectableCustomers.length > 0
                 "
+                @totals="setTotals"
               />
             </template>
           </weekly-timesheet>
@@ -165,7 +166,7 @@
         :last-saved="recordsState.lastSaved"
         :status="timesheetStatus"
         @save="saveTimesheet(recordStatus.NEW)"
-        @submit="saveTimesheet(recordStatus.PENDING)"
+        @submit="submitTimesheet"
         @unsubmit="saveTimesheet(recordStatus.NEW)"
       />
 
@@ -242,6 +243,11 @@ export default defineComponent({
     const store = useStore<RootStoreState>();
     const recordsState = computed(() => store.state.records);
     const isAdminView = router.currentRoute.name?.includes("timesheets");
+    let totals: TimesheetTotals = {
+      weekTotal: 0,
+      expectedWeekTotal: 0,
+      dayTotal: [],
+    };
 
     store.dispatch("employees/getEmployees");
     store.dispatch("customers/getCustomers");
@@ -318,6 +324,38 @@ export default defineComponent({
     });
 
 
+    const setTotals = (calculatedTotals: TimesheetTotals) => {
+      totals = calculatedTotals;
+    }
+
+    const submitTimesheet = () => {
+      let confirmation = true;
+
+      if (totals.weekTotal > totals.expectedWeekTotal) {
+        const difference = +(totals.weekTotal - totals.expectedWeekTotal).toFixed(2);
+        confirmation = confirm(
+          `You have filled in ${difference} more hour${difference !== 1 ? 's': ''} than the expected ${totals.expectedWeekTotal} hours a week. Is this correct?`
+        );
+      } else {
+        // Only show this one if total hours is fine, but some days are too long
+        const daysExceedingExpected = totals.dayTotal.filter(
+          (hoursInDay, index) => {
+            const weekendHours = !recordsState.value?.workScheme[index] && hoursInDay;
+            const exceedsExpectedHours = recordsState.value?.workScheme[index]?.workHours;
+            return hoursInDay > exceedsExpectedHours || weekendHours;
+          },
+        );
+
+        if (daysExceedingExpected.length) confirmation = confirm(
+          `You have filled in more hours than expected on some of the days. Is this correct?`
+        );
+      }
+
+      if (!confirmation) return;
+
+      timesheet.saveTimesheet(recordStatus.PENDING as TimesheetStatus);
+    }
+
     return {
       employee: selectedEmployee,
       selectableCustomers,
@@ -327,6 +365,8 @@ export default defineComponent({
       reasonOfDenial,
       handleBlur,
       handleDeny,
+      submitTimesheet,
+      setTotals,
       ...timesheet,
     };
   },

types/timesheets.d.ts

@@ -5,6 +5,13 @@ declare enum TimesheetStatus {
   DENIED = 'denied',
   EMPTY = 'empty',
 }
+
+interface TimesheetTotals {
+  weekTotal: number;
+  expectedWeekTotal: number;
+  dayTotal: number[];
+}
+
 interface TimesheetEmployee extends Employee {
   status: TimesheetStatus;
   pendingTimeRecords: TimeRecord[];