nathalie/pedi2
3
3
Fork 1
Code Issues Pull requests 1 Projects Releases Wiki Activity

Cambio logica para usar modulo pedidos + cambios en migas

Browse source
This commit is contained in:
Alejandro Tasistro 2025-05-21 18:19:39 -03:00
parent e82dd59c34
commit 0dc8f39f07
4 changed files with 59 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/js/components/comunes/NavBar.vue
View file

@ -56,7 +56,6 @@ export default {
},
buscar() {
if (this.burgerActiva) this.toggleBurger()
Event.$emit("migas-setear-como-inicio", this.$rootMiga)
Event.$emit("filtrar-productos",'nombre',this.searchString)
}
},

68
resources/js/components/pedidos/CategoriasContainer.vue
View file

@ -1,42 +1,38 @@
<template>
<div v-show="visible" class="column">
<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 @click.capture="seleccionarCategoria(categoria)" class="card" style="height:100%" >
<div class="card-content">
<div class="media">
<div class="media-content" style="overflow:hidden">
<p class="title is-6" v-text="categoria"></p>
</div>
</div>
</div>
</div><!-- END CARD -->
</div><!-- END BLOCK COLUMN -->
</div><!-- END COLUMNS -->
</div><!-- END CONTAINER -->
<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 @click.capture="seleccionar(categoria)" class="card" style="height:100%">
<div class="card-content">
<div class="media">
<div class="media-content" style="overflow:hidden">
<p class="title is-6" v-text="categoria"></p>
</div>
</div>
</div>
</div><!-- END CARD -->
</div><!-- END BLOCK COLUMN -->
</div><!-- END COLUMNS -->
</div><!-- END CONTAINER -->
</template>
<script>
export default {
name: 'CategoriasContainer',
data() {
return {
categorias: null,
visible: true
}
},
mounted() {
axios.get("/api/categorias").then(response => {
this.categorias = response.data;
});
Event.$emit("migas-setear-como-inicio", this.$rootMiga);
Event.$on("filtrar-productos", (_) => this.visible = false)
},
methods: {
seleccionarCategoria(categoria) {
this.visible = false;
Event.$emit("filtrar-productos",'categoria',categoria);
}
}
}
import { mapActions, mapState } from "vuex";
export default {
name: 'CategoriasContainer',
computed: {
...mapState('productos',["categorias", "filtro"]),
visible() {
return this.filtro === null;
}
},
methods: {
...mapActions('productos', ["seleccionarCategoria"]),
seleccionar(categoria) {
this.seleccionarCategoria({ categoria: categoria });
Event.$emit('migas-agregar', { nombre: categoria });
}
}
}
</script>

13
resources/js/components/pedidos/NavMigas.vue
View file

@ -2,7 +2,7 @@
<nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
<ul class="mt-4">
<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>
</li>
</ul>
@ -13,15 +13,16 @@
export default {
data() {
return {
migas: []
initial: [{ nombre: 'Categorías', href: '/productos' }],
migas: [{ nombre: 'Categorías', href: '/productos' }],
}
},
computed: {
visible: function() {
return this.migas.length > 0
},
migaActiva: function() {
return this.migas.length-1
migaActiva: function() {
return this.migas.length-1
}
},
mounted() {
@ -33,7 +34,7 @@
this.migas.push(miga);
});
Event.$on('migas-reset', () => {
this.migas = [];
this.migas = this.initial;
});
Event.$on('migas-pop', () => {
this.migas.pop();
@ -51,4 +52,4 @@ nav.breadcrumb.is-fixed-top {
height: 2.75rem;
z-index: 5;
}
</style>
</style>

70
resources/js/components/pedidos/ProductosContainer.vue
View file

@ -1,59 +1,29 @@
<template>
<div v-show="visible" class="column">
<div class="columns is-multiline is-mobile">
<producto-card v-for="(producto,i) in productos" :key="i" :producto="producto">
</producto-card><!-- END BLOCK COLUMN -->
</div><!-- END COLUMNS -->
<div v-show="visible" class="column">
<div class="columns is-multiline is-mobile">
<producto-card v-for="(producto,i) in this.productos" :key="i" :producto="producto">
</producto-card><!-- END BLOCK COLUMN -->
</div><!-- END COLUMNS -->
</div><!-- END CONTAINER -->
</template>
<script>
import ProductoCard from "./ProductoCard.vue";
import { mapState } from "vuex";
export default {
name: 'ProductosContainer',
components: {ProductoCard},
data() {
return {
productos: [],
visible: false,
paginar: 150,
valor: null,
filtro: null
}
},
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
},
}
}
components: { ProductoCard },
computed: {
...mapState('productos', ["productos", "filtro"]),
visible() {
return this.filtro !== null;
},
miga: function () {
return {
nombre: this.valor,
href: "#" + this.valor
}
}
},
}
</script>