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

fix(csv): fixed the checkbox for companies and used a radio-button instead to make sure only one can be selected at a time

Browse Source
This commit is contained in:
Matthieu Haineault 2026-01-07 13:59:11 -05:00
parent 07b52c854f
commit 04eb716a12
2 changed files with 71 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,41 +1,39 @@
<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)[]>(
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 {
interface ReportOptions {
label: string;
value: keyof TimesheetApprovalCSVReportFilters;
};
};
const company_options: ReportOptions[] = [
const company_options: ReportOptions[] = [
{ label: 'Targo', value: 'targo' },
{ label: 'Solucom', value: 'solucom' },
];
];
const type_options: ReportOptions[] = [
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(() =>
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 () => {
const onClickedDownload = async () => {
try {
const data = await timesheet_store.getPayPeriodReport(report_filter_options.value);
@ -60,14 +58,20 @@
} catch (error) {
console.error(`An error occured during the CSV download: `, error)
}
}
}
watch(selected_report_filters, (new_values) => {
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'"

6
src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
View File

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