exchange-2.0/resources/assets/vue/components/accounting/elements/StatementTransactionMappedComponent.vue

<template>
    <div class="row m-b-10 parentContainer">
        <div class="col">
            <div class="row p-b-10 b-b b-grey">
                <div class="col-2">{{ item.posting_date }}</div>
                <div class="col-2">{{ item.transaction_description_1 + ' - ' + item.transaction_description_2 }}</div>
                <div class="col-7">
                    <div class="row">
                        <div class="col">{{item.owners.approved[0].system}}</div>
                        <div class="col">{{ typeString(item.owners.approved[0].type) }}</div>
                        <div class="col"><a :href="item.owners.approved[0].reference_link" target="_blank">{{item.owners.approved[0].reference}}</a></div>
                        <div class="col">{{item.owners.approved[0].invoice_reference}}</div>
                        <div class="col">{{item.owners.approved[0].receipt_reference}}</div>
                    </div>
                </div>

                <div class="col-1">{{ item.amount }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            stage: {
                type: Number,
                default: 0
            },
            section:{
                type: String,
                required: true
            },
        },
        methods: {
            typeString(type){
                switch(type) {
                    case 1:
                        return 'Sales';
                    case 2:
                        return 'Wallet Top Up';
                    case 3:
                        return 'Wallet Withdrawal';
                    case 4:
                        return 'Payment Refund';
                    case 5:
                        return 'Supplier Payment';
                    case 6:
                        return 'Internal Bank Transfer Out';
                    case 7:
                        return 'Internal Bank Transfer In';
                    case 8:
                        return 'Salary Payment';
                    case 9:
                        return 'Statutory Payment';
                    case 10:
                        return 'FPX Charges';
                    case 11:
                        return 'FPX Charges Refund';
                    case 12:
                        return 'Bank Charges';
                    case 13:
                        return 'Credit Card Payment';
                    case 14:
                        return 'Non-Operational Payment';
                }
            },
        },
        mixins: [componentHandler]
    }
</script>