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

src/i18n/en-ca/index.ts

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

src/i18n/fr-ca/index.ts

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

src/modules/timesheet-approval/components/overview-report.vue

@@ -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="bg-secondary full-width shadow-24 rounded-10 column">
-            <div class="row col-auto q-py-md q-px-sm">
+            <div class="shadow-1 bg-primary text-accent text-weight-bold text-center text-uppercase">
-                <q-checkbox
+                <span> {{ $t('timesheet_approvals.print_report.title') }}</span>
-                    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>
+            <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">
+                        </div>
-                <q-checkbox
+
-                    v-for="type, index in type_options"
+                    </div>
-                    :key="index"
+                </div>
-                    v-model="selected_report_filters"
+                <div class="row q-py-md">
-                    left-label
+                    <div class="col-auto full-width shadow-1 row bg-dark q-px-lg rounded-10 q-pb-sm">
-                    color="white"
+                        <span class="col q-px-sm q-pt-xs text-weight-bolder text-accent text-uppercase col-3">
-                    class="col-auto q-px-md q-mx-xs shadow-1 rounded-25"
+                            {{ $t('timesheet_approvals.print_report.options') }}
-                    dense
+                        </span>
-                    :class="selected_report_filters.includes(type.value) ? 'bg-accent text-white' : ''"
+                        <div class=" row bordered-primary col-auto full-width">
-                    :label="$t(type.label)"
+                            <div
-                    :val="type.value"
+                                v-for="type, index in type_options"
-                    checked-icon="download"
+                                :key="index"
-                    unchecked-icon="highlight_off"
+                                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
+                    square
-                    push
                     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>