Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<v-dialog persistent v-model="processing" content content-class="centered-dialog">
<v-container ma-0 pa-0 fluid fill-height>
<v-layout column justify-center align-center>
<v-progress-circular indeterminate :size="70" :width="7" color="red"></v-progress-circular>
<h1 class="white--text" v-text="processing.message"></h1>
</v-layout>
</v-container>
</v-dialog>
</template>
<script>
export default {
name: 'ProgressBarCircularComponent',
props: ['processing']
}
</script>
<style lang="stylus">
.dialog.centered-dialog,
.v-dialog.centered-dialog
background transparent
box-shadow none
border-radius 6px
height: 100%;
width: 100%;
overflow: hidden;
color whitesmoke,
overflow-y hidden !important
</style>
<template>
<v-container fluid grid-list-md text-xs-center pa-4 mt-1>
<progress-bar-circular-component v-if="processingFilteredUsers.show" :processing="processingFilteredUsers" />
<v-layout row wrap>
<v-flex x12 pl-2 pr-3 pb-0>
<v-layout row>
<v-flex>
<v-btn dark color="green darken-4" @click.native="downloadDataForExport" :disabled="!users.length">
Generar y descargar Excel <v-icon right dark>cloud_download</v-icon>
</v-btn>
<v-btn dark color="red" @click.native="resetFilters">
Limpiar filtros <v-icon right dark>clear_all</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-flex>
<v-flex x12 pl-2 pr-3 pb-0>
<v-layout row>
<v-flex xs2 md2 lg3>
<v-text-field
@input="filterSearch"
append-icon="search"
label="Buscar"
single-line
hide-details
v-model="search"
></v-text-field>
</v-flex>
<v-flex xs3 md3 lg3>
<v-select
v-model="active"
:items="statuses"
label="Activado/Desactivado"
@change="filterStatus"
></v-select>
</v-flex>
<v-flex xs3 md3 lg3>
<v-select
v-model="role"
:items="roles"
label="Rol"
@change="filterRole"
></v-select>
</v-flex>
</v-layout>
</v-flex>
<v-flex xs12>
<v-data-table
:items="users"
:headers="headers"
class="elevation-1"
:pagination.sync="pagination"
:total-items="totalUsers"
:rows-per-page-items="rowsPerPageItems"
:loading="processing"
must-sort
>
<template slot="items" slot-scope="props">
<tr>
<td class="text-xs-center">{{ props.item.firstname || 'N/A' }}</td>
<td class="text-xs-center">{{ props.item.lastname || 'N/A' }}</td>
<td class="text-xs-center">{{ props.item.username || 'N/A' }}</td>
<td class="text-xs-center">{{ props.item.email || 'N/A' }}</td>
<td class="text-xs-center">{{ props.item.phone_number || 'N/A' }}</td>
<td class="text-xs-center" v-if="props.item.active == 1">
<v-chip color="green" text-color="white">Activado</v-chip>
</td>
<td class="text-xs-center" v-else>
<v-chip color="red" text-color="white">Desactivado</v-chip>
</td>
<td class="text-xs-center">{{ $_.has(props.item, 'role.name') ? props.item.role.name : '' }}</td>
</tr>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import {mapActions, mapMutations, mapState} from "vuex";
import * as moment from 'moment';
import {SET_USERS_PER_PAGE, SET_USERS_TABLE_ORDER} from "@/store/mutation-types";
import ExportToExcelUsers from "@/mixins/ExportToExcelUsers";
import ProgressBarCircularComponent from "@/components/ProgressBarCircularComponent";
import {debounce} from 'lodash';
export default {
name: 'UsersList',
mixins: [ExportToExcelUsers],
components: {
ProgressBarCircularComponent
},
async mounted () {
await this.getFiltersForDropdown()
},
data () {
return {
active: '',
role: '',
filters: {
search: '',
active: null,
role: null,
},
search: '',
buttonSelected: 'all',
rowsPerPageItems: [10, 25, 50, 100, 200],
headers: [
{value: 'username', text: 'Usuario', align: 'center'},
{value: 'firstname', text: 'Nombre', align: 'center'},
{value: 'lastname', text: 'Apellidos', align: 'center'},
{value: 'email', text: 'Correo electrónico', align: 'center'},
{value: 'phone_number', text: 'Teléfono', align: 'center'},
{value: 'active', text: 'Activado', align: 'center'},
{value: 'role', sortable: false, text: 'Rol', align: 'center'},
],
}
},
computed: {
...mapState('users', ['users', 'totalUsers', 'roles', 'statuses', 'processing', 'processingFilteredUsers']),
pagination: {
get () {
return this.$store.state.users.pagination;
},
set (pagination) {
this.SET_USERS_TABLE_ORDER(pagination);
this.getUsers({pagination, filters: this.filters})
}
},
},
methods: {
...mapActions('users', {
getUsers: 'getUsers',
getFiltersForDropdown: 'getFiltersForDropdown',
getAllFilteredUsers: 'getAllFilteredUsers'
}),
...mapMutations('users', {
SET_USERS_PER_PAGE,
SET_USERS_TABLE_ORDER
}),
async downloadDataForExport () {
const data = await this.getAllFilteredUsers({filters: this.filters});
this.exportUsersToExcel(data);
},
async updateUsers () {
await this.getUsers({pagination: this.pagination, filters: this.filters})
},
filterSearch: debounce(function (val) {
this.filters.search = val;
if (val) {
this.updateUsers()
}
}, 2000),
filterStatus (val) {
this.filters.active = val;
this.updateUsers()
},
filterRole (val) {
this.filters.role = val;
this.updateUsers();
},
resetFilters () {
this.active = '';
this.role = '';
this.search = '';
this.filters = {
search: '',
active: null,
role: null,
};
this.SET_USERS_PER_PAGE();
this.updateUsers();
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment