Users.vue 3.0 KB

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