shipping-portal/resources/assets/vue/components/wallets/elements/WalletComponent.vue

<template>
    <div class="row">
        <div class="col">
            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
            <!-- <div class="row parentContainer" v-if="item.status === 2"> -->
            <div class="row parentContainer" v-if="!isLoading">
                <div class="col">
                    <div class="row" v-if="!reload && section !== 'customerPaidInvoiceComponent'">
                        <div class="col">
                            <div class="bg-primary" :class="[{'padding-25': !mini}, {'padding-15': mini}]">
                                <div class="row align-items-end">
                                    <div class="col-auto">
                                        <div class="text-primary-lighter fs-10 text-uppercase">Wallet Balance</div>
                                        <h5 class="text-white no-margin bold">MYR {{ wallet ? (Math.round((wallet.amount + Number.EPSILON) * 100) / 100).toFixed(2) : '0.00'}}</h5>
                                    </div>
                                </div>
                                <div class="row m-t-10 d-flex align-items-center">
                                    <div class="col-auto" v-if="$store.getters.isSuperAdmin">
                                        <div class="btn btn-xs p-l-15 p-r-20 b-rad-none font-heading btn-rounded bg-white" @click="reload = true"><i class="fa fa-plus fs-8 m-r-5"></i> Reload</div>
                                    </div>
                                    <div class="col-auto p-l-0" v-else="$store.getters.isSuperAdmin"></div>
                                    <div class="col-auto p-l-0" v-if="!mini && wallet && section!=='CompanyWalletTransactionSection'">
                                        <!-- <a class="text-white fs-10" :href="route('wallet.details', wallet.company_module_marking)" target="_blank">Transaction History<i class="fa fa-angle-right p-l-5"></i></a> -->
                                        <a class="text-white fs-10" :href="route('wallet.details', wallet.company_module_marking)">Transaction History<i class="fa fa-angle-right p-l-5"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row no-margin" v-if="reload && company_module_id">
                        <div class="col rounded bg-white p-b-15">
                            <div class="row m-b-15">
                                <div class="col p-t-15 p-b-15 bg-primary">
                                    <label class="fs-10 text-white m-b-0 text-uppercase cursor" @click="reload = false"><i class="fa fa-angle-left p-r-15"></i>Top Up Wallet</label>
                                </div>
                            </div>
                            <wallet-top-up-form-component :company_module_id="company_module_id" :amount="(!wallet ? amount : (Math.round((((amount - wallet.amount) < '0.00' ? '0.00' : (amount - wallet.amount))  + Number.EPSILON) * 100) / 100).toFixed(2))" :creditable="creditable"></wallet-top-up-form-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';

    export default {
        props: {
            mini : {
                type: Boolean,
                default: false
            },
            amount: {
                type: String,
                default: '0.00'
            },
            creditable: {
                type: Boolean,
                default: false
            },
            section:{
                type: String,
                required: true
            },
            company_module_id: {
                type: Number,
                required: true,
            },
            data: {
                default () {
                    return {}
                }
            },
        },
        data(){
            return {
                reload: false,
                isLoading: false,
                wallet: this.data,
            }
        },
        computed: {
            pendingQueue () {
                return this.$store.getters.isInCompleteQueue(this.section);
            }
        },
        watch: {
            pendingQueue(inComplete){
                if(inComplete && this.section !== 'CompanyWalletTransactionSection'){
                    this.fetchCompany();
                }
            }
        },
        created(){
            this.$store.dispatch('updateListQueue', {'name': this.section});
        },
        methods: {
            fetchCompany(){
                this.isLoading = true;
                this.submit(route('api.wallet.company_module.show', this.company_module_id), 'get', this.section, false, false);
            },
            successHandler(response){
                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                this.isLoading = false;
                this.wallet = response.payload.data;
            },
            errorHandler(error){
                this.isLoading = false;
            }
        },
        mixins: [componentHandler],
    }
</script>