Extra community

src/components/ui/CardDescriptor.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { onMounted, useSlots, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 
@@ -34,7 +33,8 @@ const $props = defineProps({
 
 const slots = useSlots();
 const { t } = useI18n();
-const entity = computed(() => useArrayData($props.dataKey).store.data);
+const entity = ref(null);
+
 onMounted(async () => {
     await getData();
     watch(
@@ -54,9 +54,9 @@ async function getData() {
         skip: 0,
     });
     const { data } = await arrayData.fetch({ append: false });
+    entity.value = data;
     emit('onFetch', data);
 }
-
 const emit = defineEmits(['onFetch']);
 </script>
 

src/i18n/en/index.js

@@ -39,6 +39,16 @@ export default {
         },
         noSelectedRows: `You don't have any line selected`,
         downloadCSVSuccess: 'CSV downloaded successfully',
+        // labels compartidos entre vistas
+        reference: 'Reference',
+        agency: 'Agency',
+        wareHouseOut: 'Warehouse Out',
+        wareHouseIn: 'Warehouse In',
+        landed: 'Landed',
+        shipped: 'Shipped',
+        totalEntries: 'Total entries',
+        amount: 'Amount',
+        packages: 'Packages',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -229,7 +239,6 @@ export default {
             invoice: 'Invoice',
             shipped: 'Shipped',
             landed: 'Landed',
-            packages: 'Packages',
             consigneePhone: 'Consignee phone',
             consigneeMobile: 'Consignee mobile',
             clientPhone: 'Client phone',
@@ -246,7 +255,6 @@ export default {
             description: 'Description',
             price: 'Price',
             discount: 'Discount',
-            amount: 'Amount',
             packing: 'Packing',
             hasComponentLack: 'Component lack',
             itemShortage: 'Not visible',
@@ -339,7 +347,6 @@ export default {
             assignedTo: 'Assigned',
             created: 'Created',
             state: 'State',
-            packages: 'Packages',
             picked: 'Picked',
             returnOfMaterial: 'Return of material authorization (RMA)',
         },
@@ -363,7 +370,6 @@ export default {
             ref: 'Reference',
             issued: 'Issued',
             shortIssued: 'Issued',
-            amount: 'Amount',
             client: 'Client',
             created: 'Created',
             shortCreated: 'Created',
@@ -373,7 +379,6 @@ export default {
         },
         card: {
             issued: 'Issued',
-            amount: 'Amount',
             client: 'Client',
             company: 'Company',
             customerCard: 'Customer card',
@@ -439,7 +444,7 @@ export default {
             create: 'Create',
             summary: 'Summary',
             basicData: 'Basic Data',
-            log: 'Logs'
+            log: 'Logs',
         },
         list: {
             parking: 'Parking',
@@ -576,6 +581,7 @@ export default {
     supplier: {
         pageTitles: {
             suppliers: 'Suppliers',
+            supplier: 'Supplier',
             list: 'List',
             create: 'Create',
             summary: 'Summary',
@@ -617,26 +623,16 @@ export default {
         },
     },
     travel: {
-        shared: {
-            reference: 'Reference',
-            agency: 'Agency',
-            wareHouseOut: 'Warehouse Out',
-            wareHouseIn: 'Warehouse In',
-            landed: 'Landed',
-            shipped: 'Shipped',
-            totalEntries: 'Total entries',
-        },
         pageTitles: {
             travel: 'Travels',
             list: 'List',
             create: 'Create',
             summary: 'Summary',
-            extraCommunity: 'ExtraCommunity',
+            extraCommunity: 'Extra community',
         },
         summary: {
             confirmed: 'Confirmed',
             entryId: 'Entry Id',
-            supplier: 'Supplier',
             freight: 'Freight',
             package: 'Package',
             delivered: 'Delivered',
@@ -646,6 +642,16 @@ export default {
             CloneTravelAndEntries: 'Clone travel and his entries',
             AddEntry: 'Add entry',
         },
+        variables: {
+            search: 'Id/Reference',
+            agencyModeFk: 'Agency',
+            warehouseInFk: ' Warehouse In',
+            warehouseOutFk: 'Warehouse Out',
+            landedFrom: 'Landed from',
+            landedTo: 'Landed to',
+            continent: 'Continent out',
+            totalEntries: 'Total entries',
+        },
     },
     components: {
         topbar: {},

src/i18n/es/index.js

@@ -39,6 +39,16 @@ export default {
         },
         noSelectedRows: `No tienes ninguna línea seleccionada`,
         downloadCSVSuccess: 'Descarga de CSV exitosa',
+        // labels compartidos entre vistas
+        reference: 'Referencia',
+        agency: 'Agencia',
+        wareHouseOut: 'Alm. salida',
+        wareHouseIn: 'Alm. entrada',
+        landed: 'F. entrega',
+        shipped: 'F. envío',
+        totalEntries: 'Ent. totales',
+        amount: 'Importe',
+        packages: 'Bultos',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -228,7 +238,6 @@ export default {
             invoice: 'Factura',
             shipped: 'Enviado',
             landed: 'Entregado',
-            packages: 'Bultos',
             consigneePhone: 'Tel. consignatario',
             consigneeMobile: 'Móv. consignatario',
             clientPhone: 'Tel. cliente',
@@ -245,7 +254,6 @@ export default {
             description: 'Descripción',
             price: 'Precio',
             discount: 'Descuento',
-            amount: 'Importe',
             packing: 'Encajado',
             hasComponentLack: 'Faltan componentes',
             itemShortage: 'No visible',
@@ -338,7 +346,6 @@ export default {
             assignedTo: 'Asignada a',
             created: 'Creada',
             state: 'Estado',
-            packages: 'Bultos',
             picked: 'Recogida',
             returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
         },
@@ -363,7 +370,6 @@ export default {
             ref: 'Referencia',
             issued: 'Fecha emisión',
             shortIssued: 'F. emisión',
-            amount: 'Importe',
             client: 'Cliente',
             created: 'Fecha creación',
             shortCreated: 'F. creación',
@@ -373,7 +379,6 @@ export default {
         },
         card: {
             issued: 'Fecha emisión',
-            amount: 'Importe',
             client: 'Cliente',
             company: 'Empresa',
             customerCard: 'Ficha del cliente',
@@ -441,7 +446,7 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             basicData: 'Datos básicos',
-            log: 'Registros de auditoría'
+            log: 'Registros de auditoría',
         },
         list: {
             parking: 'Parking',
@@ -578,6 +583,7 @@ export default {
     supplier: {
         pageTitles: {
             suppliers: 'Proveedores',
+            supplier: 'Proveedor',
             list: 'Listado',
             create: 'Crear',
             summary: 'Resumen',
@@ -598,7 +604,7 @@ export default {
             payMethod: 'Método de pago',
             payDeadline: 'Plazo de pago',
             payDay: 'Día de pago',
-            account: 'Account',
+            account: 'Cuenta',
             fiscalData: 'Data fiscal',
             sageTaxType: 'Tipo de impuesto Sage',
             sageTransactionType: 'Tipo de transacción Sage',
@@ -619,26 +625,16 @@ export default {
         },
     },
     travel: {
-        shared: {
-            reference: 'Referencia',
-            agency: 'Agencia',
-            wareHouseOut: 'Alm. salida',
-            wareHouseIn: 'Alm. entrada',
-            landed: 'F. entrega',
-            shipped: 'F. envío',
-            totalEntries: 'Ent. totales',
-        },
         pageTitles: {
             travel: 'Envíos',
             list: 'Listado',
             create: 'Crear',
             summary: 'Resumen',
-            extraCommunity: 'ExtraCommunity',
+            extraCommunity: 'Extra comunitarios',
         },
         summary: {
             confirmed: 'Confirmado',
             entryId: 'Id entrada',
-            supplier: 'Proveedor',
             freight: 'Porte',
             package: 'Embalaje',
             delivered: 'Enviada',
@@ -648,6 +644,16 @@ export default {
             CloneTravelAndEntries: 'Clonar travel y sus entradas',
             AddEntry: 'Añadir entrada',
         },
+        variables: {
+            search: 'Id/Referencia',
+            agencyModeFk: 'Agencia',
+            warehouseInFk: 'Alm. entrada',
+            warehouseOutFk: ' Alm. salida',
+            landedFrom: 'Llegada desde',
+            landedTo: 'Llegada hasta',
+            continent: 'Cont. Salida',
+            totalEntries: 'Ent. totales',
+        },
     },
     components: {
         topbar: {},

src/pages/Claim/Card/ClaimBasicData.vue

@@ -184,7 +184,7 @@ const statesFilter = {
                 <div class="col">
                     <QInput
                         v-model.number="data.packages"
-                        :label="t('claim.basicData.packages')"
+                        :label="t('globals.packages')"
                         :rules="validate('claim.packages')"
                         type="number"
                     />

src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue

@@ -61,14 +61,11 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         data-key="invoiceOutData"
     >
         <template #menu="{ entity }">
-            <InvoiceOutDescriptorMenu :invoiceOut="entity" />
+            <InvoiceOutDescriptorMenu :invoice-out="entity" />
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />
-            <VnLv
+            <VnLv :label="t('globals.amount')" :value="toCurrency(entity.amount)" />
-                :label="t('invoiceOut.card.amount')"
-                :value="toCurrency(entity.amount)"
-            />
             <VnLv v-if="entity.client" :label="t('invoiceOut.card.client')">
                 <template #value>
                     <span class="link">

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -195,7 +195,7 @@ const downloadCsv = (rows) => {
                                 :value="toDate(row.issued)"
                             />
                             <VnLv
-                                :label="t('invoiceOut.list.amount')"
+                                :label="t('globals.amount')"
                                 :value="toCurrency(row.amount)"
                             />
                             <VnLv

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -321,7 +321,7 @@ onMounted(async () => {
                         icon-right="search"
                         no-caps
                         class="q-mr-sm"
-                        @click="search"
+                        @click="search()"
                     />
                     <QBtn color="primary" icon-right="refresh" no-caps @click="refresh" />
                 </div>

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const filter = {
+    fields: [
+        'id',
+        'name',
+        'nickname',
+        'nif',
+        'payMethodFk',
+        'payDemFk',
+        'payDay',
+        'isActive',
+        'isSerious',
+        'isTrucker',
+        'account',
+    ],
+    include: [
+        {
+            relation: 'payMethod',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'payDem',
+            scope: {
+                fields: ['id', 'payDem'],
+            },
+        },
+        {
+            relation: 'client',
+            scope: {
+                fields: ['id', 'fi'],
+            },
+        },
+    ],
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+const setData = (entity) => {
+    data.value = useCardDescription(entity.ref, entity.id);
+};
+</script>
+
+<template>
+    <CardDescriptor
+        module="Supplier"
+        :url="`Suppliers/${entityId}`"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :filter="filter"
+        @on-fetch="setData"
+        data-key="Supplier"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('supplier.summary.taxNumber')" :value="entity.nif" />
+            <VnLv label="Alias" :value="entity.nickname" />
+            <VnLv
+                :label="t('supplier.summary.payMethod')"
+                :value="entity.payMethod.name"
+            />
+            <VnLv
+                :label="t('supplier.summary.payDeadline')"
+                :value="entity.payDem.payDem"
+            />
+            <VnLv :label="t('supplier.summary.payDay')" :value="entity.payDay" />
+            <VnLv :label="t('supplier.summary.account')" :value="entity.account" />
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+
+</i18n>

src/pages/Supplier/Card/SupplierDescriptorProxy.vue

@@ -0,0 +1,16 @@
+<script setup>
+import SupplierDescriptor from './SupplierDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <SupplierDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

src/pages/Supplier/Card/SupplierSummary.vue

@@ -7,6 +7,7 @@ import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { getUrl } from 'src/composables/getUrl';
 import { useRole } from 'src/composables/useRole';
+import { dashIfEmpty } from 'src/filters';
 
 onUpdated(() => summaryRef.value.fetch());
 
@@ -71,7 +72,7 @@ const isAdministrative = computed(() => {
                 <VnLv :label="t('supplier.summary.responsible')">
                     <template #value>
                         <span class="link">
-                            {{ supplier.worker?.user?.nickname || '-' }}
+                            {{ dashIfEmpty(supplier.worker?.user?.nickname) }}
                             <WorkerDescriptorProxy
                                 v-if="supplier.worker?.user?.id"
                                 :id="supplier.worker?.user?.id"
@@ -81,14 +82,10 @@ const isAdministrative = computed(() => {
                 </VnLv>
                 <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
                     <template #value>
-                        <span> {{ supplier.note || '-' }} </span>
+                        <span> {{ dashIfEmpty(supplier.note) }} </span>
-                    </template>
-                </VnLv>
-                <VnLv :label="t('supplier.summary.notes')" class="q-mb-xs">
-                    <template #value>
-                        <span> {{ supplier.note || '-' }} </span>
                     </template>
                 </VnLv>
+
                 <VnLv :label="t('verified')" class="q-mb-xs">
                     <template #value>
                         <QCheckbox
@@ -118,11 +115,13 @@ const isAdministrative = computed(() => {
                 <span v-else> {{ t('supplier.summary.billingData') }}</span>
                 <VnLv
                     :label="t('supplier.summary.payMethod')"
-                    :value="supplier.payMethod?.name || '-'"
+                    :value="supplier.payMethod?.name"
+                    dash
                 />
                 <VnLv
                     :label="t('supplier.summary.payDeadline')"
-                    :value="supplier.payDem?.payDem || '-'"
+                    :value="supplier.payDem?.payDem"
+                    dash
                 />
                 <VnLv :label="t('supplier.summary.payDay')" :value="supplier.payDay" />
                 <VnLv :label="t('supplier.summary.account')" :value="supplier.account" />
@@ -135,19 +134,23 @@ const isAdministrative = computed(() => {
                 <span v-else> {{ t('supplier.summary.fiscalData') }}</span>
                 <VnLv
                     :label="t('supplier.summary.sageTaxType')"
-                    :value="supplier.sageTaxType?.vat || '-'"
+                    :value="supplier.sageTaxType?.vat"
+                    dash
                 />
                 <VnLv
                     :label="t('supplier.summary.sageTransactionType')"
-                    :value="supplier.sageTransactionType?.transaction || '-'"
+                    :value="supplier.sageTransactionType?.transaction"
+                    dash
                 />
                 <VnLv
                     :label="t('supplier.summary.sageWithholding')"
-                    :value="supplier.sageWithholding?.withholding || '-'"
+                    :value="supplier.sageWithholding?.withholding"
+                    dash
                 />
                 <VnLv
                     :label="t('supplier.summary.supplierActivity')"
-                    :value="supplier.supplierActivity?.name || '-'"
+                    :value="supplier.supplierActivity?.name"
+                    dash
                 />
                 <VnLv
                     :label="t('supplier.summary.healthRegister')"
@@ -170,11 +173,13 @@ const isAdministrative = computed(() => {
                 />
                 <VnLv
                     :label="t('supplier.summary.province')"
-                    :value="supplier.province?.name || '-'"
+                    :value="supplier.province?.name"
+                    dash
                 />
                 <VnLv
                     :label="t('supplier.summary.country')"
-                    :value="supplier.country?.country || '-'"
+                    :value="supplier.country?.country"
+                    dash
                 />
             </QCard>
         </template>

src/pages/Ticket/Card/TicketSummary.vue

@@ -207,7 +207,7 @@ async function changeState(value) {
                     :label="t('ticket.summary.landed')"
                     :value="toDate(ticket.landed)"
                 />
-                <VnLv :label="t('ticket.summary.packages')" :value="ticket.packages" />
+                <VnLv :label="t('globals.packages')" :value="ticket.packages" />
                 <VnLv
                     :label="t('ticket.summary.consigneePhone')"
                     :value="ticket.address.phone"
@@ -267,7 +267,7 @@ async function changeState(value) {
                             <QTh auto-width>{{ t('ticket.summary.description') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.discount') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.amount') }}</QTh>
+                            <QTh auto-width>{{ t('globals.amount') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.packing') }}</QTh>
                         </QTr>
                     </template>
@@ -391,7 +391,7 @@ async function changeState(value) {
                 v-if="ticket.packagings.length > 0 || ticket.services.length > 0"
             >
                 <a class="header link" :href="ticketUrl + 'package'">
-                    {{ t('ticket.summary.packages') }}
+                    {{ t('globals.packages') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
                 <QTable :rows="ticket.packagings" flat>
@@ -422,7 +422,7 @@ async function changeState(value) {
                             <QTh auto-width>{{ t('ticket.summary.description') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.taxClass') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.amount') }}</QTh>
+                            <QTh auto-width>{{ t('globals.amount') }}</QTh>
                         </QTr>
                     </template>
                     <template #body="props">

src/pages/Travel/Card/TravelDescriptor.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toDate } from 'src/filters';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const filter = {
+    fields: [
+        'id',
+        'ref',
+        'shipped',
+        'landed',
+        'totalEntries',
+        'warehouseInFk',
+        'warehouseOutFk',
+        'cargoSupplierFk',
+    ],
+    include: [
+        {
+            relation: 'warehouseIn',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'warehouseOut',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+
+const setData = (entity) => {
+    data.value = useCardDescription(entity.ref, entity.id);
+};
+</script>
+
+<template>
+    <CardDescriptor
+        module="Travel"
+        :url="`Travels/${entityId}`"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :filter="filter"
+        @on-fetch="setData"
+        data-key="travelData"
+    >
+        <template #body="{ entity }">
+            <VnLv :label="t('globals.wareHouseIn')" :value="entity.warehouseIn.name" />
+            <VnLv :label="t('globals.wareHouseOut')" :value="entity.warehouseOut.name" />
+            <VnLv :label="t('globals.shipped')" :value="toDate(entity.shipped)" />
+            <VnLv :label="t('globals.landed')" :value="toDate(entity.landed)" />
+            <VnLv :label="t('globals.totalEntries')" :value="entity.totalEntries" />
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+
+</i18n>

src/pages/Travel/Card/TravelDescriptorProxy.vue

@@ -0,0 +1,16 @@
+<script setup>
+import TravelDescriptor from './TravelDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <TravelDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

src/pages/Travel/Card/TravelSummary.vue

@@ -114,13 +114,13 @@ const entriesTableColumns = computed(() => {
             align: 'left',
         },
         {
-            label: t('travel.summary.supplier'),
+            label: t('supplier.pageTitles.supplier'),
             field: 'supplierName',
             name: 'supplierName',
             align: 'left',
         },
         {
-            label: t('travel.shared.reference'),
+            label: t('globals.reference'),
             field: 'reference',
             name: 'reference',
             align: 'left',
@@ -208,24 +208,21 @@ const openEntryDescriptor = () => {};
 
         <template #body>
             <QCard class="vn-one">
+                <VnLv :label="t('globals.shipped')" :value="toDate(travel.shipped)" />
+                <VnLv :label="t('globals.landed')" :value="toDate(travel.landed)" />
+                <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
                 <VnLv
-                    :label="t('travel.shared.shipped')"
+                    :label="t('globals.wareHouseOut')"
-                    :value="toDate(travel.shipped)"
-                />
-                <VnLv :label="t('travel.shared.landed')" :value="toDate(travel.landed)" />
-                <VnLv :label="t('travel.shared.agency')" :value="travel.agency?.name" />
-                <VnLv
-                    :label="t('travel.shared.wareHouseOut')"
                     :value="travel.warehouseOut?.name"
                 />
                 <VnLv
-                    :label="t('travel.shared.wareHouseIn')"
+                    :label="t('globals.wareHouseIn')"
                     :value="travel.warehouseIn?.name"
                 />
-                <VnLv :label="t('travel.shared.reference')" :value="travel.ref" />
+                <VnLv :label="t('globals.reference')" :value="travel.ref" />
 
                 <VnLv label="m³" :value="travel.m3" />
-                <VnLv :label="t('travel.shared.totalEntries')" :value="travel.m3" />
+                <VnLv :label="t('globals.totalEntries')" :value="travel.m3" />
 
                 <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
                     <template #value>

src/pages/Travel/ExtraCommunity.vue

@@ -1,229 +1,252 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed } from 'vue';
+import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
+import { QBtn, QField, QPopupEdit } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import { useStateStore } from 'stores/useStateStore';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import { toCurrency } from 'src/filters';
-// import invoiceOutService from 'src/services/invoiceOut.service';
+import { useArrayData } from 'composables/useArrayData';
-// import { toCurrency } from 'src/filters';
-import { QBadge, QBtn } from 'quasar';
-// import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { toDate } from 'src/filters';
+import { usePrintService } from 'composables/usePrintService';
+import travelService from 'src/services/travel.service';
+import ExtraCommunityFilter from './ExtraCommunityFilter.vue';
 
-// const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
+const stateStore = useStateStore();
-
-const rows = ref([]);
 const { t } = useI18n();
+const { openReport } = usePrintService();
 
-// const dateRange = reactive({
+const shippedFrom = ref(Date.vnNew());
-//     from: Date.vnFirstDayOfMonth(),
+const landedTo = ref(Date.vnNew());
-//     to: Date.vnLastDayOfMonth(),
-// });
 
-// const selectedCustomerId = ref(0);
+const arrayData = useArrayData('ExtraCommunity', {
-// const selectedWorkerId = ref(0);
+    url: 'Travels/extraCommunityFilter',
-
+    limit: 0,
-const filter = ref({
+    order: [
-    company: null,
+        'landed ASC',
-    country: null,
+        'shipped ASC',
-    clientId: null,
+        'travelFk',
-    client: null,
+        'loadPriority',
-    amount: null,
+        'agencyModeFk',
-    base: null,
+        'supplierName',
-    ticketId: null,
+        'evaNotes',
-    active: null,
+    ],
-    hasToInvoice: null,
+    userParams: {
-    verifiedData: null,
+        continent: 'AM',
-    comercial: null,
+        shippedFrom: shippedFrom.value,
+        landedTo: landedTo.value,
+    },
 });
 
+const rows = computed(() => arrayData.store.data || []);
+
 const tableColumnComponents = {
     id: {
         component: QBtn,
-        props: {},
+        attrs: () => ({ flat: true, color: 'blue', class: 'col-content' }),
-        event: () => {},
     },
-    supplierName: {
+    cargoSupplierNickname: {
         component: QBtn,
-        props: {},
+        attrs: () => ({ flat: true, color: 'blue', class: 'col-content' }),
-        event: () => {},
     },
     agencyModeName: {
         component: 'span',
-        props: {},
+        attrs: () => ({ class: 'col-content' }),
-        event: () => {},
-        // props: { flat: true, color: 'blue' },
-        // event: (prop) => selectCustomerId(prop.value),
     },
-    client: {
+    invoiceAmount: {
         component: 'span',
-        props: {},
+        attrs: () => ({
-        event: () => {},
+            class: 'col-content',
+        }),
     },
-    amount: {
+    ref: {
+        component: QField,
+        attrs: () => ({ readonly: true, dense: true }),
+    },
+    stickers: {
         component: 'span',
-        props: {},
+        attrs: () => ({ class: 'col-content' }),
-        event: () => {},
     },
-    base: {
+    kg: {
         component: 'span',
-        props: {},
+        attrs: () => ({ class: 'col-content' }),
-        event: () => {},
     },
-    ticketId: {
+    loadedKg: {
         component: 'span',
-        props: {},
+        attrs: () => ({ class: 'col-content' }),
-        event: () => {},
     },
-    active: {
+    volumeKg: {
         component: 'span',
-        props: { type: 'boolean' },
+        attrs: () => ({ class: 'col-content' }),
-        event: () => {},
     },
-    hasToInvoice: {
+    warehouseOutName: {
         component: 'span',
-        props: { type: 'boolean' },
+        attrs: () => ({ class: 'col-content' }),
-        event: () => {},
     },
-    verifiedData: {
+    shipped: {
         component: 'span',
-        props: { type: 'boolean' },
+        attrs: () => ({ class: 'col-content' }),
-        event: () => {},
     },
-    comercial: {
+    warehouseInName: {
-        component: QBtn,
+        component: 'span',
-        props: { flat: true, color: 'blue' },
+        attrs: () => ({ class: 'col-content' }),
-        // event: (prop) => selectWorkerId(prop.row.comercialId),
+    },
-        event: (prop) => {},
+    landed: {
+        component: 'span',
+        attrs: () => ({ class: 'col-content' }),
     },
 };
 
-const columns = ref([
+const columns = computed(() => {
-    {
+    return [
-        label: 'id',
+        {
-        field: 'id',
+            label: 'id',
-        name: 'id',
+            field: 'id',
-        align: 'left',
+            name: 'id',
-    },
+            align: 'left',
-    {
+            showValue: true,
-        label: 'cargoSupplierFk',
+        },
-        field: 'cargoSupplierFk',
+        {
-        name: 'cargoSupplierFk',
+            label: t('supplier.pageTitles.supplier'),
-        align: 'left',
+            field: 'cargoSupplierNickname',
-    },
+            name: 'cargoSupplierNickname',
-    {
+            align: 'left',
-        label: 'agencyModeFk',
+            showValue: true,
-        field: 'agencyModeFk',
+        },
-        name: 'agencyModeFk',
+        {
-        align: 'left',
+            label: t('globals.agency'),
-    },
+            field: 'agencyModeName',
-    {
+            name: 'agencyModeName',
-        label: 'invoiceAmount',
+            align: 'left',
-        field: 'invoiceAmount',
+            showValue: true,
-        name: 'invoiceAmount',
+        },
-        align: 'left',
+        {
-    },
+            label: t('globals.amount'),
-    {
+            name: 'invoiceAmount',
-        label: 'ref',
+            field: 'entries',
-        field: 'ref',
+            align: 'left',
-        name: 'ref',
+            showValue: true,
-        align: 'left',
+            format: (value) =>
-        // format: (value) => toCurrency(value),
+                toCurrency(
-    },
+                    value
-    {
+                        ? value.reduce((sum, entry) => {
-        label: 'stickers',
+                              return sum + (entry.invoiceAmount || 0);
-        field: 'stickers',
+                          }, 0)
-        name: 'stickers',
+                        : 0
-        align: 'left',
+                ),
-    },
+        },
-    {
+        {
-        label: 'ticketId',
+            label: t('globals.reference'),
-        field: 'ticketFk',
+            field: 'ref',
-        name: 'ticketId',
+            name: 'ref',
-        align: 'left',
+            align: 'left',
-    },
+            showValue: false,
-    {
+        },
-        label: 'active',
+        {
-        field: 'isActive',
+            label: t('globals.packages'),
-        name: 'active',
+            field: 'stickers',
-        align: 'left',
+            name: 'stickers',
-    },
+            align: 'left',
-    {
+            showValue: true,
-        label: 'hasToInvoice',
+        },
-        field: 'hasToInvoice',
+        {
-        name: 'hasToInvoice',
+            label: t('kg'),
-        align: 'left',
+            field: 'kg',
-    },
+            name: 'kg',
-    {
+            align: 'left',
-        label: 'verifiedData',
+            showValue: true,
-        field: 'isTaxDataChecked',
+        },
-        name: 'verifiedData',
+        {
-        align: 'left',
+            label: t('physicKg'),
-    },
+            field: 'loadedKg',
-    {
+            name: 'loadedKg',
-        label: 'comercial',
+            align: 'left',
-        field: 'comercialName',
+            showValue: true,
-        name: 'comercial',
+        },
-        align: 'left',
+        {
-    },
+            label: 'KG Vol.',
-]);
+            field: 'volumeKg',
+            name: 'volumeKg',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('globals.wareHouseOut'),
+            field: 'warehouseOutName',
+            name: 'warehouseOutName',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('shipped'),
+            field: 'shipped',
+            name: 'shipped',
+            align: 'left',
+            format: (value) => toDate(value.substring(0, 10)),
+            showValue: true,
+        },
+        {
+            label: t('globals.wareHouseIn'),
+            field: 'warehouseInName',
+            name: 'warehouseInName',
+            align: 'left',
+            showValue: true,
+        },
+        {
+            label: t('landed'),
+            field: 'landed',
+            name: 'landed',
+            align: 'left',
+            format: (value) => toDate(value.substring(0, 10)),
+            showValue: true,
+        },
+    ];
+});
 
-// const downloadCSV = async () => {
+async function getData() {
-//     invoiceOutGlobalStore.getNegativeBasesCsv(dateRange.from, dateRange.to);
+    await arrayData.fetch({ append: false });
-// };
+}
 
-// const search = async () => {
+const openReportPdf = () => {
-//     const and = [];
+    const params = {
-//     Object.keys(filter.value).forEach((key) => {
+        ...arrayData.store.userParams,
-//         if (filter.value[key]) {
+        limit: arrayData.store.limit,
-//             and.push({
+    };
-//                 [key]: filter.value[key],
-//             });
-//         }
-//     });
 
-//     const params = {
+    openReport('Travels/extra-community-pdf', params);
-//         ...dateRange,
+};
-//         filter: {
-//             limit: 20,
-//             where: { and },
-//         },
-//     };
-//     rows.value = await invoiceOutService.getNegativeBases(params);
-// };
 
-// const refresh = () => {
+const saveFieldValue = async (val, field, index) => {
-//     dateRange.from = Date.vnFirstDayOfMonth();
+    const id = rows.value[index].id;
-//     dateRange.to = Date.vnLastDayOfMonth();
+    const params = { [field]: val };
-//     filter.value = {
+    await travelService.updateTravel(id, params);
-//         company: null,
+};
-//         country: null,
-//         clientId: null,
-//         client: null,
-//         amount: null,
-//         base: null,
-//         ticketId: null,
-//         active: null,
-//         hasToInvoice: null,
-//         verifiedData: null,
-//         comercial: null,
-//     };
-//     search();
-// };
-
-// const selectCustomerId = (id) => {
-//     selectedCustomerId.value = id;
-// };
-
-// const selectWorkerId = (id) => {
-//     selectedWorkerId.value = id;
-// };
 
 onMounted(async () => {
-    // refresh();
+    stateStore.rightDrawer = true;
+
+    shippedFrom.value.setDate(shippedFrom.value.getDate() - 2);
+    shippedFrom.value.setHours(0, 0, 0, 0);
+
+    landedTo.value.setDate(landedTo.value.getDate() + 7);
+    landedTo.value.setHours(23, 59, 59, 59);
+    await getData();
 });
 </script>
 
 <template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions">
+            <QBtn color="primary" icon-right="archive" no-caps @click="openReportPdf()" />
+        </div>
+    </QToolbar>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ExtraCommunityFilter data-key="ExtraCommunity" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"
@@ -233,188 +256,104 @@ onMounted(async () => {
             :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
         >
-            <template #top-left>
+            <template #body="props">
-                <div class="row justify-start items-end">
+                <QTr :props="props" class="bg-black">
-                    <QInput
+                    <QTd v-for="col in props.cols" :key="col.name" :props="props">
-                        dense
+                        <component
-                        lazy-rules
+                            :is="tableColumnComponents[col.name].component"
-                        outlined
+                            class="col-content"
-                        rounded
+                            v-bind="tableColumnComponents[col.name].attrs(props)"
-                        placeholder="dd-mm-aaa"
+                        >
-                        :label="t('invoiceOut.negativeBases.from')"
+                            <!-- Editable 'ref' and 'kg' QField slot -->
-                        class="q-mr-md q"
+                            <template
-                        :model-value="toDate(dateRange.from)"
+                                v-if="col.name === 'ref' || col.name === 'kg'"
-                    >
+                                #control
-                        <template #append>
+                            >
-                            <QIcon name="event" class="cursor-pointer">
+                                <div
-                                <QPopupProxy
+                                    class="self-center full-width no-outline"
-                                    cover
+                                    tabindex="0"
-                                    transition-show="scale"
-                                    transition-hide="scale"
                                 >
-                                    <QDate v-model="dateRange.from">
+                                    {{ col.value }}
-                                        <div class="row items-center justify-end">
+                                </div>
-                                            <QBtn
+                                <QPopupEdit
-                                                v-close-popup
+                                    :key="col.name"
-                                                label="Close"
+                                    v-model="col.value"
-                                                color="primary"
+                                    label-set="Save"
-                                                flat
+                                    label-cancel="Close"
-                                            />
-                                        </div>
-                                    </QDate>
-                                </QPopupProxy>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                    <QInput
-                        dense
-                        lazy-rules
-                        outlined
-                        rounded
-                        placeholder="dd-mm-aaa"
-                        :label="t('invoiceOut.negativeBases.to')"
-                        class="q-mr-md q"
-                        :model-value="toDate(dateRange.to)"
-                    >
-                        <template #append>
-                            <QIcon name="event" class="cursor-pointer">
-                                <QPopupProxy
-                                    cover
-                                    transition-show="scale"
-                                    transition-hide="scale"
                                 >
-                                    <QDate v-model="dateRange.to">
+                                    <QInput
-                                        <div class="row items-center justify-end">
+                                        v-model="rows[props.pageIndex][col.field]"
-                                            <QBtn
+                                        dense
-                                                v-close-popup
+                                        autofocus
-                                                label="Close"
+                                        @keyup.enter="
-                                                color="primary"
+                                            saveFieldValue(
-                                                flat
+                                                rows[props.pageIndex][col.field],
-                                            />
+                                                col.field,
-                                        </div>
+                                                props.rowIndex
-                                    </QDate>
+                                            )
-                                </QPopupProxy>
+                                        "
-                            </QIcon>
+                                    />
-                        </template>
+                                </QPopupEdit>
-                    </QInput>
+                            </template>
-                    <QBtn
+
-                        color="primary"
+                            <template v-if="col.showValue">
-                        icon-right="archive"
+                                {{ col.value }}
-                        no-caps
+                            </template>
-                        @click="downloadCSV()"
+
-                    />
+                            <!-- Main Row Descriptors -->
-                </div>
+                            <TravelDescriptorProxy
-            </template>
+                                v-if="col.name === 'id'"
-            <template #top-right>
+                                :id="props.row.id"
-                <div class="row justify-start items-center">
-                    <span class="q-mr-md text-grey-7">
-                        {{ rows.length }} {{ t('results') }}
-                    </span>
-                    <QBtn
-                        color="primary"
-                        icon-right="search"
-                        no-caps
-                        class="q-mr-sm"
-                        @click="search"
-                    />
-                    <QBtn color="primary" icon-right="refresh" no-caps @click="refresh" />
-                </div>
-            </template>
-            <template #header="props">
-                <QTr :props="props" class="full-height">
-                    <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                        <div class="column justify-start items-start full-height">
-                            {{ t(`invoiceOut.negativeBases.${col.label}`) }}
-                            <QInput
-                                :disable="
-                                    [
-                                        'isActive',
-                                        'hasToInvoice',
-                                        'isTaxDataChecked',
-                                    ].includes(col.field)
-                                "
-                                :borderless="
-                                    [
-                                        'isActive',
-                                        'hasToInvoice',
-                                        'isTaxDataChecked',
-                                    ].includes(col.field)
-                                "
-                                dense
-                                standout
-                                v-model="filter[col.field]"
-                                type="text"
                             />
-                        </div>
+                            <SupplierDescriptorProxy
-                    </QTh>
+                                v-if="col.name === 'cargoSupplierNickname'"
+                                :id="props.row.cargoSupplierFk"
+                            />
+                        </component>
+                    </QTd>
+                </QTr>
+                <QTr v-for="entry in props.row.entries" :key="entry.id" :props="props">
+                    <QTd
+                        ><QBtn flat color="blue" class="col-content">{{ entry.id }}</QBtn>
+                        <!-- Cuando se cree el modulo relacionado a entries, crear su descriptor y colocarlo acá -->
+                        <!-- <EntryDescriptorProxy :id="entry.id"/> -->
+                    </QTd>
+                    <QTd
+                        ><QBtn flat color="blue" class="col-content">{{
+                            entry.supplierName
+                        }}</QBtn>
+                        <SupplierDescriptorProxy :id="entry.supplierFk" />
+                    </QTd>
+                    <QTd></QTd>
+                    <QTd
+                        ><span class="col-content">{{
+                            toCurrency(entry.invoiceAmount)
+                        }}</span></QTd
+                    >
+                    <QTd
+                        ><span class="col-content">{{ entry.reference }}</span></QTd
+                    >
+                    <QTd
+                        ><span class="col-content">{{ entry.stickers }}</span></QTd
+                    >
+                    <QTd></QTd>
+                    <QTd
+                        ><span class="col-content">{{ entry.loadedkg }}</span></QTd
+                    >
+                    <QTd
+                        ><span class="col-content">{{ entry.volumeKg }}</span></QTd
+                    >
+                    <QTd></QTd>
+                    <QTd></QTd>
+                    <QTd></QTd>
                 </QTr>
             </template>
-            <template #body-cell="props">
+            <pre>{{ arrayData }}</pre>
-                <QTd :props="props">
-                    <component
-                        :is="tableColumnComponents[props.col.name].component"
-                        class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                    >
-                        <span
-                            v-if="
-                                tableColumnComponents[props.col.name].props.type !=
-                                'boolean'
-                            "
-                        >
-                            {{ props.value }}
-                        </span>
-                        <span v-else>
-                            <QBadge v-if="props.value" color="grey">
-                                <QIcon name="check" size="xs" />
-                            </QBadge>
-
-                            <QBadge v-else color="grey" outline>
-                                <QIcon name="" size="xs" />
-                            </QBadge>
-                        </span>
-
-                        <CustomerDescriptorProxy
-                            v-if="props.col.name === 'clientId'"
-                            :id="selectedCustomerId"
-                        />
-                        <WorkerDescriptorProxy
-                            v-if="props.col.name === 'comercial'"
-                            :id="selectedWorkerId"
-                        />
-                    </component>
-                </QTd>
-            </template>
         </QTable>
     </QPage>
 </template>
 
 <style lang="scss" scoped>
-.card {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    background-color: #292929;
-    padding: 16px;
-
-    .card-section {
-        display: flex;
-        flex-direction: column;
-        padding: 0px;
-    }
-
-    .status-text {
-        font-size: 14px;
-        color: #eeeeee;
-    }
-
-    .text {
-        font-size: 14px;
-        color: #aaaaaa;
-    }
-}
-
 .col-content {
     border-radius: 4px;
     padding: 6px 6px 6px 6px;
@@ -422,24 +361,17 @@ onMounted(async () => {
 </style>
 
 <i18n>
-   {
+en:
-        "en": {
+    searchExtraCommunity: Search for extra community shipping
-            "status": {
+    kg: BI. KG
-                "packageInvoicing": "Build packaging tickets",
+    physicKg: Phy. KG
-                "invoicing": "Invoicing client",
+    shipped: W. shipped
-                "stopping": "Stopping process",
+    landed: W. landed
-                "done": "Ended process"
+
-            },
+es:
-            "of": "of"
+    searchExtraCommunity: Buscar por envío extra comunitario
-        },
+    kg: KG Bloq.
-        "es": {
+    physicKg: KG físico
-            "status":{
+    shipped: F. envío
-                "packageInvoicing": "Generación de tickets de empaque",
+    landed: F. llegada
-                "invoicing": "Facturando a cliente",
-                "stopping": "Deteniendo proceso",
-                "done": "Proceso detenido",
-            },
-            "of": "de"
-        }
-    }
 </i18n>

src/pages/Travel/ExtraCommunityFilter.vue

@@ -0,0 +1,306 @@
+<script setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import { toDate } from 'src/filters';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const filtersOptions = reactive({
+    warehouses: [],
+    continents: [],
+    agencies: [],
+    suppliers: [],
+});
+
+const updateFilterOptions = (data, optionKey) => {
+    filtersOptions[optionKey] = [...data];
+};
+
+const add = (paramsObj, key) => {
+    if (paramsObj[key] === undefined) {
+        paramsObj[key] = 1;
+    } else {
+        paramsObj[key]++;
+    }
+};
+
+const decrement = (paramsObj, key) => {
+    if (paramsObj[key] === 0) return;
+
+    paramsObj[key]--;
+};
+</script>
+
+<template>
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => updateFilterOptions(data, 'warehouses')"
+        auto-load
+    />
+    <FetchData
+        url="Continents"
+        @on-fetch="(data) => updateFilterOptions(data, 'continents')"
+        auto-load
+    />
+    <FetchData
+        url="AgencyModes"
+        @on-fetch="(data) => updateFilterOptions(data, 'agencies')"
+        auto-load
+    />
+    <FetchData
+        url="Suppliers"
+        @on-fetch="(data) => updateFilterOptions(data, 'suppliers')"
+        auto-load
+    />
+
+    <VnFilterPanel :data-key="props.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 }">
+            <QList dense style="max-width: 256px" class="list">
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <QInput label="id" dense outlined rounded v-model="params.id" />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-my-sm">
+                    <QItemSection>
+                        <QInput
+                            :label="t('params.ref')"
+                            dense
+                            outlined
+                            rounded
+                            v-model="params.reference"
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            v-model="params.totalEntries"
+                            type="number"
+                            :label="t('params.totalEntries')"
+                            dense
+                            outlined
+                            rounded
+                            min="0"
+                            class="input-number"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="add"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="add(params, 'totalEntries')"
+                                />
+                                <QBtn
+                                    icon="remove"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="decrement(params, 'totalEntries')"
+                                />
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.agencyModeFk')"
+                            v-model="params.agencyModeFk"
+                            :options="filtersOptions.agencies"
+                            option-value="agencyFk"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            dense
+                            outlined
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :label="t('params.shippedFrom')"
+                            :model-value="toDate(params.shippedFrom)"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.shippedFrom">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <QInput
+                            dense
+                            outlined
+                            rounded
+                            placeholder="dd-mm-aaa"
+                            :model-value="toDate(params.landedTo)"
+                            :label="t('params.landedTo')"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.landedTo">
+                                            <div class="row items-center justify-end">
+                                                <QBtn
+                                                    v-close-popup
+                                                    label="Close"
+                                                    color="primary"
+                                                    flat
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.warehouseOutFk')"
+                            v-model="params.warehouseOutFk"
+                            :options="filtersOptions.warehouses"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.warehouseInFk')"
+                            v-model="params.warehouseInFk"
+                            :options="filtersOptions.warehouses"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('supplier.pageTitles.supplier')"
+                            v-model="params.cargoSupplierFk"
+                            :options="filtersOptions.suppliers"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem class="q-mb-sm">
+                    <QItemSection>
+                        <VnSelectFilter
+                            :label="t('params.continent')"
+                            v-model="params.continent"
+                            :options="filtersOptions.continents"
+                            option-value="code"
+                            option-label="name"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style scoped>
+.list * {
+    max-width: 100%;
+}
+
+.input-number >>> input[type='number'] {
+    -moz-appearance: textfield;
+}
+.input-number >>> input::-webkit-outer-spin-button,
+.input-number >>> input::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        ref: Reference
+        totalEntries: Total entries
+        agencyModeFk: Agency
+        warehouseInFk: Warehouse In
+        warehouseOutFk: Warehouse Out
+        shippedFrom: Shipped from
+        landedTo: Landed to
+        cargoSupplierFk: Supplier
+        continent: Continent out
+es:
+    params:
+        ref: Referencia
+        totalEntries: Ent. totales
+        agencyModeFk: Agencia
+        warehouseInFk: Alm. entrada
+        warehouseOutFk: Alm. salida
+        shippedFrom: Llegada desde
+        landedTo: Llegada hasta
+        cargoSupplierFk: Proveedor
+        continent: Cont. Salida
+</i18n>

src/pages/Travel/TravelCreate.vue

@@ -70,14 +70,11 @@ const onFetchWarehouses = (warehouses) => {
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput
+                        <QInput v-model="data.ref" :label="t('globals.reference')" />
-                            v-model="data.ref"
-                            :label="t('travel.shared.reference')"
-                        />
                     </div>
                     <div class="col">
                         <VnSelectFilter
-                            :label="t('travel.shared.agency')"
+                            :label="t('globals.agency')"
                             v-model="data.agencyModeFk"
                             :options="agenciesOptions"
                             option-value="agencyFk"
@@ -91,7 +88,7 @@ const onFetchWarehouses = (warehouses) => {
                         <QInput
                             rounded
                             placeholder="dd-mm-aaa"
-                            :label="t('travel.shared.landed')"
+                            :label="t('globals.landed')"
                             :model-value="toDate(data.shipped)"
                         >
                             <template #append>
@@ -120,7 +117,7 @@ const onFetchWarehouses = (warehouses) => {
                         <QInput
                             rounded
                             placeholder="dd-mm-aaa"
-                            :label="t('travel.shared.landed')"
+                            :label="t('globals.landed')"
                             :model-value="toDate(data.landed)"
                         >
                             <template #append>
@@ -149,7 +146,7 @@ const onFetchWarehouses = (warehouses) => {
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <VnSelectFilter
-                            :label="t('travel.shared.wareHouseOut')"
+                            :label="t('globals.wareHouseOut')"
                             v-model="data.warehouseOutFk"
                             :options="warehousesOptions"
                             option-value="id"
@@ -159,7 +156,7 @@ const onFetchWarehouses = (warehouses) => {
                     </div>
                     <div class="col">
                         <VnSelectFilter
-                            :label="t('travel.shared.wareHouseIn')"
+                            :label="t('globals.wareHouseIn')"
                             v-model="data.warehouseInFk"
                             :options="warehousesOptions"
                             option-value="id"

src/pages/Travel/TravelFilter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@@ -14,22 +14,14 @@ const props = defineProps({
     },
 });
 
-const warehousesOptions = ref([]);
+const filtersOptions = reactive({
+    warehouses: [],
+    continents: [],
+    agencies: [],
+});
 
-const continentsOptions = ref([]);
+const updateFilterOptions = (data, optionKey) => {
-
+    filtersOptions[optionKey] = [...data];
-const agenciesOptions = ref([]);
-
-const onFetchWarehouses = (warehouses) => {
-    warehousesOptions.value = [...warehouses];
-};
-
-const onFetchContinents = (continents) => {
-    continentsOptions.value = [...continents];
-};
-
-const onFetchAgencies = (agencies) => {
-    agenciesOptions.value = [...agencies];
 };
 
 const add = (paramsObj, key) => {
@@ -48,9 +40,21 @@ const decrement = (paramsObj, key) => {
 </script>
 
 <template>
-    <FetchData url="Warehouses" @on-fetch="(data) => onFetchWarehouses(data)" auto-load />
+    <FetchData
-    <FetchData url="Continents" @on-fetch="(data) => onFetchContinents(data)" auto-load />
+        url="Warehouses"
-    <FetchData url="AgencyModes" @on-fetch="(data) => onFetchAgencies(data)" auto-load />
+        @on-fetch="(data) => updateFilterOptions(data, 'warehouses')"
+        auto-load
+    />
+    <FetchData
+        url="Continents"
+        @on-fetch="(data) => updateFilterOptions(data, 'continents')"
+        auto-load
+    />
+    <FetchData
+        url="AgencyModes"
+        @on-fetch="(data) => updateFilterOptions(data, 'agencies')"
+        auto-load
+    />
 
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
@@ -77,7 +81,7 @@ const decrement = (paramsObj, key) => {
                         <VnSelectFilter
                             :label="t('params.agencyModeFk')"
                             v-model="params.agencyModeFk"
-                            :options="agenciesOptions"
+                            :options="filtersOptions.agencies"
                             option-value="agencyFk"
                             option-label="name"
                             hide-selected
@@ -92,7 +96,7 @@ const decrement = (paramsObj, key) => {
                         <VnSelectFilter
                             :label="t('params.warehouseOutFk')"
                             v-model="params.warehouseOutFk"
-                            :options="warehousesOptions"
+                            :options="filtersOptions.warehouses"
                             option-value="id"
                             option-label="name"
                             hide-selected
@@ -107,7 +111,7 @@ const decrement = (paramsObj, key) => {
                         <VnSelectFilter
                             :label="t('params.warehouseInFk')"
                             v-model="params.warehouseInFk"
-                            :options="warehousesOptions"
+                            :options="filtersOptions.warehouses"
                             option-value="id"
                             option-label="name"
                             hide-selected
@@ -218,7 +222,7 @@ const decrement = (paramsObj, key) => {
                         <VnSelectFilter
                             :label="t('params.continent')"
                             v-model="params.continent"
-                            :options="continentsOptions"
+                            :options="filtersOptions.continents"
                             option-value="code"
                             option-label="name"
                             hide-selected

src/pages/Travel/TravelList.vue

@@ -8,13 +8,11 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
-import { useTravelStore } from 'src/stores/travel.js';
 import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import TravelFilter from './TravelFilter.vue';
 
 const router = useRouter();
-const travelStore = useTravelStore();
 const quasar = useQuasar();
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -42,7 +40,6 @@ const viewSummary = (id) => {
 };
 
 onMounted(async () => {
-    await travelStore.init();
     stateStore.rightDrawer = true;
 });
 </script>
@@ -71,28 +68,28 @@ onMounted(async () => {
                     >
                         <template #list-items>
                             <VnLv
-                                :label="t('travel.shared.agency')"
+                                :label="t('globals.agency')"
                                 :value="row.agencyModeName"
                             />
                             <VnLv
-                                :label="t('travel.shared.wareHouseOut')"
+                                :label="t('globals.wareHouseOut')"
                                 :value="row.warehouseOutFk"
                             />
                             <VnLv
-                                :label="t('travel.shared.shipped')"
+                                :label="t('globals.shipped')"
                                 :value="toDate(row.shipped)"
                             />
                             <VnLv
-                                :label="t('travel.shared.landed')"
+                                :label="t('globals.landed')"
                                 :value="toDate(row.landed)"
                             />
                             <VnLv
-                                :label="t('travel.shared.wareHouseIn')"
+                                :label="t('globals.wareHouseIn')"
                                 :value="row.warehouseInFk"
                             />
 
                             <VnLv
-                                :label="t('travel.shared.totalEntries')"
+                                :label="t('globals.totalEntries')"
                                 :value="row.totalEntries"
                             />
                         </template>

src/services/travel.service.js

@@ -1,15 +1,6 @@
 import axios from 'axios';
 
 const travelService = {
-    getTravels: async (filter = {}) => {
-        try {
-            return await axios.get('Travels/filter', filter);
-        } catch (err) {
-            console.error(`Error fetching travels`, err);
-            return err.response;
-        }
-    },
-
     getTravelEntries: async (param) => {
         try {
             return await axios.get(`Travels/${param}/getEntries`);
@@ -18,6 +9,15 @@ const travelService = {
             return err.response;
         }
     },
+
+    updateTravel: async (id, params) => {
+        try {
+            return await axios.patch(`Travels/${id}`, params);
+        } catch (err) {
+            console.error(`Error updating travel`, err);
+            return err.response;
+        }
+    },
 };
 
 export default travelService;

src/stores/travel.js

@@ -1,23 +0,0 @@
-import { defineStore } from 'pinia';
-import travelService from 'src/services/travel.service';
-
-export const useTravelStore = defineStore({
-    id: 'travel',
-
-    state: () => ({
-        initialDataLoading: true,
-        travels: [],
-    }),
-    actions: {
-        async init() {
-            await this.fetchAllData();
-        },
-
-        async fetchAllData() {
-            const { data } = await travelService.getTravels();
-            this.travels = data || [];
-        },
-    },
-
-    getters: {},
-});