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:
commit
0d068f2156
|
|
@ -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'"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user