VueTable

table.vue

<template>
    <div class="Vue__table">
        <div class="VueTable panel panel-default">
            <div class="panel-heading">
                <div class="form-inline">
                    <div class="form-group pull-left">
                        <label class="control-label pr2">Mostrar</label>
                        <select class="form-control" v-model="perpage" number>
                            <option v-for="limit in limits" :value="limit">{{ limit }}</option>
                        </select>
                    </div>
                    <div class="form-group pull-right">
                        <label class="control-label pr2">Filtrar</label>
                        <input class="form-control" v-if="searchBy" type="text" name="filtro_table" v-model="searchQuery">
                        <select class="form-control" v-model="searchBy" name="filtro_by">
                            <option value="">Todos</option>
                            <option v-for="column in columns" v-if="isColumnActions(column)" :value="column.id">{{ column.name }}</option>
                        </select>
                        <button class="btn btn-primary" @click="searchData">Buscar</button>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="panel-body p0">
                <table class="VueTable__table table table-striped table-bordered">
                    <thead>
                        <tr class="warning">
                            <th v-for="column in columns">{{ column.name }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="tableData.pagination.total == 0">
                            <td :colspan="columns.length">No se encontraron registros</td>
                        </tr>
                        <tr v-else v-for="(row, index) in tableData.data">
                            <td v-for="key in columns" v-if="isColumnActions(key)">
                                {{ fetchFromObject(row, key.id) }}
                            </td>
                            <td v-else>
                                <div class="btn-group">
                                    <button class="btn btn-ss dropdown-toggle" data-toggle="dropdown">
                                        <span class="glyphicon glyphicon-cog"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li>
                                            <a :href="generateUrlEdit(row.id_usuario)"><span class="glyphicon glyphicon-pencil pr1"></span> Editar</a>
                                        </li>
                                        <li>
                                            <a href="#" @click.prevent="deleteConfirmation(row.id_usuario, index)"><span class="glyphicon glyphicon-trash pr1"></span> Eliminar</a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="panel-footer">
                <div class="VueTable__registros pull-left">
                    <p>
                        Mostrando registros del
                        {{ (tableData.pagination.from == null) ? 0 : tableData.pagination.from }}
                        al
                        {{ (tableData.pagination.to == null) ? 0 : tableData.pagination.to }}
                        de un total de
                        {{ tableData.pagination.total }}
                        registros.
                    </p>
                </div>
                <div class="pull-right VuePagination__wrapper">
                    <pagination :pages="tableData.pagination"
                                v-on:change="changePage"></pagination>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <!-- modal-confirmation -->
        <modal-confirmation-table :show="modal" v-on:confirm="confirmDelete"></modal-confirmation-table>
        <!-- loading component -->
        <loading-component :show="loading.show"></loading-component>
    </div>
</template>
<script>
    import Pagination from '../../../components/pagination/pagination.vue';
    import ModalConfirmationTable from '../../../components/modal-table-confirmation.vue';
    import LoadingComponent from '../../../components/loading/loading.vue';
    export default {
        components: {
            Pagination,
            ModalConfirmationTable,
            LoadingComponent
        },
        props: {
            columns: {
                type: Array,
                required: true
            },
            apiUrl: {
                type: String,
                required: true
            },
            dataUrl: {
                type: String,
                required: true
            },
            prefixUrl: {
                type: String,
                required: true
            },
            modal: {
                type: Boolean,
                required: true
            }
        },
        data() {
            return {
                tableData: {
                    pagination: {
                        total: 0,
                        to: 0,
                        from: 0,
                        per_page: 15
                    }
                },
                perpage: 15,
                limits: [1, 5, 10, 15, 20],
                searchQuery: '',
                searchBy: '',
                delete: null,
                loading: {
                    show: false
                }
            }
        },
        mounted() {
            this.$http.get(this.dataUrl + '?per_page=' + this.tableData.pagination.per_page
                    + '&filterBy=' + this.searchBy).then(function(response) {
                this.tableData = response.data;
            });
        },
        methods: {
            getByPage(per_page, id_page){
                this.loading.show = true;
                this.$http.get(
                        this.dataUrl + '?page=' + id_page + '&per_page=' + per_page
                        + '&filterBy=' + this.searchBy + '&search=' + this.searchQuery).then(function(response) {
                    this.tableData = response.data;
                    this.loading.show = false;
                });
            },
            changePage(page) {
                this.getByPage(this.tableData.pagination.per_page, page);
            },
            fetchFromObject(obj, column) {
                if(typeof obj === 'undefined') return false;
                var _index = column.indexOf('.');
                if(_index > -1) {
                    return this.fetchFromObject(obj[column.substring(0, _index)], column.substr(_index + 1));
                }
                if(column === 'created_at' || column === 'updated_at' || column === 'deleted_at') {
                    return moment(obj[column]).format('YYYY-MM-DD hh:mm:ss');
                }
                return obj[column];
            },
            searchData() {
                this.getByPage(this.perpage, 1);
            },
            isColumnActions(column) {
                return (column.id != 'actions');
            },
            generateUrlEdit(id) {
                return this.prefixUrl + '/' + id + '/edit';
            },
            deleteConfirmation(id, index) {
                var current_page = this.tableData.pagination.current_page;
                if(this.tableData.data.length == 1) {
                    if(current_page != 1) {
                        current_page--;
                    }
                }
                this.delete = {
                    id: id,
                    index: index,
                    page: current_page
                };
                this.$emit('modal', true);
            },
            confirmDelete(status) {
                if(status) {
                    this.$emit('delete', this.delete);
                } else {
                    this.$emit('modal', status);
                }
            }
        },
        watch: {
            perpage() {
                this.getByPage(this.perpage, 1);
            }
        }
    }
</script>