90 lines
3.0 KiB
Vue
90 lines
3.0 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="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>
|