Merge pull request 'adminUI' (#14) from adminUI into master

Reviewed-on: nathalie/pedi2#14

dev-start

@@ -0,0 +1,2 @@
+#!/usr/bin/bash
+docker-compose up -d && docker-compose exec app npm run watch

resources/js/components/PedidosAdminBody.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="container is-max-widescreen is-max-desktop animate__animated" :class="animation">
+        <pedidos-admin-tabs-secciones></pedidos-admin-tabs-secciones>
+        <div class="block" id="pedidos-seccion" 
+        :class="seccionActiva === 'pedidos-seccion' ? 'is-active' : 'is-hidden'">
+            <div class="block" id="pedidos-tabla-y-dropdown" v-show="hayPedidos">
+                <pedidos-admin-dropdown-descargar
+                    :gdc="gdc">
+                </pedidos-admin-dropdown-descargar>
+                <pedidos-admin-tabla-pedidos
+                    :pedidos="pedidos">
+                </pedidos-admin-tabla-pedidos>
+            </div>
+            <p class="has-text-centered" v-show="!hayPedidos">
+                Todavía no hay ningún pedido para administrar.
+            </p>
+        </div>
+        <div class="block" id="bonos-seccion" 
+        :class="seccionActiva === 'bonos-seccion' ? 'is-active' : 'is-hidden'">
+            <pedidos-admin-tabla-bonos v-show="hayAprobados"
+                :pedidos="pedidos">
+            </pedidos-admin-tabla-bonos>
+            <p class="has-text-centered" v-show="!hayAprobados">
+                Todavía no hay pedidos aprobados.
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import PedidosAdminTabsSecciones from './PedidosAdminTabsSecciones.vue';
+import PedidosAdminDropdownDescargar from "./PedidosAdminDropdownDescargar.vue";
+import PedidosAdminTablaBonos from './PedidosAdminTablaBonos.vue';
+import PedidosAdminTablaPedidos from "./PedidosAdminTablaPedidos.vue";
+export default {
+    name: "PedidosAdminBody",
+    components: {
+        PedidosAdminTabsSecciones,
+        PedidosAdminDropdownDescargar,
+        PedidosAdminTablaPedidos,
+        PedidosAdminTablaBonos,
+    },
+    data() {
+        return {
+            gdc: 0,
+            pedidos: [],
+            tabActiva: "pedidos",
+            seccionActiva: "pedidos-seccion"
+        }
+    },
+    computed: {
+        hayPedidos: function() {
+            return this.pedidos.length !== 0
+        },
+        hayAprobados: function() {
+            return this.pedidos.filter(p => p.aprobado).length > 0
+        }
+    },
+    methods: {
+        fetchPedidos() {
+            axios.get("/api/subpedidos/resources", {
+                    params: {
+                        grupo_de_compra: this.gdc
+                    }})
+                 .then(response => {
+                    this.pedidos = response.data.data
+                });
+        },
+        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;
+        },
+        setSeccionActiva(tabId) {
+            this.tabActiva = tabId;
+            this.seccionActiva = tabId + "-seccion";
+        }
+    },
+    mounted() {
+        Event.$on('sync-aprobacion', (_) => {
+            this.fetchPedidos();
+        });
+
+        axios.get("/admin/obtener_sesion").then(response => {
+            this.gdc = response.data.gdc;
+            this.fetchPedidos();
+        });
+    }
+}
+</script>
+
+<style>
+
+</style>

resources/js/components/PedidosAdminDropdownDescargar.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="buttons is-right">
+        <div class="dropdown" :class="{'is-active': dropdownActivo}" @mouseleave="dropdownActivo = false">
+            <div class="dropdown-trigger">
+                <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" :disabled="!hayAprobados" @click="dropdownActivo = !dropdownActivo">
+                    <span class="icon is-small">
+                        <i class="fas fa-download"></i>
+                    </span>
+                    <span>Descargar pedido</span>
+                    <span class="icon is-small">
+                        <i class="fas fa-angle-down" aria-hidden="true"></i>
+                    </span>
+                </button>
+            </div>
+            <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                <div class="dropdown-content">
+                    <a :href="'/admin/exportar-planillas-a-pdf/' + gdc" class="dropdown-item">
+                        Exportar planillas a pdf
+                    </a>
+                    <a :href="'/admin/exportar-pedido-a-csv/' + gdc" class="dropdown-item">
+                        Exportar pedido a csv
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "PedidosAdminDropdownDescargar",
+    props: {
+        gdc: {
+            type: Number,
+            required: true
+        },
+    },
+    data() {
+        return {
+            dropdownActivo: false
+        }
+    },
+    computed: {
+        hayAprobados: function() {
+            return this.$parent.hayAprobados;
+        }
+    },
+
+}
+</script>
+
+<style>
+
+</style>

