Refactoring to use child routes

web/src/components/NavList.vue

@@ -17,7 +17,7 @@
         :to="item.route"
         :disabled="item.disabled"
         :color="$vuetify.theme.dark ? '' : 'primary darken-2'"
-        exact
+        :exact="'exact' in item ? item.exact : true"
       >
         <v-list-item-avatar>
           <v-icon>{{ item.icon }}</v-icon>

web/src/mixins/Nav.js

@@ -85,7 +85,8 @@ export default {
             title: 'Administração',
             icon: 'mdi-shield-account',
             route: { name: 'system-administration' },
-            role: 'superAdmin'
+            role: 'superAdmin',
+            exact: false
           }
         ]
       },

web/src/router/index.js

@@ -184,12 +184,49 @@ const routes = [
     path: '/system-administration',
     name: 'system-administration',
     meta: {
-      title: 'Administração do sistema',
       roles: ['superAdmin']
     },
+    children: [
+      {
+        path: 'logs',
+        name: 'logs',
+        meta: {
+          title: 'Logs',
+          roles: ['superAdmin']
+        },
+        component: () =>
+          import(
+            /* webpackChunkName: "logs" */ '../views/SystemAdministration/Logs.vue'
+          )
+      },
+      {
+        path: 'paloalto',
+        name: 'paloalto',
+        meta: {
+          title: 'Palo Alto',
+          roles: ['superAdmin']
+        },
+        component: () =>
+          import(
+            /* webpackChunkName: "paloalto" */ '../views/SystemAdministration/PaloAlto.vue'
+          )
+      },
+      {
+        path: 'maintenance',
+        name: 'maintenance',
+        meta: {
+          title: 'Manutenção do sistema',
+          roles: ['superAdmin']
+        },
+        component: () =>
+          import(
+            /* webpackChunkName: "maintenance" */ '../views/SystemAdministration/Maintenance.vue'
+          )
+      }
+    ],
     component: () =>
       import(
-        /* webpackChunkName: "user-presence" */ '../views/SystemAdministration'
+        /* webpackChunkName: "system-administration" */ '../views/SystemAdministration/index.vue'
       )
   },
 

web/src/views/SystemAdministration.vue

@@ -1,108 +0,0 @@
-<template>
-  <div>
-    <v-tabs v-model="tab">
-      <v-tab> Logs </v-tab>
-      <v-tab> Manutenção </v-tab>
-    </v-tabs>
-    <v-tabs-items v-model="tab">
-      <v-tab-item><Logs /> </v-tab-item>
-      <v-tab-item>
-        <v-container>
-          <v-row>
-            <v-col cols="12">
-              <v-card outlined>
-                <v-card-title class="headline">
-                  Importação de usuários do Active Directory
-                </v-card-title>
-
-                <v-card-text>
-                  Os usuários são importados automaticamente uma vez ao dia. Se
-                  você necessita que sejam atualizados agora, clique no botão
-                  abaixo.
-                  <v-alert
-                    color="info"
-                    class="my-4 text-justify"
-                    icon="mdi-alert"
-                  >
-                    ATENÇÃO! O processo leva vários minutos! Não repita este
-                    processo em um curto espaço de tempo. Você pode acompanhar o
-                    progresso no log do servidor.
-                  </v-alert>
-                  <v-alert
-                    color="warning"
-                    class="my-4 text-justify"
-                    icon="mdi-alert"
-                  >
-                    ATENÇÃO! Não é necessário executar essa ação para
-                    atualização de permissões (roles). As permissões são sempre
-                    atualizadas a cada requisição assíncronamente.
-                  </v-alert>
-                </v-card-text>
-
-                <v-card-actions>
-                  <v-spacer />
-                  <v-btn
-                    color="primary"
-                    large
-                    :elevation="0"
-                    @click="importUsers"
-                  >
-                    Importar agora!
-                  </v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-col>
-            <v-col cols="12">
-              <v-card outlined>
-                <v-card-title class="headline"> Tokens expirados </v-card-title>
-
-                <v-card-text>
-                  Tokens expirados não podem ser utilizados, porém são mantidos
-                  no banco de dados para consultas. Você pode apagar os tokens
-                  expirados usando o botão abaixo.
-                </v-card-text>
-
-                <v-card-actions>
-                  <v-spacer />
-                  <v-btn color="primary" large :elevation="0">
-                    Apagar tokens
-                  </v-btn>
-                </v-card-actions>
-              </v-card></v-col
-            >
-          </v-row>
-        </v-container>
-      </v-tab-item>
-    </v-tabs-items>
-  </div>
-</template>
-
-<script>
-import Logs from '../components/Logs'
-
-import gql from 'graphql-tag'
-
-export default {
-  name: 'SystemAdministration',
-  components: {
-    Logs
-  },
-  data: () => ({
-    tab: 0
-  }),
-  methods: {
-    async importUsers() {
-      const response = await this.$apollo.mutate({
-        mutation: gql`
-          mutation {
-            importUsers
-          }
-        `
-      })
-      alert(response.data.importUsers)
-    }
-  }
-}
-</script>
-
-<style scoped></style>

