BarrioSelect y RegionSelect usan la store

This commit is contained in:
Alejandro Tasistro 2025-05-19 03:05:06 -03:00
parent fe292802cd
commit fe57e8c6b3
2 changed files with 62 additions and 61 deletions

View file

@ -1,13 +1,19 @@
<template> <template>
<div v-show="visible" class="block"> <div v-if="region_elegida !== null" class="block">
<div class="field"> <div class="field">
<label class="label" :class="isAdmin ? 'has-text-white' : ''">Seleccioná tu barrio o grupo de compra</label> <label class="label" :class="admin ? 'has-text-white' : ''">
Seleccioná tu barrio o grupo de compra
</label>
<div class="control"> <div class="control">
<div class="select"> <div class="select">
<select @change="onGDCSelected" v-model="gdc" name="name"> <select @change="selectGrupoDeCompra({ grupo_de_compra: barrio })" v-model="barrio">
<option :disabled="isDefaultDisabled==1" value=null>Seleccionar</option> <option :disabled="grupo_de_compra_elegido !== null" value=null>
<option v-for="(gdc, index) in gdcs" :key="index" v-text="gdc.nombre + (isAdmin ? '_admin' : '')" Seleccionar
:name="gdc.nombre + (isAdmin ? '_admin' : '')"> </option>
<option v-for="(gdc, index) in grupos_de_compra"
:key="index"
v-text="gdc.nombre"
:name="gdc.nombre">
</option> </option>
</select> </select>
</div> </div>
@ -17,35 +23,24 @@
</template> </template>
<script> <script>
export default { import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
data() { export default {
return { name: 'BarrioSelect',
visible: false, async mounted() {
region: null, await this.getRegiones();
gdcs: [], },
isDefaultDisabled: 0, methods: {
gdc: null, ...mapMutations('login',["selectGrupoDeCompra"]),
isAdmin: this.admin == null ? false : this.admin ...mapActions('login',["getRegiones", "getGruposDeCompra"]),
} },
}, computed: {
mounted() { ...mapState('login',["region_elegida","grupos_de_compra","grupo_de_compra_elegido"]),
Event.$on('region-seleccionada', (region)=> { ...mapGetters('login',["admin"]),
this.region = region; },
this.fillGDC(region); data() {
this.visible = true; return {
}); barrio: null,
}, };
methods : { },
fillGDC(region) { }
axios.get("/api/grupos-de-compra").then(response => {
this.gdcs = response.data[this.region];
});
},
onGDCSelected() {
this.isDefaultDisabled = 1;
Event.$emit("gdc-seleccionado",this.gdc);
}
},
props: {'admin': Boolean}
}
</script> </script>

View file

@ -1,12 +1,20 @@
<template> <template>
<div class="block"> <div class="block">
<div class="field"> <div class="field">
<label class="label" :class="whiteText ? 'has-text-white' : ''">Seleccioná tu región</label> <label class="label" :class="admin ? 'has-text-white' : ''">
Seleccioná tu región
</label>
<div class="control"> <div class="control">
<div class="select"> <div class="select">
<select @change="onRegionSelected" v-model="region"> <select @change="selectRegion({ region })" v-model="region">
<option :disabled="isDefaultDisabled===1" value=null>Seleccionar</option> <option :disabled="region_elegida !== null" value=null>
<option v-for="(region, index) in regiones" :key="index" v-text="region" :name="region"></option> Seleccionar
</option>
<option v-for="(region, index) in regiones"
:key="index"
v-text="region"
:name="region">
</option>
</select> </select>
</div> </div>
</div> </div>
@ -15,24 +23,22 @@
</template> </template>
<script> <script>
export default { import {mapActions, mapGetters, mapState} from "vuex";
data() { export default {
return { async mounted() {
regiones: [], await this.getRegiones();
isDefaultDisabled: 0, },
region: null, data() {
whiteText: this.admin == null ? false : this.admin return {
} region: null,
}, };
mounted() { },
axios.get("/api/regiones").then(response => this.regiones = response.data); methods: {
}, ...mapActions('login',["getRegiones","selectRegion"]),
methods: { },
onRegionSelected() { computed: {
this.isDefaultDisabled = 1; ...mapState('login',["regiones","region_elegida"]),
Event.$emit("region-seleccionada",this.region); ...mapGetters('login',["admin"]),
} }
}, }
props: {'admin': Boolean}
}
</script> </script>