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

<template>
     <div class="row">
        <div class="col">
            <div v-if="vouchers && vouchers.length > 0" class="row fs-10 p-b-5">List of Vouchers, click to select</div>
            <div class="row text-left no-margin bg-white p-b-10" 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">
                        <!-- <div class="col">
                            <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> -->
                        <span>{{ item.voucher.code }}</span>
                    </div>
                    <div class="row">
                        <span v-if="item.voucher.end_date && new Date() > new Date(item.voucher.end_date)">
                            This voucher has expired.
                        </span>
                        <span v-else-if="item.voucher.end_date">
                            Valid till {{ item.voucher.end_date }}
                        </span>
                        <span v-else>
                            Non-expired
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            section: {
                type: String,
                default: 'availableVouchersSection',
            },
            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>