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

95 lines
3.7 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="cerrar"></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="cerrar">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("comisiones", ["seleccionarGrupoDeCompra"]),
...mapMutations('ui', ["toggleModalBarrio"]),
...mapActions("comisiones", ["modificarBarrio"]),
...mapActions('ui', ["toast"]),
async modificar() {
const nombre = this.nombreControl !== this.grupo_de_compra_actual.nombre ? this.nombreControl : undefined;
const region = this.regionControl !== this.grupo_de_compra_actual.region ? this.regionControl : undefined;
await this.modificarBarrio({
gdc_id: this.grupo_de_compra_actual.id,
nombre: nombre,
region: region,
passBarrio: this.passBarrio,
passAdmin: this.passAdmin,
passOllas: this.passOllas,
})
this.cerrar();
},
cerrar() {
this.toggleModalBarrio();
this.seleccionarGrupoDeCompra(false);
},
},
mounted() {
this.nombreControl = this.grupo_de_compra_actual.nombre;
this.regionControl = this.grupo_de_compra_actual.region;
}
}
</script>