louis/targo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Nicolas Drolet 2025-08-21 10:44:23 -04:00
parent 21b98ec825
commit 27e73f8f51
5 changed files with 95 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/timesheet-approval/components/timesheet-approval-employee-overview-list.vue
View File

@ -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]));
})

10
src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue
View File

@ -1,16 +1,18 @@
<script setup lang="ts">
import { useTimesheetApprovalApi } from '../composables/use-timesheet-approval-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
const timesheetStore = useTimesheetStore();
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
</script>
<template>
<div class="column items-center">
<div class="text-primary text-h5">{{ timesheetStore.currentPayPeriod?.label || '' }}</div>
<div class="text-primary text-h5">{{ timesheet_store.currentPayPeriod?.label || '' }}</div>
<q-btn-group push rounded>
<q-btn push icon="keyboard_arrow_left" color="primary" class="q-px-xl" @click="timesheetStore.getPreviousOrNextPayPeriod(-1)"/>
<q-btn push icon="keyboard_arrow_left" color="primary" class="q-px-xl" @click="timesheet_approval_api.getNextPayPeriodOverview(-1)"/>
<q-btn push icon="date_range" color="primary" class="q-px-xl" />
<q-btn push icon="keyboard_arrow_right" color="primary" class="q-px-xl" @click="timesheetStore.getPreviousOrNextPayPeriod(1)"/>
<q-btn push icon="keyboard_arrow_right" color="primary" class="q-px-xl" @click="timesheet_approval_api.getNextPayPeriodOverview(1)"/>
</q-btn-group>
</div>
</template>

35
src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
View File

@ -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<void> => {
@ -12,7 +40,8 @@ export const useTimesheetApprovalApi = () => {
}
return {
getPayPeriodByDate,
getNextPayPeriodOverview,
getTimesheetApprovalPayPeriodEmployeeOverviews,
getCurrentAndAllPayPeriods,
}
};

12
src/modules/timesheet-approval/services/services-timesheet-approval.ts
View File

@ -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<PayPeriodBundle> => {
const response = await api.get('pay-periods/bundle/current-and-all');
getPayPeriodByDate: async (date: Date): Promise<PayPeriod> => {
const response = await api.get(`pay-periods/date/${date.toISOString()}`);
return response.data;
},
getPayPeriodByYearAndPeriodNumber: async (year: number, period_number: number): Promise<PayPeriod> => {
const response = await api.get(`pay-periods/${year}/${period_number}`);
return response.data;
},
getPayPeriodEmployeeOverviews: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview> => {
// TODO: REMOVE MOCK DATA PEFORE PUSHING TO PROD
const response = await api.get(`/pay-periods/${year}/${period_number}/${supervisor_email}`);

60
src/stores/timesheet-store.ts
View File

@ -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<PayPeriod[]>([]);
const currentPayPeriod = ref<PayPeriod>();
const currentPayPeriodIndex = ref<number>(-1);
const currentPayPeriod = ref<PayPeriod>(default_pay_period);
const payPeriodEmployeeOverviews = ref<PayPeriodEmployeeOverview[]>([]);
const isLoading = ref<boolean>(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);
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 getPayPeriodByYearAndPeriodNumber = async (year: number, period_number: number): Promise<boolean> => {
isLoading.value = true;
try {
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
}
const getTimesheetApprovalPayPeriodEmployeeOverviews = async (year: number, period_number: number, supervisor_email: string) => {
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(year, period_number, supervisor_email);
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,
};
});