BarrioSelect y RegionSelect usan la store

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">
+		        	<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>
 					</select>
 				</div>
@@ -17,35 +23,24 @@
 </template>
 
 <script>
-	export default {
+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 {
-				visible: false,
+            barrio: null,
-				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}
-	}
 </script>

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">
+	        		<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>
 				</div>
 			</div>
@@ -15,24 +23,22 @@
 </template>
 
 <script>
-	export default {
+import {mapActions, mapGetters, mapState} from "vuex";
+export default {
+    async mounted() {
+        await this.getRegiones();
+    },
     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() {
+        ...mapActions('login',["getRegiones","selectRegion"]),
-	  			this.isDefaultDisabled = 1;
-	  			Event.$emit("region-seleccionada",this.region);
-	  		}
     },
-        props: {'admin': Boolean}
+    computed: {
+        ...mapState('login',["regiones","region_elegida"]),
+        ...mapGetters('login',["admin"]),
     }
+}
 </script>