SubpedidoSelect mergeado con PedidoSelectSection en PedidoSelect y Pedido renombrado a Canasta
This commit is contained in:
parent
9e63c83126
commit
2970982c77
5 changed files with 113 additions and 130 deletions
|
|
@ -2,20 +2,20 @@
|
||||||
<div id="pedidos-body">
|
<div id="pedidos-body">
|
||||||
<nav-migas></nav-migas>
|
<nav-migas></nav-migas>
|
||||||
<cartel-pedido-aprobado></cartel-pedido-aprobado>
|
<cartel-pedido-aprobado></cartel-pedido-aprobado>
|
||||||
<pedido-select-section v-if="!pedidoDefinido"></pedido-select-section>
|
<pedido-select v-if="!pedidoDefinido"></pedido-select>
|
||||||
<pedido v-else></pedido>
|
<canasta v-else></canasta>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapActions, mapGetters } from "vuex";
|
import { mapActions, mapGetters } from "vuex";
|
||||||
import CartelPedidoAprobado from "./CartelPedidoAprobado.vue";
|
import CartelPedidoAprobado from "./CartelPedidoAprobado.vue";
|
||||||
import PedidoSelectSection from "./PedidoSelectSection.vue";
|
import PedidoSelect from "./PedidoSelect.vue";
|
||||||
import Pedido from "./Pedido.vue";
|
import Canasta from "./Canasta.vue";
|
||||||
import NavMigas from "./NavMigas.vue";
|
import NavMigas from "./NavMigas.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { NavMigas, CartelPedidoAprobado, Pedido, Productos: Pedido, PedidoSelectSection },
|
components: { NavMigas, CartelPedidoAprobado, PedidoSelect, Canasta },
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters('pedido',["pedidoDefinido"]),
|
...mapGetters('pedido',["pedidoDefinido"]),
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,13 @@
|
||||||
<script >
|
<script >
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import { mapActions, mapState } from "vuex";
|
import { mapState } from "vuex";
|
||||||
import SubpedidoSelect from "./SubpedidoSelect.vue";
|
|
||||||
import CategoriasContainer from "./CategoriasContainer.vue";
|
import CategoriasContainer from "./CategoriasContainer.vue";
|
||||||
import ProductosContainer from "./ProductosContainer.vue";
|
import ProductosContainer from "./ProductosContainer.vue";
|
||||||
import Chismosa from "./Chismosa.vue";
|
import Chismosa from "./Chismosa.vue";
|
||||||
import DevolucionesModal from "./DevolucionesModal.vue";
|
import DevolucionesModal from "./DevolucionesModal.vue";
|
||||||
import CartelPedidoAprobado from "./CartelPedidoAprobado.vue";
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { CartelPedidoAprobado, DevolucionesModal, SubpedidoSelect, CategoriasContainer, ProductosContainer, Chismosa },
|
components: { DevolucionesModal, CategoriasContainer, ProductosContainer, Chismosa },
|
||||||
computed: {
|
computed: {
|
||||||
...mapState('ui',["show_chismosa","show_devoluciones"])
|
...mapState('ui',["show_chismosa","show_devoluciones"])
|
||||||
},
|
},
|
||||||
106
resources/js/components/pedidos/PedidoSelect.vue
Normal file
106
resources/js/components/pedidos/PedidoSelect.vue
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
<template>
|
||||||
|
<section class="section">
|
||||||
|
<div id="root" class="container">
|
||||||
|
<h1 class="title">
|
||||||
|
Pedidos MPS
|
||||||
|
</h1>
|
||||||
|
<p class="subtitle">
|
||||||
|
Bienvenidx a la aplicación de pedidos del <strong>Mercado Popular de Subsistencia</strong>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<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(undefined)">
|
||||||
|
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 class="nombre">
|
||||||
|
{{ 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="submit(subpedidoExistente)">
|
||||||
|
Continuar pedido
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template><script>
|
||||||
|
import { mapActions, mapMutations, mapState } from "vuex";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'PedidoSelect',
|
||||||
|
async mounted() {
|
||||||
|
await this.getGrupoDeCompra();
|
||||||
|
const sesion = await axios.get("/pedido/sesion");
|
||||||
|
if (sesion.data.id) {
|
||||||
|
await this.elegirPedido({ pedido_id: sesion.data.id });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchString: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState('barrio',["grupo_de_compra_id","pedidos"]),
|
||||||
|
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(pedido) {
|
||||||
|
if (pedido)
|
||||||
|
await this.elegirPedido({ pedido_id: pedido.id });
|
||||||
|
else
|
||||||
|
await this.crearPedido({ nombre: this.searchString, grupo_de_compra_id: this.grupo_de_compra_id });
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.nombre {
|
||||||
|
padding-top: calc(.5em - 1px);
|
||||||
|
margin-bottom: .5rem
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<script>
|
|
||||||
import { defineComponent } from "vue";
|
|
||||||
import SubpedidoSelect from "./SubpedidoSelect.vue";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: { SubpedidoSelect },
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<section class="section">
|
|
||||||
<div id="root" class="container">
|
|
||||||
<h1 class="title">
|
|
||||||
Pedidos MPS
|
|
||||||
</h1>
|
|
||||||
<p class="subtitle">
|
|
||||||
Bienvenidx a la aplicación de pedidos del <strong>Mercado Popular de Subsistencia</strong>
|
|
||||||
</p>
|
|
||||||
<subpedido-select></subpedido-select>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
<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(undefined)">
|
|
||||||
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 class="nombre">
|
|
||||||
{{ 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="submit(subpedidoExistente)">
|
|
||||||
Continuar pedido
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapActions, mapMutations, mapState } from "vuex";
|
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'SubpedidoSelect',
|
|
||||||
async mounted() {
|
|
||||||
await this.getGrupoDeCompra();
|
|
||||||
const sesion = await axios.get("/pedido/sesion");
|
|
||||||
if (sesion.data.id) {
|
|
||||||
await this.elegirPedido({ pedido_id: sesion.data.id });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
searchString: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState('barrio',["grupo_de_compra_id","pedidos"]),
|
|
||||||
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(pedido) {
|
|
||||||
if (pedido)
|
|
||||||
await this.elegirPedido({ pedido_id: pedido.id });
|
|
||||||
else
|
|
||||||
await this.crearPedido({ nombre: this.searchString, grupo_de_compra_id: this.grupo_de_compra_id });
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.nombre {
|
|
||||||
padding-top: calc(.5em - 1px);
|
|
||||||
margin-bottom: .5rem
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Add table
Reference in a new issue