From be3c48b9f1bc54840db59ef71fb90950f637741a Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 11 Apr 2025 11:50:39 +0200
Subject: [PATCH] refactor: refs #8647 solved inject warning

---
 src/components/common/VnSelect.vue |   2 +-
 src/components/ui/VnPaginate.vue   |  12 ++-
 src/pages/Zone/ZoneList.vue        | 151 +++++++++++++----------------
 3 files changed, 76 insertions(+), 89 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 79f676d0f..0afe59877 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -71,7 +71,7 @@ const $props = defineProps({
         default: null,
     },
     include: {
-        type: [Object, Array],
+        type: [Object, Array, String],
         default: null,
     },
     where: {
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index b232e6c05..678d1f799 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -146,14 +146,22 @@ const addFilter = async (filter, params) => {
 };
 
 async function fetch(params) {
-    useArrayData(props.dataKey, params);
+    if (params) {
+        for (let param in params) {
+            if (params[param]) arrayData.store[param] = params[param];
+        }
+    }
     arrayData.resetPagination();
     await arrayData.fetch({ append: false });
     return emitStoreData();
 }
 
 async function update(params) {
-    useArrayData(props.dataKey, params);
+    if (params) {
+        for (let param in params) {
+            if (params[param]) arrayData.store[param] = params[param];
+        }
+    }
     const { limit, skip } = store;
     store.limit = limit + skip;
     store.skip = 0;
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 8d7c4a165..355eb900e 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -93,6 +93,7 @@ const columns = computed(() => [
             optionLabel: 'name',
             optionValue: 'id',
         },
+        columnClass: 'expand',
     },
     {
         align: 'left',
@@ -247,74 +248,70 @@ const closeEventForm = () => {
                     </QBtnGroup>
                 </template>
             </VnSubToolbar>
-            <div class="table-container">
-                <div class="column items-center">
-                    <VnTable
-                        ref="tableRef"
-                        :data-key="dataKey"
-                        :columns="columns"
-                        redirect="Zone"
-                        :create="{
-                            urlCreate: 'Zones',
-                            title: t('list.createZone'),
-                            onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
-                            formInitialData: {},
-                        }"
-                        table-height="85vh"
-                        v-model:selected="selectedRows"
-                        :table="{
-                            'row-key': 'id',
-                            selection: 'multiple',
-                        }"
-                    >
-                        <template #column-addressFk="{ row }">
-                            {{ dashIfEmpty(formatRow(row)) }}
-                        </template>
-                        <template #more-create-dialog="{ data }">
-                            <VnSelect
-                                url="AgencyModes"
-                                v-model="data.agencyModeFk"
-                                option-value="id"
-                                option-label="name"
-                                :label="t('list.agency')"
-                            />
-                            <VnInput
-                                v-model="data.price"
-                                :label="t('list.price')"
-                                min="0"
-                                type="number"
-                                required="true"
-                            />
-                            <VnInput
-                                v-model="data.bonus"
-                                :label="t('zone.bonus')"
-                                min="0"
-                                type="number"
-                            />
-                            <VnInput
-                                v-model="data.travelingDays"
-                                :label="t('zone.travelingDays')"
-                                type="number"
-                                min="0"
-                            />
-                            <VnInputTime v-model="data.hour" :label="t('list.close')" />
-                            <VnSelect
-                                url="Warehouses"
-                                v-model="data.warehouseFK"
-                                option-value="id"
-                                option-label="name"
-                                :label="t('list.warehouse')"
-                                :options="warehouseOptions"
-                            />
-                            <QCheckbox
-                                v-model="data.isVolumetric"
-                                :label="t('list.isVolumetric')"
-                                :toggle-indeterminate="false"
-                            />
-                        </template>
-                    </VnTable>
-                </div>
-            </div>
+            <VnTable
+                ref="tableRef"
+                :data-key="dataKey"
+                :columns="columns"
+                redirect="Zone"
+                :create="{
+                    urlCreate: 'Zones',
+                    title: t('list.createZone'),
+                    onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
+                    formInitialData: {},
+                }"
+                table-height="85vh"
+                v-model:selected="selectedRows"
+                :table="{
+                    'row-key': 'id',
+                    selection: 'multiple',
+                }"
+            >
+                <template #column-addressFk="{ row }">
+                    {{ dashIfEmpty(formatRow(row)) }}
+                </template>
+                <template #more-create-dialog="{ data }">
+                    <VnSelect
+                        url="AgencyModes"
+                        v-model="data.agencyModeFk"
+                        option-value="id"
+                        option-label="name"
+                        :label="t('list.agency')"
+                    />
+                    <VnInput
+                        v-model="data.price"
+                        :label="t('list.price')"
+                        min="0"
+                        type="number"
+                        required="true"
+                    />
+                    <VnInput
+                        v-model="data.bonus"
+                        :label="t('zone.bonus')"
+                        min="0"
+                        type="number"
+                    />
+                    <VnInput
+                        v-model="data.travelingDays"
+                        :label="t('zone.travelingDays')"
+                        type="number"
+                        min="0"
+                    />
+                    <VnInputTime v-model="data.hour" :label="t('list.close')" />
+                    <VnSelect
+                        url="Warehouses"
+                        v-model="data.warehouseFK"
+                        option-value="id"
+                        option-label="name"
+                        :label="t('list.warehouse')"
+                        :options="warehouseOptions"
+                    />
+                    <QCheckbox
+                        v-model="data.isVolumetric"
+                        :label="t('list.isVolumetric')"
+                        :toggle-indeterminate="false"
+                    />
+                </template>
+            </VnTable>
         </template>
     </VnSection>
     <QDialog v-model="showZoneEventForm" @hide="closeEventForm()">
@@ -333,24 +330,6 @@ const closeEventForm = () => {
         />
     </QDialog>
 </template>
-
-<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>
-
 <i18n>
 es:
     Search zone: Buscar zona