resources/js/components/admin/Body.vue

@@ -1,15 +1,11 @@
 <template>
     <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
-        <comunes-tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></comunes-tabs-secciones>
+        <tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></tabs-secciones>
         <div class="block" id="pedidos-seccion"
             :class="seccionActiva === 'pedidos-seccion' ? 'is-active' : 'is-hidden'">
             <div class="block pb-6" id="pedidos-tabla-y-dropdown" v-if="hayPedidos">
-                <admin-dropdown-descargar
+                <dropdown-descargar></dropdown-descargar>
-                    :gdc_id="gdc.id">
+                <tabla-pedidos></tabla-pedidos>
-                </admin-dropdown-descargar>
-                <admin-tabla-pedidos
-                    :gdc="this.gdc"
-                ></admin-tabla-pedidos>
             </div>
             <p class="has-text-centered" v-else>
                 Todavía no hay ningún pedido para administrar.
@@ -17,8 +13,7 @@
         </div>
         <div class="block pb-6" id="caracteristicas-seccion"
              :class="seccionActiva === 'caracteristicas-seccion' ? 'is-active' : 'is-hidden'">
-            <admin-caracteristicas-opcionales>
+            <caracteristicas-opcionales></caracteristicas-opcionales>
-            </admin-caracteristicas-opcionales>
         </div>
     </div>
 </template>
@@ -29,7 +24,7 @@ import TabsSecciones from "../comunes/TabsSecciones.vue";
 import DropdownDescargar from "./DropdownDescargar.vue";
 import TablaPedidos from "./TablaPedidos.vue";
 import TablaBonos from "./TablaBonos.vue";
