Cambio logica para usar modulo pedidos + cambios en migas
This commit is contained in:
parent
e82dd59c34
commit
0dc8f39f07
4 changed files with 59 additions and 93 deletions
|
|
@ -56,7 +56,6 @@ export default {
|
||||||
},
|
},
|
||||||
buscar() {
|
buscar() {
|
||||||
if (this.burgerActiva) this.toggleBurger()
|
if (this.burgerActiva) this.toggleBurger()
|
||||||
Event.$emit("migas-setear-como-inicio", this.$rootMiga)
|
|
||||||
Event.$emit("filtrar-productos",'nombre',this.searchString)
|
Event.$emit("filtrar-productos",'nombre',this.searchString)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,38 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-show="visible" class="column">
|
<div v-show="visible" class="column">
|
||||||
<div class="columns is-multiline is-mobile">
|
<div class="columns is-multiline is-mobile">
|
||||||
<div v-for="(categoria,i) in categorias" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
|
<div v-for="(categoria,i) in categorias" :key="i"
|
||||||
<div @click.capture="seleccionarCategoria(categoria)" class="card" style="height:100%" >
|
class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
|
||||||
<div class="card-content">
|
<div @click.capture="seleccionar(categoria)" class="card" style="height:100%">
|
||||||
<div class="media">
|
<div class="card-content">
|
||||||
<div class="media-content" style="overflow:hidden">
|
<div class="media">
|
||||||
<p class="title is-6" v-text="categoria"></p>
|
<div class="media-content" style="overflow:hidden">
|
||||||
</div>
|
<p class="title is-6" v-text="categoria"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- END CARD -->
|
</div>
|
||||||
</div><!-- END BLOCK COLUMN -->
|
</div><!-- END CARD -->
|
||||||
</div><!-- END COLUMNS -->
|
</div><!-- END BLOCK COLUMN -->
|
||||||
</div><!-- END CONTAINER -->
|
</div><!-- END COLUMNS -->
|
||||||
|
</div><!-- END CONTAINER -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
import { mapActions, mapState } from "vuex";
|
||||||
name: 'CategoriasContainer',
|
export default {
|
||||||
data() {
|
name: 'CategoriasContainer',
|
||||||
return {
|
computed: {
|
||||||
categorias: null,
|
...mapState('productos',["categorias", "filtro"]),
|
||||||
visible: true
|
visible() {
|
||||||
}
|
return this.filtro === null;
|
||||||
},
|
}
|
||||||
mounted() {
|
},
|
||||||
axios.get("/api/categorias").then(response => {
|
methods: {
|
||||||
this.categorias = response.data;
|
...mapActions('productos', ["seleccionarCategoria"]),
|
||||||
});
|
seleccionar(categoria) {
|
||||||
Event.$emit("migas-setear-como-inicio", this.$rootMiga);
|
this.seleccionarCategoria({ categoria: categoria });
|
||||||
Event.$on("filtrar-productos", (_) => this.visible = false)
|
Event.$emit('migas-agregar', { nombre: categoria });
|
||||||
},
|
}
|
||||||
methods: {
|
}
|
||||||
seleccionarCategoria(categoria) {
|
}
|
||||||
this.visible = false;
|
|
||||||
Event.$emit("filtrar-productos",'categoria',categoria);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
|
<nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
|
||||||
<ul class="mt-4">
|
<ul class="mt-4">
|
||||||
<li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i == migaActiva}">
|
<li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i == migaActiva}">
|
||||||
<a :href="miga.href" v-text="miga.nombre"
|
<a :href="miga.href" v-text="miga.nombre"
|
||||||
:class="{'has-text-danger': i != migaActiva}"></a>
|
:class="{'has-text-danger': i != migaActiva}"></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -13,15 +13,16 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
migas: []
|
initial: [{ nombre: 'Categorías', href: '/productos' }],
|
||||||
|
migas: [{ nombre: 'Categorías', href: '/productos' }],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
visible: function() {
|
visible: function() {
|
||||||
return this.migas.length > 0
|
return this.migas.length > 0
|
||||||
},
|
},
|
||||||
migaActiva: function() {
|
migaActiva: function() {
|
||||||
return this.migas.length-1
|
return this.migas.length-1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -33,7 +34,7 @@
|
||||||
this.migas.push(miga);
|
this.migas.push(miga);
|
||||||
});
|
});
|
||||||
Event.$on('migas-reset', () => {
|
Event.$on('migas-reset', () => {
|
||||||
this.migas = [];
|
this.migas = this.initial;
|
||||||
});
|
});
|
||||||
Event.$on('migas-pop', () => {
|
Event.$on('migas-pop', () => {
|
||||||
this.migas.pop();
|
this.migas.pop();
|
||||||
|
|
@ -51,4 +52,4 @@ nav.breadcrumb.is-fixed-top {
|
||||||
height: 2.75rem;
|
height: 2.75rem;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,59 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-show="visible" class="column">
|
<div v-show="visible" class="column">
|
||||||
<div class="columns is-multiline is-mobile">
|
<div class="columns is-multiline is-mobile">
|
||||||
<producto-card v-for="(producto,i) in productos" :key="i" :producto="producto">
|
<producto-card v-for="(producto,i) in this.productos" :key="i" :producto="producto">
|
||||||
</producto-card><!-- END BLOCK COLUMN -->
|
</producto-card><!-- END BLOCK COLUMN -->
|
||||||
</div><!-- END COLUMNS -->
|
</div><!-- END COLUMNS -->
|
||||||
</div><!-- END CONTAINER -->
|
</div><!-- END CONTAINER -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ProductoCard from "./ProductoCard.vue";
|
import ProductoCard from "./ProductoCard.vue";
|
||||||
|
import { mapState } from "vuex";
|
||||||
export default {
|
export default {
|
||||||
name: 'ProductosContainer',
|
name: 'ProductosContainer',
|
||||||
components: {ProductoCard},
|
components: { ProductoCard },
|
||||||
data() {
|
computed: {
|
||||||
return {
|
...mapState('productos', ["productos", "filtro"]),
|
||||||
productos: [],
|
visible() {
|
||||||
visible: false,
|
return this.filtro !== null;
|
||||||
paginar: 150,
|
},
|
||||||
valor: null,
|
miga: function () {
|
||||||
filtro: null
|
return {
|
||||||
}
|
nombre: this.valor,
|
||||||
},
|
href: "#" + this.valor
|
||||||
computed: {
|
}
|
||||||
miga: function(){
|
}
|
||||||
return {
|
},
|
||||||
nombre: this.valor,
|
}
|
||||||
href: "#" + this.valor
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
Event.$on('filtrar-productos', (filtro,valor) => {
|
|
||||||
this.filtro = filtro
|
|
||||||
this.valor = valor
|
|
||||||
axios.get("/api/productos", {
|
|
||||||
params: this.params(filtro,valor)
|
|
||||||
}).then(response => {
|
|
||||||
this.productos = response.data.data;
|
|
||||||
this.productos.forEach(p => {
|
|
||||||
p.pivot = {};
|
|
||||||
p.pivot.cantidad = this.$root.cantidad(p);
|
|
||||||
p.pivot.notas = this.$root.notas(p);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.visible = true;
|
|
||||||
Event.$emit("migas-agregar",this.miga);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
params(filtro,valor) {
|
|
||||||
let params = { paginar: this.paginar }
|
|
||||||
params[filtro] = valor
|
|
||||||
return params
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue