AP edit view created

web/src/router/index.js

@@ -204,6 +204,18 @@ const routes = [
           import(
             /* webpackChunkName: "access-points" */ '../views/AccessPoints/single.vue'
           )
+      },
+      {
+        path: ':id/edit',
+        name: 'access-point-edit',
+        meta: {
+          title: 'Editar Access Point',
+          roles: ['superAdmin']
+        },
+        component: () =>
+          import(
+            /* webpackChunkName: "access-points-edit" */ '../views/AccessPoints/edit.vue'
+          )
       }
     ]
   },

web/src/views/AccessPoints/edit.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-navigation-drawer v-model="show" right app temporary :width="480">
+    <v-toolbar flat>
+      <div v-if="accessPoint">
+        <h3>Access Point {{ accessPoint.hostname }}</h3>
+        {{ accessPoint.mac }}
+      </div>
+      <v-spacer />
+      <v-btn icon @click="show = false">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </v-toolbar>
+    <v-progress-linear class="mb-4" :indeterminate="loading || !accessPoint" />
+    <v-card v-if="accessPoint" :elevation="0" class="ma-2">
+      <v-text-field
+        v-model="name"
+        label="Nome"
+        hint="Nome amigável ou apelido (opcional)"
+        outlined
+      />
+      <v-text-field
+        v-model="local"
+        label="Local"
+        hint="Localização aproximada (opcional)"
+        outlined
+      />
+      <v-textarea v-model="notes" label="Observações" outlined />
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="primary" @click="onUpdateAccessPoint">
+          <v-icon left>mdi-check</v-icon>
+          Salvar
+        </v-btn>
+
+        <v-btn color="secondary" text @click="show = false">
+          <v-icon left>mdi-close</v-icon>
+          Cancelar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-navigation-drawer>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  name: 'EditAccessPoint',
+  data: () => ({
+    show: true,
+    loading: false,
+    errors: [],
+
+    name: '',
+    local: '',
+    notes: ''
+  }),
+  watch: {
+    show(val) {
+      if (!val) {
+        this.$router.push({ name: 'access-points' })
+      }
+    }
+  },
+  methods: {
+    onUpdateAccessPoint() {}
+  },
+  apollo: {
+    accessPoint: {
+      cachePolicy: 'cache-and-network',
+      query: gql`
+        query accessPoint($id: ID!) {
+          accessPoint(id: $id) {
+            id
+            name
+            hostname
+            mac
+            local
+            notes
+          }
+        }
+      `,
+      variables() {
+        return {
+          id: this.$route.params.id
+        }
+      },
+      result({ data }) {
+        this.name = data?.accessPoint.name
+        this.local = data?.accessPoint.local
+        this.notes = data?.accessPoint.notes
+      }
+    }
+  }
+}
+</script>
+
+<style></style>

web/src/views/AccessPoints/index.vue

@@ -64,6 +64,33 @@
       class="elevation-1"
       :footer-props="{ itemsPerPageOptions: [10, 25, 50, 100, 150] }"
     >
+      <template #[`item.name`]="{ item }">
+        <v-hover v-slot="{ hover }">
+          <span>
+            <v-expand-x-transition>
+              <v-btn
+                v-if="hover"
+                color="primary"
+                class="mr-1"
+                icon
+                small
+                @click="
+                  $router.push({
+                    name: 'access-point-edit',
+                    params: { id: item.id }
+                  })
+                "
+              >
+                <v-icon small>mdi-pencil</v-icon>
+              </v-btn>
+            </v-expand-x-transition>
+            <span>
+              {{ item.name }}
+            </span>
+          </span>
+        </v-hover>
+      </template>
+
       <template #[`item.local`]="{ item }">
         {{ item.local || '-' }}
       </template>

web/src/views/AccessPoints/single.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <v-dialog v-model="showDialog">
+    <v-dialog
+      v-model="showDialog"
+      :fullscreen="$vuetify.breakpoint.mdAndDown"
+      transition="dialog-bottom-transition"
+    >
       <v-card v-if="!accessPoint">
         <v-skeleton-loader
           type="table-heading, list-item-two-line, image, table-tfoot"