-import axios from "axios";
+import { mapActions, mapGetters } from "vuex";
 export default {
     components: {
         CaracteristicasOpcionales,
@@ -40,7 +35,6 @@ export default {
     },
     data() {
         return {
-            gdc: undefined,
             tabs: [{ id: "pedidos", nombre: "Pedidos" },
                    { id: "caracteristicas", nombre: "Caracteristicas opcionales" }],
             tabActiva: "pedidos",
@@ -48,32 +42,17 @@ export default {
         }
     },
     computed: {
-        hayPedidos: function() {
+        ...mapGetters('admin', ['hayPedidos']),
-            return this.gdc && this.gdc.pedidos.length !== 0
-        },
-        hayAprobados: function() {
-            return this.gdc && this.gdc.pedidos.filter(p => p.aprobado).length > 0
-        }
     },
     methods: {
+        ...mapActions('admin', ['getGrupoDeCompra']),
         setSeccionActiva(tabId) {
             this.tabActiva = tabId;
             this.seccionActiva = tabId + "-seccion";
         },
-        actualizar() {
-            axios.get('/api/grupos-de-compra/' + this.$root.gdc)
-                .then(response => {
-                    this.gdc = response.data.data;
-                    console.log(this.gdc);
-                })
-        }
     },
     async mounted() {
-        Event.$on('sync-aprobacion', (_) => {
+        await this.getGrupoDeCompra();
-            this.actualizar();
-        });
-        await new Promise(r => setTimeout(r, 1000));
-        this.actualizar();
     },
 }
 </script>

resources/js/components/admin/CaracteristicasOpcionales.vue

@@ -8,8 +8,7 @@ export default {
             caracteristicas: [
                 {
                     id: "devoluciones",
-                    nombre: "Devoluciones",
+                    nombre: "Devoluciones"
-                    habilitada: false
                 },
             ]
         }
@@ -27,16 +26,15 @@ export default {
                 </tr>
             </thead>
             <tbody>
-                <admin-fila-caracteristica
+                <fila-caracteristica
                     v-for="(c,i) in caracteristicas"
                     :key="i"
                     :caracteristica="c">
-                </admin-fila-caracteristica>
+                </fila-caracteristica>
             </tbody>
         </table>
     </div>
 </template>
 
 <style scoped>
-
 </style>

resources/js/components/admin/DropdownDescargar.vue

@@ -14,13 +14,13 @@
             </div>
             <div class="dropdown-menu" id="dropdown-menu" role="menu">
                 <div class="dropdown-content">
-                    <a :href="'/admin/exportar-pedido-a-csv/' + gdc_id" class="dropdown-item has-background-primary">
+                    <a :href="'/admin/exportar-pedido-a-csv/' + grupo_de_compra_id" class="dropdown-item has-background-primary">
                         Planilla para central (CSV)
                     </a>
-                    <a :href="'/admin/exportar-planillas-a-pdf/' + gdc_id" class="dropdown-item">
+                    <a :href="'/admin/exportar-planillas-a-pdf/' + grupo_de_compra_id" class="dropdown-item">
                         Planillas para armado (PDF)
                     </a>
-                    <a :href="'/admin/exportar-pedido-con-nucleos-a-csv/' + gdc_id" class="dropdown-item">
+                    <a :href="'/admin/exportar-pedido-con-nucleos-a-csv/' + grupo_de_compra_id" class="dropdown-item">
                         Planilla completa de la canasta (CSV)
                     </a>
                 </div>
@@ -30,27 +30,19 @@
 </template>
 
 <script>
+import { mapGetters, mapState } from "vuex";
 export default {
-    props: {
-        gdc_id: {
-            type: Number,
-            required: true
-        },
-    },
     data() {
         return {
             dropdownActivo: false
-        }
+        };
     },
     computed: {
-        hayAprobados: function() {
+        ...mapState('admin',["grupo_de_compra_id"]),
-            return this.$parent.hayAprobados;
+        ...mapGetters('admin',["hayAprobados"]),
-        }
     },
 
 }
 </script>
 
-<style>
+<style></style>
-
-</style>

resources/js/components/admin/FilaCaracteristica.vue

@@ -1,48 +1,20 @@
 <script>
 import axios from "axios";
+import {mapActions, mapGetters, mapState} from "vuex";
 
 export default {
     props: {
         caracteristica: Object
     },
-    data() {
+    computed: {
-        return {
+        ...mapState('admin',["grupo_de_compra_id"]),
-            gdc: undefined
+        ...mapGetters('admin',["getCaracteristica"]),
+        habilitada() {
+            return this.getCaracteristica(this.caracteristica.id);
         }
     },
-    watch: {
-        '$root.gdc' : {
-            handler(newValue) {
-                if (newValue) {
-                    this.gdc = newValue;
-                    this.obtenerValor();
-                }
-            }
-        },
-    },
     methods: {
-        toggleActivacion() {
+        ...mapActions('admin',["toggleCaracteristica"]),
-            const id = this.caracteristica.id;
-            axios.post(`/api/grupos-de-compra/${this.gdc}/${id}`)
-                .then(response => {
-                    this.caracteristica.habilitada = response.data[id];
-                    this.$root[id] = response.data[id];
-                });
-        },
-        obtenerValor() {
-            const id = this.caracteristica.id;
-            axios.get(`/api/grupos-de-compra/${this.gdc}/${id}`)
-                .then(response => {
-                    this.caracteristica.habilitada = response.data[id];
-                    this.$root[id] = response.data[id];
-                });
-        },
-    },
-    mounted() {
-        if (this.$root.gdc) {
-            this.gdc = this.$root.gdc;
-            this.obtenerValor();
-        }
     }
 }
 </script>
@@ -53,17 +25,17 @@ export default {
         <td>
             <div class="field">
                 <input type="checkbox" class="switch is-rounded is-success"
-                       :id="'switch-'+caracteristica.id"
+                       :id="'switch-' + caracteristica.id"
-                       :checked="caracteristica.habilitada"
+                       :checked="habilitada"
-                       @change="toggleActivacion(caracteristica)">
+                       @change="toggleCaracteristica({ caracteristica_id: caracteristica.id })">
-                <label :for="'switch-'+caracteristica.id">
+                <label :for="'switch-' + caracteristica.id">
-                    <span class="is-hidden-mobile">{{ caracteristica.habilitada ? 'Habilitada' : 'Deshabilitada' }}</span>
+                    <span class="is-hidden-mobile">
+                        {{ habilitada ? 'Habilitada' : 'Deshabilitada' }}
+                    </span>
                 </label>
             </div>
         </td>
     </tr>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

resources/js/components/admin/FilaPedido.vue

@@ -1,36 +1,39 @@
 <template>
     <tr>
         <td>{{ pedido.nombre }}</td>
-        <td v-if="$root.devoluciones" class="has-text-right" >{{ pedido.total_sin_devoluciones }}</td>
+        <td v-if="devoluciones_habilitadas" class="has-text-right" >
-        <td v-if="$root.devoluciones" class="has-text-right" ><abbr :title="pedido.devoluciones_notas">-{{ pedido.devoluciones_total }}</abbr></td>
+            {{ pedido.total_sin_devoluciones }}
-        <td class="has-text-right" >{{ $root.devoluciones ? pedido.total : pedido.total_sin_devoluciones }}</td>
-        <td>
-            <admin-switch-aprobacion
-                :pedido="pedido">
-            </admin-switch-aprobacion>
         </td>
+        <td v-if="devoluciones_habilitadas" class="has-text-right" >
+            <abbr :title="pedido.devoluciones_notas">
+                -{{ pedido.devoluciones_total }}
+            </abbr>
+        </td>
+        <td class="has-text-right" >
+            {{ devoluciones_habilitadas ? pedido.total : pedido.total_sin_devoluciones }}
+        </td>
+        <td><switch-aprobacion :pedido_id="pedido_id"></switch-aprobacion></td>
     </tr>
 </template>
 
 <script>
 import SwitchAprobacion from "./SwitchAprobacion.vue";
+import { mapGetters, mapState } from "vuex";
 export default {
     components: {
         SwitchAprobacion
     },
     props: {
-        pedido: Object
+        pedido_id: Number
+    },
+    computed: {
+        ...mapState('admin',["devoluciones_habilitadas"]),
+        ...mapGetters('admin',["getPedido"]),
+        pedido() {
+            return this.getPedido(this.pedido_id);
+        },
     },
-    mounted() {
-        Event.$on('sync-aprobacion', (unPedido) => {
-            if (this.pedido.id === unPedido.id) {
-                this.pedido = unPedido
-            }
-        })
-    }
 }
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

resources/js/components/admin/SwitchAprobacion.vue

@@ -1,46 +1,34 @@
 <template>
     <div class="field">
         <input type="checkbox" name="switchRoundedSuccess" class="switch is-rounded is-success"
-            :id="'switch'+this.pedido.id"
+            :id="'switch' + pedido_id"
-            :checked="pedido.aprobado"
+            :checked="aprobado"
-            @change="toggleAprobacion">
+            @change="setAprobacionPedido({ pedido_id: pedido_id, aprobacion: !aprobado })">
-        <label :for="'switch'+this.pedido.id">
+        <label :for="'switch' + pedido_id">
             <span class="is-hidden-mobile">{{ mensaje }}</span>
         </label>
     </div>
 </template>
 
 <script>
+import { mapActions, mapGetters } from "vuex";
 export default {
     props: {
-        pedido: Object
+        pedido_id: Number
-    },
-    data() {
-        return {
-            aprobado: this.pedido.aprobado
-        }
     },
     computed: {
-        mensaje: function () {
+        ...mapGetters('admin', ["getPedido"]),
-            return this.aprobado ? "Pagado" : "No pagado"
+        aprobado() {
+            return this.getPedido(this.pedido_id).aprobado;
+        },
+        mensaje() {
+            return this.aprobado ? "Pagado" : "No pagado";
         }
     },
     methods: {
-        toggleAprobacion() {
+        ...mapActions('admin',["setAprobacionPedido"]),
-            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 scoped></style>
-
-</style>

resources/js/components/admin/TablaPedidos.vue

@@ -4,17 +4,18 @@
             <thead>
             <tr>
                 <th>Núcleo</th>
-                <th v-if="$root.devoluciones"><abbr title="Total sin tomar en cuenta las devoluciones">Total parcial $</abbr></th>
+                <th v-if="devoluciones_habilitadas"><abbr title="Total sin tomar en cuenta las devoluciones">Total parcial $</abbr></th>
-                <th v-if="$root.devoluciones"><abbr title="Devoluciones correspondientes al núcleo">Devoluciones $</abbr></th>
+                <th v-if="devoluciones_habilitadas"><abbr title="Devoluciones correspondientes al núcleo">Devoluciones $</abbr></th>
-                <th><abbr title="Total a Pagar por el núleo">{{ $root.devoluciones ? 'Total real' : 'Total' }} $</abbr></th>
+                <th><abbr title="Total a Pagar por el núleo">{{ devoluciones_habilitadas ? 'Total real' : 'Total' }} $</abbr></th>
                 <th class="is-1"><abbr title="Pagado">Pagado</abbr></th>
             </tr>
         </thead>
         <tbody>
-            <admin-fila-pedido
+            <fila-pedido
-                v-for="pedido in gdc.pedidos"
+                v-for="pedido in pedidos"
-                :pedido="pedido" :key="pedido.id">
+                :pedido_id="pedido.id"
-            </admin-fila-pedido>
+                :key="pedido.id">
+            </fila-pedido>
         </tbody>
         </table>
         <table class="table is-striped is-bordered">
@@ -23,27 +24,27 @@
             </tr>
             <tr>
                 <th>Total a recaudar:</th>
-                <td class="has-text-right">$ {{ gdc.total_a_recaudar }}</td>
+                <td class="has-text-right">$ {{ total_a_recaudar }}</td>
             </tr>
             <tr>
                 <th>Total bonos barriales:</th>
-                <td class="has-text-right">$ {{ gdc.total_barrial }}</td>
+                <td class="has-text-right">$ {{ total_barrial }}</td>
             </tr>
-            <tr v-if="$root.devoluciones">
+            <tr v-if="devoluciones_habilitadas">
                 <th>Total devoluciones:</th>
-                <td class="has-text-right">- $ {{ gdc.total_devoluciones }}</td>
+                <td class="has-text-right">- $ {{ total_devoluciones }}</td>
             </tr>
             <tr>
                 <th>Cantidad bonos de transporte:</th>
-                <td class="has-text-right">{{ gdc.cantidad_transporte }}</td>
+                <td class="has-text-right">{{ cantidad_transporte }}</td>
             </tr>
             <tr>
                 <th>Total bonos de transporte:</th>
-                <td class="has-text-right">$ {{ gdc.total_transporte }}</td>
+                <td class="has-text-right">$ {{ total_transporte }}</td>
             </tr>
             <tr>
                 <th>Total a depositar:</th>
-                <td class="has-text-right">$ {{ gdc.total_a_transferir }}</td>
+                <td class="has-text-right">$ {{ total_a_transferir }}</td>
             </tr>
         </table>
     </div>
@@ -51,19 +52,25 @@
 
 <script>
 import FilaPedido from "./FilaPedido.vue";
+import { mapGetters, mapState } from "vuex";
 export default {
     components: {
         FilaPedido
     },
-    props: {
+    computed: {
-        gdc: {
+        ...mapState('admin', [
-            type: Object,
+            "devoluciones_habilitadas",
-            required: true
+            "pedidos",
-        }
+            "total_a_recaudar",
-    }
+            "total_barrial",
+            "total_devoluciones",
+            "cantidad_transporte",
+            "total_transporte",
+            "total_a_transferir",
+        ]),
+        ...mapGetters('admin', ['pedidosAprobados']),
+    },
 }
 </script>
 
-<style>
+<style></style>
-
-</style>