Luciano
10/7/2019 - 7:49 PM

VUE JS Child component for Invoices

<template>
    <div>

        <!-- EDIT MODE -->
        <div v-if="actions" class="table-bordered table-hover bg-white">

            <table class="table mb-0">

                <thead>
                    <tr>
                        <th>
                            <span class="d-inline-block float-left">Conceptos <b-badge href="javascript:void(0)" pill variant="default"><small>{{ concepts.length }}</small></b-badge></span>
                            <b-btn class="btn btn-outline-primary btn-xs ml-4 d-inline-block float-left" @click="concepts.push({})"><i class="fas fa-plus mr-1"></i> Agregar</b-btn>
                        </th>
                        <th class="w-10">A pagar</th>
                    </tr>
                </thead>

                <tbody>

                    <tr v-for="(concept, index) in concepts">

                        <td>
                            <b-input
                                type="text"
                                v-model="concept.details"
                                :name="'concept_details['+index+']'"
                                data-vv-as=" "
                                v-validate="'required'"
                                :class="{ 'is-invalid': veeErrors.has('concept_details['+index+']') }" />
                            <label class="small text-danger mb-0" v-if="veeErrors.first('concept_details['+index+']')">{{ veeErrors.first('concept_details['+index+']') }}</label>
                        </td>

                        <td>
                            <b-input
                                type="text"
                                class="pl-1 w-75 float-left"
                                v-model="concept.amount"
                                :name="'concept_amount['+index+']'"
                                data-vv-as=" "
                                v-validate="{
                                    required:true,
                                    min_value:0,
                                    notZero: true }"
                                :class="{ 'is-invalid': veeErrors.has('concept_amount['+index+']') }" />




                            <b-btn
                                title="Eliminar Concepto"
                                variant="btn btn-xs d-inline-block btn-outline-danger borderless icon-btn d-inline-block align-top ml-2 mt-2"
                                @click="confirmRemove(index)">×</b-btn>
                            <label class="small text-danger mb-0" v-if="veeErrors.first('concept_amount['+index+']')">{{ veeErrors.first('concept_amount['+index+']') }}</label>
                        </td>
                    </tr>

                    <tr v-if="!concepts.length" class="no-hover">
                        <td colspan="99" class="text-center">No hay Conceptos imputados</td>
                    </tr>

                    <tr class="no-hover alert-primary">
                        <td class="text-right font-weight-semibold border-0">Total Conceptos:</td>
                        <td class="text-left font-weight-semibold border-0">{{ formatPriceWithSymbol(total_concepts) }}</td>
                    </tr>

                </tbody>

            </table>
        </div>

        <!-- VIEW MODE -->
        <div v-else class="table-bordered table-hover bg-white">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>Conceptos <b-badge href="javascript:void(0)" pill variant="default"><small>{{ concepts.length }}</small></b-badge></th>
                        <th class="w-10">A pagar</th>
                    </tr>
                </thead>

                <tbody>

                    <tr v-for="(concept, index) in concepts">
                        <td><span>{{ concept.details }}</span></td>
                        <td><span>{{ formatPriceWithSymbol(concept.amount) }}</span></td>
                    </tr>

                    <tr v-if="!concepts.length" class="no-hover">
                        <td colspan="99" class="text-center">No hay Conceptos imputados</td>
                    </tr>

                    <tr class="no-hover alert-primary">
                        <td class="text-right font-weight-semibold border-0">Total Conceptos:</td>
                        <td class="text-left font-weight-semibold border-0">{{ formatPriceWithSymbol(total_concepts) }}</td>
                    </tr>


                </tbody>
            </table>
        </div>

        <!-- CONFIRM REMOVE MODAL -->
        <b-modal
            v-model="confirmRemoveModal"
            size="md"
            ok-title="Eliminar"
            ok-variant="danger"
            cancel-title="Cancelar"
            @ok="remove()"
            @hide="removeIndex = null">

            <div slot="modal-title">Confirmar <span class="font-weight-light">Acción</span></div>
            Está seguro que desea eliminar el Concepto de la lista?

        </b-modal>

    </div>
</template>

<script>

import numeral from 'numeral'

export default {
    name: 'concepts-component',

    inject: ['$validator'],

    props: [
        'concepts',
        'customer_type',
        'actions'
    ],

    components: {
    },

    data() {

        return {
            confirmRemoveModal: false,
            removeIndex: null // for deletion purposes
        }
    },

    computed: {

        total_concepts(){
            return _.sumBy(this.concepts, function(concept) { return parseFloat(concept.to_pay || concept.amount || 0); })
        }
    },

    methods: {

        confirmRemove(index){
            this.removeIndex = index
            this.confirmRemoveModal = true
        },

        remove(){
            this.concepts.splice(this.removeIndex,1)
        }
    }
}
</script>