Users.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <div>
  3. <div class="container">
  4. <table class="table is-striped">
  5. <thead>
  6. <tr>
  7. <td>Profile Picture</td>
  8. <td>User ID</td>
  9. <td>GitHub ID</td>
  10. <td>Password</td>
  11. <td>Username</td>
  12. <td>Role</td>
  13. <td>Email Address</td>
  14. <td>Email Verified</td>
  15. <td>Likes</td>
  16. <td>Dislikes</td>
  17. <td>Songs Requested</td>
  18. <td>Options</td>
  19. </tr>
  20. </thead>
  21. <tbody>
  22. <tr v-for="(user, index) in users" :key="index">
  23. <td>
  24. <img
  25. class="user-avatar"
  26. src="/assets/notes-transparent.png"
  27. />
  28. </td>
  29. <td>{{ user._id }}</td>
  30. <td v-if="user.services.github">
  31. {{ user.services.github.id }}
  32. </td>
  33. <td v-else>
  34. Not Linked
  35. </td>
  36. <td v-if="user.hasPassword">
  37. Yes
  38. </td>
  39. <td v-else>
  40. Not Linked
  41. </td>
  42. <td>{{ user.username }}</td>
  43. <td>{{ user.role }}</td>
  44. <td>{{ user.email.address }}</td>
  45. <td>{{ user.email.verified }}</td>
  46. <td>{{ user.liked.length }}</td>
  47. <td>{{ user.disliked.length }}</td>
  48. <td>{{ user.songsRequested }}</td>
  49. <td>
  50. <button
  51. class="button is-primary"
  52. @click="edit(user)"
  53. >
  54. Edit
  55. </button>
  56. </td>
  57. </tr>
  58. </tbody>
  59. </table>
  60. </div>
  61. <edit-user v-if="modals.editUser" />
  62. </div>
  63. </template>
  64. <script>
  65. import { mapState, mapActions } from "vuex";
  66. import EditUser from "../Modals/EditUser.vue";
  67. import io from "../../io";
  68. export default {
  69. components: { EditUser },
  70. data() {
  71. return {
  72. users: []
  73. };
  74. },
  75. computed: {
  76. ...mapState("modals", {
  77. modals: state => state.modals.admin
  78. })
  79. },
  80. methods: {
  81. edit(user) {
  82. this.editUser(user);
  83. this.openModal({ sector: "admin", modal: "editUser" });
  84. },
  85. init() {
  86. const _this = this;
  87. _this.socket.emit("users.index", result => {
  88. if (result.status === "success") _this.users = result.data;
  89. });
  90. _this.socket.emit("apis.joinAdminRoom", "users", () => {});
  91. _this.socket.on("event:user.username.changed", username => {
  92. _this.$parent.$parent.username = username;
  93. });
  94. },
  95. ...mapActions("admin/users", ["editUser"]),
  96. ...mapActions("modals", ["openModal"])
  97. },
  98. mounted() {
  99. const _this = this;
  100. io.getSocket(socket => {
  101. _this.socket = socket;
  102. if (_this.socket.connected) _this.init();
  103. io.onConnect(() => _this.init());
  104. });
  105. }
  106. };
  107. </script>
  108. <style lang="scss" scoped>
  109. body {
  110. font-family: "Roboto", sans-serif;
  111. }
  112. .user-avatar {
  113. display: block;
  114. max-width: 50px;
  115. margin: 0 auto;
  116. }
  117. td {
  118. vertical-align: middle;
  119. }
  120. .is-primary:focus {
  121. background-color: #029ce3 !important;
  122. }
  123. </style>