BarrioSelect y RegionSelect usan la store
This commit is contained in:
parent
fe292802cd
commit
fe57e8c6b3
2 changed files with 62 additions and 61 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Reference in a new issue