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/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,
@@ -177,67 +179,73 @@ function formatRow(row) {
             <ZoneFilterPanel data-key="ZonesList" />
         </template>
     </RightMenu>
-    <VnTable
+    <div class="table-container">
-        ref="tableRef"
+        <div class="column items-center">
-        data-key="ZonesList"
+            <VnTable
-        url="Zones"
+                ref="tableRef"
-        :create="{
+                data-key="ZonesList"
-            urlCreate: 'Zones',
+                url="Zones"
-            title: t('list.createZone'),
+                :create="{
-            onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
+                    urlCreate: 'Zones',
-            formInitialData: {},
+                    title: t('list.createZone'),
-        }"
+                    onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
-        :user-filter="tableFilter"
+                    formInitialData: {},
-        :columns="columns"
+                }"
-        redirect="zone"
+                :user-filter="tableFilter"
-        :right-search="false"
+                :columns="columns"
-    >
+                redirect="zone"
-        <template #column-addressFk="{ row }">
+                :right-search="false"
-            {{ dashIfEmpty(formatRow(row)) }}
+                table-height="85vh"
-        </template>
+                order="id ASC"
-        <template #more-create-dialog="{ data }">
+            >
-            <VnSelect
+                <template #column-addressFk="{ row }">
-                url="AgencyModes"
+                    {{ dashIfEmpty(formatRow(row)) }}
-                v-model="data.agencyModeFk"
+                </template>
-                option-value="id"
+                <template #more-create-dialog="{ data }">
-                option-label="name"
+                    <VnSelect
-                :label="t('list.agency')"
+                        url="AgencyModes"
-            />
+                        v-model="data.agencyModeFk"
-            <VnInput
+                        option-value="id"
-                v-model="data.price"
+                        option-label="name"
-                :label="t('list.price')"
+                        :label="t('list.agency')"
-                min="0"
+                    />
-                type="number"
+                    <VnInput
-                required="true"
+                        v-model="data.price"
-            />
+                        :label="t('list.price')"
-            <VnInput
+                        min="0"
-                v-model="data.bonus"
+                        type="number"
-                :label="t('zone.bonus')"
+                        required="true"
-                min="0"
+                    />
-                type="number"
+                    <VnInput
-            />
+                        v-model="data.bonus"
-            <VnInput
+                        :label="t('zone.bonus')"
-                v-model="data.travelingDays"
+                        min="0"
-                :label="t('zone.travelingDays')"
+                        type="number"
-                type="number"
+                    />
-                min="0"
+                    <VnInput
-            />
+                        v-model="data.travelingDays"
-            <VnInputTime v-model="data.hour" :label="t('list.close')" />
+                        :label="t('zone.travelingDays')"
-            <VnSelect
+                        type="number"
-                url="Warehouses"
+                        min="0"
-                v-model="data.warehouseFK"
+                    />
-                option-value="id"
+                    <VnInputTime v-model="data.hour" :label="t('list.close')" />
-                option-label="name"
+                    <VnSelect
-                :label="t('list.warehouse')"
+                        url="Warehouses"
-                :options="warehouseOptions"
+                        v-model="data.warehouseFK"
-            />
+                        option-value="id"
-            <QCheckbox
+                        option-label="name"
-                v-model="data.isVolumetric"
+                        :label="t('list.warehouse')"
-                :label="t('list.isVolumetric')"
+                        :options="warehouseOptions"
-                :toggle-indeterminate="false"
+                    />
-            />
+                    <QCheckbox
-        </template>
+                        v-model="data.isVolumetric"
-    </VnTable>
+                        :label="t('list.isVolumetric')"
+                        :toggle-indeterminate="false"
+                    />
+                </template>
+            </VnTable>
+        </div>
+    </div>
 </template>
 
 <i18n>
@@ -245,3 +253,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,
+        );
     });
 });