116 lines
3.5 KiB
Vue
116 lines
3.5 KiB
Vue
<template>
|
|
<div id="users">
|
|
<md-card>
|
|
<md-card-header>
|
|
<span class="md-title">Users</span>
|
|
</md-card-header>
|
|
<md-card-content>
|
|
<md-table>
|
|
<md-table-header>
|
|
<md-table-row>
|
|
<md-table-head>Username</md-table-head>
|
|
<md-table-head class="center-content">Email</md-table-head>
|
|
<md-table-head class="center-content">Admin</md-table-head>
|
|
<md-table-head v-if="loggedInUser.isAdmin" class="center-content">Delete</md-table-head>
|
|
</md-table-row>
|
|
</md-table-header>
|
|
<md-table-body>
|
|
<md-table-row v-for="(user, index) in users" :key="user._id">
|
|
<md-table-cell>
|
|
<router-link :to="userLink(user._id)" class="md-raised md-primary">
|
|
{{user.username}}
|
|
</router-link>
|
|
</md-table-cell>
|
|
<md-table-cell class="center-content">
|
|
{{user.email}}
|
|
</md-table-cell>
|
|
<md-table-cell class="center-content">
|
|
<md-icon v-if="user.isAdmin">done</md-icon>
|
|
</md-table-cell>
|
|
<md-table-cell v-if="loggedInUser.isAdmin" class="center-content">
|
|
<md-button class="md-icon-button" @click="deleteUser(user._id)">
|
|
<md-icon>delete</md-icon>
|
|
</md-button>
|
|
</md-table-cell>
|
|
</md-table-row>
|
|
</md-table-body>
|
|
</md-table>
|
|
</md-card-content>
|
|
</md-card>
|
|
<ibt-dialog ref="dialogObj" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import IbtDialog from './IbtDialog.vue';
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
users: []
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
loggedInUser() {
|
|
return this.$store.state.loggedInUser;
|
|
}
|
|
},
|
|
|
|
beforeCreate: function() {
|
|
this.usersUrl = this.$resource('users{/id}');
|
|
},
|
|
|
|
mounted: function() {
|
|
this.getUsers();
|
|
},
|
|
|
|
methods: {
|
|
userLink(id) {
|
|
return '/user/' + id;
|
|
},
|
|
|
|
getUsers() {
|
|
this.usersUrl.get().then((response) => {
|
|
return response.json();
|
|
}, (response) => {
|
|
this.$refs.dialogObj.show({text: 'unable to get the list of users'});
|
|
}).then((data) => {
|
|
this.users = data.users || [];
|
|
});
|
|
},
|
|
|
|
deleteUser(userId) {
|
|
this.usersUrl.delete({id: userId}).then((response) => {
|
|
return response.json();
|
|
}, (response) => {
|
|
this.$refs.dialogObj.show({text: 'unable to delete the user: ' + response.body.message});
|
|
}).then((data) => {
|
|
this.getUsers();
|
|
});
|
|
}
|
|
},
|
|
|
|
components: { IbtDialog }
|
|
}
|
|
|
|
</script>
|
|
<style scoped>
|
|
|
|
#users {
|
|
padding: 10px;
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
|
|
.center-content > .md-table-head-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.center-content > .md-table-cell-container {
|
|
text-align: center;
|
|
display: block !important;
|
|
}
|
|
|
|
</style>
|