VueJS - Table Mixnin

subscribers-list.blade.php

@extends('layouts.default')

@section('content')
    <subscribers-list inline-template>
        <div class="main">
            <div class="container">
                <div class="row">
                    <div class="row">
                        <!-- table top -->
                        <div class="col-md-6">
                            <button v-if="deletableItems.length > 0" type="button" class="btn btn-danger" @click="openDeleteModal">Delete</button>
                        </div>

                        <div class="col-md-6">
                            <div class="pull-right">
                                <input type="text" class="form-control" placeholder="Search.." @keyup.enter="searchItems"/>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <!-- end of table top -->
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover datatables" id="subscribers-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Email</th>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Subscribed</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="subscriber in subscribers" v-show="pagination.total_count !== 0">
                                        <td><input type="checkbox" @click="addToDeletableList" value="@{{ subscriber.id }}"/></td>
                                        <td>@{{ subscriber.email }}</td>
                                        <td>@{{ subscriber.first_name }}</td>
                                        <td>@{{ subscriber.last_name }}</td>
                                        <td>@{{ subscriber.subscription_date }}</td>
                                        <td>@{{ subscriber.status ? 'Active' : 'Inactive' }}</td>
                                    </tr>
                                    <tr v-show="pagination.total_count === 0">
                                        <td colspan="6" class="text-center">No records found.</td>
                                    </tr>
                                </tbody>
                            </table>

                            <!-- subscribers delete modal -->
                            <div class="modal fade" id="subscribers-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">Please Confirm</h4>
                                        </div>
                                        <div class="modal-body">
                                            Do you want to delete this subscribers?
                                        </div>
                                        <div class="modal-footer">
                                            <button type="submit" class="btn btn-danger">Delete</button>
                                        </div>
                                    </div>
                                </div>
                            </div> <!-- modal-end -->
                        </div> <!-- Responsive Table -->
                    </div> <!-- col-end -->
                </div> <!-- row-end -->

                <div class="row" v-show="pagination.total_count !==0">
                    <div class="col-md-6">
                        <div class="limit">
                            <span class="text pull-left">View</span>
                            <div class="dropup pull-left">
                                <button class="btn btn-default dropdown-toggle" type="button" id="limit-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    @{{ pagination.limit }}
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="limit-dropdown">
                                    <li><a href="#" @click="limit">10</a></li>
                                    <li><a href="#" @click="limit">25</a></li>
                                    <li><a href="#" @click="limit">50</a></li>
                                    <li><a href="#" @click="limit">100</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="pager">
                            <button class="btn btn-default pull-right"
                                    :disabled="pagination.current_page === pagination.total_page"
                                    @click="nextPage"
                                    >
                                    >
                            </button>
                            <button class="btn btn-default pull-right"
                                    :disabled="pagination.current_page === 1"
                                    @click="previousPage"
                                    >
                                    <
                            </button>
                            <span class="pull-right text">
                                @{{ pagination.from }} - @{{ pagination.to }} of @{{ pagination.total_count }}
                            </span>
                        </div>
                    </div>
                </div> <!-- table-foot-end -->

                <!-- confirmation delete modal -->
                <div class="modal fade" id="confirmation-delete-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Please Confirm</h4>
                            </div>
                            <div class="modal-body">
                                Do you want to delete @{{ deletableItems.length }} subscribers?
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-danger" @click="deleteItems">Delete</button>
                            </div>
                        </div>
                    </div>
                </div> <!-- modal-end -->
            </div> <!-- container-end -->
        </div> <!-- main-end -->
    </subscribers-list>
@endsection

subscribers-list.js

import Table from "./../mixins/table";

Vue.component('subscribers-list', {
    data() {
        return {
            subscribers: [],
            tableMixinMessage: {
                delete: 'Subscribers has been deleted'
            },
            tableUrl: {
                delete: '/api/subscribers/bulk'
            }
        }
    },

    mixins: [Table],

    /**
     * Methods.
     */
    methods: {

        /**
         * Load items.
         *
         * @param limit
         * @param page
         * @param searchTearms
         */
        loadItems(limit, page = 1, searchTearms = '') {
            this.$http.get('/api/subscribers' + '?page=' + page + "&limit=" + limit + "&searchTeams=" + searchTearms)
                .then(
                    success => {
                    this.subscribers = success.data.subscribers
                    this.pagination = success.data.pagination;

                    this.loading = false;
                }
            )
        }
    }
})

tableMixin.js

export default {

    /**
     * Data model.
     *
     * @return {{loading: boolean, pagination: Array, deletableItems: Array}}
     */
    data() {
        return {
            loading: true,
            pagination: [],
            deletableItems: [],
            tableMixinMessage: {
                delete: ''
            },
            tableUrl: {
                delete: ''
            }
        }
    },

    /**
     * Ready
     */
    ready() {
        this.pagination.limit = 10;

        this.loadItems(this.pagination.limit);
    },

    /**
     * Methods.
     */
    methods: {

        /**
         * Load items.
         *
         * @param limit
         * @param page
         * @param searchTearms
         */
        loadItems(limit, page = 1, searchTearms = '') {
            this.$http.get('/api/subscribers'  + '?page=' + page + "&limit=" + limit + "&searchTeams=" + searchTearms)
                .then(
                    success => {
                        this.subscribers = success.data.subscribers
                        this.pagination = success.data.pagination;

                        this.loading = false;
                    }
                );
        },

        /**
         * Add deletable ids in the deletableItems list.
         *
         * @param event
         */
        addToDeletableList(event) {
            if (event.target.checked) {
                this.deletableItems.push(event.target.value);
            } else {
                this.deletableItems.$remove(event.target.value)
            }
        },

        /**
         * Goto previous page.
         */
        previousPage() {
            this.loadItems(this.pagination.limit, this.pagination.current_page - 1);
        },

        /**
         * Goto next page.
         */
        nextPage() {
            this.loadItems(this.pagination.limit, this.pagination.current_page + 1);
        },

        /**
         * Set limit of the items.
         *
         * @param event
         */
        limit(event) {
            this.pagination.limit = event.target.innerHTML;

            this.loadItems(this.pagination.limit);
        },

        /**
         * Search items from the items list.
         *
         * @param event
         */
        searchItems(event) {
            this.loadItems(this.pagination.limit, 1, event.target.value);
        },

        /**
         * Open delete confirmation modal.
         */
        openDeleteModal() {
            $('#confirmation-delete-modal').modal('show');
        },

        /**
         * Delete all deletable items.
         */
        deleteItems() {
            $('#confirmation-delete-modal').modal('hide');

            this.executeDeleteItems();
        },

        /**
         * Request to the api server to delete items from the database.
         */
        executeDeleteItems() {
            this.$http.delete(this.tableUrl.delete, {
                id: this.deletableItems
            })
                .then(
                    success => {
                    toastr.success(this.tableMixinMessage.delete);

                    this.loadItems(this.pagination.limit);

                    this.deletableItems = [];
                }
            )
        }
    }
}