From a0b19f8e7947bd9c500cf35a00a63110a75796df Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Fri, 27 Dec 2024 13:43:33 +0100
Subject: [PATCH] refactor: refs #8322 changed Route component to use
 VnSection/VnCardBeta

---
 src/pages/Route/Card/RouteCard.vue |  17 +---
 src/pages/Route/RouteList.vue      |  64 +++++++-------
 src/pages/Route/locale/en.yml      |   2 +
 src/pages/Route/locale/es.yml      |   2 +
 src/router/modules/route.js        | 130 +++++++++++++++--------------
 5 files changed, 109 insertions(+), 106 deletions(-)

diff --git a/src/pages/Route/Card/RouteCard.vue b/src/pages/Route/Card/RouteCard.vue
index 461f2d95e..4df0278a6 100644
--- a/src/pages/Route/Card/RouteCard.vue
+++ b/src/pages/Route/Card/RouteCard.vue
@@ -1,19 +1,8 @@
 <script setup>
-import VnCard from 'components/common/VnCard.vue';
 import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue';
-import RouteFilter from './RouteFilter.vue';
-import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
+import VnCardBeta from 'src/components/common/VnCardBeta.vue';
+
 </script>
 <template>
-    <VnCard
-        data-key="Route"
-        base-url="Routes"
-        :descriptor="RouteDescriptor"
-        :filter-panel="RouteFilter"
-        search-data-key="RouteList"
-    >
-        <template #searchbar>
-            <RouteSearchbar />
-        </template>
-    </VnCard>
+    <VnCardBeta data-key="Route" base-url="Routes" :descriptor="RouteDescriptor" />
 </template>
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index b82d1468e..259cacd16 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -3,17 +3,16 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toHour } from 'src/filters';
-
-import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
 import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref([]);
+const dataKey = 'RouteList';
 const routeFilter = {
     include: [
         {
@@ -110,32 +109,41 @@ const columns = computed(() => [
 ]);
 </script>
 <template>
-    <RouteSearchbar />
-    <RightMenu>
-        <template #right-panel>
+    <VnSection
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="route"
+        :array-data-props="{
+            url: 'Routes/filter',
+            order: 'id DESC',
+            exprBuilder,
+        }"
+    >
+        <template #rightMenu>
             <RouteFilter data-key="RouteList" />
         </template>
-    </RightMenu>
-    <VnTable
-        data-key="RouteList"
-        url="Routes/filter"
-        :columns="columns"
-        :right-search="false"
-        :filter="routeFilter"
-        redirect="route"
-        :create="{
-            urlCreate: 'Routes',
-            title: t('route.createRoute'),
-            onDataSaved: ({ id }) => tableRef.redirect(id),
-            formInitialData: {},
-        }"
-        table-height="85vh"
-    >
-        <template #column-workerFk="{ row }">
-            <span class="link" @click.stop>
-                {{ row?.workerUserName }}
-                <WorkerDescriptorProxy :id="row?.workerFk" v-if="row?.workerFk" />
-            </span>
+        <template #body>
+            <VnTable
+                :data-key="dataKey"
+                :columns="columns"
+                :right-search="false"
+                :filter="routeFilter"
+                redirect="route"
+                :create="{
+                    urlCreate: 'Routes/create',
+                    title: t('route.createRoute'),
+                    onDataSaved: ({ id }) => tableRef.redirect(id),
+                    formInitialData: {},
+                }"
+                table-height="85vh"
+            >
+                <template #column-workerFk="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row?.workerUserName }}
+                        <WorkerDescriptorProxy :id="row?.workerFk" v-if="row?.workerFk" />
+                    </span>
+                </template>
+            </VnTable>
         </template>
-    </VnTable>
+    </VnSection>
 </template>
diff --git a/src/pages/Route/locale/en.yml b/src/pages/Route/locale/en.yml
index 420d18dfe..57806d0f4 100644
--- a/src/pages/Route/locale/en.yml
+++ b/src/pages/Route/locale/en.yml
@@ -23,6 +23,8 @@ route:
     Summary: Summary
     Route is closed: Route is closed
     Route is not served: Route is not served
+    search: Search route
+    searchInfo: You can search by route reference
     cmr:
         list:
             results: results
