pedi2/resources/js/components/SubpedidoSelect.vue

<template>
	<div>
	    <label class="label">Escribí el nombre de tu familia o grupo de convivencia</label>
  		<div class="columns">
	  		<div class="column is-two-thirds">
				<div class="field">
			        <div class="control">
		        		<input class="input" @input="onType" v-model="subpedido"/>
					</div>
					<p class="help">Debe ser claro para que tus compas del barrio te identifiquen.</p>
				</div>
			</div>
	  		<div class="column is-one-third buttons">
			  	<button class="button is-danger" v-show="!botonCrearDesabilitado" @click="submit">Crear nuevo pedido</button>
			</div>
		</div>
        <div v-if="subpedidosExistentes.length" class="block">
            <label class="label">Si ya comenzaste a hacer tu pedido este mes, elegilo en esta lista:</label>
            <p class="help">Podés seguir escribiendo en el campo de arriba para refinar la búsqueda.</p>
            <div class="columns is-mobile" v-for="(subpedidoExistente, index) in subpedidosExistentes" :class="{'has-background-grey-lighter': index % 2}" :key="index">
                <div class="column is-half-mobile is-two-thirds-desktop is-two-thirds-tablet">
                    <p style="padding-top: calc(.5em - 1px); margin-bottom: .5rem" v-text="subpedidoExistente.nombre"></p>
                </div>
                <div class="buttons column is-half-mobile is-one-third-desktop is-one-third-tablet">
                    <button class="button is-danger" @click="elegirSubpedido(subpedidoExistente)">Continuar pedido</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
				subpedido: null,
				subpedidosExistentes: []
			}
		},
	  computed: {
	    nombresDeSubpedidos: function() {
	      return this.subpedidosExistentes.map(a => a.nombre.toLowerCase())
	    },
	    botonCrearDesabilitado : function() {
	      return !this.subpedido || this.nombresDeSubpedidos.includes(this.subpedido.toLowerCase())
	    }
	  },
		props: ["gdcid"],
		mounted() {
			console.log("ready");
		},
		methods: {
	  		onType() {
	        if (!this.subpedido){
	          this.subpedidosExistentes = [];
	          return;
	        }
		    	axios.get("/api/subpedidos", {
	          params: {
	            nombre: this.subpedido,
	            grupo_de_compra: this.gdcid
	          }
	        }).then(response => {
		    		this.subpedidosExistentes = response.data
		    	});
	  		},
	  		submit() {
	  			axios.post("/api/subpedidos", {
	  				nombre: this.subpedido,
	  				grupo_de_compra_id: this.gdcid
	  			}).then(response => {
	          //se creo el subpedido
	          this.elegirSubpedido(response.data);
	  			});
	  		},
	      elegirSubpedido(subpedido){
	        //lo guardamos en sesion
	        this.guardarSubpedidoEnSesion(subpedido);
	      },
	      guardarSubpedidoEnSesion(subpedido) {
	        axios.post("/subpedidos/guardar_sesion", {
	          subpedido: subpedido
	        }).then(response => {
	          window.location.href = 'productos';
	        });
	      }
	  	}
	}
</script>