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

Merge pull request 'funcion/buscar-productos' (#17) from funcion/buscar-productos into master 

Reviewed-on: #17
This commit is contained in:
Rodrigo 2023-06-07 22:03:48 -03:00
parent d18de9e4c0 daa998c89e
commit 2426638414
9 changed files with 349 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

280
public/js/app.js vendored
View File

@ -2058,10 +2058,7 @@ __webpack_require__.r(__webpack_exports__);
return {
categorias: null,
visible: true,
miga: {
nombre: "Categorías",
href: "/productos"
}
miga: this.$rootMiga
};
},
mounted: function mounted() {
@ -2071,11 +2068,14 @@ __webpack_require__.r(__webpack_exports__);
_this.categorias = response.data;
});
Event.$emit("migas-setear-como-inicio", this.miga);
Event.$on("categoria-seleccionada", function (_) {
return _this.visible = false;
});
},
methods: {
seleccionarCategoria: function seleccionarCategoria(categoria) {
this.visible = false;
Event.$emit("categoria-seleccionada", categoria);
Event.$emit("categoria-seleccionada", 'categoria', categoria);
}
}
});
@ -2215,7 +2215,7 @@ __webpack_require__.r(__webpack_exports__);
data: function data() {
return {
visible: false,
gdc: null,
gdc: this.$gdc,
passwordVisible: false,
passwordType: "password"
};
@ -2341,11 +2341,26 @@ __webpack_require__.r(__webpack_exports__);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ __webpack_exports__["default"] = ({
data: function data() {
return {
isActive: false,
subpedido: null
subpedido: this.$pedido,
searchString: ""
};
},
methods: {
@ -2360,7 +2375,12 @@ __webpack_require__.r(__webpack_exports__);
});
},
toggleChismosa: function toggleChismosa() {
if (this.isActive) this.toggleState();
Event.$emit("toggle-chismosa");
},
buscar: function buscar() {
Event.$emit("migas-setear-como-inicio", this.$rootMiga);
Event.$emit("categoria-seleccionada", 'nombre', this.searchString);
}
},
mounted: function mounted() {
@ -3113,7 +3133,7 @@ __webpack_require__.r(__webpack_exports__);
},
agregarProducto: function agregarProducto() {
if (this.cant < 0) alert("No se puede agregar cantidades negativas");else if (!Number.isInteger(this.cant)) alert("Las cantidades deben ser números enteros");else {
Event.$emit("sync-subpedido", this.cant, this.producto.id);
this.$settearProducto(this.cant, this.producto.id);
this.cerrar();
}
}
@ -3220,28 +3240,27 @@ __webpack_require__.r(__webpack_exports__);
return {
productos: [],
visible: false,
categoria: null,
paginar: 150
paginar: 150,
valor: null,
filtro: null
};
},
computed: {
miga: function miga() {
return {
nombre: this.categoria,
href: "#" + this.categoria
nombre: this.valor,
href: "#" + this.valor
};
}
},
mounted: function mounted() {
var _this = this;
Event.$on('categoria-seleccionada', function (categoria) {
_this.categoria = categoria;
Event.$on('categoria-seleccionada', function (filtro, valor) {
_this.filtro = filtro;
_this.valor = valor;
axios.get("/api/productos", {
params: {
categoria: _this.categoria,
paginar: _this.paginar
}
params: _this.params(filtro, valor)
}).then(function (response) {
_this.productos = response.data.data;
});
@ -3252,6 +3271,13 @@ __webpack_require__.r(__webpack_exports__);
methods: {
seleccionarProducto: function seleccionarProducto(producto) {
Event.$emit("producto-seleccionado", producto);
},
params: function params(filtro, valor) {
var params = {
paginar: this.paginar
};
params[filtro] = valor;
return params;
}
}
});
@ -3542,7 +3568,7 @@ exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loa
// module
exports.push([module.i, "\np.navbar-item:empty {\n display: none;\n}\n\n", ""]);
exports.push([module.i, "\np.navbar-item:empty {\n display: none;\n}\n@media (max-width: 1023px) {\n.invert-in-burger {\n filter: invert(.5);\n}\n.margin-in-burger {\n margin-left: .75rem;\n margin-right: 1.5rem;\n}\n}\n", ""]);
// exports
@ -3561,7 +3587,7 @@ exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loa
// module
exports.push([module.i, "\n.breadcrumb a {\n\tcolor: #cc0f35;\n}\nnav.breadcrumb.is-fixed-top {\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\tz-index: 30;\n\ttop: 3.25rem;\n\theight: 3.25rem;\n}\n", ""]);
exports.push([module.i, "\n.breadcrumb a {\n\tcolor: #cc0f35;\n}\nnav.breadcrumb.is-fixed-top {\n\tleft: 0;\n\tposition: fixed;\n\tright: 0;\n\ttop: 3.25rem;\n\theight: 3.25rem;\n\tz-index: -10;\n}\n", ""]);
// exports
@ -5047,10 +5073,11 @@ var render = function () {
_c(
"div",
{ staticClass: "columns is-multiline is-mobile" },
_vm._l(_vm.categorias, function (catego) {
_vm._l(_vm.categorias, function (categoria, i) {
return _c(
"div",
{
key: i,
staticClass:
"block column is-one-quarter-desktop is-one-third-tablet is-half-mobile",
},
@ -5062,7 +5089,7 @@ var render = function () {
staticStyle: { height: "100%" },
on: {
"!click": function ($event) {
return _vm.seleccionarCategoria(catego)
return _vm.seleccionarCategoria(categoria)
},
},
},
@ -5078,7 +5105,7 @@ var render = function () {
[
_c("p", {
staticClass: "title is-6",
domProps: { textContent: _vm._s(catego) },
domProps: { textContent: _vm._s(categoria) },
}),
]
),
@ -5466,42 +5493,9 @@ var render = function () {
_c("div", { staticClass: "navbar-brand" }, [
_vm._m(0),
_vm._v(" "),
_c(
"p",
{ staticClass: "navbar-item", staticStyle: { margin: "0 auto" } },
[_vm._t("subpedido")],
2
),
_c("p", { staticClass: "navbar-item" }, [_vm._t("gdc")], 2),
_vm._v(" "),
_c(
"a",
{
staticClass: "navbar-item",
attrs: { href: "#chismosa" },
on: {
"!click": function ($event) {
return _vm.toggleChismosa.apply(null, arguments)
},
},
},
[
_c("img", {
staticStyle: { padding: "0 0.3em" },
attrs: { src: "/assets/chismosa.png", height: "28" },
}),
_vm._v(" "),
_c("p", { staticStyle: { margin: "0 auto", color: "white" } }, [
_vm._v("$ "),
_c("span", {
domProps: {
textContent: _vm._s(
_vm.subpedido == null ? 0 : _vm.subpedido.total
),
},
}),
]),
]
),
_c("p", { staticClass: "navbar-item" }, [_vm._t("subpedido")], 2),
_vm._v(" "),
_c(
"a",
@ -5512,7 +5506,7 @@ var render = function () {
role: "button",
"aria-label": "menu",
"aria-expanded": "false",
"data-target": "navbarBasicExample",
"data-target": "nav-bar",
},
on: { click: _vm.toggleState },
},
@ -5531,31 +5525,108 @@ var render = function () {
{
staticClass: "navbar-menu",
class: { "is-active": _vm.isActive },
attrs: { id: "navbarBasicExample" },
attrs: { id: "nav-bar" },
},
[
_c(
"div",
{ staticClass: "navbar-start has-text-right-mobile" },
[
_c("p", { staticClass: "navbar-item" }, [_vm._t("gdc")], 2),
_vm._v(" "),
_c(
"a",
{
staticClass: "navbar-item",
attrs: {
onclick:
"event.preventDefault();\n document.getElementById('logout-form').submit();",
_c("div", { staticClass: "navbar-end" }, [
_vm.subpedido.id != null
? _c(
"div",
{
staticClass:
"control mt-auto mb-auto has-icons-left margin-in-burger",
},
},
[_vm._v("\n Cerrar sesión\n ")]
),
_vm._v(" "),
_vm._t("logout-form"),
],
2
),
[
_c("input", {
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.searchString,
expression: "searchString",
},
],
staticClass: "input is-small",
attrs: { type: "text", placeholder: "Harina" },
domProps: { value: _vm.searchString },
on: {
keyup: function ($event) {
if (
!$event.type.indexOf("key") &&
_vm._k(
$event.keyCode,
"enter",
13,
$event.key,
"Enter"
)
) {
return null
}
return _vm.buscar.apply(null, arguments)
},
input: function ($event) {
if ($event.target.composing) {
return
}
_vm.searchString = $event.target.value
},
},
}),
_vm._v(" "),
_vm._m(1),
]
)
: _vm._e(),
_vm._v(" "),
_vm.subpedido.id != null
? _c(
"a",
{
staticClass: "navbar-item",
attrs: { href: "#chismosa" },
on: {
"!click": function ($event) {
return _vm.toggleChismosa.apply(null, arguments)
},
},
},
[
_vm._m(2),
_vm._v(" "),
_c("span", {
domProps: {
textContent: _vm._s(
"$" +
(_vm.subpedido == null ? 0 : _vm.subpedido.total)
),
},
}),
]
)
: _vm._e(),
_vm._v(" "),
_c(
"div",
{ staticClass: "block navbar-item" },
[
_c(
"a",
{
staticClass: "button",
attrs: {
onclick:
"event.preventDefault(); document.getElementById('logout-form').submit();",
},
},
[_vm._v("\n Cerrar sesión\n ")]
),
_vm._v(" "),
_vm._t("logout-form"),
],
2
),
]),
]
),
]
@ -5572,6 +5643,29 @@ var staticRenderFns = [
[_c("img", { attrs: { src: "/assets/logoMPS.png", height: "28" } })]
)
},
function () {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("span", { staticClass: "icon is-small is-left" }, [
_c("i", { staticClass: "fas fa-search" }),
])
},
function () {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"span",
{ staticClass: "icon is-small mr-1", attrs: { id: "chismosa" } },
[
_c("img", {
staticClass: "invert-in-burger",
attrs: { src: "/assets/chismosa.png" },
}),
]
)
},
]
render._withStripped = true
@ -6597,10 +6691,11 @@ var render = function () {
_c(
"div",
{ staticClass: "columns is-multiline is-mobile" },
_vm._l(_vm.productos, function (producto) {
_vm._l(_vm.productos, function (producto, i) {
return _c(
"div",
{
key: i,
staticClass:
"block column is-one-quarter-desktop is-one-third-tablet is-half-mobile",
},
@ -19219,12 +19314,33 @@ var files = __webpack_require__("./resources/js sync recursive \\.vue$/");
files.keys().map(function (key) {
return Vue.component(key.split('/').pop().split('.')[0], files(key)["default"]);
});
/**
* Global data
*/
Vue.prototype.$rootMiga = {
nombre: "Categorías",
href: "/productos"
};
Vue.prototype.$gdc = null;
Vue.prototype.$pedido = {
id: null,
nombre: null,
grupo_de_compra_id: null,
created_at: null,
updated_at: null
};
Vue.prototype.$settearProducto = function (cantidad, id) {
Event.$emit("sync-subpedido", this.cant, this.producto.id);
};
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
var app = new Vue({
el: '#root'
});

16
resources/js/app.js vendored
View File

@ -21,6 +21,21 @@ window.bulmaToast = require('bulma-toast');
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
/**
* Global data
*/
Vue.prototype.$gdc = null
Vue.prototype.$pedido =
{id: null, nombre: null, grupo_de_compra_id: null, created_at: null, updated_at: null}
Vue.prototype.$rootMiga =
{nombre: "Categorías", href: "/productos"}
/**
* Global methods
*/
Vue.prototype.$settearProducto =
function(cantidad, id) { Event.$emit("sync-subpedido", this.cant, this.producto.id) }
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
@ -30,3 +45,4 @@ files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(
const app = new Vue({
el: '#root'
});

17
resources/js/components/CategoriasContainer.vue
View File

@ -1,12 +1,12 @@
<template>
<div v-show="visible" class="container">
<div class="columns is-multiline is-mobile">
<div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
<div @click.capture="seleccionarCategoria(catego)" class="card" style="height:100%" >
<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="catego"></p>
<p class="title is-6" v-text="categoria"></p>
</div>
</div>
</div>
@ -21,23 +21,20 @@
data() {
return {
categorias: null,
visible: true,
miga: {
nombre: "Categorías",
href: "/productos"
}
visible: true
}
},
mounted() {
axios.get("/api/categorias").then(response => {
this.categorias = response.data;
});
Event.$emit("migas-setear-como-inicio",this.miga);
Event.$emit("migas-setear-como-inicio", this.$rootMiga);
Event.$on("filtrar-productos", (_) => this.visible = false)
},
methods: {
seleccionarCategoria(categoria) {
this.visible = false;
Event.$emit("categoria-seleccionada",categoria);
Event.$emit("filtrar-productos",'categoria',categoria);
}
}
}

2
resources/js/components/Login.vue
View File

@ -28,7 +28,7 @@
data() {
return {
visible: false,
gdc: null,
gdc: this.$gdc,
passwordVisible: false,
passwordType: "password",
}

145
resources/js/components/NavBar.vue
View File

@ -1,31 +1,49 @@
<template>
<nav class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://mps.org.uy">
<img src="/assets/logoMPS.png" height="28">
</a>
<p style="margin:0 auto" class="navbar-item"><slot name="subpedido"></slot></p>
<a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
<img style="padding:0 0.3em;" src="/assets/chismosa.png" height="28">
<p style="margin:0 auto; color:white">$ <span v-text="subpedido == null ? 0 : subpedido.total"></span></p>
</a>
<a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="toggleState">
<!-- Styles nombre del barrio-->
<p class="navbar-item">
<slot name="gdc"></slot>
</p>
<p class="navbar-item">
<slot name="subpedido"></slot>
</p>
<a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleState">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}">
<div class="navbar-start has-text-right-mobile">
<!-- Styles nombre del barrio-->
<p class="navbar-item"><slot name="gdc"></slot></p>
<a class="navbar-item"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Cerrar sesión
<div id="nav-bar" class="navbar-menu" :class="{'is-active':isActive}">
<div class="navbar-end">
<div v-if="subpedido.id != null" class="navbar-item field has-addons mt-2 mr-3">
<a class="button is-small" @click.capture="buscar">
<span class="icon">
<i class="fas fa-search"></i>
</span>
</a>
<input class="input is-small" type="text" placeholder="Harina" v-model="searchString" @keyup.enter="buscar" >
</div>
<a v-if="subpedido.id != null" class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
<span class="icon is-small mr-1" id="chismosa">
<img class="invert-in-burger" src="/assets/chismosa.png">
</span>
<span v-text="'$' + (subpedido == null ? 0 : subpedido.total)"></span>
</a>
<slot name="logout-form"></slot>
<div class="block navbar-item">
<a id="cerrar-sesion" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
Cerrar sesión
</a>
<slot name="logout-form"></slot>
</div>
</div>
</div>
</nav>
@ -34,35 +52,43 @@
<script>
export default {
data() {
return {
isActive: false,
subpedido: null
}
return {
isActive: false,
subpedido: this.$pedido,
searchString: ""
}
},
methods: {
toggleState() {
this.isActive = !this.isActive;
},
actualizarSubpedido(){
axios.get("/api/subpedidos/" + this.subpedido.id)
.then(response => {
this.subpedido = response.data.data;
toggleState() {
this.isActive = !this.isActive
},
actualizarSubpedido(){
axios.get("/api/subpedidos/" + this.subpedido.id)
.then(response => {
this.subpedido = response.data.data
});
},
toggleChismosa(){
if (this.isActive) this.toggleState()
Event.$emit("toggle-chismosa")
},
buscar() {
if (this.isActive) this.toggleState()
Event.$emit("migas-setear-como-inicio", this.$rootMiga)
Event.$emit("filtrar-productos",'nombre',this.searchString)
}
},
mounted() {
axios.get("/subpedidos/obtener_sesion").then(response => {
this.subpedido = response.data.subpedido
this.actualizarSubpedido()
});
},
toggleChismosa(){
Event.$emit("toggle-chismosa");
}
}, mounted() {
axios.get("/subpedidos/obtener_sesion").then(response => {
this.subpedido = response.data.subpedido;
this.actualizarSubpedido()
});
//Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente
Event.$on('sync-subpedido', (cantidad, id) => {
axios.post("/api/subpedidos/"+this.subpedido.id+"/sync", {
//Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente
Event.$on('sync-subpedido', (cantidad, id) => {
axios.post("/api/subpedidos/"+this.subpedido.id+"/sync", {
cantidad: cantidad,
producto_id: id
}).then((response) => {
}).then((response) => {
this.subpedido = response.data.data;
Event.$emit('sync-chismosa',this.subpedido);
window.bulmaToast.toast({
@ -72,22 +98,22 @@
position: 'bottom-center',
animate: { in: 'fadeIn', out: 'fadeOut' }
});
});
});
Event.$on('aprobacion-subpedido', (subpedidoId, aprb) => {
});
});
Event.$on('aprobacion-subpedido', (subpedidoId, aprb) => {
axios.post("/api/admin/subpedidos/" + subpedidoId + "/aprobacion", {
aprobacion: aprb
aprobacion: aprb
}).then((response) => {
Event.$emit('sync-aprobacion', response.data.data);
window.bulmaToast.toast({
message: 'Pedido ' + (aprb ? 'aprobado' : 'desaprobado') + ' exitosamente',
duration: 1000,
type: 'is-danger',
position: 'bottom-center',
animate: { in: 'fadeIn', out: 'fadeOut' }
})
Event.$emit('sync-aprobacion', response.data.data);
window.bulmaToast.toast({
message: 'Pedido ' + (aprb ? 'aprobado' : 'desaprobado') + ' exitosamente',
duration: 1000,
type: 'is-danger',
position: 'bottom-center',
animate: { in: 'fadeIn', out: 'fadeOut' }
})
})
})
})
}
};
</script>
@ -95,7 +121,20 @@
<style>
p.navbar-item:empty {
display: none;
display: none;
}
#nav-bar {
z-index: 10;
}
#cerrar-sesion {
color: inherit;
}
@media (max-width: 1023px) {
.invert-in-burger {
filter: invert(.5);
}
}
</style>

26
resources/js/components/NavMigas.vue
View File

@ -1,7 +1,12 @@
<template>
<div class="notification">
{{message}}
</div>
<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"
:class="{'has-text-danger': i != migaActiva}"></a>
</li>
</ul>
</nav>
</template>
<script>
@ -14,7 +19,10 @@
computed: {
visible: function() {
return this.migas.length > 0
}
},
migaActiva: function() {
return this.migas.length-1
}
},
mounted() {
Event.$on('migas-setear-como-inicio', (miga) => {
@ -35,16 +43,12 @@
</script>
<style>
.breadcrumb a {
color: #cc0f35;
}
nav.breadcrumb.is-fixed-top {
left: 0;
position: fixed;
left: 0;
right: 0;
z-index: 30;
top: 3.25rem;
height: 3.25rem;
height: 2.75rem;
z-index: 5;
}
</style>

2
resources/js/components/ProductoModal.vue
View File

@ -83,7 +83,7 @@
if (this.cant < 0) alert("No se puede agregar cantidades negativas")
else if (!Number.isInteger(this.cant)) alert("Las cantidades deben ser números enteros")
else {
Event.$emit("sync-subpedido", this.cant, this.producto.id);
this.$settearProducto(this.cant, this.producto.id);
this.cerrar();
}
}

33
resources/js/components/ProductosContainer.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-show="visible" class="container">
<div class="columns is-multiline is-mobile">
<div v-for="producto in productos" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
<div v-for="(producto,i) in productos" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
<div @click.capture="seleccionarProducto(producto)" class="card" style="height:100%">
<div class="card-image">
<figure class="image is-4by3">
@ -30,32 +30,30 @@
</template>
<script>
export default {
data() {
export default {
data() {
return {
productos: [],
visible: false,
categoria: null,
paginar: 150
paginar: 150,
valor: null,
filtro: null
}
},
computed: {
miga: function(){
return {
nombre: this.categoria,
href: "#" + this.categoria
nombre: this.valor,
href: "#" + this.valor
}
}
},
mounted() {
Event.$on('categoria-seleccionada', (categoria) => {
this.categoria = categoria;
Event.$on('filtrar-productos', (filtro,valor) => {
this.filtro = filtro
this.valor = valor
axios.get("/api/productos", {
params: {
categoria: this.categoria,
paginar: this.paginar
}
params: this.params(filtro,valor)
}).then(response => {
this.productos = response.data.data;
});
@ -66,7 +64,12 @@
methods: {
seleccionarProducto(producto) {
Event.$emit("producto-seleccionado",producto);
}
},
params: function(filtro,valor) {
let params = { paginar: this.paginar }
params[filtro] = valor
return params
}
}
}
</script>

8
resources/views/layouts/app.blade.php
View File

@ -28,13 +28,7 @@
</form>
</template>
</nav-bar>
<nav-migas inline-template>
<nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
<ul>
<li v-for="(miga, i) in migas" v-bind:class="i==migas.length-1 ? 'is-active' : ''"><a :href="miga.href" v-text="miga.nombre"></a></li>
</ul>
</nav>
</nav-migas>
<nav-migas></nav-migas>
<main id="main" class="py-4 has-top-padding">
@yield('content')