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="asset('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" :key="item.id">
                <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer" @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">
                            Valid till {{ item.voucher.end_date }}
                        </div>
                        <div class="col" v-else>
                            No expiry date
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { useRequest } from '@/composables/useRequest';
import { useQueueStore } from '@/stores/queue';
import route from '@/general/functions/router';


const props = withDefaults(defineProps<{
    section?: string;
    employee?: any;
}>(), {
    section: 'vouchersDropDownListSection',
    employee: null,
});

const asset = window.Vapor.asset;

const emit = defineEmits(['selected-voucher']);

const vouchers = ref<any[]>([]);
const isLoading = ref(true);

const queueStore = useQueueStore();
const { submit } = useRequest();

const closeModal = () => {
    if ((window as any).$) {
        (window as any).$('.modal.show').modal('hide');
    }
};

const pendingQueue = computed(() => queueStore.isInCompleteQueue(props.section));

watch(pendingQueue, (inComplete) => {
    if (inComplete) {
        fetchVouchers();
    }
});

const successHandler = (response: any) => {
    isLoading.value = false;
    queueStore.setListComplete({ name: props.section, data: [] });
    vouchers.value = response.payload.data;
};

const fetchVouchers = () => {
    isLoading.value = true;
    if (props.employee) {
        const filters = JSON.stringify({ 'has_vouchers_all_with_company': props.employee.id });
        submit(route('api.voucher.user.list') + '?filters=' + filters, 'get', props.section, false, false, null, { successHandler });
    } else {
        isLoading.value = false;
    }
};

const selectVoucher = (item: any) => {
    emit('selected-voucher', item.voucher.code);
    closeModal();
};

onMounted(() => {
    queueStore.updateListQueue({ name: props.section });
});
</script>