From 408531bec31b4b12a51c6fcb9720b11ec32431eb Mon Sep 17 00:00:00 2001 From: ale <ale.tasistro@gmail.com> Date: Wed, 21 May 2025 18:57:03 -0300 Subject: [PATCH] =?UTF-8?q?Nombres=20de=20campos=20y=20simplificaci=C3=B3n?= =?UTF-8?q?=20de=20deshabilitar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/components/pedidos/SubpedidoSelect.vue | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/resources/js/components/pedidos/SubpedidoSelect.vue b/resources/js/components/pedidos/SubpedidoSelect.vue index 0c87e5e..11bdf8b 100644 --- a/resources/js/components/pedidos/SubpedidoSelect.vue +++ b/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