Pequeño refactor y cambio de nombre de componentes de admin pedidos

resources/js/components/PedidosAdminBody.vue

@@ -1,73 +1,59 @@
 <template>
     <div class="container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
-        <pedidos-admin-dropdown-descargar :gdc="gdc"></pedidos-admin-dropdown-descargar>
+        <pedidos-admin-dropdown-descargar v-show="hayPedidos" 
-        <table v-show="this.subpedidos.length !== 0" class="table is-fullwidth is-striped is-bordered">
+            :gdc="gdc">
-            <thead>
+        </pedidos-admin-dropdown-descargar>
-                <tr>
+        <pedidos-admin-tabla-pedidos v-show="hayPedidos"
-                    <th>Núcleo</th>
+            :pedidos="pedidos">
-                    <th><abbr title="Total a Pagar">Total $</abbr></th>
+        </pedidos-admin-tabla-pedidos>
-                    <th class="is-1"><abbr title="Aprobacion">Aprobación</abbr></th>
+        <p class="has-text-centered" v-show="!hayPedidos">
-                </tr>
-            </thead>
-            <tfoot>
-                <tr>
-                    <th></th>
-                    <th>Total de los aprobados</th>
-                    <th>$ {{ totalAprobados() }}</th>
-                </tr>
-            </tfoot>
-            <tbody>
-                <subpedido-row v-for="subpedido in this.subpedidos"
-                               :subpedido="subpedido" :key="subpedido.id">
-                </subpedido-row>
-            </tbody>
-        </table>
-        <p class="has-text-centered" v-show="this.subpedidos.length === 0">
             Todavía no hay ningún pedido para administrar.
         </p>
     </div>
 </template>
 
 <script>
-import SubpedidoRow from "./SubpedidoRow";
 import PedidosAdminDropdownDescargar from "./PedidosAdminDropdownDescargar.vue";
