Move to independent route

web/src/components/Charts/AccessPointClientsChart.vue

@@ -44,7 +44,7 @@ export default {
     },
     height: {
       type: Number,
-      default: 250
+      default: 200
     },
     cssClasses: {
       default: '',

web/src/components/Charts/AccessPointSignalStrengthChart.vue

@@ -61,7 +61,7 @@ export default {
     },
     height: {
       type: Number,
-      default: 250
+      default: 200
     },
     cssClasses: {
       default: '',

web/src/components/NavList.vue

@@ -73,7 +73,7 @@ export default {
   methods: {
     shouldShowGroup({ items }) {
       return items.some(item =>
-        this.$route.matched.some(route => route.name === item.route.name)
+        this.$route.matched.some(route => route.name == item.route.name)
       )
     }
   }

web/src/router/index.js

@@ -193,18 +193,6 @@ const routes = [
         /* webpackChunkName: "access-points" */ '../views/AccessPoints/index.vue'
       ),
     children: [
-      {
-        path: ':id/clients',
-        name: 'access-point-clients',
-        meta: {
-          title: 'Clientes conectados',
-          roles: ['superAdmin']
-        },
-        component: () =>
-          import(
-            /* webpackChunkName: "access-point-clients" */ '../views/AccessPoints/clients.vue'
-          )
-      },
       {
         path: ':id/edit',
         name: 'access-point-edit',
@@ -220,6 +208,19 @@ const routes = [
     ]
   },
 
+  {
+    path: '/access-points/:id/clients',
+    name: 'access-point-clients',
+    meta: {
+      title: 'Clientes conectados',
+      roles: ['superAdmin']
+    },
+    component: () =>
+      import(
+        /* webpackChunkName: "access-point-clients" */ '../views/AccessPoints/clients.vue'
+      )
+  },
+
   {
     path: '/wifi-users',
     name: 'wifi-users',

web/src/views/AccessPoints/clients.vue

@@ -1,11 +1,5 @@
 <template>
   <div>
-    <v-dialog
-      v-model="showDialog"
-      fullscreen
-      transition="dialog-bottom-transition"
-      scrollable
-    >
     <v-card v-if="!accessPoint">
       <v-skeleton-loader
         type="table-heading, list-item-two-line, image, table-tfoot"
@@ -14,6 +8,9 @@
 
     <v-card v-else :loading="!accessPoint">
       <v-card-title class="font-weight-regular">
+        <v-btn class="ml-1" icon @click="() => $router.back()">
+          <v-icon>mdi-arrow-left</v-icon>
+        </v-btn>
         <div>
           <ApIcon class="mr-2" :controller="accessPoint.controller" />
           {{ accessPoint.name || accessPoint.hostname }}
@@ -22,6 +19,7 @@
             <v-divider />
             {{ accessPoint.local }}
           </small>
+          <br />
         </div>
         <v-spacer />
         <v-text-field
@@ -34,12 +32,9 @@
           outlined
           dense
         />
-
-          <v-btn class="ml-1" icon @click="showDialog = false">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
       </v-card-title>
       <v-divider />
+
       <v-card-text>
         <v-container fluid>
           <v-row>
@@ -61,19 +56,11 @@
         <AccessPointClientsDataTable
           :wifi-devices="accessPoint.wifiDevices"
           :filter="filter"
+          paginate
         />
       </v-card-text>
       <v-divider />
-        <v-card-actions>
-          <v-icon small left>mdi-account-group</v-icon>
-          {{ accessPoint.wifiDevices.length }} clientes conectados
-          <v-spacer />
-          <v-btn color="primary" text @click="showDialog = false">
-            Voltar
-          </v-btn>
-        </v-card-actions>
     </v-card>
-    </v-dialog>
   </div>
 </template>
 
@@ -94,15 +81,9 @@ export default {
     AccessPointSignalStrengthChart
   },
   data: () => ({
-    showDialog: true,
     filter: ''
   }),
-  watch: {
-    showDialog() {
-      this.filter = ''
-      this.$router.back()
-    }
-  },
+  watch: {},
 
   apollo: {
     accessPoint: {