123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <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>
|