From a3ce81d66d3dc65efeaa9b3377869470793fbe84 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 8 May 2024 15:23:52 -0300
Subject: [PATCH 1/9] Zone list

---
 src/pages/Zone/Card/ZoneSummary.vue | 22 ++++---
 src/pages/Zone/ZoneList.vue         | 86 +++++++++++++-------------
 src/pages/Zone/locale/en.yml        |  2 +
 src/pages/Zone/locale/es.yml        |  2 +
 src/router/modules/zone.js          | 96 ++++++++++++++---------------
 5 files changed, 106 insertions(+), 102 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
index 00df03cb0..90241c9a3 100644
--- a/src/pages/Zone/Card/ZoneSummary.vue
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -28,19 +28,25 @@ onMounted(async () => {
 });
 
 const filter = computed(() => {
-    return { where: { id: entityId.value } };
+    const params = {
+        filter: {
+            include: {
+                relation: 'agencyMode',
+                fields: ['name'],
+            },
+            where: {
+                id: entityId.value,
+            },
+        },
+    };
+    return params;
 });
 </script>
 
 <template>
-    <CardSummary
-        data-key="zoneData"
-        ref="summary"
-        :url="`Zones/summary`"
-        :filter="filter"
-    >
+    <CardSummary data-key="zoneData" ref="summary" url="Zones/findOne" :filter="filter">
         <template #header="{ entity }">
-            <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
+            <div>#{{ entity.id }} - {{ entity.name }}</div>
         </template>
         <template #body="{ entity: zone }">
             <QCard class="vn-one">
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index f260eb134..2b18df033 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -1,63 +1,61 @@
 <script setup>
 import axios from 'axios';
-import { useQuasar } from 'quasar';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import FetchData from 'src/components/FetchData.vue';
+import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toTimeFormat } from 'src/filters/date';
+import { toCurrency } from 'filters/index';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import useNotify from 'src/composables/useNotify.js';
 
-const quasar = useQuasar();
-const arrayData = useArrayData('ZoneList');
-const store = arrayData.store;
-const router = useRouter();
 const { t } = useI18n();
+const router = useRouter();
+const { notify } = useNotify();
 const { viewSummary } = useSummaryDialog();
+const { openConfirmationModal } = useVnConfirm();
 
-function navigate(id) {
-    router.push({ path: `/zone/${id}/edit` });
-}
+const redirectToZoneSummary = (id) => {
+    router.push({ name: 'ZoneSummary', params: { id } });
+};
 
