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.

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

src/modules/timesheet-approval/components/timesheet-approval-period-picker.vue

@@ -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>

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 () => {
+    const getPayPeriodByDate = async (date: Date) => {
-        await timesheet_store.getCurrentAndAllPayPeriods();
+        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,
     }
 };

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<PayPeriodBundle> => {
+    getPayPeriodByDate: async (date: Date): Promise<PayPeriod> => {
-        const response = await api.get('pay-periods/bundle/current-and-all');
+        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}`);

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<PayPeriod[]>([]);
+    const currentPayPeriod = ref<PayPeriod>(default_pay_period);
-    const currentPayPeriod = ref<PayPeriod>();
-    const currentPayPeriodIndex = ref<number>(-1);
     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();
+            const response = await timesheetApprovalService.getPayPeriodByDate(date);
-            currentPayPeriod.value = response.current;
+            currentPayPeriod.value = response;
-            payPeriods.value = response.periods;
+        } catch(error){
-            currentPayPeriodIndex.value = payPeriods.value.findIndex( pay_period => pay_period.pay_period_no === currentPayPeriod.value?.pay_period_no);
-        } 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) => {
+    const getPayPeriodByYearAndPeriodNumber = async (year: number, period_number: number): Promise<boolean> => {
-        if ( currentPayPeriodIndex.value + direction >= 0 && currentPayPeriodIndex.value + direction < payPeriods.value.length ) {
+        isLoading.value = true;
-            currentPayPeriodIndex.value += direction;
+
-            currentPayPeriod.value = payPeriods.value.at(currentPayPeriodIndex.value);
+        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, 
+    };
 });