refactor de chismosa

resources/js/app.js

@@ -5,6 +5,7 @@
  */
 import axios from 'axios';
 import animate from 'animate.css';
+import Vue from 'vue';
 window.Vue = require('vue');
 window.Event = new Vue();
 window.axios = axios;
@@ -17,32 +18,74 @@ 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))
-
 /**
- * Global data
+ * Constants
  */
-Vue.prototype.$gdc = null
+Vue.prototype.$rootMiga = {
-Vue.prototype.$pedido = 
+  nombre: "Categorías", 
-  {id: null, nombre: null, grupo_de_compra_id: null, created_at: null, updated_at: null}
+  href: "/productos"
-Vue.prototype.$rootMiga = 
+}
-  {nombre: "Categorías", href: "/productos"}
-
 /**
  * Global methods
  */
-Vue.prototype.$settearProducto = 
+Vue.prototype.$settearProducto = function(cantidad, id) { 
-  function(cantidad, id) { Event.$emit("sync-subpedido", this.cant, this.producto.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 class="container table-container chismosa-container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
+    <div>
-        <table v-show="this.subpedido.productos.length != 0" class="table is-fullwidth is-striped is-bordered">
+        <table v-show="productos.length != 0" class="chismosa-tabla table is-narrow is-striped is-bordered">
             <thead>
             <tr>
                 <th>Producto</th>
@@ -11,26 +11,35 @@
             </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>{{ this.subpedido.bonos_de_transporte }}</th>
+                <th>{{ cantidadBonosDeTransporte }}</th>
-                <th>{{ this.subpedido.subtotal_bonos_de_transporte }}</th>
+                <th>{{ totalBonosDeTransporte }}</th>
                 <th></th>
                 <th></th>
             </tr>
             <tr>
                 <th>Total total</th>
                 <th></th>
-                <th>{{ this.subpedido.total }}</th>
+                <th>{{ total }}</th>
                 <th></th>
                 <th></th>
             </tr>
             </tfoot>
             <tbody>
-            <producto-row v-for="producto in this.subpedido.productos" :producto="producto" :key="producto.id"></producto-row>
+            <producto-row v-for="producto in productos" :producto="producto" :key="producto.id"></producto-row>
             </tbody>
         </table>
-        <p class="has-text-centered" v-show="this.subpedido.productos.length == 0">Compa, todavía no agregaste nada a la chismosa.</p>
+        <p class="has-text-centered" v-show="productos.length == 0">
+            Compa, todavía no agregaste nada a la chismosa.
+        </p>
     </div>
 </template>
 
@@ -38,55 +47,36 @@
     export default {
         data() {
             return {
-                subpedido: {
+                subpedido: this.$root.pedido
-                    productos:[]
-                },
-                init: true,
-                visible: false
             }
         },
         computed: {
-            animation: function() {
+            productos: function() {
-                return this.visible ? "animate__slideInDown" : "animate__slideOutUp";
+                return this.$root.pedido.productos
+            },
+            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>
-    .chismosa-container {
+@media (max-width: 719px) {
-        top: 6.5rem;
+    .chismosa-tabla {
-        max-height: 21rem;
+        max-width: 80vw;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        width: 100%;
-        position: fixed;    
-        z-index: 15;
     }
+}
 </style>

resources/js/components/ChismosaDropdown.vue

@@ -0,0 +1,64 @@
+<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.$gdc,
+				gdc: this.$root.gdc,
 				passwordVisible: false,
 				passwordType: "password",
 			}
 		},
 		mounted() {
 			Event.$on('gdc-seleccionado', (gdc) =>  {
-				this.gdc = gdc;
+				this.$root.gdc = gdc;
 				this.visible = true;
 			});
 		},

resources/js/components/NavBar.vue

@@ -1,45 +1,36 @@
 <template>
-    <nav 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">
         <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">
+        <p class="navbar-item hide-below-1024">
           <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':isActive}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleState">
+        <a role="button" class="navbar-burger" :class="{'is-active':burgerActiva}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleBurger">
           <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">
-            <div v-if="subpedido.id != null" class="navbar-item field has-addons mt-2 mr-3">
+              <a class="button is-small has-text-dark-grey" @click.capture="buscar">
-              <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 id="cerrar-sesion" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
+                <a onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="text-a">
                     Cerrar sesión
                 </a>
                 <slot name="logout-form"></slot>
@@ -50,72 +41,26 @@
 </template>
 
 <script>
-    export default {
+import ChismosaDropdown from './ChismosaDropdown.vue';
-        data() {
+export default {
-          return {
+  components: { ChismosaDropdown },
-            isActive: false,
+  data() {
-            subpedido: this.$pedido,
+    return {
-            searchString: ""
+      burgerActiva: false,
-          }
+      searchString: "",
-        },
+    }
-        methods: {
+  },
-          toggleState() {
+  methods: {
-            this.isActive = !this.isActive
+    toggleBurger() {
-          },
+      this.burgerActiva = !this.burgerActiva
-          actualizarSubpedido(){
+    },
-            axios.get("/api/subpedidos/" + this.subpedido.id)
+    buscar() {
-                 .then(response => {
+      if (this.burgerActiva) this.toggleBurger()
-                    this.subpedido = response.data.data
+      Event.$emit("migas-setear-como-inicio", this.$rootMiga)
-                  });
+      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>
@@ -128,13 +73,19 @@ p.navbar-item:empty {
   z-index: 10;
 }
 
-#cerrar-sesion {
+.text-a {
   color: inherit;
 }
 
 @media (max-width: 1023px) {
-  .invert-in-burger {
+  .hide-below-1024 {
-    filter: invert(.5);
+    display: none !important;
+  }
+}
+
+@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 {
-		            this.$settearProducto(this.cant, this.producto.id);
+		            Event.$emit('sync-subpedido',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>{{ this.producto.pivot.total }}</td>
+            <td>{{ Math.ceil(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,7 +80,8 @@
 	      guardarSubpedidoEnSesion(subpedido) {
 	        axios.post("/subpedidos/guardar_sesion", {
 	          subpedido: subpedido
-	        }).then(response => {
+	        }).then(_ => {
+				Event.$emit('obtener-sesion')
 	          window.location.href = 'productos';
 	        });
 	      }

resources/sass/app.scss

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