exchange-2.0/resources/assets/vue/components/bookings/elements/CustomerTransactionHistorySectionComponent.vue

<template>
    <div class="row">
        <div class="col">
            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
            <div class="row" v-if="transaction">
                <div class="col">
                    <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
                        <div class="col no-padding">
                            <h6>Account Statement - Transaction History</h6>
                        </div>
                    </div>
                    <div class="row" v-if="transaction">
                        <div class="col">
                            <div class="row padding-10">
                                <div class="col-2 fs-10">Date</div>
                                <div class="col-3 fs-10">Description</div>
                                <div class="col fs-10">Marking</div>
                                <div class="col-2 fs-10 text-center">Incoming</div>
                                <div class="col-2 fs-10 text-center">Outgoing</div>
                                <div class="col-2 fs-10 text-right">Balance</div>
                            </div>

                            <div class="row bg-white padding-10 m-b-10 rounded" v-for="(item, index) in transaction" v-bind:key="item.id" :data="item">
                                <div class="col-2 fs-12">{{item.created_at}}</div>
                                <div class="col-3 fs-12">{{ convertTransactionType(item.type) }} {{ item.payment_reference ? ' - ' + item.payment_reference : '' }} <a target=”_blank” v-if="[9,11].includes(item.type) " :href="route('transaction.credit_note.download', item.id)"><i class="fa fa-download fs-11 m-l-5 text-secondary hover-primary"></i></a></div>
                                <div class="col fs-12"><a :href="route('booking.details', item.booking_marking)">{{item.booking_marking}}</a></div>
                                <div class="col-2 text-success text-center" v-if="parseFloat(item.type) !== 2">{{[5, 9].includes(parseFloat(item.type)) ? (Math.round((parseFloat(item.amount) + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ''}}</div>
                                <div class="col-2 text-success text-center"  v-if="parseFloat(item.type) === 2">{{(Math.round(((parseFloat(item.amount) / parseFloat(item.currency_rate) + parseFloat(item.service_charge)) + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                                <div class="col-2 text-danger text-center">{{[1, 11].includes(parseFloat(item.type)) ? '- ' + (Math.round((parseFloat(item.amount) + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ''}}</div>
                                <div class="col-2 text-right">{{remainingBalance(index)}}</div>
                            </div>  
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        id: {
            type: Number,
            required: true
        }
    },
    data(){
        return {
            section: 'customerTransactionSection',
            isLoading: true,
            transaction: null,
            attention: false
        }
    },
    computed: {
        pendingQueue () {
            return this.$store.getters.isInCompleteQueue(this.section);
        }
    },
    watch: {
        pendingQueue(inComplete){
            if(inComplete){
                this.fetchTransaction();
            }
        }
    },
    created(){
        this.$store.dispatch('updateListQueue', {'name': this.section});
    },
    methods: {
        fetchTransaction(){
            this.isLoading = true;
            this.submit(route('api.transaction.company.transaction.fetch', this.id), 'get', this.section, false, false)
        },
        convertTransactionType(type){
            var transactionTypeArray = [];
            transactionTypeArray[0] = 'Payment Attempt';
            transactionTypeArray[1] = 'Payment';
            transactionTypeArray[2] = 'Invoice';
            transactionTypeArray[3] = 'Bill';
            transactionTypeArray[4] = 'Proforma';
            transactionTypeArray[5] = 'Top Up';
            transactionTypeArray[6] = 'Refund';
            transactionTypeArray[7] = 'Purchase Order';
            transactionTypeArray[8] = 'Supplier Deliver';
            transactionTypeArray[9] = 'Credit Note';
            transactionTypeArray[11] = 'Debit Note';
            transactionTypeArray[10] = 'Withdraw';
            transactionTypeArray[12] = 'Transfer Fee';
            transactionTypeArray[13] = 'Cash Back';
            return transactionTypeArray[type];
        },
        convertPaymentMethod(paymentMethod){
            var paymentMethodArray = [];
            paymentMethodArray[1] = 'Cash';
            paymentMethodArray[2] = 'Cheque';
            paymentMethodArray[3] = 'ba';
            paymentMethodArray[4] = 'Wallet';
            paymentMethodArray[5] = 'Payment Gateway';
            return paymentMethodArray[paymentMethod];
        },
        remainingBalance(index) {
            let tempBalance = 0;

            if(this.transaction){
                let transactions = this.transaction.slice().reverse();
                transactions.slice(0, transactions.length - index).map(function(transaction) {
                    if (transaction.type === 2) {
                        tempBalance += (transaction.amount / transaction.currency_rate + transaction.service_charge);
                    } else {
                        [1, 11].includes(transaction.type) ? tempBalance -= (transaction.amount) : tempBalance += (transaction.amount);
                    }
                    return tempBalance
                }, 0);
            }

            return (Math.round((tempBalance + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        },
        successHandler(response){
            this.isLoading = false;
            this.transaction = response.payload.data;
        }
    }
}
</script>