diff --git a/src/pages/Route/locale/es.yml b/src/pages/Route/locale/es.yml
index a6ba4f370..4db28032b 100644
--- a/src/pages/Route/locale/es.yml
+++ b/src/pages/Route/locale/es.yml
@@ -23,6 +23,8 @@ route:
     Summary: Resumen
     Route is closed: La ruta está cerrada
     Route is not served: La ruta no está servida
+    search: Buscar rutas
+    searchInfo: Puedes buscar por referencia de la ruta
     cmr:
         list:
             results: resultados
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index a6c4f30a2..9ddea4124 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -1,41 +1,87 @@
 import { RouterView } from 'vue-router';
 
+const routeCard = {
+    name: 'RouteCard',
+    path: ':id',
+    component: () => import('src/pages/Route/Card/RouteCard.vue'),
+    redirect: { name: 'RouteSummary' },
+    meta: {
+        menu: ['RouteBasicData', 'RouteTickets', 'RouteLog'],
+    },
+    children: [
+        {
+            name: 'RouteBasicData',
+            path: 'basic-data',
+            meta: {
+                title: 'basicData',
+                icon: 'vn:settings',
+            },
+            component: () => import('pages/Route/Card/RouteForm.vue'),
+        },
+        {
+            name: 'RouteSummary',
+            path: 'summary',
+            meta: {
+                title: 'summary',
+                icon: 'open_in_new',
+            },
+            component: () => import('pages/Route/Card/RouteSummary.vue'),
+        },
+        {
+            path: 'tickets',
+            name: 'RouteTickets',
+            meta: {
+                title: 'tickets',
+                icon: 'vn:ticket',
+            },
+            component: () => import('src/pages/Route/RouteTickets.vue'),
+        },
+        {
+            path: 'log',
+            name: 'RouteLog',
+            meta: {
+                title: 'log',
+                icon: 'vn:History',
+            },
+            component: () => import('src/pages/Route/RouteLog.vue'),
+        },
+    ]
+};
+
 export default {
-    path: '/route',
     name: 'Route',
+    path: '/route',
     meta: {
         title: 'routes',
         icon: 'vn:delivery',
         moduleName: 'Route',
+        menu: ['RouteList', 'RouteExtendedList', 'RouteAutonomous', 'RouteRoadmap', 'CmrList', 'AgencyList'],
     },
     component: RouterView,
     redirect: { name: 'RouteMain' },
-    menus: {
-        main: [
-            'RouteList',
-            'RouteExtendedList',
-            'RouteAutonomous',
-            'RouteRoadmap',
-            'CmrList',
-            'AgencyList',
-        ],
-        card: ['RouteBasicData', 'RouteTickets', 'RouteLog'],
-    },
     children: [
         {
-            path: '/route',
             name: 'RouteMain',
+            path: '',
             component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'RouteList' },
+            redirect: { name: 'RouteIndexMain' },
             children: [
                 {
-                    path: 'list',
-                    name: 'RouteList',
-                    meta: {
-                        title: 'RouteList',
-                        icon: 'view_list',
-                    },
+                    path: '',
+                    name: 'RouteIndexMain',
+                    redirect: { name: 'RouteList' },
                     component: () => import('src/pages/Route/RouteList.vue'),
+                    children: [
+                        {
+                            name: 'RouteList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        routeCard,
+                    ]
                 },
                 {
                     path: 'extended-list',
@@ -100,49 +146,5 @@ export default {
                 },
             ],
         },
-        {
-            name: 'RouteCard',
-            path: ':id',
-            component: () => import('src/pages/Route/Card/RouteCard.vue'),
-            redirect: { name: 'RouteSummary' },
-            children: [
-                {
-                    name: 'RouteBasicData',
-                    path: 'basic-data',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () => import('pages/Route/Card/RouteForm.vue'),
-                },
-                {
-                    name: 'RouteSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                        icon: 'open_in_new',
-                    },
-                    component: () => import('pages/Route/Card/RouteSummary.vue'),
-                },
-                {
-                    path: 'tickets',
-                    name: 'RouteTickets',
-                    meta: {
-                        title: 'tickets',
-                        icon: 'vn:ticket',
-                    },
-                    component: () => import('src/pages/Route/RouteTickets.vue'),
-                },
-                {
-                    path: 'log',
-                    name: 'RouteLog',
-                    meta: {
-                        title: 'log',
-                        icon: 'vn:History',
-                    },
-                    component: () => import('src/pages/Route/RouteLog.vue'),
-                },
-            ],
-        },
     ],
 };