-function create() {
+function redirectToCreateView() {
     router.push({ path: `/zone/create` });
 }
 
-async function remove(row) {
+async function clone(id) {
     try {
-        await axios.delete(`Zones/${row.id}`).then(async () => {
-            quasar.notify({
-                message: t('zone.list.removeItem'),
-                type: 'positive',
-            });
-            store.data.splice(store.data.indexOf(row), 1);
-        });
+        await axios.post(`Zones/${id}/clone`);
+        notify(t('globals.dataSaved'), 'positive');
+        //TODO: Redireccionar Zone Basic data cuando exista
+        // router.push({ name: 'ZoneBasicData', params: { id: row.id } });
     } catch (error) {
-        //
+        console.error('Error cloning zone: ', error);
     }
 }
 </script>
 
 <template>
-    <FetchData
-        url="/Agencies"
-        @on-fetch="(data) => (agencyOptions = data)"
-        :filter="{ fields: ['id', 'name'] }"
-        auto-load
-    />
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
-            <VnPaginate data-key="ZoneList" url="/Zones" order="id DESC" auto-load>
+            <VnPaginate
+                data-key="ZoneList"
+                url="Zones"
+                :filter="{
+                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
+                }"
+                auto-load
+            >
                 <template #body="{ rows }">
                     <CardList
                         v-for="row of rows"
                         :key="row.id"
-                        :title="(row.label || '').toString()"
+                        :title="row.name"
                         :id="row.id"
-                        @click="navigate(row.id)"
+                        @click="redirectToZoneSummary(row.id)"
                     >
                         <template #list-items>
                             <VnLv
@@ -68,22 +66,29 @@ async function remove(row) {
                             <VnLv :label="t('zone.list.name')" :value="row?.name" />
                             <VnLv
                                 :label="t('zone.list.agency')"
-                                :options="agencyOptions"
-                                option-value="id"
-                                option-label="name"
-                                :value="row?.agencyFk"
+                                :value="row.agencyMode?.name"
                             />
                             <VnLv
                                 :label="t('zone.list.close')"
                                 :value="toTimeFormat(row?.hour)"
                             />
-                            <VnLv :label="t('zone.list.price')" :value="row?.price" />
+                            <VnLv
+                                :label="t('zone.list.price')"
+                                :value="toCurrency(row?.price)"
+                            />
                         </template>
                         <template #actions>
                             <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
+                                :label="t('zone.list.clone')"
+                                @click.stop="
+                                    openConfirmationModal(
+                                        t('zone.list.confirmCloneTitle'),
+                                        t('zone.list.confirmCloneSubtitle'),
+                                        () => clone(row.id)
+                                    )
+                                "
                                 outline
+                                style="margin-top: 15px"
                             />
                             <QBtn
                                 :label="t('zone.list.openSummary')"
@@ -91,20 +96,13 @@ async function remove(row) {
                                 color="primary"
                                 style="margin-top: 15px"
                             />
-                            <!--AQUI PONER BOTÓN CLONAR-->
-                            <QBtn
-                                :label="t('zone.list.clone')"
-                                @click.stop="remove(row)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
                         </template>
                     </CardList>
                 </template>
             </VnPaginate>
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn @click="create" fab icon="add" color="primary">
+            <QBtn @click="redirectToCreateView()" fab icon="add" color="primary">
                 <QTooltip>{{ t('zone.list.create') }}</QTooltip>
             </QBtn>
         </QPageSticky>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index e62111d57..273092f88 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -9,6 +9,8 @@ zone:
         price: Price
         create: Create zone
         openSummary: Details
+        confirmCloneTitle: All it's properties will be copied
+        confirmCloneSubtitle: Do you want to clone this zone?
     create:
         name: Name
         agency: Agency
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index 5d7a265bf..e1f928621 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -9,6 +9,8 @@ zone:
         price: Precio
         create: Crear zona
         openSummary: Detalles
+        confirmCloneTitle: Todas sus propiedades serán copiadas
+        confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?
     create:
         name: Nombre
         agency: Agencia
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index 079dfaa84..e01099ff3 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -11,58 +11,54 @@ export default {
     component: RouterView,
     redirect: { name: 'ZoneMain' },
     menus: {
-        main: [
-            /*'ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'*/
-        ],
-        card: [
-            //
-        ],
+        main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
+        card: [],
     },
     children: [
-        // {
-        // path: '/zone',
-        // name: 'ZoneMain',
-        // component: () => import('src/pages/Zone/ZoneMain.vue'),
-        // redirect: { name: 'ZoneList' },
-        // children: [
-        //     {
-        //         path: 'list',
-        //         name: 'ZoneList',
-        //         meta: {
-        //             title: 'zonesList',
-        //             icon: 'vn:zone',
-        //         },
-        //         component: () => import('src/pages/Zone/ZoneList.vue'),
-        //     },
-        // {
-        //     path: 'create',
-        //     name: 'ZoneCreate',
-        //     meta: {
-        //         title: 'zoneCreate',
-        //         icon: 'create',
-        //     },
-        //     component: () => import('src/pages/Zone/ZoneCreate.vue'),
-        // },
-        // {
-        //     path: ':id/edit',
-        //     name: 'ZoneEdit',
-        //     meta: {
-        //         title: 'zoneEdit',
-        //         icon: 'edit',
-        //     },
-        //     component: () => import('src/pages/Zone/ZoneCreate.vue'),
-        // },
-        // {
-        //     path: 'counter',
-        //     name: 'ZoneCounter',
-        //     meta: {
-        //         title: 'zoneCounter',
-        //         icon: 'add_circle',
-        //     },
-        //     component: () => import('src/pages/Zone/ZoneCounter.vue'),
-        // },
-        // ],
-        // },
+        {
+            path: '/zone',
+            name: 'ZoneMain',
+            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            redirect: { name: 'ZoneList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ZoneList',
+                    meta: {
+                        title: 'zonesList',
+                        icon: 'vn:zone',
+                    },
+                    component: () => import('src/pages/Zone/ZoneList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ZoneCreate',
+                    meta: {
+                        title: 'zoneCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
+                },
+                {
+                    path: ':id/edit',
+                    name: 'ZoneEdit',
+                    meta: {
+                        title: 'zoneEdit',
+                        icon: 'edit',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
+                },
+                {
+                    path: 'counter',
+                    name: 'ZoneCounter',
+                    meta: {
+                        title: 'zoneCounter',
+                        icon: 'add_circle',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCounter.vue'),
+                },
+            ],
+        },
         {
             name: 'ZoneCard',
             path: ':id',

From 9b9e482fa76e1b75af4c0c677ac801e7c947f8bf Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 9 May 2024 08:21:30 -0300
Subject: [PATCH 2/9] Zone list and Zone summary

---
 src/pages/Zone/Card/ZoneSummary.vue          | 119 ++++++++++---------
 src/pages/Zone/Delivery/ZoneDeliveryList.vue |   2 +-
 src/pages/Zone/Upcoming/ZoneUpcomingList.vue |   2 +-
 src/pages/Zone/ZoneCreate.vue                |  12 +-
 src/pages/Zone/ZoneFilterPanel.vue           |  34 +++---
 src/pages/Zone/ZoneList.vue                  |  88 +++++++++++---
 src/pages/Zone/locale/en.yml                 |  55 +++++----
 src/pages/Zone/locale/es.yml                 |  55 +++++----
 src/router/modules/zone.js                   |  11 +-
 9 files changed, 243 insertions(+), 135 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
index 90241c9a3..b39d2aaab 100644
--- a/src/pages/Zone/Card/ZoneSummary.vue
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -2,14 +2,16 @@
 import { ref, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { dashIfEmpty } from 'src/filters';
-import { getUrl } from 'src/composables/getUrl';
+
 import VnLv from 'src/components/ui/VnLv.vue';
-import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import CardSummary from 'components/ui/CardSummary.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
+import { getUrl } from 'src/composables/getUrl';
+import { toCurrency } from 'filters/index';
+import { toTimeFormat } from 'src/filters/date';
+import axios from 'axios';
+
 const route = useRoute();
 const { t } = useI18n();
 
@@ -23,77 +25,84 @@ const $props = defineProps({
 const entityId = computed(() => $props.id || route.params.id);
 const zoneUrl = ref();
 
-onMounted(async () => {
-    zoneUrl.value = (await getUrl('')) + `zone/${entityId.value}/`;
+const filter = computed(() => {
+    const filter = {
+        include: {
+            relation: 'agencyMode',
+            fields: ['name'],
+        },
+        where: {
+            id: route.params.id,
+        },
+    };
+    return filter;
 });
 
-const filter = computed(() => {
+const columns = computed(() => [
+    {
+        label: t('summary.name'),
+        name: 'name',
+        field: 'warehouse',
+        align: 'left',
+        format: (val) => val.name,
+    },
+]);
+const warehouses = ref([]);
+
+const getWarehouses = async () => {
     const params = {
         filter: {
             include: {
-                relation: 'agencyMode',
+                relation: 'warehouse',
                 fields: ['name'],
             },
-            where: {
-                id: entityId.value,
-            },
         },
     };
-    return params;
+
+    const { data } = await axios.get(`Zones/${entityId.value}/warehouses`, { params });
+    warehouses.value = data;
+};
+
+onMounted(async () => {
+    zoneUrl.value = (await getUrl('')) + `zone/${entityId.value}/`;
+    await getWarehouses();
 });
 </script>
 
 <template>
-    <CardSummary data-key="zoneData" ref="summary" url="Zones/findOne" :filter="filter">
+    <CardSummary
+        data-key="ZoneSummary"
+        ref="summary"
+        url="Zones/findOne"
+        :filter="filter"
+    >
         <template #header="{ entity }">
             <div>#{{ entity.id }} - {{ entity.name }}</div>
         </template>
         <template #body="{ entity: zone }">
             <QCard class="vn-one">
-                <VnTitle
-                    :url="zoneUrl + `basic-data`"
-                    :text="t('zone.summary.basicData')"
-                />
-                <VnLv :label="t('zone.card.name')" :value="zone.user?.nickname" />
-                <VnLv
-                    :label="t('zone.list.department')"
-                    :value="zone.department?.department?.name"
-                />
-                <VnLv :label="t('zone.list.email')" :value="zone.user.email" copy />
-                <VnLv :label="t('zone.summary.boss')" link>
-                    <template #value>
-                        <VnUserLink
-                            v-if="zone.boss"
-                            :name="dashIfEmpty(zone.boss?.name)"
-                            :zone-id="zone.bossFk"
-                        />
-                    </template>
-                </VnLv>
-                <VnLv :value="zone.mobileExtension">
-                    <template #label>
-                        {{ t('zone.summary.phoneExtension') }}
-                        <VnLinkPhone :phone-number="zone.mobileExtension" />
-                    </template>
-                </VnLv>
-                <VnLv :value="zone.phone">
-                    <template #label>
-                        {{ t('zone.summary.entPhone') }}
-                        <VnLinkPhone :phone-number="zone.phone" />
-                    </template>
-                </VnLv>
-                <VnLv :label="t('zone.summary.locker')" :value="zone.locker" />
+                <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
+                <VnLv :label="t('summary.agency')" :value="zone.agencyMode?.name" />
+                <VnLv :label="t('summary.price')" :value="toCurrency(zone.price)" />
+                <VnLv :label="t('summary.bonus')" :value="toCurrency(zone.bonus)" />
             </QCard>
             <QCard class="vn-one">
-                <VnTitle :text="t('zone.summary.userData')" />
-                <VnLv :label="t('zone.summary.userId')" :value="zone.user.id" />
-                <VnLv :label="t('zone.card.name')" :value="zone.user.nickname" />
-                <VnLv :label="t('zone.summary.role')" :value="zone.user.role.name" />
-                <VnLv :value="zone?.sip?.extension">
-                    <template #label>
-                        {{ t('zone.summary.sipExtension') }}
-                        <VnLinkPhone :phone-number="zone?.sip?.extension" />
-                    </template>
-                </VnLv>
+                <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
+                <VnLv :label="t('summary.closeHour')" :value="toTimeFormat(zone.hour)" />
+                <VnLv :label="t('summary.travelingDays')" :value="zone.travelingDays" />
+                <QCheckbox
+                    :label="t('summary.volumetric')"
+                    v-model="zone.isVolumetric"
+                    :disable="true"
+                />
+            </QCard>
+            <QCard class="full-width">
+                <VnTitle :url="zoneUrl + `warehouses`" :text="t('summary.warehouse')" />
+                <QTable
+                    :columns="columns"
+                    :rows="warehouses"
+                    :no-data-label="t('globals.noResults')"
+                />
             </QCard>
         </template>
     </CardSummary>
diff --git a/src/pages/Zone/Delivery/ZoneDeliveryList.vue b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
index 695388a9b..ca87dbd84 100644
--- a/src/pages/Zone/Delivery/ZoneDeliveryList.vue
+++ b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
@@ -63,7 +63,7 @@ async function remove(row) {
                                 outline
                             />
                             <QBtn
-                                :label="t('zone.list.remove')"
+                                :label="t('list.remove')"
                                 @click.stop="remove(row)"
                                 color="primary"
                                 style="margin-top: 15px"
diff --git a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
index 2d3016f25..89e53132e 100644
--- a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
+++ b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
@@ -63,7 +63,7 @@ async function remove(row) {
                                 outline
                             />
                             <QBtn
-                                :label="t('zone.list.remove')"
+                                :label="t('list.remove')"
                                 @click.stop="remove(row)"
                                 color="primary"
                                 style="margin-top: 15px"
diff --git a/src/pages/Zone/ZoneCreate.vue b/src/pages/Zone/ZoneCreate.vue
index 93ea9589b..c287bce42 100644
--- a/src/pages/Zone/ZoneCreate.vue
+++ b/src/pages/Zone/ZoneCreate.vue
@@ -96,7 +96,7 @@ function filterType(val, update) {
                         <QInput
                             filled
                             v-model="zone.label"
-                            :label="t('zone.create.name')"
+                            :label="t('create.name')"
                             type="number"
                             min="0"
                             :rules="[(val) => !!val || t('zone.warnings.labelNotEmpty')]"
@@ -106,7 +106,7 @@ function filterType(val, update) {
                         <VnInput
                             filled
                             v-model="zone.plate"
-                            :label="t('zone.create.agency')"
+                            :label="t('create.agency')"
                             :rules="[(val) => !!val || t('zone.warnings.plateNotEmpty')]"
                         />
                     </div>
@@ -116,7 +116,7 @@ function filterType(val, update) {
                         <QInput
                             filled
                             v-model="zone.volume"
-                            :label="t('zone.create.close')"
+                            :label="t('create.close')"
                             type="number"
                             min="0"
                             :rules="[(val) => !!val || t('zone.warnings.volumeNotEmpty')]"
@@ -134,7 +134,7 @@ function filterType(val, update) {
                             option-value="id"
                             emit-value
                             map-options
-                            :label="t('zone.create.price')"
+                            :label="t('create.price')"
                             :options="filteredZoneTypes"
                             :rules="[(val) => !!val || t('zone.warnings.typeNotEmpty')]"
                             @filter="filterType"
@@ -158,9 +158,9 @@ function filterType(val, update) {
                 </div>
             </QCard>
             <div class="q-mt-md">
-                <QBtn :label="t('zone.type.submit')" type="submit" color="primary" />
+                <QBtn :label="t('type.submit')" type="submit" color="primary" />
                 <QBtn
-                    :label="t('zone.type.reset')"
+                    :label="t('type.reset')"
                     type="reset"
                     color="primary"
                     flat
diff --git a/src/pages/Zone/ZoneFilterPanel.vue b/src/pages/Zone/ZoneFilterPanel.vue
index 94765919d..32026bd5b 100644
--- a/src/pages/Zone/ZoneFilterPanel.vue
+++ b/src/pages/Zone/ZoneFilterPanel.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import VnInput from 'components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -17,37 +17,43 @@ const props = defineProps({
         default: null,
     },
 });
+
 const agencies = ref([]);
 </script>
 
 <template>
-    <FetchData
-        url="agencies"
-        limit="30"
-        @on-fetch="(data) => (agencies = data)"
-        auto-load
-    />
+    <FetchData url="agencies" @on-fetch="(data) => (agencies = data)" auto-load />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #body="{ params }">
+        <template #tags="{ tag }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`filterPanel.${tag.label}`) }}: </strong>
+                <span>{{ tag.value }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
-                    <VnInput :label="t('Name')" v-model="params.name" is-outlined />
+                    <VnInput
+                        :label="t('filterPanel.name')"
+                        v-model="params.name"
+                        is-outlined
+                    />
                 </QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
-                        :label="t('Agency')"
-                        v-model="params.agencyModefK"
+                    <VnSelect
+                        :label="t('filterPanel.agencyModeFk')"
+                        v-model="params.agencyModeFk"
                         :options="agencies"
                         option-value="id"
                         option-label="name"
-                        @input-value="agencies.fetch()"
+                        @update:model-value="searchFn()"
                         dense
                         outlined
                         rounded
                     >
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
         </template>
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 2b18df033..cf9acf3e7 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -1,17 +1,24 @@
 <script setup>
-import axios from 'axios';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { onMounted } from 'vue';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import ZoneFilterPanel from './ZoneFilterPanel.vue';
+
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toTimeFormat } from 'src/filters/date';
 import { toCurrency } from 'filters/index';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
+import { useStateStore } from 'stores/useStateStore';
+import axios from 'axios';
 
+const stateStore = useStateStore();
 const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
@@ -26,19 +33,70 @@ function redirectToCreateView() {
     router.push({ path: `/zone/create` });
 }
 
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'name':
+            return {
+                name: { like: `%${value}%` },
+            };
+        case 'code':
+            return {
+                code: { like: `%${value}%` },
+            };
+        case 'agencyModeFk':
+            return {
+                agencyModeFk: value,
+            };
+        case 'search':
+            if (value) {
+                if (!isNaN(value)) {
+                    return { id: value };
+                } else {
+                    return {
+                        name: {
+                            like: `%${value}%`,
+                        },
+                    };
+                }
+            }
+    }
+};
+
 async function clone(id) {
     try {
         await axios.post(`Zones/${id}/clone`);
         notify(t('globals.dataSaved'), 'positive');
-        //TODO: Redireccionar Zone Basic data cuando exista
-        // router.push({ name: 'ZoneBasicData', params: { id: row.id } });
+        router.push({ name: 'ZoneBasicData', params: { id } });
     } catch (error) {
         console.error('Error cloning zone: ', error);
     }
 }
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+});
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ZoneList"
+                url="Zones"
+                :filter="{
+                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
+                }"
+                :expr-builder="exprBuilder"
+                :label="t('list.searchZone')"
+                :info="t('list.searchInfo')"
+            />
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
@@ -59,31 +117,31 @@ async function clone(id) {
                     >
                         <template #list-items>
                             <VnLv
-                                :label="t('zone.list.id')"
-                                :title-label="t('zone.list.id')"
+                                :label="t('list.id')"
+                                :title-label="t('list.id')"
                                 :value="row.id"
                             />
-                            <VnLv :label="t('zone.list.name')" :value="row?.name" />
+                            <VnLv :label="t('list.name')" :value="row?.name" />
                             <VnLv
-                                :label="t('zone.list.agency')"
+                                :label="t('list.agency')"
                                 :value="row.agencyMode?.name"
                             />
                             <VnLv
-                                :label="t('zone.list.close')"
+                                :label="t('list.close')"
                                 :value="toTimeFormat(row?.hour)"
                             />
                             <VnLv
-                                :label="t('zone.list.price')"
+                                :label="t('list.price')"
                                 :value="toCurrency(row?.price)"
                             />
                         </template>
                         <template #actions>
                             <QBtn
-                                :label="t('zone.list.clone')"
+                                :label="t('list.clone')"
                                 @click.stop="
                                     openConfirmationModal(
-                                        t('zone.list.confirmCloneTitle'),
-                                        t('zone.list.confirmCloneSubtitle'),
+                                        t('list.confirmCloneTitle'),
+                                        t('list.confirmCloneSubtitle'),
                                         () => clone(row.id)
                                     )
                                 "
@@ -91,7 +149,7 @@ async function clone(id) {
                                 style="margin-top: 15px"
                             />
                             <QBtn
-                                :label="t('zone.list.openSummary')"
+                                :label="t('list.openSummary')"
                                 @click.stop="viewSummary(row.id, ZoneSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
@@ -103,7 +161,7 @@ async function clone(id) {
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
             <QBtn @click="redirectToCreateView()" fab icon="add" color="primary">
-                <QTooltip>{{ t('zone.list.create') }}</QTooltip>
+                <QTooltip>{{ t('list.create') }}</QTooltip>
             </QBtn>
         </QPageSticky>
     </QPage>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index 273092f88..65067e6d9 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -1,21 +1,34 @@
-zone:
-    list:
-        volume: Volume
-        clone: Clone
-        id: Id
-        name: Name
-        agency: Agency
-        close: Close
-        price: Price
-        create: Create zone
-        openSummary: Details
-        confirmCloneTitle: All it's properties will be copied
-        confirmCloneSubtitle: Do you want to clone this zone?
-    create:
-        name: Name
-        agency: Agency
-        close: Close
-        price: Price
-    type:
-        submit: Save
-        reset: Reset
+list:
+    clone: Clone
+    id: Id
+    name: Name
+    agency: Agency
+    close: Close
+    price: Price
+    create: Create zone
+    openSummary: Details
+    confirmCloneTitle: All it's properties will be copied
+    confirmCloneSubtitle: Do you want to clone this zone?
+    searchZone: Search zones
+    searchInfo: Search zone by id or name
+create:
+    name: Name
+    agency: Agency
+    close: Close
+    price: Price
+type:
+    submit: Save
+    reset: Reset
+summary:
+    agency: Agency
+    price: Price
+    basicData: Basic data
+    bonus: Bonus
+    closeHour: Close hour
+    travelingDays: Traveling days
+    volumetric: Volumetric
+    warehouse: Warehouse
+    name: Name
+filterPanel:
+    name: Name
+    agencyModeFk: Agency
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index e1f928621..df889db10 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -1,21 +1,34 @@
-zone:
-    list:
-        volume: Volumen
-        clone: Clonar
-        id: Id
-        name: Nombre
-        agency: Agencia
-        close: Cierre
-        price: Precio
-        create: Crear zona
-        openSummary: Detalles
-        confirmCloneTitle: Todas sus propiedades serán copiadas
-        confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?
-    create:
-        name: Nombre
-        agency: Agencia
-        close: Cierre
-        price: Precio
-    type:
-        submit: Guardar
-        reset: Reiniciar
+list:
+    clone: Clonar
+    id: Id
+    name: Nombre
+    agency: Agencia
+    close: Cierre
+    price: Precio
+    create: Crear zona
+    openSummary: Detalles
+    confirmCloneTitle: Todas sus propiedades serán copiadas
+    confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?
+    searchZone: Buscar zonas
+    searchInfo: Buscar zonas por identificador o nombre
+create:
+    name: Nombre
+    agency: Agencia
+    close: Cierre
+    price: Precio
+type:
+    submit: Guardar
+    reset: Reiniciar
+summary:
+    agency: Agencia
+    price: Precio
+    basicData: Datos básicos
+    bonus: Bonificaciones
+    closeHour: Hora de cierre
+    travelingDays: Días de viaje
+    volumetric: Volumétrico
+    warehouse: Almacén
+    name: Nombre
+filterPanel:
+    name: Nombre
+    agencyModeFk: Agencia
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index e01099ff3..d39ed82d0 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'ZoneMain' },
     menus: {
         main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
-        card: [],
+        card: ['ZoneBasicData'],
     },
     children: [
         {
@@ -74,6 +74,15 @@ export default {
                     },
                     component: () => import('src/pages/Zone/Card/ZoneSummary.vue'),
                 },
+                {
+                    name: 'ZoneBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('src/pages/Zone/Card/ZoneBasicData.vue'),
+                },
                 // {
                 //     path: '/zone/delivery',
                 //     name: 'ZoneDeliveryMain',

From 7216b90a3eddbf3ffa2f65c579b14315fdd5edea Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 9 May 2024 15:13:45 -0300
Subject: [PATCH 3/9] Fix filter panel bug

---
 src/components/ui/VnFilterPanel.vue | 2 +-
 src/pages/Zone/ZoneFilterPanel.vue  | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index eb0bbbe66..dac028965 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -147,7 +147,7 @@ const customTags = computed(() =>
 
 async function remove(key) {
     userParams.value[key] = null;
-    await search();
+    await arrayData.applyFilter({ params: userParams.value });
     emit('remove', key);
 }
 
diff --git a/src/pages/Zone/ZoneFilterPanel.vue b/src/pages/Zone/ZoneFilterPanel.vue
index 32026bd5b..c84355eb0 100644
--- a/src/pages/Zone/ZoneFilterPanel.vue
+++ b/src/pages/Zone/ZoneFilterPanel.vue
@@ -23,7 +23,11 @@ const agencies = ref([]);
 
 <template>
     <FetchData url="agencies" @on-fetch="(data) => (agencies = data)" auto-load />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :hidden-tags="['search']"
+    >
         <template #tags="{ tag }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`filterPanel.${tag.label}`) }}: </strong>

From 7f185c091bb331b3fc421b64f4d5648a5086c0ff Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:13:02 +0200
Subject: [PATCH 4/9] feat: add descriptor

---
 src/i18n/locale/en.yml           |  6 ------
 src/i18n/locale/es.yml           |  7 +------
 src/pages/Zone/Card/ZoneCard.vue | 11 ++++++++++-
 src/pages/Zone/locale/en.yml     |  6 ++++++
 src/pages/Zone/locale/es.yml     |  8 ++++++++
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index d8fb231f0..c5f923855 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1234,12 +1234,6 @@ item/itemType:
         itemType: Item type
         basicData: Basic data
         summary: Summary
-zone:
-    pageTitles:
-        zones: Zone
-        zonesList: Zones
-        deliveryList: Delivery days
-        upcomingList: Upcoming deliveries
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 67e075935..3b417c3a6 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1233,12 +1233,7 @@ item/itemType:
         itemType: Familia
         basicData: Datos básicos
         summary: Resumen
-zone:
-    pageTitles:
-        zones: Zona
-        zonesList: Zonas
-        deliveryList: Días de entrega
-        upcomingList: Próximos repartos
+
 components:
     topbar: {}
     itemsFilterPanel:
diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue
index 948636c55..9d6895f36 100644
--- a/src/pages/Zone/Card/ZoneCard.vue
+++ b/src/pages/Zone/Card/ZoneCard.vue
@@ -1,6 +1,15 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
+import ZoneDescriptor from './ZoneDescriptor.vue';
 </script>
 <template>
-    <VnCard data-key="Zone" base-url="Zones" />
+    <VnCard
+        data-key="Zone"
+        base-url="Zones"
+        :descriptor="ZoneDescriptor"
+        searchbar-data-key="ZoneList"
+        searchbar-url="Zones/filter"
+        searchbar-label="Search zones"
+        searchbar-info="You can search by zone reference"
+    />
 </template>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index 65067e6d9..d0a22ebcd 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -1,3 +1,9 @@
+zone:
+    pageTitles:
+        zones: Zone
+        zonesList: Zones
+        deliveryList: Delivery days
+        upcomingList: Upcoming deliveries
 list:
     clone: Clone
     id: Id
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index df889db10..3062950c8 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -1,3 +1,9 @@
+zone:
+    pageTitles:
+        zones: Zonas
+        zonesList: Zonas
+        deliveryList: Días de entrega
+        upcomingList: Próximos repartos
 list:
     clone: Clonar
     id: Id
@@ -32,3 +38,5 @@ summary:
 filterPanel:
     name: Nombre
     agencyModeFk: Agencia
+Search zones: Buscar zonas
+You can search by zone reference: Puedes buscar por referencia de la zona

From 2697078a557ac85d3f7c6fd3f22e5c5690e35fc3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:40:47 +0200
Subject: [PATCH 5/9] feat: Replace CarList by Table

---
 src/pages/Zone/ZoneList.vue | 168 ++++++++++++++++++++++++------------
 1 file changed, 114 insertions(+), 54 deletions(-)

diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index cf9acf3e7..f3de8a41a 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { onMounted } from 'vue';
+import { onMounted, computed } from 'vue';
+import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'components/ui/CardList.vue';
@@ -12,7 +13,6 @@ import ZoneFilterPanel from './ZoneFilterPanel.vue';
 
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toTimeFormat } from 'src/filters/date';
-import { toCurrency } from 'filters/index';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
 import { useStateStore } from 'stores/useStateStore';
@@ -25,13 +25,56 @@ const { notify } = useNotify();
 const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
 
-const redirectToZoneSummary = (id) => {
+const redirectToZoneSummary = (event, { id }) => {
     router.push({ name: 'ZoneSummary', params: { id } });
 };
 
 function redirectToCreateView() {
     router.push({ path: `/zone/create` });
 }
+const columns = computed(() => [
+    {
+        name: 'ID',
+        label: t('list.id'),
+        field: (row) => row.id,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'name',
+        label: t('list.name'),
+        field: (row) => row.name,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'agency',
+        label: t('list.agency'),
+        field: (row) => row?.agencyMode?.name,
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'close',
+        label: t('list.close'),
+        field: (row) => (row?.hour ? toTimeFormat(row?.hour) : '-'),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'price',
+        label: t('list.price'),
+        field: (row) => (row?.price ? toCurrency(row.price) : '-'),
+        sortable: true,
+        align: 'left',
+    },
+    {
+        name: 'actions',
+        label: '',
+        sortable: false,
+        align: 'right',
+    },
+]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -71,7 +114,13 @@ async function clone(id) {
         console.error('Error cloning zone: ', error);
     }
 }
-
+const handleClone = (id) => {
+    openConfirmationModal(
+        t('list.confirmCloneTitle'),
+        t('list.confirmCloneSubtitle'),
+        () => clone(id)
+    );
+};
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -97,8 +146,8 @@ onMounted(async () => {
             <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
+    <QPage class="column items-center">
+        <div style="width: 100%">
             <VnPaginate
                 data-key="ZoneList"
                 url="Zones"
@@ -108,54 +157,65 @@ onMounted(async () => {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :key="row.id"
-                        :title="row.name"
-                        :id="row.id"
-                        @click="redirectToZoneSummary(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv
-                                :label="t('list.id')"
-                                :title-label="t('list.id')"
-                                :value="row.id"
-                            />
-                            <VnLv :label="t('list.name')" :value="row?.name" />
-                            <VnLv
-                                :label="t('list.agency')"
-                                :value="row.agencyMode?.name"
-                            />
-                            <VnLv
-                                :label="t('list.close')"
-                                :value="toTimeFormat(row?.hour)"
-                            />
-                            <VnLv
-                                :label="t('list.price')"
-                                :value="toCurrency(row?.price)"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('list.clone')"
-                                @click.stop="
-                                    openConfirmationModal(
-                                        t('list.confirmCloneTitle'),
-                                        t('list.confirmCloneSubtitle'),
-                                        () => clone(row.id)
-                                    )
-                                "
-                                outline
-                                style="margin-top: 15px"
-                            />
-                            <QBtn
-                                :label="t('list.openSummary')"
-                                @click.stop="viewSummary(row.id, ZoneSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
+                    <div class="q-pa-md">
+                        <QTable
+                            :rows="rows"
+                            :columns="columns"
+                            row-key="clientId"
+                            class="full-width"
+                            @row-click="redirectToZoneSummary"
+                        >
+                            <template #header="props">
+                                <QTr :props="props" class="bg">
+                                    <QTh
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        {{ t(col.label) }}
+                                        <QTooltip v-if="col.tooltip">{{
+                                            col.tooltip
+                                        }}</QTooltip>
+                                    </QTh>
+                                </QTr>
+                            </template>
+
+                            <template #body-cell="props">
+                                <QTd :props="props">
+                                    <QTr :props="props" class="cursor-pointer">
+                                        {{ props.value }}
+                                    </QTr></QTd
+                                ></template
+                            >
+                            <template #body-cell-actions="props">
+                                <QTd :props="props">
+                                    <div class="table-actions">
+                                        <QIcon
+                                            style="margin-top: 15px"
+                                            name="vn:clone"
+                                            size="sm"
+                                            color="primary"
+                                            @click.stop="handleClone(props.row.id)"
+                                        >
+                                            <QTooltip>{{
+                                                t('globals.clone')
+                                            }}</QTooltip> </QIcon
+                                        ><QIcon
+                                            style="margin-top: 15px"
+                                            name="preview"
+                                            size="sm"
+                                            color="primary"
+                                            @click.stop="
+                                                viewSummary(props.row.id, ZoneSummary)
+                                            "
+                                        >
+                                            <QTooltip>{{ t('Preview') }}</QTooltip>
+                                        </QIcon>
+                                    </div>
+                                </QTd>
+                            </template>
+                        </QTable>
+                    </div>
                 </template>
             </VnPaginate>
         </div>

From 1100588af589193c69242a28e04237feaabb75f1 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:40:56 +0200
Subject: [PATCH 6/9] fix: minor size icons

---
 src/pages/Route/RouteAutonomous.vue | 2 +-
 src/pages/Route/RouteList.vue       | 4 ++--
 src/pages/Route/RouteRoadmap.vue    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Route/RouteAutonomous.vue b/src/pages/Route/RouteAutonomous.vue
index 0ecf0a971..238dce070 100644
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/src/pages/Route/RouteAutonomous.vue
@@ -280,7 +280,7 @@ function navigateToRouteSummary(event, row) {
                                     <div class="table-actions">
                                         <QIcon
                                             name="preview"
-                                            size="xs"
+                                            size="sm"
                                             color="primary"
                                             @click.stop="
                                                 viewSummary(
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index c0888a225..73801e13a 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -422,7 +422,7 @@ const openTicketsDialog = (id) => {
                                     <div class="flex items-center no-wrap table-actions">
                                         <QIcon
                                             name="vn:ticketAdd"
-                                            size="xs"
+                                            size="sm"
                                             color="primary"
                                             class="cursor-pointer"
                                             @click="openTicketsDialog(props?.row?.id)"
@@ -431,7 +431,7 @@ const openTicketsDialog = (id) => {
                                         </QIcon>
                                         <QIcon
                                             name="preview"
-                                            size="xs"
+                                            size="sm"
                                             color="primary"
                                             @click="
                                                 viewSummary(props?.row?.id, RouteSummary)
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index 7a7dbd948..2ed8b6a9a 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -242,7 +242,7 @@ function navigateToRoadmapSummary(event, row) {
                                     <div class="flex items-center table-actions">
                                         <QIcon
                                             name="preview"
-                                            size="xs"
+                                            size="sm"
                                             color="primary"
                                             @click.stop="
                                                 viewSummary(

From 049564f443143054889e6017c0804970b4f39a98 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:45:38 +0200
Subject: [PATCH 7/9] fix: Descriptor

---
 src/pages/Zone/Card/ZoneDescriptor.vue | 24 ++++++------------------
 src/pages/Zone/locale/es.yml           |  2 +-
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 93e951801..8f0aa9e07 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { toTimeFormat } from 'src/filters/date';
+import { toCurrency } from 'filters/index';
 
 import useCardDescription from 'src/composables/useCardDescription';
 
@@ -73,24 +74,11 @@ const setData = (entity) => {
         </template> -->
         <template #body="{ entity }">
             {{ console.log('entity', entity) }}
-            <VnLv :label="t('Agency')" :value="entity.agencyMode.name" />
-            <VnLv :label="t('Closing hour')" :value="toTimeFormat(entity.hour)" />
-            <VnLv :label="t('zoneing days')" :value="entity.zoneingDays" />
-            <VnLv :label="t('Price')" :value="entity.price" />
-            <VnLv :label="t('Bonus')" :value="entity.bonus" />
+            <VnLv :label="t('summary.agency')" :value="entity.agencyMode.name" />
+            <VnLv :label="t('summary.closeHour')" :value="toTimeFormat(entity.hour)" />
+            <VnLv :label="t('summary.travelingDays')" :value="entity.travelingDays" />
+            <VnLv :label="t('summary.price')" :value="toCurrency(entity.price)" />
+            <VnLv :label="t('summary.bonus')" :value="toCurrency(entity.bonus)" />
         </template>
     </CardDescriptor>
 </template>
-
-<i18n>
-es:
-    Summary: Detalles
-    The zone will be deleted: El envío será eliminado
-    Do you want to delete this zone?: ¿Quieres eliminar este envío?
-    All zones with current agency: Todos los envíos con la agencia actual
-    Agency: Agencia
-    Closing hour: Hora de cierre
-    zoneing days: Días de viaje
-    Price: Precio
-    Bonus: Bonificación
-</i18n>
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index 3062950c8..ad740d5f7 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -29,7 +29,7 @@ summary:
     agency: Agencia
     price: Precio
     basicData: Datos básicos
-    bonus: Bonificaciones
+    bonus: Bonificación
     closeHour: Hora de cierre
     travelingDays: Días de viaje
     volumetric: Volumétrico

From daf1d4de2dab1bab3b32d977b66350889c3d6c7d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:51:47 +0200
Subject: [PATCH 8/9] style changes

---
 src/css/app.scss            | 4 ++++
 src/pages/Zone/ZoneList.vue | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 2e524e693..1b2e56add 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -182,3 +182,7 @@ input::-webkit-inner-spin-button {
 .q-scrollarea__content {
     max-width: 100%;
 }
+
+.mt-15 {
+    margin-top: 15px;
+}
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index f3de8a41a..c220ebb7b 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -146,8 +146,8 @@ onMounted(async () => {
             <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center">
-        <div style="width: 100%">
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ZoneList"
                 url="Zones"
@@ -191,7 +191,7 @@ onMounted(async () => {
                                 <QTd :props="props">
                                     <div class="table-actions">
                                         <QIcon
-                                            style="margin-top: 15px"
+                                            class="mt-15"
                                             name="vn:clone"
                                             size="sm"
                                             color="primary"
@@ -201,7 +201,7 @@ onMounted(async () => {
                                                 t('globals.clone')
                                             }}</QTooltip> </QIcon
                                         ><QIcon
-                                            style="margin-top: 15px"
+                                            class="mt-15"
                                             name="preview"
                                             size="sm"
                                             color="primary"

From a28d18f1e1632b23a5c748fb3b078ed8edd709f1 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 13 May 2024 09:30:03 +0200
Subject: [PATCH 9/9] fix: redirection when clone and styles

---
 src/css/app.scss            |  4 ---
 src/pages/Zone/ZoneList.vue | 60 ++++++++++++++++---------------------
 2 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/src/css/app.scss b/src/css/app.scss
index 1b2e56add..2e524e693 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -182,7 +182,3 @@ input::-webkit-inner-spin-button {
 .q-scrollarea__content {
     max-width: 100%;
 }
-
-.mt-15 {
-    margin-top: 15px;
-}
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index c220ebb7b..3806a519e 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -106,13 +106,9 @@ const exprBuilder = (param, value) => {
 };
 
 async function clone(id) {
-    try {
-        await axios.post(`Zones/${id}/clone`);
-        notify(t('globals.dataSaved'), 'positive');
-        router.push({ name: 'ZoneBasicData', params: { id } });
-    } catch (error) {
-        console.error('Error cloning zone: ', error);
-    }
+    const { data } = await axios.post(`Zones/${id}/clone`);
+    notify(t('globals.dataSaved'), 'positive');
+    router.push({ name: 'ZoneBasicData', params: { id: data.id } });
 }
 const handleClone = (id) => {
     openConfirmationModal(
@@ -154,6 +150,7 @@ onMounted(async () => {
                 :filter="{
                     include: { relation: 'agencyMode', scope: { fields: ['name'] } },
                 }"
+                :limit="20"
                 auto-load
             >
                 <template #body="{ rows }">
@@ -184,34 +181,29 @@ onMounted(async () => {
                                 <QTd :props="props">
                                     <QTr :props="props" class="cursor-pointer">
                                         {{ props.value }}
-                                    </QTr></QTd
-                                ></template
-                            >
+                                    </QTr>
+                                </QTd>
+                            </template>
                             <template #body-cell-actions="props">
-                                <QTd :props="props">
-                                    <div class="table-actions">
-                                        <QIcon
-                                            class="mt-15"
-                                            name="vn:clone"
-                                            size="sm"
-                                            color="primary"
-                                            @click.stop="handleClone(props.row.id)"
-                                        >
-                                            <QTooltip>{{
-                                                t('globals.clone')
-                                            }}</QTooltip> </QIcon
-                                        ><QIcon
-                                            class="mt-15"
-                                            name="preview"
-                                            size="sm"
-                                            color="primary"
-                                            @click.stop="
-                                                viewSummary(props.row.id, ZoneSummary)
-                                            "
-                                        >
-                                            <QTooltip>{{ t('Preview') }}</QTooltip>
-                                        </QIcon>
-                                    </div>
+                                <QTd :props="props" class="q-gutter-x-sm">
+                                    <QIcon
+                                        name="vn:clone"
+                                        size="sm"
+                                        color="primary"
+                                        @click.stop="handleClone(props.row.id)"
+                                    >
+                                        <QTooltip>{{ t('globals.clone') }}</QTooltip>
+                                    </QIcon>
+                                    <QIcon
+                                        name="preview"
+                                        size="sm"
+                                        color="primary"
+                                        @click.stop="
+                                            viewSummary(props.row.id, ZoneSummary)
+                                        "
+                                    >
+                                        <QTooltip>{{ t('Preview') }}</QTooltip>
+                                    </QIcon>
                                 </QTd>
                             </template>
                         </QTable>