Reports.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <div>
  3. <metadata title="Admin | Reports" />
  4. <div class="container">
  5. <table class="table is-striped">
  6. <thead>
  7. <tr>
  8. <td>Song ID</td>
  9. <td>Author</td>
  10. <td>Time of report</td>
  11. <td>Description</td>
  12. <td>Options</td>
  13. </tr>
  14. </thead>
  15. <tbody>
  16. <tr v-for="(report, index) in reports" :key="index">
  17. <td>
  18. <span>
  19. {{ report.song.songId }}
  20. <br />
  21. {{ report.song._id }}
  22. </span>
  23. </td>
  24. <td>
  25. <user-id-to-username
  26. :userId="report.createdBy"
  27. :link="true"
  28. />
  29. </td>
  30. <td>
  31. <span :title="report.createdAt">{{
  32. formatDistance(
  33. new Date(report.createdAt),
  34. new Date(),
  35. { addSuffix: true }
  36. )
  37. }}</span>
  38. </td>
  39. <td>
  40. <span>{{ report.description }}</span>
  41. </td>
  42. <td>
  43. <a
  44. class="button is-warning"
  45. href="#"
  46. @click="view(report)"
  47. >View</a
  48. >
  49. <a
  50. class="button is-primary"
  51. href="#"
  52. @click="resolve(report._id)"
  53. >Resolve</a
  54. >
  55. </td>
  56. </tr>
  57. </tbody>
  58. </table>
  59. </div>
  60. <issues-modal v-if="modals.viewReport" />
  61. </div>
  62. </template>
  63. <script>
  64. import { mapState, mapActions } from "vuex";
  65. import { formatDistance } from "date-fns";
  66. import Toast from "toasters";
  67. import io from "../../io";
  68. import IssuesModal from "../Modals/IssuesModal.vue";
  69. import UserIdToUsername from "../UserIdToUsername.vue";
  70. export default {
  71. components: { IssuesModal, UserIdToUsername },
  72. data() {
  73. return {
  74. reports: []
  75. };
  76. },
  77. mounted() {
  78. io.getSocket(socket => {
  79. this.socket = socket;
  80. if (this.socket.connected) this.init();
  81. this.socket.emit("reports.index", res => {
  82. this.reports = res.data;
  83. });
  84. this.socket.on("event:admin.report.resolved", reportId => {
  85. this.reports = this.reports.filter(report => {
  86. return report._id !== reportId;
  87. });
  88. });
  89. this.socket.on("event:admin.report.created", report => {
  90. this.reports.push(report);
  91. });
  92. io.onConnect(() => {
  93. this.init();
  94. });
  95. });
  96. if (this.$route.query.id) {
  97. this.socket.emit("reports.findOne", this.$route.query.id, res => {
  98. if (res.status === "success") this.view(res.data);
  99. else
  100. new Toast({
  101. content: "Report with that ID not found",
  102. timeout: 3000
  103. });
  104. });
  105. }
  106. },
  107. computed: {
  108. ...mapState("modals", {
  109. modals: state => state.modals.admin
  110. })
  111. },
  112. methods: {
  113. formatDistance,
  114. init() {
  115. this.socket.emit("apis.joinAdminRoom", "reports", () => {});
  116. },
  117. view(report) {
  118. this.viewReport(report);
  119. this.openModal({ sector: "admin", modal: "viewReport" });
  120. },
  121. resolve(reportId) {
  122. return this.resolveReport(reportId)
  123. .then(res => {
  124. if (res.status === "success" && this.modals.viewReport)
  125. this.closeModal({
  126. sector: "admin",
  127. modal: "viewReport"
  128. });
  129. })
  130. .catch(
  131. err => new Toast({ content: err.message, timeout: 5000 })
  132. );
  133. },
  134. ...mapActions("modals", ["openModal", "closeModal"]),
  135. ...mapActions("admin/reports", ["viewReport", "resolveReport"])
  136. }
  137. };
  138. </script>
  139. <style lang="scss" scoped>
  140. @import "styles/global.scss";
  141. .night-mode {
  142. .table {
  143. color: #ddd;
  144. background-color: #222;
  145. thead tr {
  146. background: $night-mode-secondary;
  147. td {
  148. color: #fff;
  149. }
  150. }
  151. tbody tr:hover {
  152. background-color: #111 !important;
  153. }
  154. tbody tr:nth-child(even) {
  155. background-color: #444;
  156. }
  157. strong {
  158. color: #ddd;
  159. }
  160. }
  161. }
  162. .tag:not(:last-child) {
  163. margin-right: 5px;
  164. }
  165. td {
  166. word-wrap: break-word;
  167. max-width: 10vw;
  168. vertical-align: middle;
  169. }
  170. </style>