Users.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <div id="users">
  3. <md-card>
  4. <md-card-header>
  5. <span class="md-title">Users</span>
  6. </md-card-header>
  7. <md-card-content>
  8. <md-table>
  9. <md-table-header>
  10. <md-table-row>
  11. <md-table-head>Username</md-table-head>
  12. <md-table-head class="center-content">Email</md-table-head>
  13. <md-table-head class="center-content">Admin</md-table-head>
  14. <md-table-head v-if="loggedInUser.isAdmin" class="center-content">Delete</md-table-head>
  15. </md-table-row>
  16. </md-table-header>
  17. <md-table-body>
  18. <md-table-row v-for="(user, index) in users" :key="user._id">
  19. <md-table-cell>
  20. <router-link :to="userLink(user._id)" class="md-raised md-primary">
  21. {{user.username}}
  22. </router-link>
  23. </md-table-cell>
  24. <md-table-cell class="center-content">
  25. {{user.email}}
  26. </md-table-cell>
  27. <md-table-cell class="center-content">
  28. <md-icon v-if="user.isAdmin">done</md-icon>
  29. </md-table-cell>
  30. <md-table-cell v-if="loggedInUser.isAdmin" class="center-content">
  31. <md-button class="md-icon-button" @click="deleteUser(user._id)">
  32. <md-icon>delete</md-icon>
  33. </md-button>
  34. </md-table-cell>
  35. </md-table-row>
  36. </md-table-body>
  37. </md-table>
  38. </md-card-content>
  39. </md-card>
  40. <ibt-dialog ref="dialogObj" />
  41. </div>
  42. </template>
  43. <script>
  44. import IbtDialog from './IbtDialog.vue';
  45. export default {
  46. data () {
  47. return {
  48. users: []
  49. }
  50. },
  51. computed: {
  52. loggedInUser() {
  53. return this.$store.state.loggedInUser;
  54. }
  55. },
  56. beforeCreate: function() {
  57. this.usersUrl = this.$resource('users{/id}');
  58. },
  59. mounted: function() {
  60. this.getUsers();
  61. },
  62. methods: {
  63. userLink(id) {
  64. return '/user/' + id;
  65. },
  66. getUsers() {
  67. this.usersUrl.get().then((response) => {
  68. return response.json();
  69. }, (response) => {
  70. this.$refs.dialogObj.show({text: 'unable to get the list of users'});
  71. }).then((data) => {
  72. this.users = data.users || [];
  73. });
  74. },
  75. deleteUser(userId) {
  76. this.usersUrl.delete({id: userId}).then((response) => {
  77. return response.json();
  78. }, (response) => {
  79. this.$refs.dialogObj.show({text: 'unable to delete the user: ' + response.body.message});
  80. }).then((data) => {
  81. this.getUsers();
  82. });
  83. }
  84. },
  85. components: { IbtDialog }
  86. }
  87. </script>
  88. <style scoped>
  89. #users {
  90. padding: 10px;
  91. }
  92. </style>
  93. <style>
  94. .center-content > .md-table-head-container {
  95. text-align: center;
  96. }
  97. .center-content > .md-table-cell-container {
  98. text-align: center;
  99. display: block !important;
  100. }
  101. </style>