exchange-2.0/resources/assets/vue/components/settings/sections/MilestoneListComponent.vue

<template>
    <div class="row m-b-15 parentContainer">
        <div class="col" v-if="this.$store.getters.getUserId">
            <list-component :section="section" :endpoint="route('api.milestone.list')">
                <template slot="list" slot-scope="{data}">
                    <milestone-single-item-component :section="section" :data="data" :options-milestone-name="optionsMilestoneName"></milestone-single-item-component>
                </template>
            </list-component>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            section: {
                type: String,
                required: true
            },
            optionsMilestoneName: {
                type: Array,
                required: true
            },
        },
        data(){
            return {
                subSection: 'rewardListSection',
                endpoint: route('api.reward.list'),
                options: {'is_active': true},
                valueColumn: "id",
                labelColumn: ['name', 'milestones']
            }
        },
        created(){
            if(!this.$store.getters.isInQueue(this.subSection)){
                this.$store.dispatch('updateListQueue', {name: this.subSection});
            }
        },
        computed: {
            pendingQueue () {
                return this.$store.getters.isInCompleteQueue(this.subSection);
            }
        },
        watch: {
            pendingQueue(newVal, oldVal) {
                if(newVal){
                    this.preFetchDataForChildComponent();
                }
            }
        },
        methods: {
            preFetchDataForChildComponent(){
                this.$store.dispatch('toggleLoading', {name: this.subSection, status: true})
                this.$store.dispatch('crudRequest', {endpoint: this.endpoint + '?filters=' + JSON.stringify(this.options), method: 'get'}).then(response => {
                    let success = response.ok;
                    response.json().then(response => {
                        if(!success){return;}

                        let vm = this;
                        let mappedList = $.map(response.payload.data, function(value){
                            let preservedValue = value;
                            let result = {'id': !isNaN(value[vm.valueColumn]) ? parseInt(value[vm.valueColumn]) : value[vm.valueColumn],
                                'text': vm.labelColumn.map(function(label){
                                    return typeof preservedValue[label] === 'object' ? preservedValue[label].map(obj => obj.name) : preservedValue[label]
                                }).join(': '),
                            }
                            return result;
                        });
                        this.$store.dispatch('updateListQueue', {name: 'original_'+this.subSection});
                        this.$store.dispatch('completeList', {name: 'original_'+this.subSection, data: response.payload.data});
                        this.$store.dispatch('completeList', {name: this.subSection, data: mappedList});
                        this.$store.dispatch('toggleLoading', {name: this.subSection, status: false})
                    });
                })
            },
        },
    }
</script>