From 8c744fac5abae73d8edf2543f87a4e465afb8d5d Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 9 Jul 2024 12:51:01 +0200
Subject: [PATCH] refactor: refs #7354 Zone migration changes

---
 src/pages/Zone/Card/ZoneDescriptor.vue        |   1 -
 .../Zone/Card/ZoneDescriptorMenuItems.vue     |   2 +-
 .../Zone/Card/ZoneEventExclusionForm.vue      |   1 +
 src/pages/Zone/Card/ZoneEvents.vue            |   4 +-
 src/pages/Zone/ZoneDeliveryPanel.vue          |   8 +-
 src/pages/Zone/ZoneList.vue                   | 191 +++++++-----------
 src/pages/Zone/ZoneMain.vue                   |   2 +-
 src/pages/Zone/ZoneUpcoming.vue               |   8 +-
 src/pages/Zone/locale/en.yml                  |   2 +
 src/pages/Zone/locale/es.yml                  |   2 +
 10 files changed, 91 insertions(+), 130 deletions(-)

diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 602fefde35..04fb22ba5a 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -52,7 +52,6 @@ const setData = (entity) => {
         :filter="filter"
         @on-fetch="setData"
         data-key="zoneData"
-        :summary="$attrs"
     >
         <template #menu="{ entity }">
             <ZoneDescriptorMenuItems :zone="entity" />
diff --git a/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue b/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
index 8f1168ce92..62d7cafdd1 100644
--- a/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
+++ b/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
@@ -40,7 +40,7 @@ const actions = {
     },
     remove: async () => {
         try {
-            await axios.post(`Zones/${zoneId}/setDeleted`);
+            await axios.delete(`Zones/${zoneId}`);
 
             notify({ message: t('Zone deleted'), type: 'positive' });
             notify({
diff --git a/src/pages/Zone/Card/ZoneEventExclusionForm.vue b/src/pages/Zone/Card/ZoneEventExclusionForm.vue
index 721f4bbc3e..9c325e0474 100644
--- a/src/pages/Zone/Card/ZoneEventExclusionForm.vue
+++ b/src/pages/Zone/Card/ZoneEventExclusionForm.vue
@@ -116,6 +116,7 @@ const closeForm = () => emit('closeForm');
 const refetchEvents = async () => {
     await arrayData.refresh({ append: false });
     closeForm();
+    // window.location.reload();
 };
 
 onMounted(() => {
diff --git a/src/pages/Zone/Card/ZoneEvents.vue b/src/pages/Zone/Card/ZoneEvents.vue
index e4fe5ff226..8c26a808cd 100644
--- a/src/pages/Zone/Card/ZoneEvents.vue
+++ b/src/pages/Zone/Card/ZoneEvents.vue
@@ -13,8 +13,8 @@ import { reactive } from 'vue';
 const { t } = useI18n();
 const stateStore = useStateStore();
 
-const firstDay = ref(null);
-const lastDay = ref(null);
+const firstDay = ref();
+const lastDay = ref();
 
 const events = ref([]);
 const formModeName = ref('include');
diff --git a/src/pages/Zone/ZoneDeliveryPanel.vue b/src/pages/Zone/ZoneDeliveryPanel.vue
index 03f5347011..8041e1a29a 100644
--- a/src/pages/Zone/ZoneDeliveryPanel.vue
+++ b/src/pages/Zone/ZoneDeliveryPanel.vue
@@ -113,13 +113,7 @@ onMounted(async () => {
                 </template>
             </VnSelect>
             <VnSelect
-                :label="
-                    t(
-                        deliveryMethodFk === 'delivery'
-                            ? 'deliveryPanel.agency'
-                            : 'deliveryPanel.warehouse'
-                    )
-                "
+                :label="t('deliveryPanel.agency')"
                 v-model="formData.agencyModeFk"
                 url="AgencyModes/isActive"
                 :fields="['id', 'name']"
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 0932a0b57c..04b973d8db 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -1,73 +1,95 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { onMounted, computed } from 'vue';
+import { computed, ref } from 'vue';
+import axios from 'axios';
+
 import { toCurrency } from 'src/filters';
-
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
-
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toTimeFormat } from 'src/filters/date';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
-import { useStateStore } from 'stores/useStateStore';
-import axios from 'axios';
-import RightMenu from 'src/components/common/RightMenu.vue';
-import ZoneFilterPanel from './ZoneFilterPanel.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
-const stateStore = useStateStore();
 const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
 const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
-
-const redirectToZoneSummary = (event, { id }) => {
-    router.push({ name: 'ZoneSummary', params: { id } });
-};
+const tableRef = ref();
+const tableFilter = ref({
+    include: [
+        {
+            relation: 'agencyMode',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+});
 
 const columns = computed(() => [
     {
-        name: 'ID',
-        label: t('list.id'),
-        field: (row) => row.id,
-        sortable: true,
         align: 'left',
+        name: 'id',
+        label: t('list.id'),
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
     },
     {
+        align: 'left',
         name: 'name',
         label: t('list.name'),
-        field: (row) => row.name,
-        sortable: true,
-        align: 'left',
+        isTitle: true,
     },
     {
-        name: 'agency',
+        align: 'left',
+        name: 'agencyModeFk',
         label: t('list.agency'),
-        field: (row) => row?.agencyMode?.name,
-        sortable: true,
-        align: 'left',
+        cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'agencyModes',
+            fields: ['id', 'name'],
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row) => row?.agencyMode?.name,
     },
     {
-        name: 'close',
+        align: 'left',
+        name: 'hour',
         label: t('list.close'),
-        field: (row) => (row?.hour ? toTimeFormat(row?.hour) : '-'),
-        sortable: true,
-        align: 'left',
+        cardVisible: true,
+        format: (row) => toTimeFormat(row.hour),
     },
     {
+        align: 'left',
         name: 'price',
         label: t('list.price'),
-        field: (row) => (row?.price ? toCurrency(row.price) : '-'),
-        sortable: true,
-        align: 'left',
+        cardVisible: true,
+        format: (row) => toCurrency(row.price),
     },
     {
-        name: 'actions',
-        label: '',
-        sortable: false,
         align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('ZoneSummary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, ZoneSummary),
+            },
+            {
+                title: t('globals.clone'),
+                icon: 'vn:clone',
+                action: (row) => handleClone(row.id),
+                isPrimary: true,
+            },
+        ],
     },
 ]);
 
@@ -83,88 +105,23 @@ const handleClone = (id) => {
         () => clone(id)
     );
 };
-onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
 <template>
-    <RightMenu>
-        <template #right-panel>
-            <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
-        </template>
-    </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="ZoneList"
-                url="Zones"
-                :filter="{
-                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
-                }"
-                :limit="20"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <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" 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>
-                    </div>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn :to="{ path: `/zone/create` }" fab icon="add" color="primary">
-                <QTooltip>{{ t('list.create') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
+    <VnTable
+        ref="tableRef"
+        data-key="ZoneList"
+        url="Zones"
+        :filter="tableFilter"
+        :columns="columns"
+        default-mode="table"
+        redirect="zone"
+        :use-model="true"
+        auto-load
+    />
+    <QPageSticky position="bottom-right" :offset="[18, 18]" style="z-index: 2">
+        <QBtn :to="{ path: `/zone/create` }" fab icon="add" color="primary">
+            <QTooltip>{{ t('list.create') }}</QTooltip>
+        </QBtn>
+    </QPageSticky>
 </template>
diff --git a/src/pages/Zone/ZoneMain.vue b/src/pages/Zone/ZoneMain.vue
index 68ff9a5d18..4bfda15576 100644
--- a/src/pages/Zone/ZoneMain.vue
+++ b/src/pages/Zone/ZoneMain.vue
@@ -39,7 +39,7 @@ const exprBuilder = (param, value) => {
 
 <template>
     <VnSearchbar
-        data-key="ZoneList"
+        data-key="Zones"
         url="Zones"
         :filter="{
             include: { relation: 'agencyMode', scope: { fields: ['name'] } },
diff --git a/src/pages/Zone/ZoneUpcoming.vue b/src/pages/Zone/ZoneUpcoming.vue
index be7b12534d..76f464e025 100644
--- a/src/pages/Zone/ZoneUpcoming.vue
+++ b/src/pages/Zone/ZoneUpcoming.vue
@@ -63,7 +63,13 @@ onMounted(() => weekdayStore.initStore());
                 <span class="header">
                     {{ getHeaderTitle(detail.shipped) }}
                 </span>
-                <QTable flat :columns="columns" :rows="detail.lines" class="full-width" />
+                <QTable
+                    flat
+                    :columns="columns"
+                    :rows="detail.lines"
+                    class="full-width"
+                    style="text-align: center"
+                />
             </div>
         </QCard>
     </QPage>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index 31eeb2b7f6..3f4871982d 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -30,6 +30,8 @@ create:
     price: Price
     bonus: Bonus
     volumetric: Volumetric
+    itemMaxSize: Max m³
+    inflation: Inflation
 summary:
     agency: Agency
     price: Price
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index c670c2c086..29f036000f 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -30,6 +30,8 @@ create:
     price: Precio
     bonus: Bonificación
     volumetric: Volumétrico
+    itemMaxSize: Medida máxima
+    inflation: Inflación
 summary:
     agency: Agencia
     price: Precio