pedi2/resources/js/components/Chismosa.vue

<template>
    <div class="column">
        <table v-show="mostrar_tabla" class="chismosa-tabla table is-narrow is-striped is-bordered">
            <thead>
            <tr>
                <th>Producto</th>
                <th><abbr title="Cantidad">C</abbr></th>
                <th><abbr title="Precio Total">$</abbr></th>
                <th></th>
                <th><abbr title="Eliminar"></abbr></th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th><abbr title="Bonos de Transporte">B. Transporte</abbr></th>
                <th class="has-text-right">{{ cantidadBonosDeTransporte() }}</th>
                <th class="has-text-right">{{ totalBonosDeTransporte() }}</th>
                <th></th>
                <th></th>
            </tr>
            <tr v-if="this.$root.devoluciones">
                <th><p>Devoluciones</p></th>
                <td><p :title="notasDevoluciones()">...</p></td>
                <th class="has-text-right">-{{ devoluciones() }}</th>
                <th>
                    <button @click.capture="modificarDevoluciones()" class="button is-warning">
                        <span class="icon">
                            <i class="fas fa-edit"></i>
                        </span>
                    </button>
                </th>
                <th></th>
            </tr>
            <tr>
                <th>Total total</th>
                <th></th>
                <th class="has-text-right">{{ total() }}</th>
                <th></th>
                <th></th>
            </tr>
            </tfoot>
            <tbody>
            <producto-row v-for="producto in productos()" :producto="producto" :key="producto.id"></producto-row>
            </tbody>
        </table>
        <p class="has-text-centered" v-show="!mostrar_tabla">
            Compa, todavía no agregaste nada a la chismosa.
        </p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mostrar_tabla: false,
            }
        },
        mounted() {
            Event.$on('pedido-actualizado', this.pedidoActualizado);
            Event.$on('toggle-chismosa', this.pedidoActualizado);
        },
        methods: {
            pedidoActualizado: function() {
                this.mostrar_tabla = this.$root.productos.length > 0;
            },
            total: function() {
                return this.$limpiarInt(this.$root.devoluciones ? this.$root.pedido.total_menos_devoluciones : this.$root.pedido.total)
            },
            productos: function() {
                return this.$root.productos
            },
            modificarDevoluciones: function() {
                Event.$emit("modificar-devoluciones");
            },
            cantidadBonosDeTransporte: function() {
                return this.$limpiarInt(this.$root.pedido.subtotal_bonos_de_transporte) / 15
            },
            totalBonosDeTransporte: function() {
                return this.$limpiarInt(this.$root.pedido.subtotal_bonos_de_transporte)
            },
            devoluciones: function() {
                return this.$root.pedido.devoluciones_total;
            },
            notasDevoluciones: function() {
                return this.$root.pedido.devoluciones_notas;
            },
        },
    }
</script>