feat(csv): finished setup the download csv options

src/modules/timesheet-approval/components/overview-report.vue

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

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

@@ -8,8 +8,8 @@ export const timesheetApprovalService = {
         return response.data.data;
     },
 
-    getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
+    getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, filters?: TimesheetApprovalCSVReportFilters) => {
-        const response = await api.get(`exports/csv/${year}/${period_number}`, { params: { report_filters, }});
+        const response = await api.get(`exports/csv/${year}/${period_number}`, { params: filters, responseType: 'arraybuffer' });
-        return response.data;
+        return response;
     },
 };

src/stores/timesheet-store.ts

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

src/utils/boolean-utils.ts

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