Busqueda funcionando con productos.js

This commit is contained in:
Alejandro Tasistro 2025-05-21 18:23:35 -03:00
parent 0dc8f39f07
commit b76ecf57dc
2 changed files with 70 additions and 57 deletions

View file

@ -1,90 +1,101 @@
<template> <template>
<nav id="nav-bar" class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation"> <nav id="nav-bar" class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="https://mps.org.uy"> <a class="navbar-item" href="https://mps.org.uy">
<img src="/assets/logoMPS.png" height="28"> <img src="/assets/logoMPS.png" height="28">
</a> </a>
<!-- Styles nombre del barrio--> <!-- Styles nombre del barrio-->
<p class="navbar-item hide-below-1024"> <p class="navbar-item hide-below-1024">
<slot name="gdc"></slot> <slot name="gdc"></slot>
</p> </p>
<p class="navbar-item"> <p class="navbar-item">
<slot name="subpedido"></slot> <slot name="subpedido"></slot>
</p> </p>
<pedidos-chismosa-dropdown v-if="this.$root.pedido != null" class="hide-above-1023" id="mobile"></pedidos-chismosa-dropdown> <pedidos-chismosa-dropdown v-if="this.$root.pedido != null" class="hide-above-1023"
<a role="button" class="navbar-burger" :class="{'is-active':burgerActiva}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleBurger"> id="mobile"></pedidos-chismosa-dropdown>
<span aria-hidden="true"></span> <a role="button" class="navbar-burger" :class="{'is-active':burgerActiva}" aria-label="menu"
<span aria-hidden="true"></span> aria-expanded="false" data-target="nav-bar" @click="toggleBurger">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> <span aria-hidden="true"></span>
</div> <span aria-hidden="true"></span>
<div class="navbar-menu" :class="{'is-active':burgerActiva}"> </a>
<div class="navbar-end"> </div>
<div v-if="this.$root.pedido != null" class="navbar-item field has-addons mt-2 mr-3"> <div class="navbar-menu" :class="{'is-active':burgerActiva}">
<a class="button is-small has-text-dark-grey" @click.capture="buscar"> <div class="navbar-end">
<div v-if="this.$root.pedido != null" class="navbar-item field has-addons mt-2 mr-3">
<a class="button is-small has-text-dark-grey" @click.capture="buscar">
<span class="icon"> <span class="icon">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</span> </span>
</a> </a>
<input class="input is-small" type="text" placeholder="Harina" v-model="searchString" @keyup.enter="buscar" > <input class="input is-small" type="text" placeholder="Harina" v-model="searchString"
</div> @keyup.enter="buscar">
<pedidos-chismosa-dropdown v-if="this.$root.pedido != null" class="hide-below-1024" id="wide"></pedidos-chismosa-dropdown> </div>
<div class="block navbar-item"> <pedidos-chismosa-dropdown v-if="this.$root.pedido != null" class="hide-below-1024"
<a onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="text-a"> id="wide"></pedidos-chismosa-dropdown>
Cerrar sesión <div class="block navbar-item">
</a> <a onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
<slot name="logout-form"></slot> class="text-a">
Cerrar sesión
</a>
<slot name="logout-form"></slot>
</div>
</div> </div>
</div> </div>
</div>
</nav> </nav>
</template> </template>
<script> <script>
import ChismosaDropdown from '../pedidos/ChismosaDropdown.vue'; import ChismosaDropdown from '../pedidos/ChismosaDropdown.vue';
import {mapActions} from "vuex";
export default { export default {
components: { ChismosaDropdown }, components: {ChismosaDropdown},
data() { data() {
return { return {
burgerActiva: false, burgerActiva: false,
searchString: "", searchString: "",
} }
}, },
methods: { methods: {
toggleBurger() { ...mapActions('productos', ["filtrarProductos"]),
this.burgerActiva = !this.burgerActiva toggleBurger() {
this.burgerActiva = !this.burgerActiva
},
buscar() {
if (this.burgerActiva)
this.toggleBurger();
this.filtrarProductos({filtro: "nombre", valor: this.searchString});
Event.$emit('migas-agregar', {nombre: this.searchString});
}
}, },
buscar() {
if (this.burgerActiva) this.toggleBurger()
Event.$emit("filtrar-productos",'nombre',this.searchString)
}
},
}; };
</script> </script>
<style> <style>
p.navbar-item:empty { p.navbar-item:empty {
display: none; display: none;
} }
#nav-bar { #nav-bar {
z-index: 10; z-index: 10;
} }
.text-a { .text-a {
color: inherit; color: inherit;
} }
@media (max-width: 1023px) { @media (max-width: 1023px) {
.hide-below-1024 { .hide-below-1024 {
display: none !important; display: none !important;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.hide-above-1023 { .hide-above-1023 {
display: none !important; display: none !important;
} }
} }
</style> </style>

View file

@ -42,7 +42,9 @@ const actions = {
commit('setProductos', response.data.data); commit('setProductos', response.data.data);
}, },
async filtrarProductos({ commit }, { filtro, valor }) { async filtrarProductos({ commit }, { filtro, valor }) {
const response = await axios.get("/api/productos"); const response = await axios.get("/api/productos", {
params: { [filtro]: valor }
});
commit('setFiltro', { clave: filtro, valor: valor }); commit('setFiltro', { clave: filtro, valor: valor });
commit('setProductos', response.data.data); commit('setProductos', response.data.data);
} }