fix(csv): fixed the checkbox for companies and used a radio-button instead to make sure only one can be selected at a time
This commit is contained in:
Matthieu Haineault
parent
07b52c854f
commit
04eb716a12
|
|
@ -1,73 +1,77 @@
|
||||||
<script
|
<script setup lang="ts">
|
||||||
setup
|
import { computed, ref, watch } from 'vue';
|
||||||
lang="ts"
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
||||||
>
|
import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
|
||||||
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 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)
|
||||||
);
|
);
|
||||||
|
|
||||||
interface ReportOptions {
|
interface ReportOptions {
|
||||||
label: string;
|
label: string;
|
||||||
value: keyof TimesheetApprovalCSVReportFilters;
|
value: keyof TimesheetApprovalCSVReportFilters;
|
||||||
};
|
};
|
||||||
|
|
||||||
const company_options: ReportOptions[] = [
|
const company_options: ReportOptions[] = [
|
||||||
{ label: 'Targo', value: 'targo' },
|
{ label: 'Targo', value: 'targo' },
|
||||||
{ label: 'Solucom', value: 'solucom' },
|
{ 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.shifts', value: 'shifts' },
|
||||||
{ label: 'timesheet_approvals.print_report.expenses', value: 'expenses' },
|
{ label: 'timesheet_approvals.print_report.expenses', value: 'expenses' },
|
||||||
{ label: 'shared.shift_type.holiday', value: 'holiday' },
|
{ label: 'shared.shift_type.holiday', value: 'holiday' },
|
||||||
{ label: 'shared.shift_type.vacation', value: 'vacation' },
|
{ 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)) &&
|
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))
|
type_options.map(option => option.value).some(option => selected_report_filters.value.includes(option))
|
||||||
);
|
);
|
||||||
|
|
||||||
const onClickedDownload = async () => {
|
const onClickedDownload = async () => {
|
||||||
try {
|
try {
|
||||||
const data = await timesheet_store.getPayPeriodReport(report_filter_options.value);
|
const data = await timesheet_store.getPayPeriodReport(report_filter_options.value);
|
||||||
|
|
||||||
const companies = Object.entries(report_filter_options.value)
|
const companies = Object.entries(report_filter_options.value)
|
||||||
.filter(([key, value]) => value && (key === 'targo' || key === 'solucom')).map(([key]) => key).join('-');
|
.filter(([key, value]) => value && (key === 'targo' || key === 'solucom')).map(([key]) => key).join('-');
|
||||||
|
|
||||||
const types = Object.entries(report_filter_options.value)
|
const types = Object.entries(report_filter_options.value)
|
||||||
.filter(([key, value]) => value && ['shifts', 'expenses', 'holiday', 'vacation'].includes(key)).map(([key]) => key).join('-');
|
.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 blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
|
||||||
const url = window.URL.createObjectURL(blob);
|
const url = window.URL.createObjectURL(blob);
|
||||||
const link = document.createElement('a');
|
const link = document.createElement('a');
|
||||||
|
|
||||||
link.href = url;
|
link.href = url;
|
||||||
link.setAttribute('download', file_name);
|
link.setAttribute('download', file_name);
|
||||||
document.body.appendChild(link);
|
document.body.appendChild(link);
|
||||||
link.click();
|
link.click();
|
||||||
document.body.removeChild(link);
|
document.body.removeChild(link);
|
||||||
window.URL.revokeObjectURL(url);
|
window.URL.revokeObjectURL(url);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(`An error occured during the CSV download: `, 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 => {
|
Object.keys(report_filter_options.value).forEach(key => {
|
||||||
const typed_key = key as keyof TimesheetApprovalCSVReportFilters;
|
const typed_key = key as keyof TimesheetApprovalCSVReportFilters;
|
||||||
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'"
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user