resources/js/components/pedidos/SubpedidoSelect.vue

@@ -5,20 +5,20 @@
             <div class="column is-two-thirds">
                 <div class="field">
                     <div class="control">
-                        <input class="input" @input="onType" v-model="subpedido"/>
+                        <input class="input" @input="onType" v-model="searchString"/>
                     </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 class="button is-danger" v-if="!deshabilitado" @click="submit">Crear nuevo pedido
                 </button>
             </div>
         </div>
-        <div v-if="subpedidosExistentes.length" class="block">
+        <div v-if="pedidos.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"
+            <div class="columns is-mobile" v-for="(subpedidoExistente, index) in pedidos"
                  :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"
@@ -37,43 +37,41 @@
 import { mapActions, mapState } from "vuex";
 
 export default {
+    async mounted() {
+        await this.getGrupoDeCompra();
+    },
     data() {
         return {
-            subpedido: null,
-            subpedidosExistentes: []
+            searchString: null,
+            pedidos: []
         }
     },
     computed: {
         ...mapState('barrio',["grupo_de_compra_id"]),
-        nombresDeSubpedidos: function () {
-            return this.subpedidosExistentes.map(a => a.nombre.toLowerCase())
-        },
-        botonCrearDesabilitado: function () {
-            return !this.subpedido || this.nombresDeSubpedidos.includes(this.subpedido.toLowerCase())
+        deshabilitado: function () {
+            return !this.searchString?.trim()
+                || this.pedidos.some(p => p.nombre.toLowerCase() === this.searchString.toLowerCase())
         }
     },
-    async mounted() {
-        await this.getGrupoDeCompra();
-    },
     methods: {
         ...mapActions('barrio',["getGrupoDeCompra"]),
         onType() {
-            if (!this.subpedido) {
-                this.subpedidosExistentes = [];
+            if (!this.searchString) {
+                this.pedidos = [];
                 return;
             }
             axios.get("/api/subpedidos", {
                 params: {
-                    nombre: this.subpedido,
+                    nombre: this.searchString,
                     grupo_de_compra: this.grupo_de_compra_id
                 }
             }).then(response => {
-                this.subpedidosExistentes = response.data
+                this.pedidos = response.data
             });
         },
         submit() {
             axios.post("/api/subpedidos", {
-                nombre: this.subpedido,
+                nombre: this.searchString,
                 grupo_de_compra_id: this.grupo_de_compra_id
             }).then(response => {
                 //se creo el subpedido