From 04eb716a120fc719ba058ee0aafc892d6043bd0a Mon Sep 17 00:00:00 2001
From: Matthieu Haineault <matthieuh@targointernet.com>
Date: Wed, 7 Jan 2026 13:59:11 -0500
Subject: [PATCH] fix(csv): fixed the checkbox for companies and used a
 radio-button instead to make sure only one can be selected at a time

---
 .../components/overview-report.vue            | 131 +++++++++---------
 .../timesheet-approval-csv-report.models.ts   |   6 +-
 2 files changed, 71 insertions(+), 66 deletions(-)

diff --git a/src/modules/timesheet-approval/components/overview-report.vue b/src/modules/timesheet-approval/components/overview-report.vue
index eda4698..3e810c3 100644
--- a/src/modules/timesheet-approval/components/overview-report.vue
+++ b/src/modules/timesheet-approval/components/overview-report.vue
@@ -1,73 +1,77 @@
-<script
-    setup
-    lang="ts"
->
-    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';
+<script setup lang="ts">
+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';
 
-    const timesheet_store = useTimesheetStore();
-    const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters);
+const timesheet_store = useTimesheetStore();
+const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters);
+const selected_company = ref<'targo' | 'solucom'>('targo');
 
-    const selected_report_filters = ref<(keyof TimesheetApprovalCSVReportFilters)[]>(
-        Object.entries(report_filter_options.value).filter(([_key, value]) => value).map(([key]) => key as keyof TimesheetApprovalCSVReportFilters)
-    );
+const selected_report_filters = ref<(keyof TimesheetApprovalCSVReportFilters)[]>(
+    Object.entries(report_filter_options.value).filter(([_key, value]) => value).map(([key]) => key as keyof TimesheetApprovalCSVReportFilters)
+);
 
-    interface ReportOptions {
-        label: string;
-        value: keyof TimesheetApprovalCSVReportFilters;
-    };
+interface ReportOptions {
+    label: string;
+    value: keyof TimesheetApprovalCSVReportFilters;
+};
 
-    const company_options: ReportOptions[] = [
-        { label: 'Targo', value: 'targo' },
-        { label: 'Solucom', value: 'solucom' },
-    ];
+const company_options: ReportOptions[] = [
+    { label: 'Targo', value: 'targo' },
+    { label: 'Solucom', value: 'solucom' },
+];
 
-    const type_options: ReportOptions[] = [
-        { label: 'timesheet_approvals.print_report.shifts', value: 'shifts' },
-        { label: 'timesheet_approvals.print_report.expenses', value: 'expenses' },
-        { label: 'shared.shift_type.holiday', value: 'holiday' },
-        { label: 'shared.shift_type.vacation', value: 'vacation' },
-    ];
+const type_options: ReportOptions[] = [
+    { label: 'timesheet_approvals.print_report.shifts', value: 'shifts' },
+    { label: 'timesheet_approvals.print_report.expenses', value: 'expenses' },
+    { label: 'shared.shift_type.holiday', value: 'holiday' },
+    { label: 'shared.shift_type.vacation', value: 'vacation' },
+];
 
-    const is_download_button_enable = computed(() =>
-        company_options.map(option => option.value).some(option => selected_report_filters.value.includes(option)) &&
-        type_options.map(option => option.value).some(option => selected_report_filters.value.includes(option))
-    );
+const is_download_button_enable = computed(() =>
+    company_options.map(option => option.value).some(option => selected_report_filters.value.includes(option)) &&
+    type_options.map(option => option.value).some(option => selected_report_filters.value.includes(option))
+);
 
-    const onClickedDownload = async () => {
-        try {
-            const data = await timesheet_store.getPayPeriodReport(report_filter_options.value);
+const onClickedDownload = async () => {
+    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 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 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 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');
+        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);
-        } catch (error) {
-            console.error(`An error occured during the CSV download: `, error)
-        }
+        link.href = url;
+        link.setAttribute('download', file_name);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    } 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);
-        });
+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);
     });
+});
+
+watch(selected_company, (company) => {
+    report_filter_options.value.targo = company === 'targo';
+    report_filter_options.value.solucom = company === 'solucom';
+});
+
 </script>
 
 <template>
@@ -77,7 +81,8 @@
             :style="$q.dark.isActive ? 'border: 2px solid var(--q-accent)' : ''"
         >
             <!-- main header -->
-            <div class="col-auto bg-primary text-accent text-weight-bolder text-center text-uppercase text-h6 q-py-xs z-top">
+            <div
+                class="col-auto bg-primary text-accent text-weight-bolder text-center text-uppercase text-h6 q-py-xs z-top">
                 {{ $t('timesheet_approvals.print_report.title') }}
             </div>
 
@@ -106,17 +111,17 @@
                     :key="index"
                     class="q-pa-xs col-6"
                 >
-                    <q-checkbox
-                        v-model="selected_report_filters"
+                    <q-radio
+                        v-model="selected_company"
                         left-label
                         color="white"
                         dense
                         :label="$t(company.label)"
                         :val="company.value"
-                        checked-icon="download"
-                        unchecked-icon="highlight_off"
+                        checked-icon="radio_button_checked"
+                        unchecked-icon="radio_button_unchecked"
                         class="q-px-md q-py-xs shadow-4 rounded-25 full-width"
-                        :class="selected_report_filters.includes(company.value) ? 'bg-accent text-white text-bold' : 'bg-dark'"
+                        :class="selected_company.includes(company.value) ? 'bg-accent text-white text-bold' : 'bg-dark'"
                     />
                 </div>
             </div>
@@ -139,8 +144,8 @@
                         color="white"
                         dense
                         :val="type.value"
-                        checked-icon="download"
-                        unchecked-icon="highlight_off"
+                        checked-icon="check_box"
+                        unchecked-icon="check_box_outline_blank"
                         :label="$t(type.label)"
                         class="q-px-md q-py-xs shadow-4 rounded-25 full-width"
                         :class="selected_report_filters.includes(type.value) ? 'bg-accent text-white text-bold' : 'bg-white text-primary'"
diff --git a/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
index 572e1a6..921605a 100644
--- a/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
+++ b/src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
@@ -9,10 +9,10 @@ export class TimesheetApprovalCSVReportFilters {
     constructor() {
         this.shifts = true;
         this.expenses = true;
-        this.holiday = false;
-        this.vacation = false;
+        this.holiday = true;
+        this.vacation = true;
         this.targo = true;
-        this.solucom = true;
+        this.solucom = false;
     };
 }