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

<template>
     <div class="row">
        <div class="col">
            <loading-component style="height: 100px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
            <div class="row align-items-center justify-content-center bg-white p-t-50 p-b-50"  v-show="!isLoading && vouchers.length === 0">
                <div class="col-10">
                    <div class="row align-items-center justify-content-center  hint-text">
                        <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
                    </div>
                    <div class="row text-center">
                        <div class="col">
                            <div class="row m-t-20">
                                <div class="col">
                                    <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">You have no vouchers</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row text-left no-margin bg-white" v-if="!isLoading" v-for="item in vouchers" v-bind:key="item.id" >
                <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" @click="selectVoucher(item)">
                    <div class="row parentContainer">
                        <div class="col">
                            <p>{{ item.voucher.code }}</p>
                            <p v-if="item.voucher.type == 'AMOUNT'">RM{{ item.voucher.value/100 }} Discount</p>
                            <p v-if="item.voucher.type == 'PERCENT'">{{ item.voucher.value }}% Discount</p>
                        </div>
                        <div class="col" v-if="item.voucher.end_date && new Date() > new Date(item.voucher.end_date)">
                            This voucher has expired.
                        </div>
                        <div class="col" v-else-if="item.voucher.end_date">
                            Valid till {{ item.voucher.end_date }}
                        </div>
                        <div class="col" v-else>
                            Non-expired
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            section: {
                type: String,
                default: 'vouchersDropDownListSection',
            },
            employee: {
                type: Object,
                default: null
            },
        },
        data(){
            return {
                vouchers: null,
                isLoading: true,
            }
        },
        computed: {
            pendingQueue () {
                return this.$store.getters.isInCompleteQueue(this.section);
            },
        },
        watch: {
            pendingQueue(inComplete){
                if(inComplete){
                    this.fetchVouchers();
                }
            },
        },
        created(){
            this.$store.dispatch('updateListQueue', {'name': this.section});
        },
        methods: {
            fetchVouchers(){
                this.isLoading = true;
                if(this.employee){
                    this.submit(route('api.voucher.user.list') + '?filters=' + JSON.stringify( { 'has_vouchers_all_with_user':  this.employee.id} ), 'get', this.section, false, false);
                }
            },
            successHandler(response){
                this.isLoading = false;
                this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                this.vouchers = response.payload.data;
            },
            selectVoucher(item){
                this.$emit('selected-voucher', item.voucher.code);
                this.closeModal();
            },
        }
    }
</script>