<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>
VueTable
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.