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

src/i18n/en-ca/index.ts

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

src/i18n/fr-ca/index.ts

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

src/modules/timesheet-approval/components/options-dialog-csv-download.vue

@@ -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>

src/modules/timesheet-approval/services/timesheet-approval-service.ts

@@ -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;
     },
 };

src/pages/timesheet-approval-page.vue

@@ -1,7 +1,4 @@
-<script
+<script setup lang="ts">
-    setup
-    lang="ts"
->
 /* eslint-disable */
 import { onMounted, ref } from 'vue';
 import { date } from 'quasar';
@@ -66,13 +63,16 @@
                 ]"
             />
 
-            <div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md  ? 'q-mb-md' : ''">
+            <div
-                <q-btn-dropdown
+                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"
                 />
 

src/stores/timesheet-store.ts

@@ -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(
+            const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(year, period_number, report_filters);
-                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,