src/components/ui/VnFilterPanel.vue

@@ -117,14 +117,17 @@ async function search(evt) {
     isLoading.value = true;
     const filter = { ...userParams.value, ...$props.modelValue };
     store.userParamsChanged = true;
+    try {
         const { params: newParams } = await arrayData.addFilter({
             params: filter,
         });
         userParams.value = newParams;
 
         if (!$props.showAll && !Object.values(filter).length) store.data = [];
-
+    } finally {
         isLoading.value = false;
+    }
+
     emit('search');
 }
 

src/i18n/locale/en.yml

@@ -251,6 +251,7 @@ globals:
         privileges: Privileges
         ldap: LDAP
         samba: Samba
+        serial: Serial
     created: Created
     worker: Worker
     now: Now

src/i18n/locale/es.yml

@@ -253,6 +253,7 @@ globals:
         packages: Bultos
         ldap: LDAP
         samba: Samba
+        serial: Facturas por serie
     created: Fecha creación
     worker: Trabajador
     now: Ahora

src/pages/InvoiceIn/Serial/InvoiceInSerial.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import InvoiceInSerialFilter from './InvoiceInSerialFilter.vue';
+
+const { t } = useI18n();
+
+const cols = computed(() => [
+    {
+        align: 'left',
+        name: 'serial',
+        label: t('Serial'),
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        name: 'pending',
+        label: t('Pending'),
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        name: 'total',
+        label: 'Total',
+        columnFilter: false,
+    },
+]);
+
+const daysAgo = ref();
+
+onBeforeMount(async () => {
+    const tableParam = useRoute().query.table;
+
+    if (tableParam) daysAgo.value = JSON.parse(tableParam).daysAgo;
+    else
+        daysAgo.value = (
+            await axios.get('InvoiceInConfigs/findOne', {
+                params: { filter: { fields: ['daysAgo'] } },
+            })
+        ).data?.daysAgo;
+});
+</script>
+<template>
+    <RightMenu>
+        <template #right-panel>
+            <InvoiceInSerialFilter data-key="InvoiceInSerial" />
+        </template>
+    </RightMenu>
+    <VnTable
+        v-if="!isNaN(daysAgo)"
+        data-key="InvoiceInSerial"
+        url="InvoiceIns/getSerial"
+        :columns="cols"
+        :right-search="false"
+        :user-params="{ daysAgo }"
+        :disable-option="{ card: true }"
+        auto-load
+    />
+</template>
+<i18n>
+es:
+    Serial: Serie
+    Pending: Pendiente
+</i18n>

src/pages/InvoiceIn/Serial/InvoiceInSerialFilter.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+defineProps({ dataKey: { type: String, required: true } });
+
+const { t } = useI18n();
+</script>
+<template>
+    <VnFilterPanel :data-key="dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QItem>
+                <QItemSection>
+                    <VnInputNumber
+                        v-model="params.daysAgo"
+                        :label="t('params.daysAgo')"
+                        outlined
+                        rounded
+                        dense
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.serial"
+                        :label="t('params.serial')"
+                        outlined
+                        rounded
+                        dense
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+<i18n>
+en:
+    params:
+        daysAgo: Last days
+        serial: serial
+es:
+    params:
+        daysAgo: Últimos días
+        serial: serie
+</i18n>

src/router/modules/invoiceIn.js

@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'InvoiceInMain' },
     menus: {
-        main: ['InvoiceInList'],
+        main: ['InvoiceInList', 'InvoiceInSerial'],
         card: [
             'InvoiceInBasicData',
             'InvoiceInVat',
@@ -37,6 +37,16 @@ export default {
                     },
                     component: () => import('src/pages/InvoiceIn/InvoiceInList.vue'),
                 },
+                {
+                    path: 'serial',
+                    name: 'InvoiceInSerial',
+                    meta: {
+                        title: 'serial',
+                        icon: 'view_list',
+                    },
+                    component: () =>
+                        import('src/pages/InvoiceIn/Serial/InvoiceInSerial.vue'),
+                },
                 {
                     path: 'create',
                     name: 'InvoiceInCreare',