admin-fe/src/views/users/index.vue

122 lines
3.2 KiB
Vue
Raw Normal View History

2019-02-22 18:06:48 +00:00
<template>
<div class="users-container">
2019-02-24 22:31:05 +00:00
<h1>Users</h1>
2019-03-06 19:44:37 +00:00
<div class="searchContainer">
<el-checkbox :value="showLocalUsers" @change="handleLocalUsersCheckbox">Show local users only</el-checkbox>
<el-input placeholder="Search" class="search" @input="handleDebounceSearchInput"/>
</div>
2019-03-01 17:32:03 +00:00
<el-table v-loading="loading" :data="users" style="width: 100%">
2019-03-03 20:01:00 +00:00
<el-table-column prop="id" label="ID" width="180"/>
2019-03-01 17:32:03 +00:00
<el-table-column prop="nickname" label="Name"/>
<el-table-column label="Status">
2019-02-26 19:50:25 +00:00
<template slot-scope="scope">
2019-03-01 17:32:03 +00:00
<el-tag
:type="scope.row.deactivated ? 'danger' : 'success'"
>{{ scope.row.deactivated ? 'deactivated' : 'active' }}</el-tag>
2019-02-26 19:50:25 +00:00
</template>
</el-table-column>
2019-03-01 17:32:03 +00:00
<el-table-column fixed="right" label="Actions">
2019-02-26 19:50:25 +00:00
<template slot-scope="scope">
2019-03-01 17:32:03 +00:00
<el-button
2019-03-03 20:01:00 +00:00
v-if="showDeactivatedButton(scope.row.id)"
2019-03-01 17:32:03 +00:00
type="text"
size="small"
@click="handleDeactivate(scope.row)"
2019-03-03 20:01:00 +00:00
>{{ scope.row.deactivated ? 'Activate' : 'Deactivate' }}</el-button>
2019-02-24 22:31:05 +00:00
</template>
</el-table-column>
</el-table>
2019-02-27 22:13:20 +00:00
<div v-if="!loading" class="pagination">
<el-pagination
:total="usersCount"
2019-03-03 20:46:14 +00:00
:current-page="currentPage"
:page-size="pageSize"
2019-02-27 22:13:20 +00:00
background
layout="prev, pager, next"
2019-03-01 17:32:03 +00:00
@current-change="handlePageChange"
/>
2019-02-27 22:13:20 +00:00
</div>
2019-02-22 18:06:48 +00:00
</div>
</template>
<script>
2019-03-01 17:32:03 +00:00
import debounce from 'lodash.debounce'
2019-02-23 21:40:26 +00:00
2019-02-22 18:06:48 +00:00
export default {
name: 'Users',
2019-02-24 22:31:05 +00:00
computed: {
loading() {
return this.$store.state.users.loading
},
users() {
return this.$store.state.users.fetchedUsers
2019-02-27 22:13:20 +00:00
},
usersCount() {
return this.$store.state.users.totalUsersCount
},
pageSize() {
return this.$store.state.users.pageSize
2019-03-03 20:46:14 +00:00
},
currentPage() {
return this.$store.state.users.currentPage
2019-03-06 19:44:37 +00:00
},
showLocalUsers() {
return this.$store.state.users.showLocalUsers
2019-02-22 18:06:48 +00:00
}
2019-02-23 21:40:26 +00:00
},
2019-03-01 17:32:03 +00:00
created() {
this.handleDebounceSearchInput = debounce((query) => {
this.$store.dispatch('SearchUsers', { query, page: 1 })
2019-03-01 17:32:03 +00:00
}, 500)
},
2019-02-23 21:40:26 +00:00
mounted: function() {
this.$store.dispatch('FetchUsers', { page: 1 })
2019-02-24 22:31:05 +00:00
},
methods: {
2019-02-26 19:50:25 +00:00
handleDeactivate({ nickname }) {
this.$store.dispatch('ToggleUserActivation', nickname)
2019-02-27 22:13:20 +00:00
},
handlePageChange(page) {
2019-03-03 20:01:00 +00:00
const searchQuery = this.$store.state.users.searchQuery
if (searchQuery === '') {
this.$store.dispatch('FetchUsers', { page })
2019-03-03 20:01:00 +00:00
} else {
this.$store.dispatch('SearchUsers', { query: searchQuery, page })
2019-03-03 20:01:00 +00:00
}
},
showDeactivatedButton(id) {
return this.$store.state.user.id !== id
2019-03-06 19:44:37 +00:00
},
handleLocalUsersCheckbox(e) {
this.$store.dispatch('ToggleLocalUsersFilter', e)
2019-02-24 22:31:05 +00:00
}
2019-02-22 18:06:48 +00:00
}
}
</script>
2019-03-01 17:32:03 +00:00
<style rel='stylesheet/scss' lang='scss' scoped>
2019-02-24 22:31:05 +00:00
.users-container {
h1 {
margin-left: 15px;
}
2019-02-27 22:13:20 +00:00
.pagination {
2019-03-03 20:01:00 +00:00
margin: 25px 0;
2019-02-27 22:13:20 +00:00
text-align: center;
}
2019-02-24 22:31:05 +00:00
2019-03-01 17:32:03 +00:00
.search {
width: 300px;
margin-bottom: 21.5px;
margin-right: 15px;
float: right;
}
2019-03-06 19:44:37 +00:00
.searchContainer {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-left: 15px;
}
2019-03-01 17:32:03 +00:00
}
2019-02-24 22:31:05 +00:00
</style>