Merge branch 'dev' into 8618-CreateTestToRouteExtendedList

src/boot/qformMixin.js

@@ -30,22 +30,5 @@ export default {
         } catch (error) {
             console.error(error);
         }
-        form.addEventListener('keyup', function (evt) {
-            if (evt.key === 'Enter' && !that.$attrs['prevent-submit']) {
-                const input = evt.target;
-                if (input.type == 'textarea' && evt.shiftKey) {
-                    evt.preventDefault();
-                    let { selectionStart, selectionEnd } = input;
-                    input.value =
-                        input.value.substring(0, selectionStart) +
-                        '\n' +
-                        input.value.substring(selectionEnd);
-                    selectionStart = selectionEnd = selectionStart + 1;
-                    return;
-                }
-                evt.preventDefault();
-                that.onSubmit();
-            }
-        });
     },
 };

src/components/FormModel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
+import { onMounted, onUnmounted, computed, ref, watch, nextTick, useAttrs } from 'vue';
 import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -22,6 +22,7 @@ const { validate } = useValidator();
 const { notify } = useNotify();
 const route = useRoute();
 const myForm = ref(null);
+const attrs = useAttrs();
 const $props = defineProps({
     url: {
         type: String,
@@ -113,7 +114,7 @@ const defaultButtons = computed(() => ({
         color: 'primary',
         icon: 'save',
         label: 'globals.save',
-        click: () => myForm.value.onSubmit(false),
+        click: async () => await save(),
         type: 'submit',
     },
     reset: {
@@ -208,8 +209,7 @@ async function fetch() {
     }
 }
 
-async function save(prevent = false) {
+async function save() {
-    if (prevent) return;
     if ($props.observeFormChanges && !hasChanges.value)
         return notify('globals.noChanges', 'negative');
 
@@ -284,6 +284,22 @@ function trimData(data) {
     return data;
 }
 
+async function onKeyup(evt) {
+    if (evt.key === 'Enter' && !('prevent-submit' in attrs)) {
+        const input = evt.target;
+        if (input.type == 'textarea' && evt.shiftKey) {
+            let { selectionStart, selectionEnd } = input;
+            input.value =
+                input.value.substring(0, selectionStart) +
+                '\n' +
+                input.value.substring(selectionEnd);
+            selectionStart = selectionEnd = selectionStart + 1;
+            return;
+        }
+        await save();
+    }
+}
+
 defineExpose({
     save,
     isLoading,
@@ -298,12 +314,12 @@ defineExpose({
         <QForm
             ref="myForm"
             v-if="formData"
-            @submit="save(!!$event)"
+            @submit.prevent
+            @keyup.prevent="onKeyup"
             @reset="reset"
             class="q-pa-md"
             :style="maxWidth ? 'max-width: ' + maxWidth : ''"
             id="formModel"
-            :prevent-submit="$attrs['prevent-submit']"
         >
             <QCard>
                 <slot

src/components/FormModelPopup.vue

@@ -27,10 +27,15 @@ const formModelRef = ref(null);
 const closeButton = ref(null);
 const isSaveAndContinue = ref(false);
 const onDataSaved = (formData, requestResponse) => {
-    if (closeButton.value && isSaveAndContinue) closeButton.value.click();
+    if (closeButton.value && !isSaveAndContinue.value) closeButton.value.click();
     emit('onDataSaved', formData, requestResponse);
 };
 
+const onClick = async (saveAndContinue) => {
+    isSaveAndContinue.value = saveAndContinue;
+    await formModelRef.value.save();
+};
+
 const isLoading = computed(() => formModelRef.value?.isLoading);
 const reset = computed(() => formModelRef.value?.reset);
 
@@ -78,10 +83,7 @@ defineExpose({
                     :flat="showSaveAndContinueBtn"
                     :label="t('globals.save')"
                     :title="t('globals.save')"
-                    @click="
+                    @click="onClick(false)"
-                        formModelRef.save();
-                        isSaveAndContinue = false;
-                    "
                     color="primary"
                     class="q-ml-sm"
                     :disabled="isLoading"
@@ -99,10 +101,7 @@ defineExpose({
                     :loading="isLoading"
                     data-cy="FormModelPopup_isSaveAndContinue"
                     z-max
-                    @click="
+                    @click="onClick(true)"
-                        isSaveAndContinue = true;
-                        formModelRef.save();
-                    "
                 />
             </div>
         </template>

src/components/VnTable/VnTable.vue

@@ -164,7 +164,6 @@ const app = inject('app');
 const editingRow = ref(null);
 const editingField = ref(null);
 const isTableMode = computed(() => mode.value == TABLE_MODE);
-const showRightIcon = computed(() => $props.rightSearch || $props.rightSearchIcon);
 const selectRegex = /select/;
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
 const tableModes = [
@@ -618,14 +617,6 @@ function cardClick(_, row) {
                         dense
                         :options="tableModes.filter((mode) => !mode.disable)"
                     />
-
-                    <QBtn
-                        v-if="showRightIcon"
-                        icon="filter_alt"
-                        class="bg-vn-section-color q-ml-sm"
-                        dense
-                        @click="stateStore.toggleRightDrawer()"
-                    />
                 </template>
                 <template #header-cell="{ col }">
                     <QTh
@@ -783,7 +774,7 @@ function cardClick(_, row) {
                             <QCardSection
                                 vertical
                                 class="no-margin no-padding"
-                                :class="colsMap.tableActions ? '' : 'fit'"
+                                :class="colsMap.tableActions ? 'w-80' : 'fit'"
                             >
                                 <!-- Chips -->
                                 <QCardSection

src/components/ui/CardDescriptor.vue

@@ -193,8 +193,10 @@ const toModule = computed(() =>
                         </div>
                     </QItemLabel>
                     <QItem>
-                        <QItemLabel class="subtitle" caption>
+                        <QItemLabel class="subtitle">
                             #{{ getValueFromPath(subtitle) ?? entity.id }}
+                        </QItemLabel>
+
                         <QBtn
                             round
                             flat
@@ -208,7 +210,7 @@ const toModule = computed(() =>
                                 {{ t('globals.copyId') }}
                             </QTooltip>
                         </QBtn>
-                        </QItemLabel>
+                        <!-- </QItemLabel> -->
                     </QItem>
                 </QList>
                 <div class="list-box q-mt-xs">

src/css/app.scss

@@ -335,3 +335,7 @@ input::-webkit-inner-spin-button {
     border: 1px solid;
     box-shadow: 0 4px 6px #00000000;
 }
+
+.containerShrinked {
+    width: 80%;
+}

src/pages/Customer/components/CustomerNewPayment.vue

@@ -114,7 +114,7 @@ function onBeforeSave(data) {
     if (isCash.value && shouldSendEmail.value && !data.email)
         return notify(t('There is no assigned email for this client'), 'negative');
 
-    data.bankFk = data.bankFk.id;
+    data.bankFk = data.bankFk?.id;
     return data;
 }
 
@@ -189,7 +189,7 @@ async function getAmountPaid() {
             :url-create="urlCreate"
             :mapper="onBeforeSave"
             @on-data-saved="onDataSaved"
-            :prevent-submit="true"
+            prevent-submit
         >
             <template #form="{ data, validate }">
                 <span ref="closeButton" class="row justify-end close-icon" v-close-popup>

src/pages/InvoiceOut/Card/InvoiceOutDescriptorMenu.vue

@@ -103,7 +103,7 @@ const refundInvoice = async (withWarehouse) => {
         t('refundInvoiceSuccessMessage', {
             refundTicket: data[0].id,
         }),
-        'positive'
+        'positive',
     );
 };
 
@@ -124,6 +124,13 @@ const showRefundInvoiceForm = () => {
         },
     });
 };
+
+const showExportationLetter = () => {
+    openReport(`InvoiceOuts/${$props.invoiceOutData.ref}/exportation-pdf`, {
+        recipientId: $props.invoiceOutData.client.id,
+        refFk: $props.invoiceOutData.ref,
+    });
+};
 </script>
 
 <template>
@@ -172,7 +179,7 @@ const showRefundInvoiceForm = () => {
                 t('Confirm deletion'),
                 t('Are you sure you want to delete this invoice?'),
                 deleteInvoice,
-                redirectToInvoiceOutList
+                redirectToInvoiceOutList,
             )
         "
     >
@@ -185,7 +192,7 @@ const showRefundInvoiceForm = () => {
             openConfirmationModal(
                 '',
                 t('Are you sure you want to book this invoice?'),
-                bookInvoice
+                bookInvoice,
             )
         "
     >
@@ -198,7 +205,7 @@ const showRefundInvoiceForm = () => {
             openConfirmationModal(
                 t('Generate PDF invoice document'),
                 t('Are you sure you want to generate/regenerate the PDF invoice?'),
-                generateInvoicePdf
+                generateInvoicePdf,
             )
         "
     >
@@ -226,6 +233,14 @@ const showRefundInvoiceForm = () => {
             {{ t('Create a single ticket with all the content of the current invoice') }}
         </QTooltip>
     </QItem>
+    <QItem
+        v-if="$props.invoiceOutData.serial === 'E'"
+        v-ripple
+        clickable
+        @click="showExportationLetter()"
+    >
+        <QItemSection>{{ t('Show CITES letter') }}</QItemSection>
+    </QItem>
 </template>
 
 <i18n>
@@ -255,7 +270,7 @@ es:
     Create a single ticket with all the content of the current invoice: Crear un ticket único con todo el contenido de la factura actual
     refundInvoiceSuccessMessage: Se ha creado el siguiente ticket de abono {refundTicket}
     The email can't be empty: El email no puede estar vacío
-
+    Show CITES letter: Ver carta CITES
 en:
     refundInvoiceSuccessMessage: The following refund ticket have been created {refundTicket}
 </i18n>

src/pages/InvoiceOut/InvoiceOutFilter.vue

@@ -22,7 +22,7 @@ const states = ref();
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <strong>{{ t(`invoiceOut.params.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
@@ -84,15 +84,6 @@ const states = ref();
                     />
                 </QItemSection>
             </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        v-model="params.issued"
-                        :label="t('Issued')"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInputDate
@@ -110,37 +101,3 @@ const states = ref();
         </template>
     </VnFilterPanel>
 </template>
-
-<i18n>
-en:
-    params:
-        search: Contains
-        clientFk: Customer
-        fi: FI
-        amount: Amount
-        min: Min
-        max: Max
-        hasPdf: Has PDF
-        issued: Issued
-        created: Created
-        dued: Dued
-es:
-    params:
-        search: Contiene
-        clientFk: Cliente
-        fi: CIF
-        amount: Importe
-        min: Min
-        max: Max
-        hasPdf: Tiene PDF
-        issued: Emitida
-        created: Creada
-        dued: Vencida
-    Customer ID: ID cliente
-    FI: CIF
-    Amount: Importe
-    Has PDF: Tiene PDF
-    Issued: Fecha emisión
-    Created: Fecha creación
-    Dued: Fecha vencimiento
-</i18n>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -71,14 +71,6 @@ const columns = computed(() => [
             inWhere: true,
         },
     },
-    {
-        align: 'left',
-        name: 'issued',
-        label: t('invoiceOut.summary.issued'),
-        component: 'date',
-        format: (row) => toDate(row.issued),
-        columnField: { component: null },
-    },
     {
         align: 'left',
         name: 'clientFk',

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -10,6 +10,8 @@ import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vu
 import TicketDescriptorProxy from '../Ticket/Card/TicketDescriptorProxy.vue';
 import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import InvoiceOutNegativeBasesFilter from './InvoiceOutNegativeBasesFilter.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const tableRef = ref();
@@ -97,16 +99,19 @@ const columns = computed(() => [
         align: 'left',
         name: 'isActive',
         label: t('invoiceOut.negativeBases.active'),
+        component: 'checkbox',
     },
     {
         align: 'left',
         name: 'hasToInvoice',
         label: t('invoiceOut.negativeBases.hasToInvoice'),
+        component: 'checkbox',
     },
     {
         align: 'left',
-        name: 'hasVerifiedData',
+        name: 'isTaxDataChecked',
         label: t('invoiceOut.negativeBases.verifiedData'),
+        component: 'checkbox',
     },
     {
         align: 'left',
@@ -142,7 +147,7 @@ const downloadCSV = async () => {
     await invoiceOutGlobalStore.getNegativeBasesCsv(
         userParams.from,
         userParams.to,
-        filterParams
+        filterParams,
     );
 };
 </script>
@@ -154,6 +159,11 @@ const downloadCSV = async () => {
             </QBtn>
         </template>
     </VnSubToolbar>
+    <RightMenu>
+        <template #right-panel>
+            <InvoiceOutNegativeBasesFilter data-key="negativeFilter" />
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="negativeFilter"
@@ -174,6 +184,7 @@ const downloadCSV = async () => {
         auto-load
         :is-editable="false"
         :use-model="true"
+        :right-search="false"
     >
         <template #column-clientId="{ row }">
             <span class="link" @click.stop>

src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue

@@ -2,9 +2,10 @@
 import { useI18n } from 'vue-i18n';
 
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -24,11 +25,11 @@ const props = defineProps({
     >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <strong>{{ t(`invoiceOut.params.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
                     <VnInputDate
@@ -49,38 +50,70 @@ const props = defineProps({
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
+                    <VnSelect
-                        v-model="params.company"
+                        url="Companies"
                         :label="t('globals.company')"
-                        is-outlined
+                        v-model="params.company"
-                    />
+                        option-label="code"
+                        option-value="code"
+                        dense
+                        outlined
+                        rounded
+                        @update:model-value="searchFn()"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt?.code }}
+                                    </QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ `#${scope.opt?.id}` }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
+                    <VnSelect
+                        url="Countries"
+                        :label="t('globals.params.countryFk')"
                         v-model="params.country"
-                        :label="t('globals.country')"
+                        option-label="name"
-                        is-outlined
+                        option-value="name"
-                    />
+                        outlined
+                        dense
+                        rounded
+                        @update:model-value="searchFn()"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>
+                                        {{ scope.opt?.name }}
+                                    </QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ `#${scope.opt?.id}` }}
+                                    </QItemLabel>
                                 </QItemSection>
                             </QItem>
-
+                        </template>
-            <QItem>
+                    </VnSelect>
-                <QItemSection>
-                    <VnInput
-                        v-model="params.clientId"
-                        :label="t('invoiceOut.negativeBases.clientId')"
-                        is-outlined
-                    />
                 </QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
+                    <VnSelect
-                        v-model="params.clientSocialName"
+                        url="Clients"
                         :label="t('globals.client')"
-                        is-outlined
+                        v-model="params.clientId"
+                        outlined
+                        dense
+                        rounded
+                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>
@@ -90,15 +123,18 @@ const props = defineProps({
                         v-model="params.amount"
                         :label="t('globals.amount')"
                         is-outlined
+                        :positive="false"
                     />
                 </QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
+                    <VnSelectWorker
-                        v-model="params.comercialName"
                         :label="t('invoiceOut.negativeBases.comercial')"
+                        v-model="params.workerName"
+                        option-value="name"
                         is-outlined
+                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>

src/pages/InvoiceOut/locale/en.yml

@@ -4,7 +4,7 @@ invoiceOut:
     params:
         company: Company
         country: Country
-        clientId: Client ID
+        clientId: Client
         clientSocialName: Client
         taxableBase: Base
         ticketFk: Ticket
@@ -12,6 +12,18 @@ invoiceOut:
         hasToInvoice: Has to invoice
         hasVerifiedData: Verified data
         workerName: Worker
+        isTaxDataChecked: Verified data
+        amount: Amount
+        clientFk: Client
+        companyFk: Company
+        created: Created
+        dued: Dued
+        customsAgentFk: Custom Agent
+        ref: Reference
+        fi: FI
+        min: Min
+        max: Max
+        hasPdf: Has PDF
     card:
         issued: Issued
         customerCard: Customer card
@@ -53,7 +65,7 @@ invoiceOut:
         active: Active
         hasToInvoice: Has to Invoice
         verifiedData: Verified Data
-        comercial: Commercial
+        comercial: Sales person
         errors:
             downloadCsvFailed: CSV download failed
 invoiceOutModule:

src/pages/InvoiceOut/locale/es.yml

@@ -4,7 +4,7 @@ invoiceOut:
     params:
         company: Empresa
         country: País
-        clientId: ID del cliente
+        clientId: Cliente
         clientSocialName: Cliente
         taxableBase: Base
         ticketFk: Ticket
@@ -12,6 +12,18 @@ invoiceOut:
         hasToInvoice: Debe facturar
         hasVerifiedData: Datos verificados
         workerName: Comercial
+        isTaxDataChecked: Datos comprobados
+        amount: Importe
+        clientFk: Cliente
+        companyFk: Empresa
+        created: Creada
+        dued: Vencida
+        customsAgentFk: Agente aduanas
+        ref: Referencia
+        fi: CIF
+        min: Min
+        max: Max
+        hasPdf: Tiene PDF
     card:
         issued: Fecha emisión
         customerCard: Ficha del cliente

src/pages/Zone/Card/ZoneBasicData.vue

@@ -25,7 +25,7 @@ const setFilteredAddresses = (data) => {
         @on-fetch="(data) => (validAddresses = data)"
     />
     <FetchData url="Addresses" auto-load @on-fetch="setFilteredAddresses" />
-    <FormModel auto-load model="zone">
+    <FormModel auto-load model="Zone">
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput
@@ -33,6 +33,7 @@ const setFilteredAddresses = (data) => {
                     :label="t('Name')"
                     clearable
                     v-model="data.name"
+                    :required="true"
                 />
             </VnRow>
             <VnRow>
@@ -83,7 +84,7 @@ const setFilteredAddresses = (data) => {
                     type="number"
                     min="0"
                 />
-                <VnInputTime v-model="data.hour" :label="t('Closing')" />
+                <VnInputTime v-model="data.hour" :label="t('Closing')" :required="true" />
             </VnRow>
 
             <VnRow>
@@ -92,7 +93,7 @@ const setFilteredAddresses = (data) => {
                     :label="t('Price')"
                     type="number"
                     min="0"
-                    required="true"
+                    :required="true"
                     clearable
                 />
                 <VnInput
@@ -100,7 +101,7 @@ const setFilteredAddresses = (data) => {
                     :label="t('Price optimum')"
                     type="number"
                     min="0"
-                    required="true"
+                    :required="true"
                     clearable
                 />
             </VnRow>

src/pages/Zone/ZoneFilterPanel.vue

@@ -38,7 +38,12 @@ const agencies = ref([]);
         <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
-                    <VnInput :label="t('list.name')" v-model="params.name" is-outlined />
+                    <VnInput
+                        :label="t('list.name')"
+                        v-model="params.name"
+                        is-outlined
+                        data-cy="zoneFilterPanelNameInput"
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
@@ -53,6 +58,7 @@ const agencies = ref([]);
                         dense
                         outlined
                         rounded
+                        data-cy="zoneFilterPanelAgencySelect"
                     >
                     </VnSelect>
                 </QItemSection>

src/pages/Zone/ZoneList.vue

@@ -65,7 +65,6 @@ const tableFilter = {
 
 const columns = computed(() => [
     {
-        align: 'left',
         name: 'id',
         label: t('list.id'),
         chip: {
@@ -75,6 +74,8 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        columnClass: 'shrink-column',
+        component: 'number',
     },
     {
         align: 'left',
@@ -106,7 +107,6 @@ const columns = computed(() => [
         format: (row, dashIfEmpty) => dashIfEmpty(row?.agencyMode?.name),
     },
     {
-        align: 'left',
         name: 'price',
         label: t('list.price'),
         cardVisible: true,
@@ -114,9 +114,11 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        columnClass: 'shrink-column',
+        component: 'number',
     },
     {
-        align: 'left',
+        align: 'center',
         name: 'hour',
         label: t('list.close'),
         cardVisible: true,
@@ -129,6 +131,7 @@ const columns = computed(() => [
         label: t('list.addressFk'),
         cardVisible: true,
         columnFilter: false,
+        columnClass: 'expand',
     },
     {
         align: 'right',
@@ -177,6 +180,8 @@ function formatRow(row) {
             <ZoneFilterPanel data-key="ZonesList" />
         </template>
     </RightMenu>
+    <div class="table-container">
+        <div class="column items-center">
             <VnTable
                 ref="tableRef"
                 data-key="ZonesList"
@@ -191,6 +196,8 @@ function formatRow(row) {
                 :columns="columns"
                 redirect="zone"
                 :right-search="false"
+                table-height="85vh"
+                order="id ASC"
             >
                 <template #column-addressFk="{ row }">
                     {{ dashIfEmpty(formatRow(row)) }}
@@ -238,6 +245,8 @@ function formatRow(row) {
                     />
                 </template>
             </VnTable>
+        </div>
+    </div>
 </template>
 
 <i18n>
@@ -245,3 +254,20 @@ es:
     Search zone: Buscar zona
     You can search zones by id or name: Puedes buscar zonas por id o nombre
 </i18n>
+
+<style lang="scss" scoped>
+.table-container {
+    display: flex;
+    justify-content: center;
+}
+.column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 70%;
+}
+
+:deep(.shrink-column) {
+    width: 8%;
+}
+</style>

src/pages/Zone/ZoneUpcoming.vue

@@ -56,7 +56,7 @@ onMounted(() => weekdayStore.initStore());
     <ZoneSearchbar />
     <VnSubToolbar />
     <QPage class="column items-center q-pa-md">
-        <QCard class="full-width q-pa-md">
+        <QCard class="containerShrinked q-pa-md">
             <div
                 v-for="(detail, index) in details"
                 :key="index"

src/pages/Zone/locale/en.yml

@@ -44,6 +44,8 @@ summary:
 filterPanel:
     name: Name
     agencyModeFk: Agency
+    id: ID
+    price: Price
 deliveryPanel:
     pickup: Pick up
     delivery: Delivery

src/pages/Zone/locale/es.yml

@@ -45,6 +45,8 @@ summary:
 filterPanel:
     name: Nombre
     agencyModeFk: Agencia
+    id: ID
+    price: Precio
 deliveryPanel:
     pickup: Recogida
     delivery: Entrega

test/cypress/integration/zone/zoneList.spec.js

@@ -1,4 +1,5 @@
 describe('ZoneList', () => {
+    const agency = 'inhouse pickup';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
@@ -6,11 +7,15 @@ describe('ZoneList', () => {
     });
 
     it('should filter by agency', () => {
-        cy.get('input[aria-label="Agency"]').type('{downArrow}{enter}');
+        cy.dataCy('zoneFilterPanelNameInput').type('{downArrow}{enter}');
     });
 
     it('should open the zone summary', () => {
-        cy.get('input[aria-label="Name"]').type('zone refund');
+        cy.dataCy('zoneFilterPanelAgencySelect').type(agency);
-        cy.get('.q-scrollarea__content > .q-btn--standard > .q-btn__content').click();
+        cy.get('.q-menu .q-item').contains(agency).click();
+        cy.get(':nth-child(1) > [data-col-field="agencyModeFk"]').should(
+            'include.text',
+            agency,
+        );
     });
 });