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

feat(csv): work on the dialog for the report extraction

Browse Source
This commit is contained in:
Matthieu Haineault 2025-12-11 08:43:30 -05:00
parent 0c6fd3289e
commit a859ad8107
3 changed files with 68 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/i18n/en-ca/index.ts
View File

@ -259,10 +259,12 @@ export default {
expenses_title: "expenses accrued",
},
print_report: {
company: "company",
title: "Download options",
company: "companies",
type: "type",
shifts: "shifts",
expenses: "expenses",
options: "options",
},
tooltip: {
button_detailed_view: "detailed view",

4
src/i18n/fr-ca/index.ts
View File

@ -260,10 +260,12 @@ export default {
expenses_title: "dépenses encourues"
},
print_report: {
company: "compagnie",
title: "options de téléchargement",
company: "compagnies",
type: "types de données",
shifts: "quarts de travail",
expenses: "dépenses",
options: "options",
},
tooltip: {
button_detailed_view: "vue détaillée",

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

@ -3,6 +3,7 @@ import { computed, ref } 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 selected_report_filters = ref<(keyof TimesheetApprovalCSVReportFilters)[]>(
@ -14,8 +15,6 @@ interface ReportOptions {
value: keyof TimesheetApprovalCSVReportFilters;
};
const timesheet_store = useTimesheetStore();
const company_options: ReportOptions[] = [
{ label: 'Targo', value: 'targo' },
{ label: 'Solucom', value: 'solucom' },
@ -40,48 +39,73 @@ const onClickedDownload = async () => {
<template>
<q-dialog v-model="timesheet_store.is_report_dialog_open">
<div class="bg-dark column full-width">
<div class="row col-auto q-py-md q-px-sm">
<q-checkbox
v-for="company, index in company_options"
:key="index"
v-model="selected_report_filters"
left-label
:label="$t(company.label)"
:val="company.value"
class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
dense
:class="selected_report_filters.includes(company.value) ? 'bg-accent text-white' : ''"
color="white"
checked-icon="download"
unchecked-icon="highlight_off"
/>
<div class="bg-secondary full-width shadow-24 rounded-10 column">
<div class="shadow-1 bg-primary text-accent text-weight-bold text-center text-uppercase">
<span> {{ $t('timesheet_approvals.print_report.title') }}</span>
</div>
<div class="row q-py-md q-px-lg">
<div class="col-auto full-width shadow-1 row bg-dark q-py-xs q-px-lg rounded-10">
<span class="col q-px-sm q-pt-xs text-weight-bolder text-accent text-uppercase col-3">
{{ $t('timesheet_approvals.print_report.company') }}
</span>
<div class="row bordered-primary col-auto full-width">
<div
v-for="company, index in company_options"
:key="index"
class="q-pa-xs col-6"
>
<q-checkbox
v-model="selected_report_filters"
left-label
color="white"
class="q-px-md shadow-4 rounded-25 full-width"
dense
:class="selected_report_filters.includes(company.value) ? 'bg-accent text-white' : 'bg-dark'"
:label="$t(company.label)"
:val="company.value"
checked-icon="download"
unchecked-icon="highlight_off"
/>
<div class="row col-auto q-py-md q-px-sm">
<q-checkbox
v-for="type, index in type_options"
:key="index"
v-model="selected_report_filters"
left-label
color="white"
class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
dense
:class="selected_report_filters.includes(type.value) ? 'bg-accent text-white' : ''"
:label="$t(type.label)"
:val="type.value"
checked-icon="download"
unchecked-icon="highlight_off"
/>
</div>
</div>
</div>
<div class="row q-py-md">
<div class="col-auto full-width shadow-1 row bg-dark q-px-lg rounded-10 q-pb-sm">
<span class="col q-px-sm q-pt-xs text-weight-bolder text-accent text-uppercase col-3">
{{ $t('timesheet_approvals.print_report.options') }}
</span>
<div class=" row bordered-primary col-auto full-width">
<div
v-for="type, index in type_options"
:key="index"
class="q-pa-xs col-6"
>
<q-checkbox
v-model="selected_report_filters"
left-label
color="white"
class="q-px-md shadow-4 rounded-25 full-width"
dense
:class="selected_report_filters.includes(type.value) ? 'bg-accent text-white' : 'bg-dark'"
:label="$t(type.label)"
:val="type.value"
checked-icon="download"
unchecked-icon="highlight_off"
/>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="column">
<q-btn
:disable="!is_download_button_enable"
dense
push
square
size="md"
icon="download"
class=""
:color="is_download_button_enable ? 'accent' : 'grey-5'"
:label="$t('shared.label.download')"
@click="onClickedDownload()"
@ -89,4 +113,4 @@ const onClickedDownload = async () => {
</div>
</div>
</q-dialog>
</template>
</template>