73 lines
2.9 KiB
Vue
73 lines
2.9 KiB
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="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-if="!deshabilitado" @click="submit">Crear nuevo pedido
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<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 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"
|
|
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="elegirPedido({ pedido: subpedidoExistente })">Continuar pedido
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapMutations, mapState } from "vuex";
|
|
|
|
export default {
|
|
name: 'SubpedidoSelect',
|
|
async mounted() {
|
|
await this.getGrupoDeCompra();
|
|
},
|
|
data() {
|
|
return {
|
|
searchString: null
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('barrio',["grupo_de_compra_id","pedidos"]),
|
|
...mapState('pedido',["nombre","pedido_id"]),
|
|
deshabilitado: function () {
|
|
return !this.searchString?.trim()
|
|
|| this.pedidos.some(p => p.nombre.toLowerCase() === this.searchString.toLowerCase())
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions('barrio',["getGrupoDeCompra","getPedidos"]),
|
|
...mapActions('pedido',["crearPedido","elegirPedido"]),
|
|
...mapMutations('barrio',["setPedidos"]),
|
|
onType() {
|
|
if (!this.searchString) {
|
|
this.setPedidos([]);
|
|
return;
|
|
}
|
|
this.getPedidos(this.searchString);
|
|
},
|
|
async submit() {
|
|
await this.crearPedido({ nombre: this.searchString, grupo_de_compra_id: this.grupo_de_compra_id });
|
|
},
|
|
}
|
|
}
|
|
</script>
|