la pantalla de admin se comunica correctamente con la bd

app/Http/Controllers/Api/SubpedidoController.php

@@ -88,4 +88,12 @@ class SubpedidoController extends Controller
         return new SubpedidoResource($subpedido);
     }
 
+    public function toggleAprobacion(Subpedido $subpedido) {
+        $valid = request()->validate([
+            'aprobacion' => 'required | boolean'
+        ]);
+        $subpedido->toggleAprobacion($valid['aprobacion']);
+        return new SubpedidoResource($subpedido);
+    }
+
 }

app/Subpedido.php

@@ -85,4 +85,9 @@ class Subpedido extends Model
         }
   }
 
+  public function toggleAprobacion(bool $aprobacion) {
+      $this->aprobado = $aprobacion;
+      $this->save();
+  }
+
 }

public/js/app.js

@@ -2051,13 +2051,28 @@ __webpack_require__.r(__webpack_exports__);
   },
   data: function data() {
     return {
-      mensaje: this.aprobado ? "Desaprobar pedido" : "Aprobar pedido"
+      pedido: this.subpedido
     };
   },
+  computed: {
+    mensaje: function mensaje() {
+      return this.pedido.aprobado ? "Desaprobar" : "Aprobar";
+    }
+  },
   methods: {
     toggleAprobacion: function toggleAprobacion() {
-      alert("Hay que implementarlo con axios o algo de eso");
+      this.aprobado = !this.aprobado;
+      Event.$emit('aprobacion-subpedido', this.pedido.id, this.aprobado);
     }
+  },
+  mounted: function mounted() {
+    var _this = this;
+
+    Event.$on('sync-aprobacion', function (unSubpedido) {
+      if (_this.pedido.id === unSubpedido.id) {
+        _this.pedido = unSubpedido;
+      }
+    });
   }
 });
 
@@ -2397,6 +2412,23 @@ __webpack_require__.r(__webpack_exports__);
         });
       });
     });
+    Event.$on('aprobacion-subpedido', function (subpedidoId, aprb) {
+      axios.post("/api/admin/subpedidos/" + subpedidoId + "/aprobacion", {
+        aprobacion: aprb
+      }).then(function (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'
+          }
+        });
+      });
+    });
   }
 });
 
@@ -2766,6 +2798,22 @@ __webpack_require__.r(__webpack_exports__);
   },
   props: {
     subpedido: Object
+  },
+  data: function data() {
+    return {
+      pedido: this.subpedido
+    };
+  },
+  mounted: function mounted() {
+    var _this = this;
+
+    Event.$on('sync-aprobacion', function (unSubpedido) {
+      console.log(unSubpedido);
+
+      if (_this.pedido.id === unSubpedido.id) {
+        _this.pedido = unSubpedido;
+      }
+    });
   }
 });
 
@@ -2938,6 +2986,13 @@ __webpack_require__.r(__webpack_exports__);
         _this2.subpedidos = response.data.data;
       });
     }
+  },
+  mounted: function mounted() {
+    var _this3 = this;
+
+    Event.$on('sync-aprobacion', function (_) {
+      _this3.fetchSubpedidos();
+    });
   }
 });
 
@@ -4509,14 +4564,14 @@ var render = function () {
     "button",
     {
       staticClass: "button",
-      class: _vm.subpedido.aprobado ? "is-danger" : "is-success",
+      class: _vm.pedido.aprobado ? "is-danger" : "is-success",
       on: { click: _vm.toggleAprobacion },
     },
     [
       _c("span", { staticClass: "icon is-small" }, [
         _c("i", {
           staticClass: "fas",
-          class: _vm.subpedido.aprobado ? "fa-times" : "fa-check",
+          class: _vm.pedido.aprobado ? "fa-times" : "fa-check",
         }),
       ]),
       _vm._v(" "),

public/js/app.js.LICENSE.txt

@@ -0,0 +1,11 @@
+/*!
+ * Vue.js v2.6.14
+ * (c) 2014-2021 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * bulma-toast 2.4.1 
+ * (c) 2018-present @rfoel <rafaelfr@outlook.com> 
+ * Released under the MIT License.
+ */

resources/js/components/BotonAdminSubpedidoRow.vue

@@ -1,7 +1,7 @@
 <template>
-    <button class="button" :class="subpedido.aprobado ? 'is-danger' : 'is-success'" @click="toggleAprobacion">
+    <button class="button" :class="pedido.aprobado ? 'is-danger' : 'is-success'" @click="toggleAprobacion">
                 <span class="icon is-small">
-                  <i class="fas" :class="subpedido.aprobado ? 'fa-times' : 'fa-check'"></i>
+                  <i class="fas" :class="pedido.aprobado ? 'fa-times' : 'fa-check'"></i>
                 </span>
         <span>{{ mensaje }}</span>
     </button>
@@ -13,13 +13,26 @@ export default {
     props: {'subpedido': Object},
     data() {
         return {
-            mensaje: this.aprobado ? "Desaprobar pedido" : "Aprobar pedido"
+            pedido: this.subpedido
+        }
+    },
+    computed: {
+        mensaje: function () {
+            return this.pedido.aprobado ? "Desaprobar" : "Aprobar"
         }
     },
     methods: {
         toggleAprobacion() {
-            alert("Hay que implementarlo con axios o algo de eso")
+            this.aprobado = !this.aprobado;
+            Event.$emit('aprobacion-subpedido', this.pedido.id, this.aprobado);
         }
+    },
+    mounted() {
+        Event.$on('sync-aprobacion', (unSubpedido) => {
+            if (this.pedido.id === unSubpedido.id) {
+                this.pedido = unSubpedido
+            }
+        })
     }
 }
 </script>

resources/js/components/NavBar.vue

@@ -74,6 +74,20 @@
                 });
             });
         });
+        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>

resources/js/components/SubpedidoRow.vue

@@ -13,6 +13,19 @@ export default {
     components: {BotonAdminSubpedidoRow},
     props: {
         subpedido: Object
+    },
+    data() {
+        return {
+            pedido: this.subpedido
+        }
+    },
+    mounted() {
+        Event.$on('sync-aprobacion', (unSubpedido) => {
+            console.log(unSubpedido);
+            if (this.pedido.id === unSubpedido.id) {
+                this.pedido = unSubpedido
+            }
+        })
     }
 }
 </script>

resources/js/components/SubpedidosGdc.vue

@@ -43,6 +43,11 @@ export default {
                 this.subpedidos = response.data.data
             });
         }
+    },
+    mounted() {
+        Event.$on('sync-aprobacion', (_) => {
+            this.fetchSubpedidos();
+        })
     }
 }
 </script>

routes/api.php

@@ -40,6 +40,12 @@ Route::middleware('api')->group(function () {
         Route::post('/{subpedido}/sync', 'Api\SubpedidoController@syncProductos');
     });
 
+    Route::prefix('admin')->group(function () {
+        Route::prefix('subpedidos')->group(function() {
+            Route::post('/{subpedido}/aprobacion', 'Api\SubpedidoController@toggleAprobacion');
+        });
+    });
+
     //@TO DO -> esta ruta debe estar en middleware de auth y/o subpedido
     Route::get('/categorias', function() {
 		return Producto::all()->pluck('categoria')->unique()->flatten();