resources/js/app.js

@@ -5,7 +5,6 @@
  */
 import axios from 'axios';
 import animate from 'animate.css';
-import Vue from 'vue';
 window.Vue = require('vue');
 window.Event = new Vue();
 window.axios = axios;
@@ -18,74 +17,32 @@ window.bulmaToast = require('bulma-toast');
  *
  * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
  */
+
 const files = require.context('./', true, /\.vue$/i)
 files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
+
 /**
- * Constants
+ * Global data
  */
-Vue.prototype.$rootMiga = {
+Vue.prototype.$gdc = null
-  nombre: "Categorías", 
+Vue.prototype.$pedido = 
-  href: "/productos"
+  {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) { 
+Vue.prototype.$settearProducto = 
-  Event.$emit("sync-subpedido", this.cant, this.producto.id) 
+  function(cantidad, id) { Event.$emit("sync-subpedido", this.cant, this.producto.id) }
-}
-Vue.prototype.$toast = function(mensaje) {
-  return window.bulmaToast.toast({
-    message: mensaje,
-    duration: 1000,
-    type: 'is-danger',
-    position: 'bottom-center',
-    animate: { in: 'fadeIn', out: 'fadeOut' }
-  });
-}
 
 /**
  * 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.
  */
+
 const app = new Vue({
-    el: '#root',
+    el: '#root'
-    data() {
-      return {
-        gdc: null,
-        pedido: null
-      }
-    },
-    mounted() {
-      Event.$on('obtener-sesion', () => {
-        axios.get('/subpedidos/obtener_sesion')
-          .then(response => {
-            this.pedido = response.data.subpedido.id
-            axios.get('/api/subpedidos/' + this.pedido)
-              .then(response => {
-                this.pedido = response.data.data
-                this.gdc = this.pedido.grupo_de_compra.id
-              })
-          })
-      })
-      Event.$on('sync-subpedido', (cantidad, id) => {
-          axios.post("/api/subpedidos/" + this.pedido.id + "/sync", {
-            cantidad: cantidad,
-            producto_id: id
-          }).then((response) => {
-            this.pedido = response.data.data
-            this.$toast('Pedido actualizado exitosamente')
-          });
-      });
-      Event.$on('aprobacion-subpedido', (subpedidoId, aprobado) => {
-        axios.post("/api/admin/subpedidos/" + subpedidoId + "/aprobacion", {
-          aprobacion: aprobado
-        }).then((response) => {
-          Event.$emit('sync-aprobacion', response.data.data);
-          this.$toast('Pedido ' + (aprobado ? 'aprobado' : 'desaprobado') + ' exitosamente')
-        })
-      })
-      Event.$emit('obtener-sesion')
-    },
 });
 

resources/js/components/Chismosa.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
+    <div class="container table-container chismosa-container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
-        <table v-show="productos.length != 0" class="chismosa-tabla table is-narrow is-striped is-bordered">
+        <table v-show="this.subpedido.productos.length != 0" class="table is-fullwidth is-striped is-bordered">
             <thead>
             <tr>
                 <th>Producto</th>
@@ -11,35 +11,26 @@
             </tr>
             </thead>
             <tfoot>
-            <tr>
-                <th><abbr title="Bonos Solidarios">B. Solidarios</abbr></th>
-                <th>{{ cantidadBonos }}</th>
-                <th>{{ totalBonos }}</th>
-                <th></th>
-                <th></th>
-            </tr>
             <tr>
                 <th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
-                <th>{{ cantidadBonosDeTransporte }}</th>
+                <th>{{ this.subpedido.bonos_de_transporte }}</th>
-                <th>{{ totalBonosDeTransporte }}</th>
+                <th>{{ this.subpedido.subtotal_bonos_de_transporte }}</th>
                 <th></th>
                 <th></th>
             </tr>
             <tr>
                 <th>Total total</th>
                 <th></th>
-                <th>{{ total }}</th>
+                <th>{{ this.subpedido.total }}</th>
                 <th></th>
                 <th></th>
             </tr>
             </tfoot>
             <tbody>
-            <producto-row v-for="producto in productos" :producto="producto" :key="producto.id"></producto-row>
+            <producto-row v-for="producto in this.subpedido.productos" :producto="producto" :key="producto.id"></producto-row>
             </tbody>
         </table>
-        <p class="has-text-centered" v-show="productos.length == 0">
+        <p class="has-text-centered" v-show="this.subpedido.productos.length == 0">Compa, todavía no agregaste nada a la chismosa.</p>
-            Compa, todavía no agregaste nada a la chismosa.
-        </p>
     </div>
 </template>
 
@@ -47,36 +38,55 @@
     export default {
         data() {
             return {
-                subpedido: this.$root.pedido
+                subpedido: {
+                    productos:[]
+                },
+                init: true,
+                visible: false
             }
         },
         computed: {
-            productos: function() {
+            animation: function() {
-                return this.$root.pedido.productos
+                return this.visible ? "animate__slideInDown" : "animate__slideOutUp";
-            },
-            cantidadBonosDeTransporte: function() {
-                return this.$root.pedido.subtotal_bonos_de_transporte / 15
-            },
-            totalBonosDeTransporte: function() {
-                return this.$root.pedido.subtotal_bonos_de_transporte
-            },
-            cantidadBonos: function() {
-                return this.$root.pedido.subtotal_bonos / 20
-            },
-            totalBonos: function() {
-                return this.$root.pedido.subtotal_bonos
-            },
-            total: function() {
-                return this.$root.pedido.total
             }
         },
+        beforeCreate() {
+            axios.get("/subpedidos/obtener_sesion").then(response => {
+                this.subpedido = response.data.subpedido;
+                this.fetchSubpedido();
+            });
+        },
+        methods: {
+            fetchSubpedido() {
+                axios.get("/api/subpedidos/" + this.subpedido.id)
+                    .then(response => {
+                        this.subpedido = response.data.data;
+                    });
+            }
+        },
+        mounted() {
+            Event.$on('sync-chismosa', (subpedido) =>  {
+                this.subpedido = subpedido;
+            });
+            Event.$on('toggle-chismosa', () => {
+                this.init = false;
+                this.visible = !this.visible;
+                var main = document.getElementById("main");
+                if (this.visible) main.classList.add("chisma-abierta");
+                else main.classList.remove("chisma-abierta");
+            });
+        }
     }
 </script>
 
 <style>
-@media (max-width: 719px) {
+    .chismosa-container {
-    .chismosa-tabla {
+        top: 6.5rem;
-        max-width: 80vw;
+        max-height: 21rem;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        width: 100%;
+        position: fixed;    
+        z-index: 15;
     }
-}
 </style>

resources/js/components/ChismosaDropdown.vue

@@ -1,64 +0,0 @@
-<template>
-    <div class="dropdown is-right navbar-item" :class="{'is-active':activa}">
-        <div class="dropdown-trigger">
-            <a class="text-a" aria-haspopup="true" :aria-controls="id" @click.capture="toggle">
-            <span class="icon is-small mr-1">
-                <img src="/assets/chismosa.png">
-            </span>
-            <span v-text="'$' + this.$root.pedido.total"></span>
-            </a>
-        </div>
-        <div class="dropdown-menu chismosa-menu" :id="id" role="menu">
-            <div class="dropdown-content">
-                <div class="dropdown-item">
-                    <chismosa></chismosa>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import Chismosa from './Chismosa.vue'
-export default {
-    components: {
-        Chismosa
-    },
-    props: {
-        id: {
-            type: String,
-            required: true
-        }
-    },
-    data() {
-        return {
-            activa: false
-        }
-    },
-    methods: {
-        toggle() {
-            this.activa = !this.activa
-        },
-    },
-}
-</script>
-
-<style>
-
-@media (max-width: 719px) {
-    .chismosa-menu {
-        vertical-align: top;
-        overflow-y: auto;
-        max-height: 75vh;
-        max-width: 100vw;
-    }
-}
-
-@media (min-width: 720px) {
-    .chismosa-menu {
-        vertical-align: top;
-        overflow-y: auto;
-        max-height: 75vh;
-    }
-}
-</style>

resources/js/components/Login.vue

@@ -28,14 +28,14 @@
 		data() {
 			return {
 				visible: false,
-				gdc: this.$root.gdc,
+				gdc: this.$gdc,
 				passwordVisible: false,
 				passwordType: "password",
 			}
 		},
 		mounted() {
 			Event.$on('gdc-seleccionado', (gdc) =>  {
-				this.$root.gdc = gdc;
+				this.gdc = gdc;
 				this.visible = true;
 			});
 		},

resources/js/components/NavBar.vue

@@ -1,36 +1,45 @@
 <template>
-    <nav id="nav-bar" class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
+    <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>
         <!-- Styles nombre del barrio-->
-        <p class="navbar-item hide-below-1024">
+        <p class="navbar-item">
           <slot name="gdc"></slot>
         </p>
         <p class="navbar-item">
           <slot name="subpedido"></slot>
         </p>
-        <chismosa-dropdown class="hide-above-1023"></chismosa-dropdown>
+        
-        <a role="button" class="navbar-burger" :class="{'is-active':burgerActiva}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleBurger">
+        <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 class="navbar-menu" :class="{'is-active':burgerActiva}">
+
+      <div id="nav-bar" class="navbar-menu" :class="{'is-active':isActive}">
         <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">
+            <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>
-            <chismosa-dropdown v-if="this.$root.pedido != null" class="hide-below-1024"></chismosa-dropdown>
+
+            <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>
             <div class="block navbar-item">
-                <a onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="text-a">
+                <a id="cerrar-sesion" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                     Cerrar sesión
                 </a>
                 <slot name="logout-form"></slot>
@@ -41,26 +50,72 @@
 </template>
 
 <script>
-import ChismosaDropdown from './ChismosaDropdown.vue';
+    export default {
-export default {
+        data() {
-  components: { ChismosaDropdown },
+          return {
-  data() {
+            isActive: false,
-    return {
+            subpedido: this.$pedido,
-      burgerActiva: false,
+            searchString: ""
-      searchString: "",
+          }
-    }
+        },
-  },
+        methods: {
-  methods: {
+          toggleState() {
-    toggleBurger() {
+            this.isActive = !this.isActive
-      this.burgerActiva = !this.burgerActiva
+          },
-    },
+          actualizarSubpedido(){
-    buscar() {
+            axios.get("/api/subpedidos/" + this.subpedido.id)
-      if (this.burgerActiva) this.toggleBurger()
+                 .then(response => {
-      Event.$emit("migas-setear-como-inicio", this.$rootMiga)
+                    this.subpedido = response.data.data
-      Event.$emit("filtrar-productos",'nombre',this.searchString)
+                  });
-    }
+          },
-  },
+          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()
+          });
+          //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) => {
+                this.subpedido = response.data.data;
+                Event.$emit('sync-chismosa',this.subpedido);
+                window.bulmaToast.toast({
+                  message: 'Pedido actualizado exitosamente',
+                  duration: 1000,
+                  type: 'is-danger',
+                  position: 'bottom-center',
+                  animate: { in: 'fadeIn', out: 'fadeOut' }
+                });
+              });
+          });
+          Event.$on('aprobacion-subpedido', (subpedidoId, aprb) => {
+            axios.post("/api/admin/subpedidos/" + subpedidoId + "/aprobacion", {
+              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' }
+              })
+            })
+          })
+      }
+    };
 </script>
 
 <style>
