pedi2/resources/js/components/comisiones/barrios/ModalBarrio.vue

81 lines
3 KiB
Vue

<template>
<div :class="show_modal_barrio ? 'is-active modal' : 'modal'">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modificar barrio</p>
<button class="delete" aria-label="close" @click.capture="toggleModalBarrio"></button>
</header>
<section class="modal-card-body">
<div class="field has-addons is-centered is-thin-centered">
<p class="control">
Nombre:
<input id="notasControl" class="input" type="text" v-model="nombreControl">
</p>
</div>
<div class="field has-addons is-centered is-thin-centered">
<p class="control">
Region:
<input id="notasControl" class="input" type="text" v-model="regionControl">
</p>
</div>
<div class="field has-addons is-centered is-thin-centered">
<p class="control">
Contraseña pedidos:
<input id="notasControl" class="input" type="text" v-model="passBarrio">
</p>
</div>
<div class="field has-addons is-centered is-thin-centered">
<p class="control">
Contraseña admin:
<input id="notasControl" class="input" type="text" v-model="passAdmin">
</p>
</div>
<div class="field has-addons is-centered is-thin-centered">
<p class="control">
Contraseña ollas:
<input id="notasControl" class="input" type="text" v-model="passOllas">
</p>
</div>
</section>
<footer class="modal-card-foot is-justify-content-right">
<button class="button" @click="toggleModalBarrio">Cancelar</button>
<button class="button is-success" @click="modificar">Aceptar</button>
</footer>
</div>
</div>
</template>
<script>
import { mapActions, mapMutations, mapState } from "vuex";
export default {
name: 'ModalBarrio',
data() {
return {
nombreControl: "",
regionControl: "",
passBarrio: "",
passAdmin: "",
passOllas: "",
}
},
computed: {
...mapState('ui', ["show_modal_barrio"]),
...mapState('comisiones', ["grupo_de_compra_actual"]),
},
methods: {
...mapMutations('ui', ["toggleModalBarrio"]),
...mapActions('ui', ["toast"]),
modificar() {
this.toast({
mensaje: "Modificar barrio"
});
},
},
mounted() {
this.nombreControl = this.grupo_de_compra_actual.nombre;
this.regionControl = this.grupo_de_compra_actual.region;
}
}
</script>