fix: refs #7197 vat, intrastat, filter and list sections

src/components/CrudModel.vue

@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { computed, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useValidator } from 'src/composables/useValidator';
@@ -67,10 +67,6 @@ const $props = defineProps({
         default: '',
         description: 'It is used for redirect on click "save and continue"',
     },
-    hasSubtoolbar: {
-        type: Boolean,
-        default: true,
-    },
 });
 
 const isLoading = ref(false);
@@ -79,7 +75,6 @@ const originalData = ref();
 const vnPaginateRef = ref();
 const formData = ref();
 const saveButtonRef = ref(null);
-const watchChanges = ref();
 const formUrl = computed(() => $props.url);
 
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
@@ -94,7 +89,19 @@ defineExpose({
     saveChanges,
     getChanges,
     formData,
-    vnPaginateRef,
+});
+
+onBeforeRouteLeave((to, from, next) => {
+    if (hasChanges.value)
+        quasar.dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.unsavedPopup.title'),
+                message: t('globals.unsavedPopup.subtitle'),
+                promise: () => next(),
+            },
+        });
+    else next();
 });
 
 async function fetch(data) {
@@ -103,26 +110,19 @@ async function fetch(data) {
         data.map((d) => (d.$index = $index++));
     }
 
-    resetData(data);
+    originalData.value = data && JSON.parse(JSON.stringify(data));
+    formData.value = data && JSON.parse(JSON.stringify(data));
+    watch(formData, () => (hasChanges.value = true), { deep: true });
 
     emit('onFetch', data);
     return data;
 }
 
-function resetData(data) {
-    if (!data) return;
-    originalData.value = JSON.parse(JSON.stringify(data));
-    formData.value = JSON.parse(JSON.stringify(data));
-
-    if (watchChanges.value) watchChanges.value(); //destoy watcher
-    watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true });
-}
-
 async function reset() {
     await fetch(originalData.value);
     hasChanges.value = false;
 }
