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

feat(csv): finished setup the download csv options

Browse Source
This commit is contained in:
Matthieu Haineault 2025-12-12 13:25:33 -05:00
parent c3681e50c7
commit 6120bd5e23
4 changed files with 68 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/modules/timesheet-approval/components/overview-report.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { computed, ref, watch } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
@ -33,8 +33,39 @@ const is_download_button_enable = computed(() =>
);
const onClickedDownload = async () => {
await timesheet_store.getPayPeriodReport(report_filter_options.value);
try {
const data = await timesheet_store.getPayPeriodReport(report_filter_options.value);
const companies = Object.entries(report_filter_options.value)
.filter(([key, value]) => value && (key === 'targo' || key === 'solucom')).map(([key]) => key).join('-');
const types = Object.entries(report_filter_options.value)
.filter(([key, value]) => value && ['shifts', 'expenses', 'holiday', 'vacation'].includes(key)).map(([key]) => key).join('-');
const file_name = `Desjardins_${companies}_${types}_${new Date().toISOString().split('T')[0]}.csv`;
const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', file_name);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
console.log('CSV preview:', data);
} catch (error) {
console.error(`An error occured during the CSV download: `, error)
}
}
watch(selected_report_filters, (new_values) => {
Object.keys(report_filter_options.value).forEach(key => {
const typed_key = key as keyof TimesheetApprovalCSVReportFilters;
report_filter_options.value[typed_key] = new_values.includes(key as keyof TimesheetApprovalCSVReportFilters);
});
});
</script>
<template>
@ -66,9 +97,7 @@ const onClickedDownload = async () => {
checked-icon="download"
unchecked-icon="highlight_off"
/>
</div>
</div>
</div>
<div class="row q-py-md">
@ -94,7 +123,6 @@ const onClickedDownload = async () => {
checked-icon="download"
unchecked-icon="highlight_off"
/>
</div>
</div>
</div>

8
src/modules/timesheet-approval/services/timesheet-approval-service.ts
View File

@ -4,12 +4,12 @@ import type { PayPeriodOverviewResponse } from "src/modules/timesheet-approval/m
export const timesheetApprovalService = {
getPayPeriodOverviews: async (year: number, period_number: number): Promise<PayPeriodOverviewResponse> => {
const response = await api.get<{success: boolean, data: PayPeriodOverviewResponse, error? : string}>(`pay-periods/overview/${year}/${period_number}`);
const response = await api.get<{ success: boolean, data: PayPeriodOverviewResponse, error?: string }>(`pay-periods/overview/${year}/${period_number}`);
return response.data.data;
},
getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
const response = await api.get(`exports/csv/${year}/${period_number}`, { params: { report_filters, }});
return response.data;
getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, filters?: TimesheetApprovalCSVReportFilters) => {
const response = await api.get(`exports/csv/${year}/${period_number}`, { params: filters, responseType: 'arraybuffer' });
return response;
},
};

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

@ -95,12 +95,12 @@ export const useTimesheetStore = defineStore('timesheet', () => {
}
};
const getPayPeriodReport = async ( report_filters?: TimesheetApprovalCSVReportFilters) => {
const getPayPeriodReport = async (report_filters: TimesheetApprovalCSVReportFilters) => {
try {
if(!pay_period.value) return false;
if (!pay_period.value) return false;
const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(pay_period.value.pay_year, pay_period.value.pay_period_no, report_filters);
pay_period_report.value = response;
return true;
return response.data;
} catch (error) {
console.error('There was an error retrieving the report CSV: ', error);
// TODO: More in-depth error-handling here

25
src/utils/boolean-utils.ts Normal file
View File

@ -0,0 +1,25 @@
// export const createDefaultBooleanValue = <T extends PropertyKey>(keys_list: PropertyKey[]): Record<T, boolean> =>
// keys_list.reduce((acc, mod) => {
// acc[mod] = false;
// return acc;
// }, {} as Record<T, boolean>);
// export const toBooleanFromKeys = <T extends PropertyKey>(keys_list: PropertyKey[], arr?: readonly PropertyKey[] | null): Record<T, boolean> => {
// const result = createDefaultBooleanValue(keys_list);
// if (!arr || !Array.isArray(arr)) return result;
// for (const item of arr) {
// if (typeof item !== 'string') continue;
// const trimmed = item.trim();
// if ((keys_list as readonly PropertyKey[]).includes(trimmed)) {
// result[trimmed as T] = true;
// }
// }
// return result;
// }
export const toKeysFromBoolean = <T extends PropertyKey>(boolean_values: Record<T, boolean>): T[] => {
const values_array = Object.entries(boolean_values);
const values = values_array.filter(([_key, value]) => value === true);
return values.map(([key]) => key as T);
}