resources/js/components/PedidosAdminFilaBono.vue

@@ -0,0 +1,22 @@
+<template>
+    <tr>
+        <td>{{ nombre }}</td>
+        <td>{{ cantidad }}</td>
+        <td>${{ total }}</td>
+    </tr>
+</template>
+
+<script>
+export default {
+    name: "PedidosAdminFilaBono",
+    props: {
+        nombre: String,
+        cantidad: Number,
+        total: Number
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

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/PedidosAdminTablaBonos.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="block">
+        <div class="block" v-show="!hayBonos">
+            <p class="has-text-centered">
+                Todavía no hay bonos pedidos.
+            </p>
+        </div>
+        <div class="block">
+            <table class="table is-fullwidth is-striped is-bordered">
+                <thead>
+                    <tr>
+                        <th><abbr title="Bono">Bono</abbr></th>
+                        <th class="is-1"><abbr title="Cantidad">Cantidad</abbr></th>
+                        <th><abbr title="Total a Pagar">Total $</abbr></th>
+                    </tr>
+                </thead>
+                <tfoot>
+                    <tr v-show="hayBonos">
+                        <th></th>
+                        <th>Total bonos</th>
+                        <th>$ {{ totalBonos }}</th>
+                    </tr>
+                    <tr>
+                        <td> Bonos de Transporte </td>
+                        <td> {{ bonosDeTransporteAprobados }} </td>
+                        <td> $ {{ bonosDeTransporteAprobados * 15 }} </td>
+                    </tr>
+                </tfoot>
+                <tbody v-show="hayBonos">
+                    <pedidos-admin-fila-bono v-for="(bono, i) in bonosCantidadesTotales" :key="i"
+                        :nombre="bono.nombre"
+                        :cantidad="bono.cantidad"
+                        :total="bono.total">
+                    </pedidos-admin-fila-bono>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+import PedidosAdminFilaBonoVue from './PedidosAdminFilaBono.vue'
+export default {
+    name: "PedidosAdminTablaBonos",
+    components: {
+        PedidosAdminFilaBonoVue
+    },
+    props: {
+        pedidos: {
+            type: Array,
+            required: true
+        }
+    },
+    computed: {
+        hayPedidos: function() {
+            return this.pedidos.length !== 0
+        },
+        hayAprobados: function() {
+            return this.pedidosAprobados.length > 0
+        },
+        pedidosAprobados: function() {
+            return this.pedidos.filter(p => p.aprobado);
+        },
+        bonosDeTransporteAprobados: function() {
+            let bonosTransportePorPedido = this.pedidosAprobados.map(p => p.bonos_de_transporte);
+            let cant = 0;
+            bonosTransportePorPedido.forEach(bt => cant += bt);
+            return cant
+        },
+        bonosCantidadesTotales: function() {
+            let nombres = [];
+            let cantidades = [];
+            let precios = [];
+
+            let bonosAprobadosPorPedido = this.bonosPorPedido(this.pedidosAprobados);
+            bonosAprobadosPorPedido.forEach(bs => {
+                bs.forEach(b => {
+                    if (!nombres.includes(b.nombre)) {
+                        nombres.push(b.nombre);
+                        cantidades.push(b.pivot.cantidad);
+                        precios.push(b.precio);
+                    } else {
+                        for (let i = 0; i < nombres.length; i++) {
+                            if (b.nombre === nombres[i]) {
+                                cantidades[i] += b.pivot.cantidad;
+                            }
+                        }
+                    }
+                });
+            });
+
+            let bonosAprobados = [];
+            for (let i = 0; i < nombres.length; i++) {
+                let bono = {
+                    nombre: nombres[i],
+                    cantidad: cantidades[i],
+                    total: cantidades[i] * precios[i]
+                };
+                bonosAprobados.push(bono);
+            }
+
+            return bonosAprobados;
+        },
+        totalBonos: function() {
+            let total = 0;
+            let bonos = this.bonosCantidadesTotales;
+            bonos.forEach(b => {
+                total += b.total;
+            });
+            return total;
+        },
+        hayBonos: function() {
+            return this.totalBonos !== 0;
+        }
+    },
+    methods: {
+        bonosPorPedido(pedidosArray) {
+            return pedidosArray.map(p => p.productos.filter(pr => pr.bono))
+        }
+    },
+}
+</script>
+
+<style>
+
+</style>

resources/js/components/PedidosAdminTablaPedidos.vue

@@ -0,0 +1,53 @@
+<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>
+import PedidosAdminFilaPedidoVue from './PedidosAdminFilaPedido.vue';
+export default {
+    name: "PedidosAdminTablaPedidos",
+    components: {
+        PedidosAdminFilaPedidoVue
+    },
+    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/PedidosAdminTabsSecciones.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="block">
+        <div class="tabs is-boxed" id="tabs">
+            <ul class="has-bottom-line">
+                <li v-for="(tab, index) in tabs" class="is-size-6"
+                    :key="index" 
+                    :id="tab.id + '-tab'" 
+                    :class="{'is-active': tab.id === tabActiva}">
+                    <a @click="setTabActiva(tab.id)">
+                        <span> 
+                            {{ tab.nombre }}
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "PedidosAdminTabsSecciones",
+    data() {
+        return {
+            tabActiva: "pedidos",
+            tabs: [
+                {
+                    id: "pedidos",
+                    nombre: "Pedidos"
+                },
+                {
+                    id: "bonos",
+                    nombre: "Bonos"
+                }
+            ]
+        }
+    },
+    methods: {
+      setTabActiva(tabId) {
+        this.$parent.setSeccionActiva(tabId);
+        this.tabActiva = tabId
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'bulma';
+  hr {
+    border: none;
+    height: 1px;
+  }
+  .has-bottom-line {
+    border-bottom-color: #dbdbdb !important;
+    border-bottom-style: solid !important;
+    border-bottom-width: 1px !important;
+  }
+  .tabs li.is-active a {
+    border-bottom-color: #e3342f;
+    color: #e3342f;
+  }
+</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>

resources/js/components/SubpedidosGdc.vue

@@ -1,99 +0,0 @@
-<template>
-    <div class="container is-max-widescreen is-max-desktop animate__animated" :class="animation" v-show="!init">
-        <div class="buttons is-right">
-            <a class="button is-success" :href="hayAprobados ? '/admin/exportar-pedido-a-csv/'+gdc : '#'" :disabled="!hayAprobados">
-                <span>
-                    Exportar pedido barrial
-                </span>
-                <span class="icon is-small">
-                    <i class="fas fa-download"></i>
-                </span>
-            </a>
-            <a class="button is-info" :href="hayAprobados ? '/admin/exportar-planillas-a-pdf/'+gdc : '#'" :disabled="!hayAprobados">
-                <span>
-                    Imprimir Planillas
-                </span>
-                <span class="icon is-small">
-                  <i class="fas fa-print"></i>
-                </span>
-            </a>
-        </div>
-        <table v-show="this.subpedidos.length !== 0" 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>
-                <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";
-export default {
-    name: "SubpedidosGdc",
-    components: {SubpedidoRow},
-    data() {
-        return {
-            gdc: 0,
-            subpedidos: []
-        }
-    },
-    computed: {
-        hayAprobados: function() {
-            return this.subpedidos.filter(sp => sp.aprobado).length > 0
-        }
-    },
-    beforeCreate() {
-        axios.get("/admin/obtener_sesion").then(response => {
-            this.gdc = response.data.gdc;
-            this.fetchSubpedidos();
-        });
-    },
-    methods: {
-        fetchSubpedidos() {
-            axios.get("/api/subpedidos/resources", {
-                params: {
-                    grupo_de_compra: this.gdc
-                }
-            }).then(response => {
-                this.subpedidos = response.data.data
-            });
-        },
-        totalAprobados() {
-            let suma = 0;
-            let aprobados = this.subpedidos.filter(sp => sp.aprobado);
-            for (let i = 0; i < aprobados.length; i++) {
-                suma += parseFloat(aprobados[i].total.replace(/,/g, ''));
-            }
-            return suma;
-        }
-    },
-    mounted() {
-        Event.$on('sync-aprobacion', (_) => {
-            this.fetchSubpedidos();
-        })
-    }
-}
-</script>
-
-<style>
-
-</style>

resources/views/auth/admin_subpedidos.blade.php

@@ -1,11 +1,13 @@
 @extends('layouts.app')
 
 @section('content')
-    <subpedidos-gdc></subpedidos-gdc>
+    <pedidos-admin-body></pedidos-admin-body>
 @endsection
 <script>
-    import SubpedidosGdc from "../../js/components/SubpedidosGdc";
+    import PedidosAdminBody from "../../js/components/PedidosAdminBody.vue";
     export default {
-        components: {SubpedidosGdc}
+        components: {
+            PedidosAdminBody
+        }
     }
 </script>