Elegir pedido existente

public/js/subpedidos-create.js

@@ -5,12 +5,24 @@ Vue.component('subpedido-select', {
 			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,
@@ -25,14 +37,16 @@ Vue.component('subpedido-select', {
   				nombre: this.subpedido,
   				grupo_de_compra_id: this.gdcid
   			}).then(response => {
-
           //se creo el subpedido, guardamos el subpedido en sesion
-  				axios.post("/subpedidos/guardar_sesion", {
-  					subpedido: response.data
-  				}).then(response => {
-  						window.location.href = 'productos';
-  				});
+          this.guardarSubpedidoEnSesion(response.data);
   			});
-  		}
+  		},
+      guardarSubpedidoEnSesion(subpedido) {
+        axios.post("/subpedidos/guardar_sesion", {
+          subpedido: subpedido
+        }).then(response => {
+          window.location.href = 'productos';
+        });
+      }
   	}
 });

resources/views/subpedidos_create.blade.php

@@ -10,25 +10,31 @@
     Bienvenidx a la aplicación de compras del <strong>Mercado Popular de Subsistencia</strong>
   </p>
   <subpedido-select inline-template gdcid="{{Auth::user()->grupoDeCompra->id}}">
-  	<div class="block">
-		<div class="field">
-		    <label class="label">Escribí el nombre de tu familia o grupo de convivencia</label>
-	        <div class="control">
-        		<input class="input" @input="onType" v-model="subpedido"></input>
+  	<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"></input>
+					</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" :disabled="botonCrearDesabilitado" @click="submit">Crear nuevo pedido</button>
 			</div>
-			<p class="help">Intentá que sea claro como para que tus compas del barrio te identifiquen.</p>
 		</div>
-		<div class="buttons">
-		  	<button class="button is-primary" @click="submit">Crear nuevo pedido</button>
-		</div>
-	  	<div class="table-container">
-	  		<table class="table is-hoverable">
-	  			<tbody>
-	  				<tr v-for="subpedidoExistente in subpedidosExistentes"  >
-	  					<td><a v-text="subpedidoExistente.nombre" :href="subpedidoExistente.nombre"></a></td>
-	  				</tr>
-	  			</tbody>
-	  		</table>
+		<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}">
+  					<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="guardarSubpedidoEnSesion(subpedidoExistente)">Continuar pedido</button>
+  					</div>
+  				</div>
+			</div>		
 		</div>
 	</div>
   </subpedido-select>