-
+// eslint-disable-next-line vue/no-dupe-keys
 function filter(value, update, filterOptions) {
     update(
         () => {
@@ -284,9 +284,8 @@ function isEmpty(obj) {
     if (obj.length > 0) return false;
 }
 
-async function reload(params) {
+async function reload() {
-    const data = await vnPaginateRef.value.fetch(params);
+    vnPaginateRef.value.fetch();
-    fetch(data);
 }
 
 watch(formUrl, async () => {
@@ -298,11 +297,10 @@ watch(formUrl, async () => {
     <VnPaginate
         :url="url"
         :limit="limit"
+        v-bind="$attrs"
         @on-fetch="fetch"
-        @on-change="resetData"
         :skeleton="false"
         ref="vnPaginateRef"
-        v-bind="$attrs"
     >
         <template #body v-if="formData">
             <slot
@@ -313,8 +311,8 @@ watch(formUrl, async () => {
             ></slot>
         </template>
     </VnPaginate>
-    <SkeletonTable v-if="!formData" :columns="$attrs.columns?.length" />
+    <SkeletonTable v-if="!formData" />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubtoolbar">
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <QBtnGroup push style="column-gap: 10px">
             <slot name="moreBeforeActions" />
             <QBtn

src/components/common/VnSelect.vue

@@ -170,8 +170,8 @@ watch(modelValue, (newValue) => {
         map-options
         use-input
         @filter="filterHandler"
-        hide-selected
+        :hide-selected="$attrs['hide-selected'] ?? true"
-        fill-input
+        :fill-input="$attrs['fill-input'] ?? true"
         ref="vnSelectRef"
         lazy-rules
         :class="{ required: $attrs.required }"

src/i18n/locale/en.yml

@@ -113,6 +113,9 @@ globals:
     name: Name
     new: New
     comment: Comment
+    unsavedPopup:
+        title: Unsaved changes will be lost
+        subtitle: Are you sure exit without saving?
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
@@ -279,8 +282,8 @@ customer:
     extendedList:
         tableVisibleColumns:
             id: Identifier
-            name: Comercial name
+            name: Name
-            socialName: Business name
+            socialName: Social name
             fi: Tax number
             salesPersonFk: Salesperson
             credit: Credit
@@ -992,18 +995,6 @@ route:
             shipped: Preparation date
             viewCmr: View CMR
             downloadCmrs: Download CMRs
-    columnLabels:
-        Id: Id
-        vehicle: Vehicle
-        description: Description
-        isServed: Served
-        worker: Worker
-        date: Date
-        started: Started
-        actions: Actions
-        agency: Agency
-        volume: Volume
-        finished: Finished
 supplier:
     pageTitles:
         suppliers: Suppliers

src/i18n/locale/es.yml

@@ -107,13 +107,15 @@ globals:
         aliasUsers: Usuarios
         subRoles: Subroles
         inheritedRoles: Roles heredados
-        workers: Trabajadores
     created: Fecha creación
     worker: Trabajador
     now: Ahora
     name: Nombre
     new: Nuevo
     comment: Comentario
+    unsavedPopup:
+        title: Los cambios que no haya guardado se perderán
+        subtitle: ¿Seguro que quiere salir sin guardar?
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
@@ -278,7 +280,7 @@ customer:
     extendedList:
         tableVisibleColumns:
             id: Identificador
-            name: Nombre Comercial
+            name: Nombre
             socialName: Razón social
             fi: NIF / CIF
             salesPersonFk: Comercial
@@ -978,18 +980,6 @@ route:
             shipped: Fecha preparación
             viewCmr: Ver CMR
             downloadCmrs: Descargar CMRs
-    columnLabels:
-        Id: Id
-        vehicle: Vehículo
-        description: Descripción
-        isServed: Servida
-        worker: Trabajador
-        date: Fecha
-        started: Iniciada
-        actions: Acciones
-        agency: Agencia
-        volume: Volumen
-        finished: Finalizada
 supplier:
     pageTitles:
         suppliers: Proveedores

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -2,6 +2,7 @@
 import VnCard from 'components/common/VnCard.vue';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
 import InvoiceInFilter from '../InvoiceInFilter.vue';
+import InvoiceInSearchbar from '../InvoiceInSearchbar.vue';
 
 const filter = {
     include: [
@@ -30,6 +31,10 @@ const filter = {
         search-data-key="InvoiceInList"
         search-url="InvoiceIns/filter"
         searchbar-label="Search invoice"
-        searchbar-info="You can search by invoice reference"
+        searchbar-info="Search invoices in by id or supplier fiscal name"
-    />
+    >
+        <template #searchbar>
+            <InvoiceInSearchbar />
+        </template>
+    </VnCard>
 </template>

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -73,6 +73,12 @@ const columns = computed(() => [
 
 const getTotal = (data, key) =>
     data.reduce((acc, cur) => acc + +String(cur[key]).replace(',', '.'), 0);
+
+const formatOpt = (row, { model, options }, prop) => {
+    const obj = row[model];
+    const option = options.find(({ id }) => id == obj);
+    return option ? `${obj}:${option[prop]}` : '';
+};
 </script>
 <template>
     <FetchData
@@ -92,7 +98,7 @@ const getTotal = (data, key) =>
             ref="invoiceInFormRef"
             data-key="InvoiceInIntrastats"
             url="InvoiceInIntrastats"
-            :auto-load="!currency"
+            auto-load
             :data-required="{ invoiceInFk: invoiceInId }"
             :filter="filter"
             v-model:selected="rowsSelected"
@@ -124,6 +130,9 @@ const getTotal = (data, key) =>
                                 option-value="id"
                                 option-label="description"
                                 :filter-options="['id', 'description']"
+                                :hide-selected="false"
+                                :fill-input="false"
+                                :display-value="formatOpt(row, col, 'description')"
                             >
                                 <template #option="scope">
                                     <QItem v-bind="scope.itemProps">
@@ -247,7 +256,11 @@ const getTotal = (data, key) =>
     }
 }
 </style>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.q-table tr .q-td:nth-child(2) input) {
+    display: none;
+}
+</style>
 <i18n>
     en:
         amount: Amount

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -69,6 +69,7 @@ const columns = computed(() => [
         model: 'taxTypeSageFk',
         optionValue: 'id',
         optionLabel: 'id',
+
         sortable: true,
         tabindex: 3,
         align: 'left',
@@ -162,8 +163,14 @@ async function addExpense() {
     }
 }
 const getTotalTaxableBase = (rows) =>
-    rows.reduce((acc, { taxableBase }) => acc + +taxableBase, 0);
+    rows.reduce((acc, { taxableBase }) => acc + +(taxableBase || 0), 0);
 const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0);
+
+const formatOpt = (row, { model, options }, prop) => {
+    const obj = row[model];
+    const option = options.find(({ id }) => id == obj);
+    return option ? `${obj}:${option[prop]}` : '';
+};
 </script>
 <template>
     <FetchData
@@ -254,8 +261,9 @@ const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0)
                             :option-value="col.optionValue"
                             :option-label="col.optionLabel"
                             :filter-options="['id', 'vat']"
-                            :autofocus="col.tabIndex == 1"
+                            :hide-selected="false"
-                            input-debounce="0"
+                            :fill-input="false"
+                            :display-value="formatOpt(row, col, 'vat')"
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
@@ -280,6 +288,9 @@ const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0)
                             :filter-options="['id', 'transaction']"
                             :autofocus="col.tabIndex == 1"
                             input-debounce="0"
+                            :hide-selected="false"
+                            :fill-input="false"
+                            :display-value="formatOpt(row, col, 'transaction')"
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
@@ -474,11 +485,16 @@ const getTotalRate = (rows) => rows.reduce((acc, cur) => acc + +taxRate(cur), 0)
         />
     </QPageSticky>
 </template>
+
 <style lang="scss" scoped>
 .bg {
     background-color: var(--vn-light-gray);
 }
 
+:deep(.q-table tr td:nth-child(n + 4):nth-child(-n + 5) input) {
+    display: none;
+}
+
 @media (max-width: $breakpoint-xs) {
     .q-dialog {
         .q-card {

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -29,11 +29,7 @@ const suppliers = ref([]);
                         v-model="params.supplierRef"
                         is-outlined
                         lazy-rules
-                    >
+                    />
-                        <template #prepend>
-                            <QIcon name="vn:client" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
                 </QItemSection>
             </QItem>
             <QItem>
@@ -43,11 +39,7 @@ const suppliers = ref([]);
                         v-model="params.fi"
                         is-outlined
                         lazy-rules
-                    >
+                    />
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
                 </QItemSection>
             </QItem>
             <QItem>
@@ -63,6 +55,7 @@ const suppliers = ref([]);
                         dense
                         outlined
                         rounded
+                        :filter-options="['id', 'name']"
                     >
                     </VnSelect>
                 </QItemSection>
@@ -74,11 +67,7 @@ const suppliers = ref([]);
                         v-model="params.account"
                         is-outlined
                         lazy-rules
-                    >
+                    />
-                        <template #prepend>
-                            <QIcon name="person" size="sm" />
-                        </template>
-                    </VnInput>
                 </QItemSection>
             </QItem>
             <QItem>
@@ -123,11 +112,7 @@ const suppliers = ref([]);
                             v-model="params.serialNumber"
                             is-outlined
                             lazy-rules
-                        >
+                        />
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -137,11 +122,7 @@ const suppliers = ref([]);
                             v-model="params.serial"
                             is-outlined
                             lazy-rules
-                        >
+                        />
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -151,11 +132,7 @@ const suppliers = ref([]);
                             v-model="params.awbCode"
                             is-outlined
                             lazy-rules
-                        >
+                        />
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
                     </QItemSection>
                 </QItem>
             </QExpansionItem>
@@ -166,7 +143,7 @@ const suppliers = ref([]);
 <i18n>
 en:
     params:
-        search: ID
+        search: Id or supplier name
         supplierRef: Supplier ref.
         supplierFk: Supplier
         fi: Supplier fiscal id
@@ -177,12 +154,15 @@ en:
         dued: Dued
         serialNumber: Serial Number
         serial: Serial
-        account: Account
+        account: Ledger account
         isBooked: is booked
         correctedFk: Rectificatives
+        issued: Issued
+        to: To
+        awbCode: AWB
 es:
     params:
-        search: Contiene
+        search: Id o nombre proveedor
         supplierRef: Ref. proveedor
         supplierFk: Proveedor
         clientFk: Cliente
@@ -193,7 +173,7 @@ es:
         amount: Importe
         issued: Emitida
         isBooked: Conciliada
-        account: Cuenta
+        account: Cuenta contable
         created: Creada
         dued: Vencida
         correctedFk: Rectificativas

src/pages/InvoiceIn/InvoiceInList.vue

@@ -1,44 +1,63 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDate, toCurrency } from 'src/filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import InvoiceInFilter from './InvoiceInFilter.vue';
-import { getUrl } from 'src/composables/getUrl';
 import InvoiceInSummary from './Card/InvoiceInSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import InvoiceInSearchbar from 'src/pages/InvoiceIn/InvoiceInSearchbar.vue';
 
 const stateStore = useStateStore();
-const router = useRouter();
 const { viewSummary } = useSummaryDialog();
-let url = ref();
 const { t } = useI18n();
 
-onMounted(async () => {
+onMounted(async () => (stateStore.rightDrawer = true));
-    stateStore.rightDrawer = true;
-    url.value = await getUrl('');
-});
 onUnmounted(() => (stateStore.rightDrawer = false));
-
+const exprBuilder = (param, value) => {
-function navigate(id) {
+    let minHour, maxHour;
-    router.push({ path: `/invoice-in/${id}` });
+    switch (param) {
-}
+        case 'issued':
+            minHour = new Date(value);
+            minHour.setHours(0, 0, 0, 0);
+            maxHour = new Date(value);
+            maxHour.setHours(23, 59, 59, 59);
+            return {
+                'ii.issued': {
+                    between: [minHour, maxHour],
+                },
+            };
+        case 'id':
+        case 'supplierFk':
+        case 'supplierRef':
+        case 'serialNumber':
+        case 'serial':
+        case 'created':
+        case 'isBooked':
+            return { [`ii.${param}`]: value };
+        case 'account':
+        case 'fi':
+            return { [`s.${param}`]: value };
+        case 'awbCode':
+            return { 'awb.code': value };
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { 'ii.id': value }
+                : { 's.name': { like: `%${value}%` } };
+        default:
+            return { [param]: value };
+    }
+};
 </script>
 
 <template>
-    <VnSearchbar
+    <InvoiceInSearchbar />
-        data-key="InvoiceInList"
-        :label="t('Search invoice')"
-        :info="t('You can search by invoice reference')"
-    />
     <RightMenu>
         <template #right-panel>
             <InvoiceInFilter data-key="InvoiceInList" />
@@ -51,13 +70,14 @@ function navigate(id) {
                 url="InvoiceIns/filter"
                 order="issued DESC, id DESC"
                 auto-load
+                :expr-builder="exprBuilder"
             >
                 <template #body="{ rows }">
                     <CardList
                         v-for="row of rows"
                         :key="row.id"
                         :title="row.supplierRef"
-                        @click="navigate(row.id)"
+                        @click="$router.push({ path: `/invoice-in/${row.id}` })"
                         :id="row.id"
                     >
                         <template #list-items>
@@ -102,7 +122,9 @@ function navigate(id) {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
+                                @click.stop="
+                                    $router.push({ path: `/invoice-in/${row.id}` })
+                                "
                                 outline
                                 type="reset"
                             />
@@ -115,7 +137,7 @@ function navigate(id) {
                                 class="q-mt-sm"
                             />
                             <QBtn
-                                :label="t('Download')"
+                                :label="t('globals.download')"
                                 class="q-mt-sm"
                                 @click.stop="downloadFile(row.dmsFk)"
                                 type="submit"
@@ -131,10 +153,3 @@ function navigate(id) {
         <QBtn color="primary" icon="add" size="lg" round :href="`/#/invoice-in/create`" />
     </QPageSticky>
 </template>
-
-<i18n>
-es:
-    Search invoice: Buscar factura recibida
-    You can search by invoice reference: Puedes buscar por referencia de la factura
-    Download: Descargar
-</i18n>

src/pages/InvoiceIn/InvoiceInSearchbar.vue

@@ -0,0 +1,17 @@
+<script setup>
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+</script>
+<template>
+    <VnSearchbar
+        data-key="InvoiceInList"
+        :label="t('Search invoice')"
+        :info="t('Search invoices in by id or supplier fiscal name')"
+    />
+</template>
+<i18n>
+es:
+    Search invoice: Buscar factura recibida
+    Search invoices in by id or supplier fiscal name: Buscar facturas recibidas por id o por nombre fiscal del proveedor
+</i18n>

src/pages/InvoiceIn/locale/es.yml

@@ -1,2 +0,0 @@
-Search invoice: Buscar factura recibida
-You can search by invoice reference: Puedes buscar por referencia de la factura