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">
|
||||
<nav-migas></nav-migas>
|
||||
<cartel-pedido-aprobado></cartel-pedido-aprobado>
|
||||
<pedido-select-section v-if="!pedidoDefinido"></pedido-select-section>
|
||||
<pedido v-else></pedido>
|
||||
<pedido-select v-if="!pedidoDefinido"></pedido-select>
|
||||
<canasta v-else></canasta>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from "vuex";
|
||||
import CartelPedidoAprobado from "./CartelPedidoAprobado.vue";
|
||||
import PedidoSelectSection from "./PedidoSelectSection.vue";
|
||||
import Pedido from "./Pedido.vue";
|
||||
import PedidoSelect from "./PedidoSelect.vue";
|
||||
import Canasta from "./Canasta.vue";
|
||||
import NavMigas from "./NavMigas.vue";
|
||||
|
||||
export default {
|
||||
components: { NavMigas, CartelPedidoAprobado, Pedido, Productos: Pedido, PedidoSelectSection },
|
||||
components: { NavMigas, CartelPedidoAprobado, PedidoSelect, Canasta },
|
||||
computed: {
|
||||
...mapGetters('pedido',["pedidoDefinido"]),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
<script >
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "vuex";
|
||||
import SubpedidoSelect from "./SubpedidoSelect.vue";
|
||||
import { mapState } from "vuex";
|
||||
import CategoriasContainer from "./CategoriasContainer.vue";
|
||||
import ProductosContainer from "./ProductosContainer.vue";
|
||||
import Chismosa from "./Chismosa.vue";
|
||||
import DevolucionesModal from "./DevolucionesModal.vue";
|
||||
import CartelPedidoAprobado from "./CartelPedidoAprobado.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { CartelPedidoAprobado, DevolucionesModal, SubpedidoSelect, CategoriasContainer, ProductosContainer, Chismosa },
|
||||
components: { DevolucionesModal, CategoriasContainer, ProductosContainer, Chismosa },
|
||||
computed: {
|
||||
...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