Arreglado bug de chismosa

app/Http/Controllers/Api/SubpedidoController.php

@@ -80,7 +80,7 @@ class SubpedidoController extends Controller
         $producto = Producto::find($valid['producto_id']);
 
         $subpedido->syncProducto($producto, $valid['cantidad']);
-        return $subpedido;
+        return new SubpedidoResource($subpedido);
     }
 
 }

public/css/app.css

@@ -21,13 +21,33 @@ nav.breadcrumb.is-fixed-top {
 	right: 0;
 	z-index: 30;
 	top: 3.25rem;
+	height: 3.25rem;
 }
 
 main.has-top-padding {
-	padding-top: 3rem !important;
+	padding-top: 4.5rem !important;
 }
 
 .has-text-centered {
     text-align: center;
     margin: 0 1em;
 }
+
+.is-fixed-top {
+	position: fixed;
+	z-index: 30;
+}
+
+.chismosa-container {
+	top: 6.5rem;
+	max-height: 21rem;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	width: 100%;
+	position: fixed;	
+	z-index: 15;
+}
+
+main.chisma-abierta {
+	padding-top: 25.5rem !important;
+}

public/js/app.js

@@ -8,7 +8,7 @@ Vue.component('nav-bar', {
               <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">
+            <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>
@@ -47,6 +47,9 @@ Vue.component('nav-bar', {
         .then(response => {
           this.subpedido = response.data.data;
       });
+    },
+    toggleChismosa(){
+      Event.$emit("toggle-chismosa");
     }
 	}, mounted() {
     axios.get("/subpedidos/obtener_sesion").then(response => {
@@ -58,7 +61,9 @@ Vue.component('nav-bar', {
         axios.post("/api/subpedidos/"+this.subpedido.id+"/sync", {
             cantidad: cantidad,
             producto_id: id
-        }).then(() => {
+        }).then((response) => {
+            this.subpedido = response.data.data;
+            Event.$emit('sync-chismosa',this.subpedido);
             bulmaToast.toast({
               message: 'Pedido actualizado exitosamente',
               duration: 1000,
@@ -66,7 +71,6 @@ Vue.component('nav-bar', {
               position: 'bottom-center',
               animate: { in: 'fadeIn', out: 'fadeOut' }
             });
-            this.actualizarSubpedido();
         });
     });
   }

public/js/chismosa.js

@@ -1,6 +1,6 @@
 Vue.component('chismosa', {
     template: `
-        <div class="container">
+        <div class="container table-container chismosa-container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
             <table v-show="this.subpedido.productos.length != 0" class="table is-fullwidth is-striped is-bordered">
                 <thead>
                 <tr>
@@ -39,22 +39,19 @@ Vue.component('chismosa', {
             subpedido: {
                 productos:[]
             },
+            init: true,
+            visible: false
         }
     },
     computed: {
-        /* TODO: tener el camino que se había hecho antes de abrir la chismosa para volver atrás */
+        animation: function() {
-        miga: function() {
+            return this.visible ? "animate__slideInDown" : "animate__slideOutUp";
-            return {
-                nombre: "Chismosa de " + this.subpedido.nombre,
-                href: "/chismosa"
-            }
         }
     },
     beforeCreate() {
         axios.get("/subpedidos/obtener_sesion").then(response => {
             this.subpedido = response.data.subpedido;
             this.fetchSubpedido();
-            Event.$emit("migas-agregar",this.miga);
         });
     },
     methods: {
@@ -66,8 +63,15 @@ Vue.component('chismosa', {
         }
     },
     mounted() {
-        Event.$on('sync-subpedido', () =>  {
+        Event.$on('sync-chismosa', (subpedido) =>  {
-            this.fetchSubpedido();
+            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");
         });
     }
 });

public/js/productos.js

@@ -160,7 +160,7 @@ Vue.component('producto-container', {
           </section>
           <footer class="modal-card-foot">
               <!-- Habría que ver si cambiar el botón cuando al cantidad es 0 -->
-              <button class="button is-success" :disabled="cant <= 0" @click="agregarProducto">Agregar a la chismosa</button>
+              <button class="button is-success" :disabled="cant <= 0" @click="agregarProducto">Aceptar</button>
               <button class="button" @click.capture="cerrar">Cancelar</button>
           </footer>
       </div>

resources/views/chismosa.blade.php

@@ -1,15 +0,0 @@
-@extends('layouts.app')
-
-@section('stylesheets')
-
-@endsection
-
-@section('content')
-    <chismosa></chismosa>
-	<producto-container></producto-container>
-@endsection
-
-@section('scripts')
-    <script src="{{ asset('js/chismosa.js') }}"></script>
-	<script src="{{ asset('js/productos.js') }}"></script>
-@endsection

resources/views/layouts/app.blade.php

@@ -40,7 +40,7 @@
             </nav>
         </nav-migas>
 
-        <main class="py-4 has-top-padding">
+        <main id="main" class="py-4 has-top-padding">
             @yield('content')
         </main>
     </div>

resources/views/productos.blade.php

@@ -5,6 +5,7 @@
 @endsection
 
 @section('content')
+<chismosa></chismosa>
 <categorias-container></categorias-container>
 <productos-container></productos-container>
 <producto-container></producto-container>
@@ -12,4 +13,5 @@
 
 @section('scripts')
 <script src="{{ asset('js/productos.js') }}"></script>
+<script src="{{ asset('js/chismosa.js') }}"></script>
 @endsection