feat: refs #8322 added RouteRoadmap and Agency

src/pages/Route/Agency/AgencyList.vue

@@ -2,11 +2,12 @@
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const { t } = useI18n();
 const router = useRouter();
+const dataKey = 'AgencyList';
 function navigate(id) {
     router.push({ path: `/agency/${id}` });
 }
@@ -67,18 +68,22 @@ const columns = computed(() => [
 ]);
 </script>
 <template>
-    <VnSearchbar
+    <VnSection
-        :info="t('You can search by name')"
+        :data-key="dataKey"
-        :label="t('Search agency')"
+        :columns="columns"
-        data-key="AgencyList"
+        prefix="agency"
-        :expr-builder="exprBuilder"
+        :right-filter="false"
-    />
+        :array-data-props="{ 
+            url: 'Agencies',
+            order: 'name', 
+            exprBuilder,
+        }"
+    >
+        <template #body>  
         <div class="list-container">
             <div class="list">
                 <VnTable
-                data-key="AgencyList"
+                    :data-key="dataKey"
-                url="Agencies"
-                order="name"
                     :columns="columns"
                     :right-search="false"
                     :use-model="true"
@@ -88,6 +93,8 @@ const columns = computed(() => [
             </div>
         </div>
         </template>
+    </VnSection>
+</template>
 <style lang="scss" scoped>
 .list {
     display: flex;
@@ -104,8 +111,6 @@ const columns = computed(() => [
     es:
         isOwn: Tiene propietario
         isAnyVolumeAllowed: Permite cualquier volumen
-        Search agency: Buscar agencia
-        You can search by name: Puedes buscar por nombre
     en:
         isOwn: Has owner
         isAnyVolumeAllowed: Allows any volume

src/pages/Route/Agency/Card/AgencyCard.vue

@@ -1,17 +1,7 @@
 <script setup>
 import AgencyDescriptor from 'pages/Route/Agency/Card/AgencyDescriptor.vue';
-import VnCard from 'components/common/VnCard.vue';
+import VnCardBeta from 'src/components/common/VnCardBeta.vue';
 </script>
 <template>
-    <VnCard
+    <VnCardBeta data-key="Agency" base-url="Agencies" :descriptor="AgencyDescriptor" />
-        data-key="Agency"
-        base-url="Agencies"
-        :descriptor="AgencyDescriptor"
-        search-data-key="AgencyList"
-        :searchbar-props="{
-            url: 'Agencies',
-            label: 'agency.searchBar.label',
-            info: 'agency.searchBar.info',
-        }"
-    />
 </template>

src/pages/Route/Agency/locale/en.yml

@@ -1,4 +1,6 @@
 agency:
+    search: Search agency
+    searchInfo:    You can search by name
     isOwn: Own
     isAnyVolumeAllowed: Any volume allowed
     notification:

src/pages/Route/Agency/locale/es.yml

@@ -1,4 +1,6 @@
 agency:
+    search: Buscar agencia
+    searchInfo: Puedes buscar por nombre
     isOwn: Propio
     isAnyVolumeAllowed: Cualquier volumen
     removeItem: Agencia eliminada correctamente

src/pages/Route/Roadmap/RoadmapCard.vue

@@ -1,19 +1,7 @@
 <script setup>
-import VnCard from 'components/common/VnCard.vue';
+import VnCardBeta from 'components/common/VnCardBeta.vue';
 import RoadmapDescriptor from 'pages/Route/Roadmap/RoadmapDescriptor.vue';
-import RoadmapFilter from 'pages/Route/Roadmap/RoadmapFilter.vue';
 </script>
 <template>
-    <VnCard
+    <VnCardBeta data-key="Roadmap" base-url="Roadmaps" :descriptor="RoadmapDescriptor" />
-        data-key="Roadmap"
-        base-url="Roadmaps"
-        :descriptor="RoadmapDescriptor"
-        :filter-panel="RoadmapFilter"
-        search-data-key="RoadmapList"
-        :searchbar-props="{
-            url: 'Roadmaps',
-            label: 'Search roadmap',
-            info: 'You can search by roadmap id or customer name',
-        }"
-    />
 </template>

src/pages/Route/RouteRoadmap.vue

@@ -15,11 +15,13 @@ import RoadmapSummary from 'pages/Route/Roadmap/RoadmapSummary.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputTime from 'src/components/common/VnInputTime.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const { viewSummary } = useSummaryDialog();
 const { t } = useI18n();
 const quasar = useQuasar();
 const selectedRows = ref([]);
+const dataKey = 'RoadmapList';
 const columns = computed(() => [
     {
         align: 'left',
@@ -112,7 +114,7 @@ const removeSelection = async () => {
     await Promise.all(
         selectedRows.value.map((roadmap) => {
             axios.delete(`Roadmaps/${roadmap.id}`);
-        })
+        }),
     );
 };
 
@@ -131,11 +133,6 @@ function confirmRemove() {
 </script>
 
 <template>
-    <VnSearchbar
-        data-key="RoadmapList"
-        :label="t('Search roadmaps')"
-        :info="t('You can search by roadmap reference')"
-    />
     <QDialog v-model="isCloneDialogOpen">
         <QCard style="min-width: 350px">
             <QCardSection>
@@ -177,10 +174,18 @@ function confirmRemove() {
             </QBtn>
         </template>
     </VnSubToolbar>
+    <VnSection
+        :data-key="dataKey"
+        :columns="columns"
+        prefix="route.roadmap"
+        :array-data-props="{
+            url: 'roadmaps',
+        }"
+    >
+        <template #body>
             <VnTable
                 ref="tableRef"
-        data-key="RoadmapList"
+                :data-key="dataKey"
-        url="roadmaps"
                 :columns="columns"
                 :right-search="true"
                 :use-model="true"
@@ -211,6 +216,8 @@ function confirmRemove() {
                 </template>
             </VnTable>
         </template>
+    </VnSection>
+</template>
 
 <style lang="scss" scoped>
 .route-list {

src/pages/Route/locale/en.yml

@@ -1,4 +1,7 @@
 route:
+    roadmap:
+        search: Search roadmap
+        searchInfo: You can search by roadmap reference
     params:
         etd: ETD
         tractorPlate: Plate

src/pages/Route/locale/es.yml

@@ -1,4 +1,7 @@
 route:
+    roadmap:
+        search: Buscar troncales
+        searchInfo: Puedes buscar por referencia del troncal
     params:
         agencyModeName: Agencia Ruta
         agencyAgreement: Agencia Acuerdo

src/router/modules/agency.js

@@ -1,25 +1,13 @@
 import { RouterView } from 'vue-router';
 
-export default {
+const agencyCard = {
-    path: '/agency',
+    path: ':id',
-    name: 'Agency',
-    meta: {
-        title: 'agency',
-        icon: 'garage_home',
-        moduleName: 'Agency',
-    },
-    component: RouterView,
-    redirect: { name: 'AgencyCard' },
-    menus: {
-        main: [],
-        card: ['AgencyBasicData', 'AgencyModes', 'AgencyWorkCenters', 'AgencyLog'],
-    },
-    children: [
-        {
-            path: '/agency/:id',
     name: 'AgencyCard',
     component: () => import('src/pages/Route/Agency/Card/AgencyCard.vue'),
     redirect: { name: 'AgencySummary' },
+    meta: {
+        menu: ['AgencyBasicData', 'AgencyModes', 'AgencyWorkCenters', 'AgencyLog'],
+    },
     children: [
         {
             name: 'AgencySummary',
@@ -28,8 +16,7 @@ export default {
                 title: 'summary',
                 icon: 'view_list',
             },
-                    component: () =>
+            component: () => import('src/pages/Route/Agency/Card/AgencySummary.vue'),
-                        import('src/pages/Route/Agency/Card/AgencySummary.vue'),
         },
         {
             name: 'AgencyBasicData',
@@ -38,8 +25,7 @@ export default {
                 title: 'basicData',
                 icon: 'vn:settings',
             },
-                    component: () =>
+            component: () => import('pages/Route/Agency/Card/AgencyBasicData.vue'),
-                        import('pages/Route/Agency/Card/AgencyBasicData.vue'),
         },
         {
             path: 'workCenter',
@@ -54,9 +40,7 @@ export default {
                         title: 'workCenters',
                     },
                     component: () =>
-                                import(
+                        import('src/pages/Route/Agency/Card/AgencyWorkcenter.vue'),
-                                    'src/pages/Route/Agency/Card/AgencyWorkcenter.vue'
-                                ),
                 },
             ],
         },
@@ -87,6 +71,43 @@ export default {
             component: () => import('src/pages/Route/Agency/Card/AgencyLog.vue'),
         },
     ],
+};
+
+export default {
+    name: 'Agency',
+    path: '/agency',
+    meta: {
+        title: 'agency',
+        icon: 'garage_home',
+        moduleName: 'Agency',
+    },
+    component: RouterView,
+    redirect: { name: 'RouteMain' },
+    children: [
+        {
+            name: 'AgencyMain',
+            path: '',
+            component: () => import('src/components/common/VnModule.vue'),
+            redirect: { name: 'AgencyIndexMain' },
+            children: [
+                {
+                    name: 'AgencyIndexMain',
+                    path: '',
+                    redirect: { name: 'AgencyList' },
+                    component: () => import('src/pages/Route/Agency/AgencyList.vue'),
+                    children: [
+                        {
+                            name: 'AgencyList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        agencyCard,
+                    ],
+                },
+            ],
         },
     ],
 };

src/router/modules/roadmap.js

@@ -1,24 +1,13 @@
 import { RouterView } from 'vue-router';
 
-export default {
+const roadmapCard = {
-    path: '/route/roadmap',
-    name: 'Roadmap',
-    meta: {
-        title: 'roadmap',
-        icon: 'vn:troncales',
-        moduleName: 'Roadmap',
-    },
-    component: RouterView,
-    redirect: { name: 'RouteMain' },
-    menus: {
-        card: ['RoadmapBasicData', 'RoadmapStops'],
-    },
-    children: [
-        {
-            name: 'RouteRoadmapCard',
     path: ':id',
+    name: 'RoadmapCard',
     component: () => import('src/pages/Route/Roadmap/RoadmapCard.vue'),
     redirect: { name: 'RoadmapSummary' },
+    meta: {
+        menu: ['RoadmapBasicData', 'RoadmapStops'],
+    },
     children: [
         {
             name: 'RoadmapSummary',
@@ -48,6 +37,43 @@ export default {
             component: () => import('pages/Route/Roadmap/RoadmapStops.vue'),
         },
     ],
+};
+
+export default {
+    path: '/route/roadmap',
+    name: 'Roadmap',
+    meta: {
+        title: 'roadmap',
+        icon: 'vn:troncales',
+        moduleName: 'Roadmap',
+    },
+    component: RouterView,
+    redirect: { name: 'RoadmapMain' },
+    children: [
+        {
+            name: 'RoadmapMain',
+            path: '',
+            component: () => import('src/components/common/VnModule.vue'),
+            redirect: { name: 'RoadmapIndexMain' },
+            children: [
+                {
+                    name: 'RoadmapIndexMain',
+                    path: '',
+                    redirect: { name: 'RoadmapList' },
+                    component: () => import('src/pages/Route/RouteRoadmap.vue'),
+                    children: [
+                        {
+                            name: 'RoadmapList',
+                            path: 'list',
+                            meta: {
+                                title: 'roadmapList',
+                                icon: 'view_list',
+                            },
+                        },
+                        roadmapCard,
+                    ],
+                },
+            ],
         },
     ],
 };