exchange-2.0/resources/assets/vue/components/general/elements/ListPollingComponent.vue

<template>
    <transition-component group enter-class="animate__animated animate__fadeInUp animate__delay-1 animate__faster p-r-30" leave-class="animate__animated animate__fadeOutDown animate__faster p-r-30" style="min-height: 300px;width:100%">
        <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
        <div class="row" key="2" v-show="!$store.getters.isLoading(section)">
            <div class="col">
                <div class="row">
                    <div class="col">
                        <div class="row align-items-center justify-content-center p-t-50 p-b-50"  v-show="!$store.getters.getListData(section).length && !isLoading && emptyListSection">
                            <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;">Nothing To Show Here</p>
                                            </div>
                                        </div>
                                        <div class="row m-t-5 align-items-center justify-content-center">
                                            <div class="col">
                                                <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" v-show="!isLoading">
                            <div class="col">
                                <div class="list disable-text-selection" data-check-all="checkAll">
                                    <div class="row" ref="list" v-for="item in $store.getters.getListData(section)" v-bind:key="item.id" :data="item">
                                        <div class="col">
                                            <slot name="list" :data="item"></slot>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" v-show="!isLoading">
                            <div class="col">
                                <pagination-component :section="section" class="mb-5" ref="pagination"></pagination-component>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition-component>
</template>

<script>
    import requestV2 from '../../../general/mixins/aws/requestV2'
    export default {
        props: {
            section:{
                type: String,
                required: true
            },
            endpoint: {
                type: String,
                required: true
            },
            options: {
                default () {
                    return {}
                }
            },
            emptyListSection: {
                type: Boolean,
                default: true,
            }
        },
        data(){
            return {
                filters: this.options,
                pollingInterval: null,
                isPolling: false,
                isFetchingResult: false,
                isLoading: false,
            }
        },
        created(){
            this.setDecoratorDefault();
            this.$store.dispatch('updateListQueue', {'name': this.section, 'page': 1, 'filters': this.filters}); //cief todo: Uncaught (in promise) null
        },
        computed: {
            pendingList () {
                return this.$store.getters.isInCompleteQueue(this.section);
            }
        },
        watch: {
            pendingList(inComplete){
                if(inComplete){
                    this.fetchList();
                }
            }
        },
        methods: {
            fetchList(){
                let listDecorators = this.$store.getters.getListDetails(this.section);
                let url = this.endpoint + '?page=' + listDecorators.page + '&filters=' + JSON.stringify(listDecorators.filters);
                this.isLoading = true;
                this.submitJob(url);
            },
            //cief todo: remove?
            // updateFilters(filters){
            //     this.filters = filters;
            //     this.setDecoratorDefault();
            //     console.log('updateFilters');
            //     this.submit(this.endpoint + '?page=1&filters=' + JSON.stringify(this.filters), 'get', this.section, false, false); //cief todo: Uncaught (in promise) null
            // },
            successHandler(response){
                let result = JSON.parse(response.payload.data.result);
                result.meta = {
                    current_page: result.meta.current_page,
                    first_page_url: result.meta.first_page_url,
                    from: result.meta.from,
                    last_page: result.meta.last_page,
                    last_page_url: result.meta.last_page_url,
                    next_page_url: result.meta.next_page_url,
                    path: result.meta.path,
                    per_page: result.meta.per_page,
                    prev_page_url: result.meta.prev_page_url,
                    to: result.meta.to,
                    total: result.meta.total
                };

                this.stopPolling();
                this.$store.dispatch('completeList', {'name': this.section, 'data': result.data});
                this.$refs.pagination.makePagination(result.meta, result.links);
                this.isLoading = false;
            },
            errorHandler(error){
                this.isFetchingResult = false;
                this.isPolling = false;
            },
            startPolling(jobId, maxAttempts = 8) {
                let attempts = 0;
                let interval = 10000; // Initial interval

                const resetPollingInterval = (customInterval) => {
                    this.pollingInterval = setInterval(pollJobResult, customInterval);
                };

                const pollJobResult = () => {
                    if (this.isPolling || this.isFetchingResult) {
                        return;
                    }
                    this.isPolling = true;

                    attempts++;
                    if(attempts === 1){
                        this.stopPolling();
                        resetPollingInterval(5000);
                    }

                    if (attempts > maxAttempts) {
                        this.stopPolling();
                        this.isLoading = false;
                        console.log(`Reached maximum attempts (${maxAttempts}). Polling stopped.`);
                        return;
                    }

                    if(attempts === maxAttempts){
                        this.fetchJobResult(jobId, true);
                    }
                    else{
                        this.fetchJobResult(jobId);
                    }
                };

                // pollJobResult();  // Initial call
                this.pollingInterval = setInterval(pollJobResult, interval);
            },
            stopPolling() {
                clearInterval(this.pollingInterval);
                this.pollingInterval = null;
                this.isPolling = false;
                this.isFetchingResult = false;
            },
            submitJob(url){
                try {
                    this.$store.dispatch('crudRequest', {endpoint: url, method: 'get'}).then(response => {
                        let success = response.ok;
                        response.json().then(response => {
                            if(!success){return;}
                            let jobId = response.payload.data.job_id;
                            if(jobId){
                                this.startPolling(jobId);
                            }
                        });
                    })
                } catch (error) {
                    console.error('Error submitJob', error);
                }
            },
            fetchJobResult(jobId, isLastAttempt = false) {
                this.isFetchingResult = true;
                try {
                    let anotherEndpoint = route('api.job.fetch', jobId);
                    if(isLastAttempt){
                        anotherEndpoint = route('api.job.fetch.last.attempt', jobId, isLastAttempt);
                    }
                    this.poll(anotherEndpoint, 'get', this.section, false, false); //cief todo: Uncaught (in promise) null
                } catch (error) {
                    console.error('Error fetchJobResult', error);
                }
            }
        },
        mixins: [requestV2]
    }
</script>