Create print service and fix slot in VnTable

src/components/ui/VnTable.vue

@@ -27,7 +27,9 @@ const props = defineProps({
         :rows-per-page-options="props.rowsPerPageOptions"
         table-header-class="vntable-header-default"
     >
-        <slot />
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps" />
+        </template>
     </QTable>
 </template>
 

src/composables/usePrintService.js

@@ -0,0 +1,38 @@
+import { userStore as useUserStore } from 'stores/user';
+
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+
+export function usePrintService() {
+    const quasar = useQuasar();
+    const userStore = useUserStore();
+    const token = userStore.token;
+
+    function sendEmail(path, params) {
+        return axios.post(path, params).then(() =>
+            quasar.notify({
+                message: 'Notification sent',
+                type: 'positive',
+                icon: 'check'
+            })
+        );
+    }
+
+    function openReport(path, params) {
+        params = Object.assign(
+            {
+                access_token: token
+            },
+            params
+        );
+
+        const query = new URLSearchParams(params).toString();
+
+        window.open(`api/${path}?${query}`);
+    }
+
+    return {
+        sendEmail,
+        openReport
+    };
+}

src/pages/Ecomerce/InvoicesView.vue

@@ -6,11 +6,11 @@ import VnTable from 'src/components/ui/VnTable.vue';
 
 import { currency } from 'src/lib/filters.js';
 import { date as qdate } from 'quasar';
-import { userStore as useUserStore } from 'stores/user';
+import { usePrintService } from 'src/composables/usePrintService';
 
 const { t } = useI18n();
 const jApi = inject('jApi');
-const userStore = useUserStore();
+const { openReport } = usePrintService();
 
 const currentYear = ref(Date.vnNew().getFullYear());
 const years = ref([]);
@@ -38,13 +38,6 @@ const columns = computed(() => [
     }
 ]);
 
-const getInvoiceUrl = id => {
-    const params = new URLSearchParams({
-        access_token: userStore.token
-    });
-    return `/api/InvoiceOuts/${id}/download?${params}`;
-};
-
 const fetchInvoices = async () => {
     const params = {
         from: new Date(currentYear.value, 0),
@@ -96,10 +89,10 @@ onMounted(async () => {
                     <QBtn
                         v-if="row.hasPdf"
                         icon="download"
-                        :href="getInvoiceUrl(row.id)"
                         target="_blank"
                         flat
                         round
+                        @click="openReport(`InvoiceOuts/${row.id}/download`)"
                     >
                         <QTooltip>
                             {{ t('downloadInvoicePdf') }}