refactor: refs #8322 changed ZoneList component to use VnSection/VnCardBeta

src/pages/Zone/Card/ZoneCard.vue

@@ -1,13 +1,10 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { computed } from 'vue';
 
-import VnCard from 'components/common/VnCard.vue';
+import VnCardBeta from 'src/components/common/VnCardBeta.vue';
 import ZoneDescriptor from './ZoneDescriptor.vue';
-import ZoneFilterPanel from '../ZoneFilterPanel.vue';
 
-const { t } = useI18n();
 const route = useRoute();
 const routeName = computed(() => route.name);
 
@@ -18,21 +15,5 @@ function notIsLocations(ifIsFalse, ifIsTrue) {
 </script>
 
 <template>
-    <VnCard
-        data-key="zone"
-        :base-url="notIsLocations('Zones', undefined)"
-        :descriptor="ZoneDescriptor"
-        :filter-panel="notIsLocations(ZoneFilterPanel, undefined)"
-        :search-data-key="notIsLocations('ZoneList', undefined)"
-        :searchbar-props="{
-            url: notIsLocations('Zones', 'ZoneLocations'),
-            label: notIsLocations(t('list.searchZone'), t('list.searchLocation')),
-            info: t('list.searchInfo'),
-            whereFilter: notIsLocations((value) => {
-                return /^\d+$/.test(value)
-                    ? { id: value }
-                    : { name: { like: `%${value}%` } };
-            }),
-        }"
-    />
+    <VnCardBeta data-key="zone" base-url="Zones" :descriptor="ZoneDescriptor" />
 </template>

src/pages/Zone/ZoneList.vue

@@ -14,9 +14,8 @@ import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputTime from 'src/components/common/VnInputTime.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import ZoneFilterPanel from './ZoneFilterPanel.vue';
-import ZoneSearchbar from './Card/ZoneSearchbar.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -25,6 +24,7 @@ const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
 const tableRef = ref();
 const warehouseOptions = ref([]);
+const dataKey = 'ZoneList';
 
 const tableFilter = {
     include: [
@@ -132,26 +132,41 @@ const handleClone = (id) => {
 </script>
 
 <template>
-    <ZoneSearchbar />
-    <RightMenu>
-        <template #right-panel>
+    <VnSection
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="list"
+        :array-data-props="{
+            url: 'Zones',
+            order: ['id'],
+            exprBuilder,
+        }"
+    >
+        <template #rightMenu>
             <ZoneFilterPanel data-key="ZonesList" />
         </template>
-    </RightMenu>
+    <template #body>
     <VnTable
         ref="tableRef"
-        data-key="ZonesList"
-        url="Zones"
+        data-key="dataKey"
         :create="{
             urlCreate: 'Zones',
             title: t('list.createZone'),
             onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
             formInitialData: {},
         }"
-        :user-filter="tableFilter"
+        default-mode="table"
         :columns="columns"
-        redirect="zone"
+        :user-filter="tableFilter"
+        :user-params="userParams"
         :right-search="false"
+        redirect="zone"
+        v-model:selected="selectedRows"
+        :table="{
+            'row-key': 'id',
+            slelection: 'multiple',
+        }"
+        data-cy="zoneListTable"
     >
         <template #more-create-dialog="{ data }">
             <VnSelect
