AP edit view created
This commit is contained in:
parent
94c9c335d4
commit
f14292c8bd
|
@ -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'
|
||||
)
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
98
web/src/views/AccessPoints/edit.vue
Normal file
98
web/src/views/AccessPoints/edit.vue
Normal file
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue
Block a user