refactor: refs #8626 update button styles and improve route redirection logic

src/pages/Route/RouteExtendedList.vue

@@ -332,6 +332,7 @@ const openTicketsDialog = (id) => {
                 <QBtn
                     icon="vn:clone"
                     color="primary"
+                    flat
                     class="q-mr-sm"
                     :disable="!selectedRows?.length"
                     @click="confirmationDialog = true"
@@ -341,6 +342,7 @@ const openTicketsDialog = (id) => {
                 <QBtn
                     icon="cloud_download"
                     color="primary"
+                    flat
                     class="q-mr-sm"
                     :disable="!selectedRows?.length"
                     @click="showRouteReport"
@@ -352,6 +354,7 @@ const openTicketsDialog = (id) => {
                 <QBtn
                     icon="check"
                     color="primary"
+                    flat
                     class="q-mr-sm"
                     :disable="!selectedRows?.length"
                     @click="markAsServed()"

src/pages/Route/RouteList.vue

@@ -3,6 +3,7 @@ import { computed, ref, markRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { toHour } from 'src/filters';
+import { useRouter } from 'vue-router';
 import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
 import VnTable from 'components/VnTable/VnTable.vue';
@@ -13,6 +14,7 @@ import VnSection from 'src/components/common/VnSection.vue';
 import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
 
 const { t } = useI18n();
+const router = useRouter();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref([]);
 const dataKey = 'RouteList';
@@ -28,8 +30,10 @@ const routeFilter = {
 };
 
 function redirectToTickets(id) {
-    const url = `#/route/${id}/tickets`;
-    window.open(url, '_blank');
+    router.push({
+        name: 'RouteTickets',
+        params: { id },
+    });
 }
 
 const columns = computed(() => [

src/router/modules/route.js

@@ -220,6 +220,7 @@ export default {
                     path: '',
                     name: 'RouteIndexMain',
                     redirect: { name: 'RouteList' },
+                    component: () => import('src/pages/Route/RouteList.vue'),
                     children: [
                         {
                             name: 'RouteList',
@@ -228,7 +229,6 @@ export default {
                                 title: 'list',
                                 icon: 'view_list',
                             },
-                            component: () => import('src/pages/Route/RouteList.vue'),
                         },
                         routeCard,
                     ],
@@ -264,6 +264,7 @@ export default {
                     path: 'roadmap',
                     name: 'RouteRoadmap',
                     redirect: { name: 'RoadmapList' },
+                    component: () => import('src/pages/Route/RouteRoadmap.vue'),
                     meta: {
                         title: 'RouteRoadmap',
                         icon: 'vn:troncales',
@@ -276,7 +277,6 @@ export default {
                                 title: 'list',
                                 icon: 'view_list',
                             },
-                            component: () => import('src/pages/Route/RouteRoadmap.vue'),
                         },
                         roadmapCard,
                     ],
@@ -294,6 +294,7 @@ export default {
                     path: 'agency',
                     name: 'RouteAgency',
                     redirect: { name: 'AgencyList' },
+                    component: () => import('src/pages/Route/Agency/AgencyList.vue'),
                     meta: {
                         title: 'agency',
                         icon: 'garage_home',
@@ -306,8 +307,6 @@ export default {
                                 title: 'list',
                                 icon: 'view_list',
                             },
-                            component: () =>
-                                import('src/pages/Route/Agency/AgencyList.vue'),
                         },
                         agencyCard,
                     ],
@@ -316,6 +315,7 @@ export default {
                     path: 'vehicle',
                     name: 'RouteVehicle',
                     redirect: { name: 'VehicleList' },
+                    component: () => import('src/pages/Route/Vehicle/VehicleList.vue'),
                     meta: {
                         title: 'vehicle',
                         icon: 'directions_car',
@@ -328,8 +328,6 @@ export default {
                                 title: 'vehicleList',
                                 icon: 'directions_car',
                             },
-                            component: () =>
-                                import('src/pages/Route/Vehicle/VehicleList.vue'),
                         },
                         vehicleCard,
                     ],