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

feat(csv): started to implements the dialog for the csv download feature

Browse Source
This commit is contained in:
Matthieu Haineault 2025-12-03 14:40:05 -05:00
parent 8368702490
commit 803c9f977f
6 changed files with 67 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -123,6 +123,7 @@ export default {
update: "update",
modify: "modify",
close: "close",
download: "download",
},
misc: {
or: "or",

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

@ -124,6 +124,7 @@ export default {
update: "mettre à jour",
modify: "modifier",
close: "fermer",
download: "téléchargement",
},
misc: {
or: "ou",

38
src/modules/timesheet-approval/components/options-dialog-csv-download.vue Normal file
View File

@ -0,0 +1,38 @@
<script setup lang="ts">
import { useTimesheetStore } from 'src/stores/timesheet-store';
const timesheet_store = useTimesheetStore();
</script>
<template>
<q-dialog
v-model="timesheet_store.is_csv_dialog_open"
persistent
transition-show="jump-down"
transition-hide="jump-down"
>
<q-card
class="q-pa-none rounded-10 shadow-10"
:class="$q.screen.lt.md ? ' bg-primary' : 'bg-secondary'"
style=" min-width: 70vw;"
:style="$q.dark.isActive ? 'border: solid 2px var(--q-accent);' : ''"
>
<q-inner-loading :showing="timesheet_store.is_loading">
<q-spinner size="32px" />
</q-inner-loading>
<q-card-section class="q-pa-none">
<q-separator
v-if="$q.screen.lt.md"
spaced
color="accent"
size="2px"
class="q-mx-md"
/>
</q-card-section>
</q-card>
</q-dialog>
</template>

2
src/modules/timesheet-approval/services/timesheet-approval-service.ts
View File

@ -9,7 +9,7 @@ export const timesheetApprovalService = {
},
getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
const response = await api.get(`csv/${year}/${period_number}`, { params: { report_filters, }});
const response = await api.get(`exports/csv/${year}/${period_number}`, { params: { report_filters, }});
return response.data;
},
};

44
src/pages/timesheet-approval-page.vue
View File

@ -1,24 +1,21 @@
<script
setup
lang="ts"
>
/* eslint-disable */
import { onMounted, ref } from 'vue';
import { date } from 'quasar';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
<script setup lang="ts">
/* eslint-disable */
import { onMounted, ref } from 'vue';
import { date } from 'quasar';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
onMounted(async () => {
onMounted(async () => {
await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
});
</script>
<template>
@ -66,13 +63,16 @@
]"
/>
<div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md ? 'q-mb-md' : ''">
<q-btn-dropdown
<div
class="col-auto row no-wrap flex-center"
:class="$q.screen.lt.md ? 'q-mb-md' : ''"
>
<q-btn
push
rounded
icon="filter_alt"
icon="download"
color="accent"
:label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
:label="$q.screen.lt.md ? '' : $t('shared.label.download')"
class="col-auto q-mr-sm"
/>

8
src/stores/timesheet-store.ts
View File

@ -17,6 +17,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
const initial_timesheets = ref<Timesheet[]>([]);
const pay_period_overviews = ref<TimesheetOverview[]>([]);
const is_csv_dialog_open = ref(false);
const is_details_dialog_open = ref(false);
const selected_employee_name = ref<string>();
@ -95,11 +96,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
try {
const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(
year,
period_number,
report_filters
);
const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(year, period_number, report_filters);
pay_period_report.value = response;
return true;
} catch (error) {
@ -112,6 +109,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
return {
is_loading,
is_csv_dialog_open,
is_approval_grid_mode,
is_details_dialog_open,
search_filter,