@@ -73,19 +128,13 @@ p.navbar-item:empty {
   z-index: 10;
 }
 
-.text-a {
+#cerrar-sesion {
   color: inherit;
 }
 
 @media (max-width: 1023px) {
-  .hide-below-1024 {
+  .invert-in-burger {
-    display: none !important;
+    filter: invert(.5);
-  }
-}
-
-@media (min-width: 1024px) {
-  .hide-above-1023 {
-    display: none !important;
   }
 }
 </style>

resources/js/components/ProductoModal.vue

@@ -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();
 		        }
 		    }

resources/js/components/ProductoRow.vue

@@ -2,7 +2,7 @@
 	<tr>
             <td>{{ this.producto.nombre }}</td>
             <td>{{ this.producto.pivot.cantidad }}</td>
-            <td>{{ Math.ceil(this.producto.pivot.total) }}</td>
+            <td>{{ this.producto.pivot.total }}</td>
             <td><button @click.capture="seleccionarProducto(producto)" class="button is-warning">
                 <span class="icon">
                     <i class="fas fa-edit"></i>

resources/js/components/SubpedidoSelect.vue

@@ -69,8 +69,8 @@
 	  				nombre: this.subpedido,
 	  				grupo_de_compra_id: this.gdcid
 	  			}).then(response => {
-					//se creo el subpedido
+	          //se creo el subpedido
-					this.elegirSubpedido(response.data);
+	          this.elegirSubpedido(response.data);
 	  			});
 	  		},
 	      elegirSubpedido(subpedido){
@@ -80,8 +80,7 @@
 	      guardarSubpedidoEnSesion(subpedido) {
 	        axios.post("/subpedidos/guardar_sesion", {
 	          subpedido: subpedido
-	        }).then(_ => {
+	        }).then(response => {
-				Event.$emit('obtener-sesion')
 	          window.location.href = 'productos';
 	        });
 	      }

resources/sass/app.scss

@@ -25,6 +25,10 @@ table.table td {
 	z-index: 30;
 }
 
+main.chisma-abierta {
+	padding-top: 25.5rem !important;
+}
+
 #main {
 	height: 100%;
 }