Busqueda funcionando con productos.js
This commit is contained in:
parent
0dc8f39f07
commit
b76ecf57dc
2 changed files with 70 additions and 57 deletions
|
@ -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>
|
||||||
|
|
4
resources/js/store/modules/productos.js
vendored
4
resources/js/store/modules/productos.js
vendored
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue