Default headers btn

web/src/views/AccessPoints.vue

@@ -25,7 +25,6 @@
           <v-card-actions>
             <v-btn
               text
-              block
               @click="
                 allHeaders = allHeaders.map(header => ({
                   ...header,
@@ -36,6 +35,10 @@
               <v-icon left>mdi-check-all</v-icon>
               Todos
             </v-btn>
+            <v-btn text @click="resetDefaultHeaders">
+              <v-icon left>mdi-check-all</v-icon>
+              Padrões
+            </v-btn>
           </v-card-actions>
         </v-card>
       </v-menu>
@@ -90,6 +93,19 @@
           {{ item.updatedAt | conciseDate }}
         </small>
       </template>
+
+      <template #[`item.controller`]="{ item }">
+        <ApIcon :controller="item.controller" />
+      </template>
+
+      <template #[`item.actions`]>
+        <v-btn icon small>
+          <v-icon small>mdi-pencil</v-icon>
+        </v-btn>
+        <v-btn icon small>
+          <v-icon small>mdi-eye</v-icon>
+        </v-btn>
+      </template>
     </v-data-table>
     <v-alert class="mt-2" dismissible outlined type="success">
       As informações são atualizadas automaticamente</v-alert
@@ -99,33 +115,56 @@
 
 <script>
 import gql from 'graphql-tag'
+import ApIcon from '../components/ApIcon.vue'
 
 export default {
   name: 'AccessPoints',
+  components: { ApIcon },
+
   data: () => ({
     linesPerPage: 150,
     search: '',
+    defaultHeaders: [
+      'name',
+      'ip',
+      'local',
+      'clients',
+      'uptime',
+      'updatedAt',
+      'actions'
+    ],
     allHeaders: [
-      { text: 'Nome', value: 'name', active: true },
-      { text: 'Hostname', value: 'hostname', active: false },
-      { text: 'IP', value: 'ip', active: true, width: 80 },
-      { text: 'MAC', value: 'mac', active: false },
-      { text: 'Localização', value: 'local', active: true },
+      { text: 'Nome', value: 'name' },
+      { text: 'Hostname', value: 'hostname' },
+      { text: 'IP', value: 'ip', width: 80 },
+      { text: 'MAC', value: 'mac' },
+      { text: 'Localização', value: 'local' },
       {
         text: 'Clientes',
         value: 'clients',
-        active: true,
+
         width: 140,
         align: 'center'
       },
-      { text: 'Uptime', value: 'uptime', active: true },
-      { text: 'Modelo', value: 'model', active: false },
-      { text: 'Controladora', value: 'controller', active: false },
-      { text: 'Observações', value: 'notes', active: true },
-      { text: 'Última atualização', value: 'updatedAt', active: true }
+      { text: 'Uptime', value: 'uptime' },
+      { text: 'Modelo', value: 'model' },
+      {
+        text: 'Controladora',
+        value: 'controller'
+      },
+      { text: 'Observações', value: 'notes' },
+      { text: 'Última atualização', value: 'updatedAt' },
+      {
+        text: 'Ações',
+        value: 'actions',
+        width: 120,
+        align: 'center'
+      }
     ]
   }),
-
+  mounted() {
+    this.resetDefaultHeaders()
+  },
   computed: {
     headers() {
       return this.allHeaders.filter(header => header.active)
@@ -138,12 +177,10 @@ export default {
     load(connectedClients) {
       const MAX_LOAD = 70
       const load = Math.floor((connectedClients / MAX_LOAD) * 100)
-
       return load < 100 ? load : 100
     },
     loadColor(clients) {
       const load = this.load(clients)
-
       if (load < 20) return 'teal lighten-2'
       else if (load < 30) return 'green'
       else if (load < 40) return 'light-green'
@@ -156,17 +193,21 @@ export default {
     },
     loadIcon(clients) {
       const load = this.load(clients)
-
       if (load < 25) return 'mdi-gauge-empty'
       else if (load < 50) return 'mdi-gauge-low'
       else if (load < 75) return 'mdi-gauge'
       else return 'mdi-gauge-full'
+    },
+    resetDefaultHeaders() {
+      this.allHeaders = this.allHeaders.map(header => ({
+        ...header,
+        active: this.defaultHeaders.includes(header.value)
+      }))
     }
   },
   apollo: {
     accessPoints: {
       fetchPolicy: 'cache-and-network',
-
       query: gql`
         query accessPoints {
           accessPoints {