web/src/views/SystemAdministration/Logs.vue

@@ -109,12 +109,12 @@
 <script>
 import gql from 'graphql-tag'
 import { format, subDays } from 'date-fns'
-import DateTimePicker from '../components/ui/DatetimePicker'
+import DateTimePicker from '../../components/ui/DatetimePicker'
 
 import VueJsonPretty from 'vue-json-pretty'
 
 import 'vue-json-pretty/lib/styles.css'
-import DatetimePicker from '../components/ui/DatetimePicker.vue'
+import DatetimePicker from '../../components/ui/DatetimePicker.vue'
 
 const LOGS_QUERY = gql`
   query($search: String, $dateIn: String, $dateOut: String, $limit: Int) {

web/src/views/SystemAdministration/Maintenance.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <v-container>
+      <v-row>
+        <v-col cols="12">
+          <v-card outlined>
+            <v-card-title class="headline">
+              Importação de usuários do Active Directory
+            </v-card-title>
+
+            <v-card-text>
+              Os usuários são importados automaticamente uma vez ao dia. Se você
+              necessita que sejam atualizados agora, clique no botão abaixo.
+              <v-alert color="info" class="my-4 text-justify" icon="mdi-alert">
+                ATENÇÃO! O processo leva vários minutos! Não repita este
+                processo em um curto espaço de tempo. Você pode acompanhar o
+                progresso no log do servidor.
+              </v-alert>
+              <v-alert
+                color="warning"
+                class="my-4 text-justify"
+                icon="mdi-alert"
+              >
+                ATENÇÃO! Não é necessário executar essa ação para atualização de
+                permissões (roles). As permissões são sempre atualizadas a cada
+                requisição assíncronamente.
+              </v-alert>
+            </v-card-text>
+
+            <v-card-actions>
+              <v-spacer />
+              <v-btn color="primary" large :elevation="0" @click="importUsers">
+                Importar agora!
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+        <v-col cols="12">
+          <v-card outlined>
+            <v-card-title class="headline"> Tokens expirados </v-card-title>
+
+            <v-card-text>
+              Tokens expirados não podem ser utilizados, porém são mantidos no
+              banco de dados para consultas. Você pode apagar os tokens
+              expirados usando o botão abaixo.
+            </v-card-text>
+
+            <v-card-actions>
+              <v-spacer />
+              <v-btn color="primary" large :elevation="0">
+                Apagar tokens
+              </v-btn>
+            </v-card-actions>
+          </v-card></v-col
+        >
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  name: 'Maintenance',
+  components: {},
+  data: () => ({
+    tab: 0
+  }),
+  methods: {
+    async importUsers() {
+      const response = await this.$apollo.mutate({
+        mutation: gql`
+          mutation {
+            importUsers
+          }
+        `
+      })
+      alert(response.data.importUsers)
+    }
+  }
+}
+</script>
+
+<style scoped></style>

web/src/views/SystemAdministration/PaloAlto.vue

@@ -0,0 +1,7 @@
+<template><div>paloalto</div></template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

web/src/views/SystemAdministration/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <v-toolbar dense flat>
+      <v-toolbar-items>
+        <v-btn color="primary" :to="{ name: 'logs' }" text>
+          <v-icon left>mdi-comment-text-outline</v-icon>
+          Logs
+        </v-btn>
+        <v-btn color="primary" :to="{ name: 'paloalto' }" text>
+          <v-icon left>mdi-router</v-icon>
+          Palo Alto
+        </v-btn>
+        <v-btn color="primary" :to="{ name: 'maintenance' }" text>
+          <v-icon left>mdi-tools</v-icon>
+          Manutenção
+        </v-btn>
+      </v-toolbar-items>
+    </v-toolbar>
+    <v-scroll-x-transition mode="out-in">
+      <router-view />
+    </v-scroll-x-transition>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    if (this.$route.name == 'system-administration')
+      this.$router.replace({ name: 'logs' })
+  }
+}
+</script>
+
+<style></style>