From 27e73f8f51d52f1886f1584cd382e590718489f9 Mon Sep 17 00:00:00 2001 From: Nicolas Drolet Date: Thu, 21 Aug 2025 10:44:23 -0400 Subject: [PATCH] refactor(approvals): change timesheet store to no longer rely on array of pay periods, now requests new pay period objects depending on date picker button pressed. --- ...esheet-approval-employee-overview-list.vue | 2 +- .../timesheet-approval-period-picker.vue | 10 +-- .../composables/use-timesheet-approval-api.ts | 35 +++++++++- .../services/services-timesheet-approval.ts | 12 +++- src/stores/timesheet-store.ts | 66 +++++++++++++------ 5 files changed, 95 insertions(+), 30 deletions(-) diff --git a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue index 54846ae..8762910 100644 --- a/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue +++ b/src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue @@ -39,7 +39,7 @@ const filter = ref(''); onMounted( async () => { - await timesheetApprovalApi.getCurrentAndAllPayPeriods(); + await timesheetApprovalApi.getPayPeriodByDate(new Date()); await timesheetApprovalApi.getTimesheetApprovalPayPeriodEmployeeOverviews(currentYear, currentPayPeriod, authStore.user.email); originalApprovals.value = Object.fromEntries( timesheetStore.payPeriodEmployeeOverviews.map(emp => [emp.email, emp.is_approved])); }) diff --git a/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue b/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue index 4c020bf..7ac0768 100644 --- a/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue +++ b/src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue @@ -1,16 +1,18 @@ \ No newline at end of file diff --git a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts index 9e30562..3bf78cb 100644 --- a/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts +++ b/src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts @@ -1,10 +1,38 @@ import { useTimesheetStore } from "src/stores/timesheet-store"; +import { useAuthStore } from "src/stores/auth-store"; export const useTimesheetApprovalApi = () => { const timesheet_store = useTimesheetStore(); + const auth_store = useAuthStore(); - const getCurrentAndAllPayPeriods = async () => { - await timesheet_store.getCurrentAndAllPayPeriods(); + const getPayPeriodByDate = async (date: Date) => { + await timesheet_store.getPayPeriodByDate(date); + } + + /* This method attempts to get the next or previous pay period. + It checks if pay period number is within a certain range, adjusts pay period and year accordingly. + It then requests the matching pay period object to set as current pay period from server. + If successful, it then requests pay period overviews from that new pay period. */ + const getNextPayPeriodOverview = async (direction: number) => { + const current_pay_period = timesheet_store.currentPayPeriod; + let new_pay_period_no = current_pay_period.pay_period_no + direction; + let new_pay_year = current_pay_period.pay_year; + + if (new_pay_period_no > 26) { + new_pay_period_no = 1; + new_pay_year += 1; + } + + if (new_pay_period_no < 1) { + new_pay_period_no = 26; + new_pay_year -= 1; + } + + const success = await timesheet_store.getPayPeriodByYearAndPeriodNumber(new_pay_year, new_pay_period_no); + + if (success) { + await timesheet_store.getTimesheetApprovalPayPeriodEmployeeOverviews(new_pay_year, new_pay_period_no, auth_store.user.email); + } } const getTimesheetApprovalPayPeriodEmployeeOverviews = async (year: number, period_number: number, supervisor_email: string): Promise => { @@ -12,7 +40,8 @@ export const useTimesheetApprovalApi = () => { } return { + getPayPeriodByDate, + getNextPayPeriodOverview, getTimesheetApprovalPayPeriodEmployeeOverviews, - getCurrentAndAllPayPeriods, } }; \ No newline at end of file diff --git a/src/modules/timesheet-approval/services/services-timesheet-approval.ts b/src/modules/timesheet-approval/services/services-timesheet-approval.ts index 1db5a00..a7f4c2d 100644 --- a/src/modules/timesheet-approval/services/services-timesheet-approval.ts +++ b/src/modules/timesheet-approval/services/services-timesheet-approval.ts @@ -1,13 +1,19 @@ import { api } from "src/boot/axios"; import type { PayPeriodOverview } from "../types/timesheet-approval-pay-period-overview-interface"; -import type { PayPeriodBundle } from "src/modules/shared/types/pay-period-bundle-interface"; +import type { PayPeriod } from "src/modules/shared/types/pay-period-interface"; export const timesheetApprovalService = { - getCurrentAndAllPayPeriod: async (): Promise => { - const response = await api.get('pay-periods/bundle/current-and-all'); + getPayPeriodByDate: async (date: Date): Promise => { + const response = await api.get(`pay-periods/date/${date.toISOString()}`); return response.data; }, + getPayPeriodByYearAndPeriodNumber: async (year: number, period_number: number): Promise => { + const response = await api.get(`pay-periods/${year}/${period_number}`); + return response.data; + }, + + getPayPeriodEmployeeOverviews: async (year: number, period_number: number, supervisor_email: string): Promise => { // TODO: REMOVE MOCK DATA PEFORE PUSHING TO PROD const response = await api.get(`/pay-periods/${year}/${period_number}/${supervisor_email}`); diff --git a/src/stores/timesheet-store.ts b/src/stores/timesheet-store.ts index 2f7de55..8ce8e0c 100644 --- a/src/stores/timesheet-store.ts +++ b/src/stores/timesheet-store.ts @@ -4,44 +4,72 @@ import { timesheetApprovalService } from 'src/modules/timesheet-approval/service import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface'; import type { PayPeriodEmployeeOverview } from "src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-overview-interface"; +const default_pay_period: PayPeriod = { + pay_period_no: -1, + period_start: '', + period_end: '', + payday: '', + pay_year: -1, + label: '' + }; + export const useTimesheetStore = defineStore('timesheet', () => { - const payPeriods = ref([]); - const currentPayPeriod = ref(); - const currentPayPeriodIndex = ref(-1); + const currentPayPeriod = ref(default_pay_period); const payPeriodEmployeeOverviews = ref([]); const isLoading = ref(false); - const getCurrentAndAllPayPeriods = async () => { + const getPayPeriodByDate = async (date: Date) => { isLoading.value = true; + try { - const response = await timesheetApprovalService.getCurrentAndAllPayPeriod(); - currentPayPeriod.value = response.current; - payPeriods.value = response.periods; - currentPayPeriodIndex.value = payPeriods.value.findIndex( pay_period => pay_period.pay_period_no === currentPayPeriod.value?.pay_period_no); - } catch( error ){ + const response = await timesheetApprovalService.getPayPeriodByDate(date); + currentPayPeriod.value = response; + } catch(error){ console.error('Could not get current pay period: ', error ); + //TODO: More in-depth error-handling here } + isLoading.value = false; }; - const getPreviousOrNextPayPeriod = (direction: number) => { - if ( currentPayPeriodIndex.value + direction >= 0 && currentPayPeriodIndex.value + direction < payPeriods.value.length ) { - currentPayPeriodIndex.value += direction; - currentPayPeriod.value = payPeriods.value.at(currentPayPeriodIndex.value); - } - } - - const getTimesheetApprovalPayPeriodEmployeeOverviews = async (year: number, period_number: number, supervisor_email: string) => { + const getPayPeriodByYearAndPeriodNumber = async (year: number, period_number: number): Promise => { isLoading.value = true; + try { - const response = await timesheetApprovalService.getPayPeriodEmployeeOverviews(year, period_number, supervisor_email); + const response = await timesheetApprovalService.getPayPeriodByYearAndPeriodNumber(year, period_number); + currentPayPeriod.value = response; + return true; + } catch(error){ + console.error('Could not get current pay period: ', error ); + //TODO: More in-depth error-handling here + } + + isLoading.value = false; + + return false; + }; + + const getTimesheetApprovalPayPeriodEmployeeOverviews = async (pay_year: number, period_number: number, supervisor_email: string) => { + isLoading.value = true; + + try { + const response = await timesheetApprovalService.getPayPeriodEmployeeOverviews(pay_year, period_number, supervisor_email); payPeriodEmployeeOverviews.value = response.employees_overview; } catch (error) { console.error('There was an error retrieving Employee Pay Period overviews: ', error); + payPeriodEmployeeOverviews.value = []; // TODO: trigger an alert window with an error message here! } + isLoading.value = false; }; - return { payPeriods, currentPayPeriod, payPeriodEmployeeOverviews, isLoading, getCurrentAndAllPayPeriods, getTimesheetApprovalPayPeriodEmployeeOverviews, getPreviousOrNextPayPeriod}; + return { + currentPayPeriod, + payPeriodEmployeeOverviews, + isLoading, + getPayPeriodByDate, + getPayPeriodByYearAndPeriodNumber, + getTimesheetApprovalPayPeriodEmployeeOverviews, + }; });