Merge pull request 'feat(approvals): add print report functionality and filters for backend testing' (#8) from dev/nicolas/csv-report into main

Reviewed-on: Targo/targo_frontend#8

src/i18n/en-ca/index.ts

@@ -329,6 +329,12 @@ export default {
     resteVacationTotal: 'Rest of vacation',
     tooltipTimeline: 'Daily breakdown',
     tooltipTimesheet: 'Open timesheet',
+    reportFilterCategoryCompany: 'Company',
+    reportFilterCategoryType: 'Data type',
+    reportFilterShifts: 'Shifts',
+    reportFilterExpenses: 'Expenses',
+    reportFilterHoliday: 'Holiday',
+    reportFilterVacation: 'Vacation',
   },
   shiftColumns: {
     title: 'Shifts',

src/i18n/fr-ca/index.ts

@@ -376,6 +376,12 @@ export default {
     resteVacationTotal: 'Reste des vacances',
     tooltipTimeline: 'Vue journalière',
     tooltipTimesheet: 'Feuille de temps',
+    reportFilterCategoryCompany: 'Compagnie',
+    reportFilterCategoryType: 'Types de données',
+    reportFilterShifts: 'Quarts de travail',
+    reportFilterExpenses: 'Dépenses',
+    reportFilterHoliday: 'Jours Fériés',
+    reportFilterVacation: 'Vacances',
   },
   usersListPage: {
     tableHeader: 'Répertoire du personnel',

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

@@ -23,6 +23,8 @@
     const filter = ref<string | number | null>('');
     const original_approvals = ref<Record<string, boolean>>({});
     const is_showing_details = ref<boolean>(false);
+    const report_filter_company = ref<boolean[]>([true, true]);
+    const report_filter_type = ref<boolean[]>([true, true, true, true]);
     const clicked_employee_name = ref<string>('');
 
     const columns = computed((): QTableColumn<PayPeriodOverviewEmployee>[] => [
@@ -79,6 +81,18 @@
         });
     });
 
+    const is_not_enough_filters = computed(() => {
+        return report_filter_company.value.filter(val => val === true).length < 1 ||
+               report_filter_type.value.filter(val => val === true).length < 1;
+    })
+
+    const filter_types_labels = [
+        t('timeSheetValidations.reportFilterShifts'),
+        t('timeSheetValidations.reportFilterExpenses'),
+        t('timeSheetValidations.reportFilterHoliday'),
+        t('timeSheetValidations.reportFilterVacation'),
+    ]
+
     const is_calendar_limit = computed( () => {
         return  timesheet_store.current_pay_period.pay_year === 2024 && 
                 timesheet_store.current_pay_period.pay_period_no <= 1;
@@ -86,13 +100,18 @@
 
     const onDateSelected = async (date_string: string) => {
         await timesheet_approval_api.getPayPeriodOverviewByDate(date_string);
-    }
+    };
 
     const onClickedDetails = async (email: string, name: string) => {
         clicked_employee_name.value = name; 
         is_showing_details.value = true;
         await timesheet_approval_api.getTimesheetsByPayPeriodAndEmail(email);
-    }
+    };
+    
+    const onClickPrintReport = async () => {
+        await timesheet_approval_api.getTimesheetApprovalCSVReport(report_filter_company.value, report_filter_type.value);
+        console.log('current filter selections: [', report_filter_company.value.toLocaleString(),'], [', report_filter_type.value.toLocaleString(), ']');
+    };
 
     onMounted( async () => {
         const today = date.formatDate(new Date(), 'YYYY-MM-DD');
@@ -147,7 +166,51 @@
                     
                     <q-space />
 
-                    
+                    <q-btn-group rounded push>
+                        <q-btn 
+                            rounded
+                            push
+                            color="primary"
+                            icon="print"
+                            :disable="is_not_enough_filters"
+                            @click="onClickPrintReport"
+                        />
+                        <q-btn-dropdown
+                            rounded
+                            push
+                            color="white"
+                            text-color="primary"
+                            icon="checklist"
+                        >
+                            <q-list>
+                                <q-item>
+                                    <q-item-section row no-wrap>
+                                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">{{$t('timeSheetValidations.reportFilterCategoryCompany')}}</p>
+                                        <q-checkbox 
+                                            v-for="label, index in ['Targo', 'Solucom']"
+                                            v-model="report_filter_company[index]" 
+                                            :val="label"
+                                            :label=label
+                                            :key="index"
+                                        />
+                                    </q-item-section>
+                                </q-item>
+                                <q-separator color="primary" class="q-mx-md"/>
+                                <q-item>
+                                    <q-item-section row no-wrap>
+                                        <p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">{{$t('timeSheetValidations.reportFilterCategoryType')}}</p>
+                                        <q-checkbox 
+                                            v-for="label, index in filter_types_labels"
+                                            v-model="report_filter_type[index]"
+                                            :val="label"
+                                            :label="label"
+                                            :key="index"
+                                        />
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-btn-dropdown>
+                    </q-btn-group>
                 </div>
             </template>
 

src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts

@@ -1,5 +1,6 @@
 import { useTimesheetStore } from "src/stores/timesheet-store";
 import { useAuthStore } from "src/stores/auth-store";
+import type { PayPeriodReportFilters } from "../types/timesheet-approval-pay-period-report-interface";
 
 export const useTimesheetApprovalApi = () => {
     const timesheet_store = useTimesheetStore();
@@ -44,9 +45,21 @@ export const useTimesheetApprovalApi = () => {
         await timesheet_store.getTimesheetsByPayPeriodAndEmail(employee_email);
     }
 
+    const getTimesheetApprovalCSVReport = async ( report_filter_company: boolean[], report_filter_type: boolean[] ) => {
+        const [ targo, solucom ] = report_filter_company;
+        const [ shifts, expenses, holiday, vacation ] = report_filter_type;
+        const options = {
+            company: { targo, solucom },
+            types: { shifts, expenses, holiday, vacation }
+        } as PayPeriodReportFilters;
+        
+        await timesheet_store.getTimesheetApprovalCSVReport(options);
+    }
+
     return {
         getPayPeriodOverviewByDate,
         getNextPayPeriodOverview,
-        getTimesheetsByPayPeriodAndEmail
+        getTimesheetsByPayPeriodAndEmail,
+        getTimesheetApprovalCSVReport
     }
 };

src/modules/timesheet-approval/services/services-timesheet-approval.ts

@@ -2,6 +2,7 @@ import { api } from "src/boot/axios";
 import type { PayPeriodOverview } from "../types/timesheet-approval-pay-period-overview-interface";
 import type { PayPeriod } from "src/modules/shared/types/pay-period-interface";
 import type { PayPeriodEmployeeDetails } from "../types/timesheet-approval-pay-period-employee-details-interface";
+import type { PayPeriodReportFilters } from "../types/timesheet-approval-pay-period-report-interface";
 
 export const timesheetApprovalService = {
     getPayPeriodByDate: async (date_string: string): Promise<PayPeriod> => {
@@ -24,5 +25,10 @@ export const timesheetApprovalService = {
     getTimesheetsByPayPeriodAndEmail: async (year: number, period_no: number, email: string): Promise<PayPeriodEmployeeDetails> => {
         const response = await api.get('timesheets', { params: { year, period_no, email, }});
         return response.data;
-    }
+    },
+
+    getTimesheetApprovalCSVReport: async (year: number, period_number: number, report_filters?: PayPeriodReportFilters) => {
+        const response = await api.get(`${year}/${period_number}`, { params: { report_filters, }});
+        return response.data;
+    },
 };

src/modules/timesheet-approval/types/timesheet-approval-pay-period-report-interface.ts

@@ -0,0 +1,16 @@
+// export interface PayPeriodReport {
+
+// }
+
+export interface PayPeriodReportFilters {
+    company: {
+        targo: boolean;
+        solucom: boolean;
+    };
+    types: {
+        shifts: boolean;
+        expenses: boolean;
+        holiday: boolean;
+        vacation: boolean;
+    };  
+}

src/stores/timesheet-store.ts

@@ -4,6 +4,7 @@ import { timesheetApprovalService } from 'src/modules/timesheet-approval/service
 import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
 import type { PayPeriodOverviewEmployee } from "src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface";
 import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
+import type { PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-report-interface';
 
 const default_pay_period: PayPeriod = { 
     pay_period_no: -1,
@@ -19,6 +20,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
     const current_pay_period = ref<PayPeriod>(default_pay_period);
     const pay_period_overview_employees = ref<PayPeriodOverviewEmployee[]>([]);
     const pay_period_employee_details = ref<PayPeriodEmployeeDetails | undefined>();
+    const pay_period_report = ref();
 
     const getPayPeriodByDate = async (date_string: string): Promise<boolean> => {
         is_loading.value = true;
@@ -93,12 +95,29 @@ export const useTimesheetStore = defineStore('timesheet', () => {
             pay_period_employee_details.value = response;
         } catch (error) {
             console.error('There was an error retrieving timesheet details for this employee: ', error);
-            pay_period_employee_details.value = MOCK_DATA_TIMESHEET_DETAILS;
             // TODO: More in-depth error-handling here
         }
 
         is_loading.value = false;
-    }
+    };
+
+    const getTimesheetApprovalCSVReport = async (report_filters?: PayPeriodReportFilters) => {
+        is_loading.value = true;
+
+        try {
+            const response = await timesheetApprovalService.getTimesheetApprovalCSVReport(
+                current_pay_period.value.pay_year, 
+                current_pay_period.value.pay_period_no, 
+                report_filters
+            );
+            pay_period_report.value = response;
+        } catch (error) {
+            console.error('There was an error retrieving the report CSV: ', error);
+            // TODO: More in-depth error-handling here
+        }
+
+        is_loading.value = false;
+    };
 
     return { 
         current_pay_period, 
@@ -109,51 +128,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
         getPayPeriodByYearAndPeriodNumber,
         getTimesheetApprovalPayPeriodEmployeeOverviews,
         getTimesheetsByPayPeriodAndEmail,
+        getTimesheetApprovalCSVReport,
     };
-});
+});
-
-const MOCK_DATA_TIMESHEET_DETAILS = {
-    is_approved: false,
-    week1: {
-        is_approved: true,
-        shifts: {
-            sun: [],
-            mon: [ { is_approved: true, start: '08:00', end: '12:00' }, { is_approved: true, start: '13:00', end: '17:00' } ],
-            tue: [ { is_approved: true, start: '08:00', end: '11:45' }, { is_approved: true, start: '12:45', end: '17:00' } ],
-            wed: [ { is_approved: true, start: '08:00', end: '12:00' }, { is_approved: true, start: '13:00', end: '17:00' } ],
-            thu: [ { is_approved: false, start: '13:00', end: '17:00' } ],
-            fri: [ { is_approved: true, start: '08:00', end: '12:00' }, { is_approved: true, start: '13:00', end: '17:00' } ],
-            sat: []
-        },
-        expenses: {
-            sun: { costs: [], mileage: [] },
-            mon: { costs: [ { is_approved: true, amount: 156.49 } ], mileage: [] },
-            tue: { costs: [], mileage: [] },
-            wed: { costs: [], mileage: [] },
-            thu: { costs: [], mileage: [ { is_approved: false, amount: 16 } ] },
-            fri: { costs: [], mileage: [] },
-            sat: { costs: [], mileage: [] }
-        }
-    },
-    week2: {
-        is_approved: true,
-        shifts: {
-            sun: [],
-            mon: [],
-            tue: [],
-            wed: [],
-            thu: [],
-            fri: [],
-            sat: []
-        },
-        expenses: {
-            sun: { costs: [], mileage: [] },
-            mon: { costs: [], mileage: [] },
-            tue: { costs: [], mileage: [] },
-            wed: { costs: [], mileage: [] },
-            thu: { costs: [], mileage: [] },
-            fri: { costs: [], mileage: [] },
-            sat: { costs: [], mileage: [] }
-        }
-    },
-} as PayPeriodEmployeeDetails;