Merge pull request 'fix(csv): fixed the checkbox for companies and used a radio-button instead to make sure only one can be selected at a time' (#41) from dev/matthieu/staging-csv into main

Reviewed-on: Targo/targo_frontend#41
This commit is contained in:
matthieuh 2026-01-07 14:51:12 -05:00
commit 0d068f2156
2 changed files with 71 additions and 66 deletions

View File

@ -1,13 +1,11 @@
<script <script setup lang="ts">
setup
lang="ts"
>
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store'; import { useTimesheetStore } from 'src/stores/timesheet-store';
import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models'; import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
const timesheet_store = useTimesheetStore(); const timesheet_store = useTimesheetStore();
const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters); 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) Object.entries(report_filter_options.value).filter(([_key, value]) => value).map(([key]) => key as keyof TimesheetApprovalCSVReportFilters)
@ -68,6 +66,12 @@
report_filter_options.value[typed_key] = new_values.includes(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> </script>
<template> <template>
@ -77,7 +81,8 @@
:style="$q.dark.isActive ? 'border: 2px solid var(--q-accent)' : ''" :style="$q.dark.isActive ? 'border: 2px solid var(--q-accent)' : ''"
> >
<!-- main header --> <!-- 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') }} {{ $t('timesheet_approvals.print_report.title') }}
</div> </div>
@ -106,17 +111,17 @@
:key="index" :key="index"
class="q-pa-xs col-6" class="q-pa-xs col-6"
> >
<q-checkbox <q-radio
v-model="selected_report_filters" v-model="selected_company"
left-label left-label
color="white" color="white"
dense dense
:label="$t(company.label)" :label="$t(company.label)"
:val="company.value" :val="company.value"
checked-icon="download" checked-icon="radio_button_checked"
unchecked-icon="highlight_off" unchecked-icon="radio_button_unchecked"
class="q-px-md q-py-xs shadow-4 rounded-25 full-width" 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>
</div> </div>
@ -139,8 +144,8 @@
color="white" color="white"
dense dense
:val="type.value" :val="type.value"
checked-icon="download" checked-icon="check_box"
unchecked-icon="highlight_off" unchecked-icon="check_box_outline_blank"
:label="$t(type.label)" :label="$t(type.label)"
class="q-px-md q-py-xs shadow-4 rounded-25 full-width" 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'" :class="selected_report_filters.includes(type.value) ? 'bg-accent text-white text-bold' : 'bg-white text-primary'"

View File

@ -9,10 +9,10 @@ export class TimesheetApprovalCSVReportFilters {
constructor() { constructor() {
this.shifts = true; this.shifts = true;
this.expenses = true; this.expenses = true;
this.holiday = false; this.holiday = true;
this.vacation = false; this.vacation = true;
this.targo = true; this.targo = true;
this.solucom = true; this.solucom = false;
}; };
} }