@@ -196,8 +211,11 @@ const handleClone = (id) => {
             />
         </template>
     </VnTable>
+    </template>
+</VnSection>
 </template>
 
+
 <i18n>
 es:
     Search zone: Buscar zona

src/pages/Zone/locale/en.yml

@@ -24,7 +24,7 @@ list:
     price: Price
     create: Create zone
     openSummary: Details
-    searchZone: Search zones
+    search: Search zones
     searchLocation: Search locations
     searchInfo: Search zone by id or name
     confirmCloneTitle: All it's properties will be copied

src/router/modules/zone.js

@@ -1,24 +1,12 @@
 import { RouterView } from 'vue-router';
 
-export default {
-    path: '/zone',
+const zoneCard = {
     name: 'Zone',
+    path: '/zone',
+    component: () => import('src/pages/Zone/Card/ZoneCard.vue'),
+    redirect: { name: 'ZoneSummary' },
     meta: {
-        title: 'zones',
-        icon: 'vn:zone',
-        moduleName: 'Zone',
-        keyBinding: 'z',
-    },
-    component: RouterView,
-    redirect: { name: 'ZoneMain' },
-    menus: {
-        main: [
-            'ZoneList',
-            'ZoneDeliveryDays',
-            'ZoneUpcomingList',
-            'ZoneUpcomingDeliveries',
-        ],
-        card: [
+        menu: [
             'ZoneBasicData',
             'ZoneWarehouses',
             'ZoneHistory',
@@ -26,21 +14,99 @@ export default {
             'ZoneEvents',
         ],
     },
+    children: [
+        {
+            name: 'ZoneSummary',
+            path: 'summary',
+            meta: {
+                title: 'summary',
+                icon: 'launch',
+            },
+            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'),
+        },
+        {
+            name: 'ZoneLocations',
+            path: 'location',
+            meta: {
+                title: 'locations',
+                icon: 'my_location',
+            },
+            component: () => import('src/pages/Zone/Card/ZoneLocations.vue'),
+        },
+        {
+            name: 'ZoneWarehouses',
+            path: 'warehouses',
+            meta: {
+                title: 'warehouses',
+                icon: 'home',
+            },
+            component: () => import('src/pages/Zone/Card/ZoneWarehouses.vue'),
+        },
+        {
+            name: 'ZoneHistory',
+            path: 'log',
+            meta: {
+                title: 'log',
+                icon: 'history',
+            },
+            component: () => import('src/pages/Zone/Card/ZoneLog.vue'),
+        },
+        {
+            name: 'ZoneEvents',
+            path: 'events',
+            meta: {
+                title: 'calendar',
+                icon: 'vn:calendar',
+            },
+            component: () => import('src/pages/Zone/Card/ZoneEvents.vue'),
+        },
+    ],
+};
+
+export default {
+    name: 'Zone',
+    path: '/zone',
+    meta: {
+        title: 'zones',
+        icon: 'vn:zone',
+        moduleName: 'Zone',
+        keyBinding: 'z',
+        menu: ['ZoneList', 'ZoneDeliveryDays', 'ZoneUpcomingList', 'ZoneUpcomingDeliveries',],
+    },
+    component: RouterView,
+    redirect: { name: 'ZoneMain' },
     children: [
         {
             path: '/zone',
             name: 'ZoneMain',
             component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'ZoneList' },
+            redirect: { name: 'ZoneIndexMain' },
             children: [
                 {
-                    path: 'list',
-                    name: 'ZoneList',
-                    meta: {
-                        title: 'zonesList',
-                        icon: 'view_list',
-                    },
+                    path: '',
+                    name: 'ZoneIndexMain',
+                    redirect: { name: 'ZoneList' },
                     component: () => import('src/pages/Zone/ZoneList.vue'),
+                    children: [
+                        {
+                            name: 'ZoneList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        zoneCard,
+                    ],
                 },
                 {
                     path: 'delivery-days',
@@ -62,67 +128,5 @@ export default {
                 },
             ],
         },
-        {
-            name: 'ZoneCard',
-            path: ':id',
-            component: () => import('src/pages/Zone/Card/ZoneCard.vue'),
-            redirect: { name: 'ZoneSummary' },
-            children: [
-                {
-                    name: 'ZoneSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                        icon: 'launch',
-                    },
-                    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'),
-                },
-                {
-                    name: 'ZoneLocations',
-                    path: 'location',
-                    meta: {
-                        title: 'locations',
-                        icon: 'my_location',
-                    },
-                    component: () => import('src/pages/Zone/Card/ZoneLocations.vue'),
-                },
-                {
-                    name: 'ZoneWarehouses',
-                    path: 'warehouses',
-                    meta: {
-                        title: 'warehouses',
-                        icon: 'home',
-                    },
-                    component: () => import('src/pages/Zone/Card/ZoneWarehouses.vue'),
-                },
-                {
-                    name: 'ZoneHistory',
-                    path: 'log',
-                    meta: {
-                        title: 'log',
-                        icon: 'history',
-                    },
-                    component: () => import('src/pages/Zone/Card/ZoneLog.vue'),
-                },
-                {
-                    name: 'ZoneEvents',
-                    path: 'events',
-                    meta: {
-                        title: 'calendar',
-                        icon: 'vn:calendar',
-                    },
-                    component: () => import('src/pages/Zone/Card/ZoneEvents.vue'),
-                },
-            ],
-        },
     ],
 };