IssuesModal.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <template>
  2. <modal title="Report">
  3. <div slot="body">
  4. <router-link
  5. v-if="$route.query.returnToSong"
  6. class="button is-dark back-to-song"
  7. :to="{
  8. path: '/admin/songs',
  9. query: { id: report.songId }
  10. }"
  11. >
  12. <i class="material-icons">keyboard_return</i> &nbsp; Edit Song
  13. </router-link>
  14. <article class="message">
  15. <div class="message-body">
  16. <strong>Song ID:</strong>
  17. {{ report.songId }}
  18. <br />
  19. <strong>Created By:</strong>
  20. {{ report.createdBy }}
  21. <br />
  22. <strong>Created At:</strong>
  23. {{ report.createdAt }}
  24. <br />
  25. <span v-if="report.description">
  26. <strong>Description:</strong>
  27. {{ report.description }}
  28. </span>
  29. </div>
  30. </article>
  31. <table v-if="report.issues.length > 0" class="table is-narrow">
  32. <thead>
  33. <tr>
  34. <td>Issue</td>
  35. <td>Reasons</td>
  36. </tr>
  37. </thead>
  38. <tbody>
  39. <tr v-for="(issue, index) in report.issues" :key="index">
  40. <td>
  41. <span>{{ issue.name }}</span>
  42. </td>
  43. <td>
  44. <span>{{ issue.reasons }}</span>
  45. </td>
  46. </tr>
  47. </tbody>
  48. </table>
  49. </div>
  50. <div slot="footer">
  51. <a
  52. class="button is-primary"
  53. href="#"
  54. @click="$parent.resolve(report._id)"
  55. >
  56. <span>Resolve</span>
  57. </a>
  58. <a
  59. class="button is-danger"
  60. @click="
  61. closeModal({
  62. sector: 'admin',
  63. modal: 'viewReport'
  64. })
  65. "
  66. href="#"
  67. >
  68. <span>Cancel</span>
  69. </a>
  70. </div>
  71. </modal>
  72. </template>
  73. <script>
  74. import { mapActions, mapState } from "vuex";
  75. import Modal from "./Modal.vue";
  76. export default {
  77. computed: {
  78. ...mapState("admin/reports", {
  79. report: state => state.report
  80. })
  81. },
  82. mounted() {
  83. if (this.$route.query.returnToSong) {
  84. this.closeModal({ sector: "admin", modal: "editSong" });
  85. }
  86. },
  87. methods: {
  88. ...mapActions("modals", ["closeModal"])
  89. },
  90. components: { Modal }
  91. };
  92. </script>
  93. <style lang="scss">
  94. .back-to-song {
  95. display: flex;
  96. margin-bottom: 20px;
  97. }
  98. </style>