resources/js/app.js

@@ -111,7 +111,6 @@ const app = new Vue({
           }).then((response) => {
             this.pedido = response.data.data
             this.$toast('Pedido actualizado exitosamente')
-            Event.$emit("pedido-actualizado");
           });
       });
       // Actualizar monto y notas de devoluciones

resources/js/components/CategoriasContainer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="visible" class="column">
+    <div v-show="visible" class="block ml-3 mr-3">
       <div class="columns is-multiline is-mobile">
         <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%" >

resources/js/components/Chismosa.vue

@@ -1,7 +1,6 @@
 <template>
-    <div class="column is-one-third full-height">
+    <div>
-        <div class="fixed-right">
+        <table v-show="productos.length != 0" class="chismosa-tabla table is-narrow is-striped is-bordered">
-            <table v-show="mostrar_tabla" class="table is-striped is-bordered tabla-chismosa">
             <thead>
             <tr>
                 <th>Producto</th>
@@ -14,15 +13,15 @@
             <tfoot>
             <tr>
                 <th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
-                    <th class="has-text-right">{{ cantidadBonosDeTransporte() }}</th>
+                <th class="has-text-right">{{ cantidadBonosDeTransporte }}</th>
-                    <th class="has-text-right">{{ totalBonosDeTransporte() }}</th>
+                <th class="has-text-right">{{ totalBonosDeTransporte }}</th>
                 <th></th>
                 <th></th>
             </tr>
             <tr v-if="this.$root.devoluciones">
                 <th><p>Devoluciones</p></th>
-                    <td><p :title="notasDevoluciones()">...</p></td>
+                <td><p :title="this.$root.pedido.devoluciones_notas">...</p></td>
-                    <th class="has-text-right">-{{ devoluciones() }}</th>
+                <th class="has-text-right">-{{ this.$root.pedido.devoluciones_total }}</th>
                 <th>
                     <button @click.capture="modificarDevoluciones()" class="button is-warning">
                         <span class="icon">
@@ -35,69 +34,49 @@
             <tr>
                 <th>Total total</th>
                 <th></th>
-                    <th class="has-text-right">{{ total() }}</th>
+                <th class="has-text-right">{{ 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 productos" :producto="producto" :key="producto.id"></producto-row>
             </tbody>
         </table>
-            <p class="has-text-centered" v-show="!mostrar_tabla">
+        <p class="has-text-centered" v-show="productos.length == 0">
             Compa, todavía no agregaste nada a la chismosa.
         </p>
     </div>
-    </div>
 </template>
 
 <script>
     export default {
-        data() {
+        computed: {
-            return {
-                mostrar_tabla: false,
-            }
-        },
-        mounted() {
-            Event.$on('pedido-actualizado', this.pedidoActualizado);
-            Event.$on('toggle-chismosa', this.pedidoActualizado);
-        },
-        methods: {
-            pedidoActualizado: function() {
-                this.mostrar_tabla = this.$root.productos.length > 0;
-            },
-            total: function() {
-                return this.$limpiarInt(this.$root.devoluciones ? this.$root.pedido.total_menos_devoluciones : this.$root.pedido.total)
-            },
             productos: function() {
                 return this.$root.productos
             },
-            modificarDevoluciones: function() {
-                Event.$emit("modificar-devoluciones");
-            },
             cantidadBonosDeTransporte: function() {
                 return this.$limpiarInt(this.$root.pedido.subtotal_bonos_de_transporte) / 15
             },
             totalBonosDeTransporte: function() {
                 return this.$limpiarInt(this.$root.pedido.subtotal_bonos_de_transporte)
             },
-            devoluciones: function() {
+            total: function() {
-                return this.$root.pedido.devoluciones_total;
+                return this.$limpiarInt(this.$root.devoluciones ? this.$root.pedido.total_menos_devoluciones : this.$root.pedido.total)
-            },
+            }
-            notasDevoluciones: function() {
-                return this.$root.pedido.devoluciones_notas;
         },
+        methods: {
+            modificarDevoluciones: function() {
+                Event.$emit("modificar-devoluciones");
             },
         }
+    }
 </script>
 
 <style>
-    .tabla-chismosa {
+@media (max-width: 719px) {
-        width: 100%;
+    .chismosa-tabla {
-    }
+        max-width: 80vw;
-    .fixed-right {
-        position: fixed;
-        overflow-y: auto;
-        max-height: 88vh;
     }
+}
 </style>

resources/js/components/ChismosaDropdown.vue

@@ -8,6 +8,13 @@
             <span v-text="'$' + this.$limpiarInt($root.devoluciones ? $root.pedido.total_menos_devoluciones : $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>
 
@@ -30,9 +37,28 @@ export default {
     },
     methods: {
         toggle() {
-            this.activa = !this.activa;
+            this.activa = !this.activa
-            Event.$emit("toggle-chismosa", 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/PedidoBody.vue

@@ -1,31 +0,0 @@
-<template>
-    <div class="columns ml-3 mr-3">
-        <categorias-container :class="chismosaActiva ? 'hide-below-1024' : ''"></categorias-container>
-        <productos-container :class="chismosaActiva ? 'hide-below-1024' : ''"></productos-container>
-        <chismosa v-show="chismosaActiva"></chismosa>
-    </div>
-</template>
-
-<script>
-    import Chismosa from './Chismosa.vue';
-    import ProductosContainer from './ProductosContainer.vue';
-    import CategoriasContainer from './CategoriasContainer.vue';
-
-    export default {
-        componets: {
-            Chismosa,
-            ProductosContainer,
-            CategoriasContainer,
-        },
-        data() {
-            return {
-                chismosaActiva: false,
-            }
-        },
-        mounted() {
-            Event.$on('toggle-chismosa', (activa) => {
-                this.chismosaActiva = activa;
-            });
-        },
-    }
-</script>

resources/js/components/ProductosContainer.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-show="visible" class="column">
+	<div v-show="visible" class="block ml-6 mr-6">
       <div class="columns is-multiline is-mobile">
         <producto-card v-for="(producto,i) in productos" :key="i" :producto="producto">
         </producto-card><!-- END BLOCK COLUMN -->

resources/views/productos.blade.php

@@ -1,6 +1,9 @@
 @extends('layouts.app')
 
 @section('content')
-<pedido-body></pedido-body>
+<chismosa></chismosa>
+<categorias-container></categorias-container>
+<productos-container></productos-container>
+<producto-modal></producto-modal>
 <devoluciones-modal></devoluciones-modal>
 @endsection