From fe57e8c6b31394248c3e2c19a7b90263713f2dbb Mon Sep 17 00:00:00 2001
From: ale <ale.tasistro@gmail.com>
Date: Mon, 19 May 2025 03:05:06 -0300
Subject: [PATCH] BarrioSelect y RegionSelect usan la store
---
.../js/components/comunes/BarrioSelect.vue | 69 +++++++++----------
.../js/components/comunes/RegionSelect.vue | 54 ++++++++-------
2 files changed, 62 insertions(+), 61 deletions(-)
diff --git a/resources/js/components/comunes/BarrioSelect.vue b/resources/js/components/comunes/BarrioSelect.vue
index 6743f4b..215e449 100644
--- a/resources/js/components/comunes/BarrioSelect.vue
+++ b/resources/js/components/comunes/BarrioSelect.vue
@@ -1,13 +1,19 @@
<template>
- <div v-show="visible" class="block">
+ <div v-if="region_elegida !== null" class="block">
<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="select">
- <select @change="onGDCSelected" v-model="gdc" name="name">
- <option :disabled="isDefaultDisabled==1" value=null>Seleccionar</option>
- <option v-for="(gdc, index) in gdcs" :key="index" v-text="gdc.nombre + (isAdmin ? '_admin' : '')"
- :name="gdc.nombre + (isAdmin ? '_admin' : '')">
+ <select @change="selectGrupoDeCompra({ grupo_de_compra: barrio })" v-model="barrio">
+ <option :disabled="grupo_de_compra_elegido !== null" value=null>
+ Seleccionar
+ </option>
+ <option v-for="(gdc, index) in grupos_de_compra"
+ :key="index"
+ v-text="gdc.nombre"
+ :name="gdc.nombre">
</option>
</select>
</div>
@@ -17,35 +23,24 @@
</template>
<script>
- export default {
- data() {
- return {
- visible: false,
- region: null,
- gdcs: [],
- isDefaultDisabled: 0,
- gdc: null,
- isAdmin: this.admin == null ? false : this.admin
- }
- },
- mounted() {
- Event.$on('region-seleccionada', (region)=> {
- this.region = region;
- this.fillGDC(region);
- this.visible = true;
- });
- },
- 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}
- }
+import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
+export default {
+ name: 'BarrioSelect',
+ async mounted() {
+ await this.getRegiones();
+ },
+ methods: {
+ ...mapMutations('login',["selectGrupoDeCompra"]),
+ ...mapActions('login',["getRegiones", "getGruposDeCompra"]),
+ },
+ computed: {
+ ...mapState('login',["region_elegida","grupos_de_compra","grupo_de_compra_elegido"]),
+ ...mapGetters('login',["admin"]),
+ },
+ data() {
+ return {
+ barrio: null,
+ };
+ },
+}
</script>
diff --git a/resources/js/components/comunes/RegionSelect.vue b/resources/js/components/comunes/RegionSelect.vue
index 55d6c8f..ca543bd 100644
--- a/resources/js/components/comunes/RegionSelect.vue
+++ b/resources/js/components/comunes/RegionSelect.vue
@@ -1,12 +1,20 @@
<template>
<div class="block">
<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="select">
- <select @change="onRegionSelected" v-model="region">
- <option :disabled="isDefaultDisabled===1" value=null>Seleccionar</option>
- <option v-for="(region, index) in regiones" :key="index" v-text="region" :name="region"></option>
+ <select @change="selectRegion({ region })" v-model="region">
+ <option :disabled="region_elegida !== null" value=null>
+ Seleccionar
+ </option>
+ <option v-for="(region, index) in regiones"
+ :key="index"
+ v-text="region"
+ :name="region">
+ </option>
</select>
</div>
</div>
@@ -15,24 +23,22 @@
</template>
<script>
- export default {
- data() {
- return {
- regiones: [],
- isDefaultDisabled: 0,
- region: null,
- whiteText: this.admin == null ? false : this.admin
- }
- },
- mounted() {
- axios.get("/api/regiones").then(response => this.regiones = response.data);
- },
- methods: {
- onRegionSelected() {
- this.isDefaultDisabled = 1;
- Event.$emit("region-seleccionada",this.region);
- }
- },
- props: {'admin': Boolean}
- }
+import {mapActions, mapGetters, mapState} from "vuex";
+export default {
+ async mounted() {
+ await this.getRegiones();
+ },
+ data() {
+ return {
+ region: null,
+ };
+ },
+ methods: {
+ ...mapActions('login',["getRegiones","selectRegion"]),
+ },
+ computed: {
+ ...mapState('login',["regiones","region_elegida"]),
+ ...mapGetters('login',["admin"]),
+ }
+}
</script>