From 8b6c0c05d60b1cbd89209366dc68d1800e03f1c2 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 17 Feb 2025 12:57:37 +0100
Subject: [PATCH] refactor: refs #8606 modified table width and order

---
 src/pages/Zone/ZoneList.vue | 152 +++++++++++++++++++++---------------
 1 file changed, 88 insertions(+), 64 deletions(-)

diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index cbe0d516d20..d6297e9734a 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/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,6 +114,8 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        columnClass: 'shrink-column',
+        component: 'number',
     },
     {
         align: 'center',
@@ -177,68 +179,73 @@ function formatRow(row) {
             <ZoneFilterPanel data-key="ZonesList" />
         </template>
     </RightMenu>
-    <VnTable
-        ref="tableRef"
-        data-key="ZonesList"
-        url="Zones"
-        :create="{
-            urlCreate: 'Zones',
-            title: t('list.createZone'),
-            onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
-            formInitialData: {},
-        }"
-        :user-filter="tableFilter"
-        :columns="columns"
-        redirect="zone"
-        :right-search="false"
-        table-height="85vh"
-    >
-        <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 class="table-container">
+        <div class="column items-center">
+            <VnTable
+                ref="tableRef"
+                data-key="ZonesList"
+                url="Zones"
+                :create="{
+                    urlCreate: 'Zones',
+                    title: t('list.createZone'),
+                    onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
+                    formInitialData: {},
+                }"
+                :user-filter="tableFilter"
+                :columns="columns"
+                redirect="zone"
+                :right-search="false"
+                table-height="85vh"
+                order="id ASC"
+            >
+                <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>
 </template>
 
 <i18n>
@@ -246,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>