src/components/VnTable/VnTable.vue

@@ -369,7 +369,7 @@ function handleOnDataSaved(_) {
         @on-fetch="(...args) => emit('onFetch', ...args)"
         :search-url="searchUrl"
         :disable-infinite-scroll="
-            $attrs['disableInfiniteScroll'] ? isTableMode : disableInfiniteScroll
+            $attrs['disableInfiniteScroll'] ? isTableMode : !disableInfiniteScroll
         "
         @save-changes="reload"
         :has-sub-toolbar="$props.hasSubToolbar ?? isEditable"
@@ -507,11 +507,8 @@ function handleOnDataSaved(_) {
                             :key="index"
                             :title="btn.title"
                             :icon="btn.icon"
-                            class="q-px-sm"
+                            class="q-px-sm text-primary-light"
                             flat
-                            :class="
-                                btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
-                            "
                             :style="`visibility: ${
                                 (btn.show && btn.show(row)) ?? true ? 'visible' : 'hidden'
                             }`"

src/components/ui/VnPaginate.vue

@@ -224,13 +224,20 @@ defineExpose({ fetch, addFilter, paginate });
         v-bind="$attrs"
     >
         <slot name="body" :rows="store.data"></slot>
-        <div v-if="isLoading" class="info-row q-pa-md text-center">
+        <div v-if="isLoading" class="spinner info-row q-pa-md text-center">
             <QSpinner color="primary" size="md" />
         </div>
     </QInfiniteScroll>
 </template>
 
 <style lang="scss" scoped>
+.spinner {
+    z-index: 1;
+    align-content: end;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
 .info-row {
     width: 100%;
 

src/composables/usePrintService.js

@@ -16,7 +16,7 @@ export function usePrintService() {
         );
     }
 
-    function openReport(path, params) {
+    function openReport(path, params, isNewTab = '_self') {
         if (typeof params === 'string') params = JSON.parse(params);
         params = Object.assign(
             {
@@ -26,8 +26,7 @@ export function usePrintService() {
         );
 
         const query = new URLSearchParams(params).toString();
-
-        window.open(`api/${path}?${query}`);
+        window.open(`api/${path}?${query}`, isNewTab);
     }
 
     return {

src/pages/Customer/Card/CustomerBalance.vue

@@ -5,12 +5,12 @@ import { useRoute } from 'vue-router';
 import { useAcl } from 'src/composables/useAcl';
 import axios from 'axios';
 import { useQuasar } from 'quasar';
+import FetchData from 'components/FetchData.vue';
 
 import { toCurrency, toDate, toDateHourMin } from 'src/filters';
 import { useState } from 'composables/useState';
 import { useStateStore } from 'stores/useStateStore';
 import { usePrintService } from 'composables/usePrintService';
-import { useSession } from 'composables/useSession';
 import { useVnConfirm } from 'composables/useVnConfirm';
 
 import VnTable from 'components/VnTable/VnTable.vue';
@@ -22,12 +22,10 @@ import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 
 const { openConfirmationModal } = useVnConfirm();
-const { sendEmail } = usePrintService();
+const { sendEmail, openReport } = usePrintService();
 const { t } = useI18n();
 const { hasAny } = useAcl();
-
-const session = useSession();
-const tokenMultimedia = session.getTokenMultimedia();
+const currentBalance = ref({});
 const quasar = useQuasar();
 const route = useRoute();
 const state = useState();
@@ -36,7 +34,7 @@ const user = state.getUser();
 
 const clientRisk = ref([]);
 const tableRef = ref();
-const companyId = ref();
+const companyId = ref(user.value.companyFk);
 const companyLastId = ref(user.value.companyFk);
 const balances = ref([]);
 const vnFilterRef = ref({});
@@ -76,14 +74,14 @@ const companyFilterColumn = {
 
 const columns = computed(() => [
     {
-        align: 'left',
+        align: 'right',
         name: 'payed',
         label: t('Date'),
         format: ({ payed }) => toDate(payed),
         cardVisible: true,
     },
     {
-        align: 'left',
+        align: 'right',
         name: 'created',
         label: t('Creation date'),
         format: ({ created }) => toDateHourMin(created),
@@ -91,11 +89,10 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'workerFk',
         label: t('Employee'),
         columnField: {
             component: 'userLink',
-            attrs: ({ row }) => ({ workerId: row.workerFk, tag: row.userName }),
+            attrs: ({ row }) => ({ workerId: row.workerFk, name: row.userName }),
         },
         cardVisible: true,
     },
@@ -120,14 +117,14 @@ const columns = computed(() => [
         isId: true,
     },
     {
-        align: 'right',
+        align: 'left',
         name: 'credit',
         label: t('Havings'),
         format: ({ credit }) => credit && toCurrency(credit),
         cardVisible: true,
     },
     {
-        align: 'right',
+        align: 'left',
         name: 'balance',
         label: t('Balance'),
         format: ({ balance }) => toCurrency(balance),
@@ -166,41 +163,15 @@ const columns = computed(() => [
 
 onBeforeMount(() => {
     stateStore.rightDrawer = true;
-    companyId.value = user.value.companyFk;
 });
 
-async function getClientRisk() {
-    const { data } = await axios.get(`clientRisks`, {
-        params: {
-            filter: JSON.stringify({
-                include: { relation: 'company', scope: { fields: ['code'] } },
-                where: { clientFk: route.params.id, companyFk: user.value.companyFk },
-            }),
-        },
-    });
-    clientRisk.value = data;
-    return clientRisk.value;
-}
-
-async function getCurrentBalance() {
-    const currentBalance = (await getClientRisk()).find((balance) => {
-        return balance.companyFk === companyId.value;
-    });
-    return currentBalance && currentBalance.amount;
-}
-
-async function onFetch(data) {
-    balances.value = [];
-    for (const [index, balance] of data.entries()) {
-        if (index === 0) {
-            balance.balance = await getCurrentBalance();
-            continue;
+async function getCurrentBalance(data) {
+    for (const balance of data) {
+        currentBalance.value[balance.companyFk] = {
+            code: balance.company.code,
+            amount: balance.amount,
+        };
     }
-        const previousBalance = data[index - 1];
-        balance.balance =
-            previousBalance?.balance - (previousBalance?.debit - previousBalance?.credit);
-    }
-    balances.value = data;
 }
 
 const showNewPaymentDialog = () => {
@@ -215,19 +186,27 @@ const showNewPaymentDialog = () => {
 };
 
 const showBalancePdf = ({ id }) => {
-    const url = `api/InvoiceOuts/${id}/download?access_token=${tokenMultimedia}`;
-    window.open(url, '_blank');
+    openReport(`InvoiceOuts/${id}/download`, {}, '_blank');
 };
 </script>
 
 <template>
+    <FetchData
+        url="clientRisks"
+        :filter="{
+            include: { relation: 'company', scope: { fields: ['code'] } },
+            where: { clientFk: route.params.id, companyFk: companyId },
+        }"
+        auto-load
+        @on-fetch="getCurrentBalance"
+    ></FetchData>
     <VnSubToolbar class="q-mb-md">
         <template #st-data>
             <div class="column justify-center q-px-md q-py-sm">
                 <span class="text-bold">{{ t('Total by company') }}</span>
-                <div class="row justify-center" v-if="clientRisk?.length">
-                    {{ clientRisk[0].company.code }}:
-                    {{ toCurrency(clientRisk[0].amount) }}
+                <div class="row justify-center">
+                    {{ currentBalance[companyId]?.code }}:
+                    {{ toCurrency(currentBalance[companyId]?.amount) }}
                 </div>
             </div>
         </template>
@@ -253,7 +232,6 @@ const showBalancePdf = ({ id }) => {
         :right-search="false"
         :is-editable="false"
         :column-search="false"
-        @on-fetch="onFetch"
         :disable-option="{ card: true }"
         auto-load
     >
@@ -262,7 +240,7 @@ const showBalancePdf = ({ id }) => {
         </template>
         <template #column-description="{ row }">
             <div class="link" v-if="row.isInvoice">
-                {{ row.description }}
+                {{ t('bill', { ref: row.description }) }}
                 <InvoiceOutDescriptorProxy :id="row.description" />
             </div>
             <span v-else class="q-pa-xs dotted rounded-borders" :title="row.description">

src/pages/Customer/components/CustomerSummaryTable.vue

@@ -151,6 +151,7 @@ const setShippedColor = (date) => {
         :disable-option="{ card: true, table: true }"
         limit="5"
         class="full-width"
+        :disable-infinite-scroll="true"
     >
         <template #column-nickname="{ row }">
             <span class="link">

src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue

@@ -41,8 +41,7 @@ const invoiceFormType = ref('pdf');
 const defaultEmailAddress = ref($props.invoiceOutData.client?.email);
 
 const showInvoicePdf = () => {
-    const url = `api/InvoiceOuts/${$props.invoiceOutData.id}/download?access_token=${token}`;
-    window.open(url, '_blank');
+    openReport(`InvoiceOuts/${$props.invoiceOutData.id}/download`, {}, '_blank');
 };
 
 const showInvoiceCsv = () => {

src/pages/Route/RouteList.vue

@@ -17,7 +17,9 @@ import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
+import { usePrintService } from 'src/composables/usePrintService';
 
+const { openReport } = usePrintService();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const quasar = useQuasar();
@@ -235,18 +237,15 @@ const cloneRoutes = () => {
 const showRouteReport = () => {
     const ids = selectedRows.value.map((row) => row?.id);
     const idString = ids.join(',');
-    let url;
-
-    if (selectedRows.value.length <= 1) {
-        url = `api/Routes/${idString}/driver-route-pdf?access_token=${session.getTokenMultimedia()}`;
-    } else {
-        const params = new URLSearchParams({
-            access_token: session.getTokenMultimedia(),
+    let url = `Routes/${idString}/driver-route-pdf`;
+    let params = {};
+    if (selectedRows.value.length >= 1) {
+        params = {
             id: idString,
-        });
-        url = `api/Routes/downloadZip?${params.toString()}`;
+        };
+        url = `Routes/downloadZip`;
     }
-    window.open(url, '_blank');
+    openReport(url, params, '_blank');
 };
 
 function markAsServed() {

src/pages/Ticket/TicketFutureFilter.vue

@@ -153,7 +153,7 @@ onMounted(async () => {
                         :label="t('params.state')"
                         v-model="params.state"
                         :options="stateOptions"
-                        option-value="code"
+                        option-value="id"
                         option-label="name"
                         @update:model-value="searchFn()"
                         dense
@@ -169,7 +169,7 @@ onMounted(async () => {
                         :label="t('params.futureState')"
                         v-model="params.futureState"
                         :options="stateOptions"
-                        option-value="code"
+                        option-value="id"
                         option-label="name"
                         @update:model-value="searchFn()"
                         dense