+import PedidosAdminTablaPedidos from "./PedidosAdminTablaPedidos.vue";
 export default {
     name: "PedidosAdminBody",
     components: {
-        SubpedidoRow,
+        PedidosAdminDropdownDescargar,
-        PedidosAdminDropdownDescargar
+        PedidosAdminTablaPedidos
     },
     data() {
         return {
             gdc: 0,
-            subpedidos: [],
+            pedidos: []
-            dropdownActivo: false
         }
     },
     computed: {
+        hayPedidos: function() {
+            return this.pedidos.length !== 0
+        },
         hayAprobados: function() {
-            return this.subpedidos.filter(sp => sp.aprobado).length > 0
+            return this.pedidos.filter(p => p.aprobado).length > 0
         }
     },
     beforeCreate() {
         axios.get("/admin/obtener_sesion").then(response => {
             this.gdc = response.data.gdc;
-            this.fetchSubpedidos();
+            this.fetchPedidos();
         });
     },
     methods: {
-        fetchSubpedidos() {
+        fetchPedidos() {
             axios.get("/api/subpedidos/resources", {
                     params: {
                         grupo_de_compra: this.gdc
-                }
+                    }})
-            }).then(response => {
+                 .then(response => {
-                this.subpedidos = response.data.data
+                    this.pedidos = response.data.data
                 });
         },
         totalAprobados() {
             let suma = 0;
-            let aprobados = this.subpedidos.filter(sp => sp.aprobado);
+            let aprobados = this.pedidos.filter(p => p.aprobado);
             for (let i = 0; i < aprobados.length; i++) {
                 suma += parseFloat(aprobados[i].total.replace(/,/g, ''));
             }
@@ -76,7 +62,7 @@ export default {
     },
     mounted() {
         Event.$on('sync-aprobacion', (_) => {
-            this.fetchSubpedidos();
+            this.fetchPedidos();
         })
     }
 }

resources/js/components/PedidosAdminDropdownDescargar.vue

@@ -37,7 +37,7 @@ export default {
     },
     data() {
         return {
-            dropdownActivo: this.$parent.dropdownActivo
+            dropdownActivo: false
         }
     },
     computed: {

resources/js/components/PedidosAdminFilaPedido.vue

@@ -0,0 +1,35 @@
+<template>
+    <tr>
+        <td>{{ pedido.nombre }}</td>
+        <td>{{ pedido.total }}</td>
+        <td>
+            <pedidos-admin-switch-aprobacion
+                :pedido="pedido">
+            </pedidos-admin-switch-aprobacion>
+        </td>
+    </tr>
+</template>
+
+<script>
+import PedidosAdminSwitchAprobacion from './PedidosAdminSwitchAprobacion.vue';
+export default {
+    name: "PedidosAdminFilaPedido",
+    components: {
+        PedidosAdminSwitchAprobacion
+    },
+    props: {
+        pedido: Object
+    },
+    mounted() {
+        Event.$on('sync-aprobacion', (unPedido) => {
+            if (this.pedido.id === unPedido.id) {
+                this.pedido = unPedido
+            }
+        })
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/components/PedidosAdminSwitchAprobacion.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="field">
+        <input type="checkbox" name="switchRoundedSuccess" class="switch is-rounded is-success"
+            :id="'switch'+this.pedido.id" 
+            :checked="pedido.aprobado" 
+            @change="toggleAprobacion">
+        <label :for="'switch'+this.pedido.id">
+            <span class="is-hidden-mobile">{{ mensaje }}</span>
+        </label>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "PedidosAdminSwitchAprobacion",
+    props: {
+        pedido: Object
+    },
+    data() {
+        return {
+            aprobado: this.pedido.aprobado
+        }
+    },
+    computed: {
+        mensaje: function () {
+            return this.aprobado ? "Aprobado" : "No aprobado"
+        }
+    },
+    methods: {
+        toggleAprobacion() {
+            Event.$emit('aprobacion-subpedido', this.pedido.id, !this.aprobado);
+            this.aprobado = !this.aprobado
+        }
+    },
+    mounted() {
+        Event.$on('sync-aprobacion', (unPedido) => {
+            if (this.pedido.id === unPedido.id) {
+                this.pedido = unPedido
+            }
+        })
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/components/PedidosAdminTablaPedidos.vue

@@ -0,0 +1,49 @@
+<template>
+  <table class="table is-fullwidth is-striped is-bordered">
+            <thead>
+                <tr>
+                    <th>Núcleo</th>
+                    <th><abbr title="Total a Pagar">Total $</abbr></th>
+                    <th class="is-1"><abbr title="Aprobacion">Aprobación</abbr></th>
+                </tr>
+            </thead>
+            <tfoot>
+                <tr>
+                    <th></th>
+                    <th>Total de los aprobados</th>
+                    <th>$ {{ totalAprobados() }}</th>
+                </tr>
+            </tfoot>
+            <tbody>
+                <pedidos-admin-fila-pedido v-for="pedido in this.pedidos"
+                               :pedido="pedido" :key="pedido.id">
+                </pedidos-admin-fila-pedido>
+            </tbody>
+        </table>
+</template>
+
+<script>
+export default {
+    name: "PedidosAdminTablaPedidos",
+    props: {
+        pedidos: {
+            type: Array,
+            required: true
+        }
+    },
+    methods: {
+        totalAprobados() {
+            let suma = 0;
+            let aprobados = this.pedidos.filter(p => p.aprobado);
+            for (let i = 0; i < aprobados.length; i++) {
+                suma += parseFloat(aprobados[i].total.replace(/,/g, ''));
+            }
+            return suma;
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

resources/js/components/SubpedidoRow.vue

@@ -1,34 +0,0 @@
-<template>
-    <tr>
-        <td>{{ subpedido.nombre }}</td>
-        <td>{{ subpedido.total }}</td>
-        <td><boton-admin-subpedido-row :subpedido="subpedido"></boton-admin-subpedido-row></td>
-    </tr>
-</template>
-
-<script>
-import BotonAdminSubpedidoRow from "./SubpedidoRowBotonAdmin";
-export default {
-    name: "SubpedidoRow",
-    components: {BotonAdminSubpedidoRow},
-    props: {
-        subpedido: Object
-    },
-    data() {
-        return {
-            pedido: this.subpedido
-        }
-    },
-    mounted() {
-        Event.$on('sync-aprobacion', (unSubpedido) => {
-            if (this.pedido.id === unSubpedido.id) {
-                this.pedido = unSubpedido
-            }
-        })
-    }
-}
-</script>
-
-<style scoped>
-
-</style>

resources/js/components/SubpedidoRowBotonAdmin.vue

@@ -1,40 +0,0 @@
-<template>
-    <div class="field">
-        <input :id="'switch'+this.pedido.id" type="checkbox" name="switchRoundedSuccess" class="switch is-rounded is-success" :checked="pedido.aprobado" @change="toggleAprobacion">
-        <label :for="'switch'+this.pedido.id"><span class="is-hidden-mobile">{{ mensaje }}</span></label>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "BotonAdminSubpedidoRow",
-    props: {'subpedido': Object},
-    data() {
-        return {
-            pedido: this.subpedido
-        }
-    },
-    computed: {
-        mensaje: function () {
-            return this.pedido.aprobado ? "Aprobado" : "No aprobado"
-        }
-    },
-    methods: {
-        toggleAprobacion() {
-            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>
-
-<style scoped>
-
-</style>