113 lines
3.1 KiB
Vue
113 lines
3.1 KiB
Vue
<template>
|
|
<div id="users">
|
|
<router-link to="users/add" class="pure-button pure-button-primary">{{ $t('admin.users.add') }}</router-link>
|
|
|
|
<div v-if="users !== null">
|
|
<div class="pure-g list-header">
|
|
<div class="pure-u-9-24"><span class="text">{{ $t('admin.users.list.username') }}</span></div>
|
|
<div class="pure-u-9-24"><span class="text">{{ $t('admin.users.list.email') }}</span></div>
|
|
<div class="pure-u-1-4"><span class="text">{{ $t('admin.users.list.actions') }}</span></div>
|
|
</div>
|
|
|
|
<div v-for="user in users" class="list">
|
|
<div class="pure-g row" :class="{ inactive: !user.active }">
|
|
<div class="pure-u-9-24">
|
|
<span class="text"><router-link :to="'users/edit/' + encodeURIComponent(user.id)">{{ user.username }}</router-link></span>
|
|
<span class="text name">{{ user.name }}<span v-if="!user.active"> {{ $t('admin.users.list.inactive') }}</span></span>
|
|
</div>
|
|
<div class="pure-u-9-24"><span class="text">{{ user.email }}</span></div>
|
|
<div class="pure-u-1-4">
|
|
<button class="pure-button"v-if="confirmDelete == user.id" @click.prevent="cancelDelete"><fa icon="ban"></fa></button>
|
|
<button class="pure-button" :class="{ confirmDelete: confirmDelete == user.id }" @click.prevent="deleteClick(user.id)"><fa icon="trash-alt"></fa></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="users.length == 0" class="nodata">
|
|
{{ $t('admin.empty') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="loading">
|
|
{{ $t('admin.loading') }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import shared from '../../shared';
|
|
|
|
export default {
|
|
data()
|
|
{
|
|
return {
|
|
users: null,
|
|
confirmDelete: null
|
|
};
|
|
},
|
|
|
|
created()
|
|
{
|
|
var self = this;
|
|
|
|
axios.get('/admin/users', {
|
|
headers: {
|
|
Authorization: 'Bearer ' + shared.adminToken
|
|
}
|
|
})
|
|
.then((response) =>
|
|
{
|
|
self.users = _.orderBy(response.data, ['active', 'username'], ['desc', 'asc']);
|
|
})
|
|
.catch((error) => { shared.$emit('apiError', error, this.$router) });
|
|
},
|
|
|
|
|
|
methods: {
|
|
deleteClick(userId)
|
|
{
|
|
var self = this;
|
|
|
|
if (self.confirmDelete == userId)
|
|
{
|
|
self.confirmDelete = null;
|
|
|
|
axios.delete('/admin/users/' + encodeURIComponent(userId), {
|
|
headers: {
|
|
Authorization: 'Bearer ' + shared.adminToken
|
|
}})
|
|
.then((response) =>
|
|
{
|
|
var index = _.findIndex(self.users, (item) => { return item.id == userId; });
|
|
if (index > -1)
|
|
self.users.splice(index, 1);
|
|
})
|
|
.catch((error) => { shared.$emit('apiError', error, this.$router) });
|
|
}
|
|
else
|
|
{
|
|
self.confirmDelete = userId;
|
|
}
|
|
},
|
|
|
|
cancelDelete()
|
|
{
|
|
var self = this;
|
|
self.confirmDelete = null;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.row.inactive .text
|
|
{
|
|
color: #808080;
|
|
}
|
|
|
|
.name
|
|
{
|
|
display: block;
|
|
}
|
|
</style> |