ViewsList.vue

<template>
    <div>
        <div class="row mb-3">
            <div class="col-sm-9">
                <input v-on:input="onFilterChange" v-model="filter" type="search" class="form-control form-control-sm" :placeholder="__('main.Search')">
            </div>
            <div class="col-sm-3">
                <a href="/add" role="button" class="btn btn-success btn-sm">{{__('main.Add')}}</a>
            </div>
        </div>
        <table class="table">
            <tbody>
            <tr v-for="view of views">
                <th scope="row">
                    <a v-text="view.id" :href="view.show_url" target="_blank" ></a>
                </th>
                <td>
                    <a v-text="view.name" :href="view.show_url" target="_blank" ></a>
                </td>
                <td>
                    <a :title="__('main.Edit')" class="btn btn-warning btn-sm" :href="view.show_url+'/edit'" target="_blank" role="button"><svg class="icon"><use xlink:href="#edit-icon"></use></svg></a>

                    <a :title="__('main.Delete and add to BL')"
                       v-on:click="clickDelete(view.id, $event)"
                       data-toggle="modal" data-target="#confirm_delete_modal"
                       class="btn btn-dark btn-sm" href="javascript:void(0);"><svg class="icon"><use xlink:href="#delete-icon"></use></svg>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="row justify-content-center">
            <div class="col-sm-2">
                <show-more-btn
                    v-if=" ! allLoaded"
                    @click="clickShowMore"
                    :loading="loading.more || loading.search"
                >
                </show-more-btn>
            </div>
        </div>

        <!-- MODALS -->
        <div class="modal fade" id="confirm_delete_modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" v-text="__('main.Delete?')"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-footer">
                        <loader-btn :text="__('main.Delete')"
                                    @click="clickConfirm()"
                                    :class="{'btn':true, 'btn-danger':true}"
                                    :loading="loading.delete"
                                    :disabled="loading.delete">
                        </loader-btn>
                        <!--
                        <loader-btn text="@lang('main.Delete')"
                                    :disabled="loading.delete"
                                    :class="{'btn':true, 'btn-danger':true}"
                                    :loading="loading.delete"
                                    :handler="clickConfirmDelete">
                        </loader-btn>
-->
                        <button type="button" class="btn btn-light" data-dismiss="modal" v-text="__('main.Cancel')"></button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import ShowMoreBtn from "../ShowMoreBtn";
    export default {
        name: "ViewsList",
        components:{
            ShowMoreBtn
        },
        props: {

        },

        data() {
            return {
                allLoaded: false,

                filter: '',

                confirmAction: {
                    type: null,
                    id: null,
                },

                loading: {
                    search : false,
                    more : false,
                    delete : false,
                },

                views: []
            };
        },

        mounted() {
            this.loadViews('search');
        },
        methods: {
            loadViews: function(mode = 'search'){
                let that = this;

                Vue.ajaxPost('/oleole/views/search',
                    this.loadViewsFormData({
                        mode: mode
                    }),

                    function(){
                        switch (mode){
                            case 'search':
                                that.clearViews();
                                that.loading.search = true;
                                break;

                            case 'more':
                                that.loading.more = true;
                                break;
                        }
                    },

                    function(){
                        switch (mode){
                            case 'search':
                                that.loading.search = false;
                                break;

                            case 'more':
                                that.loading.more = false;
                                break;
                        }
                    },

                    function(response){

                        let views = response.data;

                        switch (mode){
                            case 'search':
                                that.allLoaded = false;
                                that.views = views;
                                break;

                            case 'more':
                                if(views.length <= 0){
                                    that.allLoaded = true;
                                }else{
                                    that.views = that.views.concat(views);
                                }
                                break;
                        }
                    },

                    function(response){
                        Vue.showNotices(response.errors, {type:'warning'});
                    }
                );
            },

            loadViewsFormData: function(obj){
                let data = {
                    alreadyLoaded : this.views.length,
                    options:[]
                };

                if( ! _.isEmpty(this.filter)){
                    data['filter'] = this.filter;
                }

                data = Object.assign({}, data, obj);

                return data;
            },

            onFilterChange() {
                let oldValue = this.filter;

                setTimeout(() => {
                    if(oldValue === this.filter){
                        this.loadViews('search');
                    }
                }, 700);
            },

            makeDeleteBl(){
                let that = this;
                Vue.ajaxPost('/oleole/views/bl_delete',
                    {
                        id : this.confirmAction.id
                    },

                    function(){
                        that.loading.delete = true;
                    },

                    function(){
                        that.loading.delete = false;
                        $('#confirm_delete_modal').modal('hide');
                    },

                    function(response){
                        let index = _.findIndex(that.views, { 'id': response.id });
                        console.log(response.id);
                        console.log(index);
                        that.views.splice(index, 1);
                    },

                    function(response){
                        Vue.showNotices(response, {type:'warning'});
                    }
                );
            },

            clickConfirm(){
                switch (this.confirmAction.type){
                    case 'delete_bl':
                        this.makeDeleteBl();
                        break;
                }
            },

            clickDelete(view_id, event){
                Vue.set(this, 'confirmAction', {type:'delete_bl', id: view_id});
            },

            clickShowMore() {
                this.loadViews('more');
            },

            clearViews: function(){
                this.views=[];
            },
        },


    }
</script>

<style scoped>

</style>